/* تفعيل النزول بالماوس (السكرول) */
html, body {
    overflow-y: auto !important; 
    min-height: 100vh;
}/* إعدادات الصفحة والخلفية السوداء */

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #00000085; /* أسود عميق جداً */
    color: #ffffff;
    overflow: hidden; /* بيمنع ظهور شريط التمرير لو الدوائر طلعت برا الشاشة */
    height: 100vh;
    position: relative;
}
/* =========================================
   تصميم الخط الزمني الفاخر (VIP Timeline)
   ========================================= */

.luxury-timeline {
    position: relative;
    max-width: 1200px;
    margin: 40px auto;
    direction: ltr;
}

/* الخط العامودي المضيء المتدرج */
.luxury-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #38bdf8, #818cf8, #c084fc);
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* العنصر الواحد داخل الخط الزمني */
.timeline-item {
    position: relative;
    margin-bottom: 70px;
    padding-left: 70px; /* إبعاد الكرت عن الخط */
}

/* النقطة المتوهجة لكل عصر */
.timeline-dot {
    position: absolute;
    top: 35px;
    left: 10px; /* توسيط النقطة فوق الخط بالضبط */
    width: 24px;
    height: 24px;
    background: #0f172a;
    border: 4px solid #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 10px #38bdf8;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* الكرت الفاخر (زجاجي معتم) */
.luxury-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 45px;
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* خط علوي مخفي بيظهر عند مرور الماوس */
.luxury-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* تأثيرات فخمة جداً عند مرور الماوس (Hover) */
.timeline-item:hover .timeline-dot {
    background: #38bdf8;
    transform: scale(1.4);
    box-shadow: 0 0 20px #38bdf8, 0 0 40px #818cf8;
    border-color: #fff;
}

.timeline-item:hover .luxury-card {
    transform: translateY(-8px) translateX(8px);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 20px 50px rgba(56, 189, 248, 0.15);
}

.timeline-item:hover .luxury-card::before {
    opacity: 1;
}

/* باجة التاريخ الفاخرة */
.era-badge-vip {
    display: inline-block;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2));
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #f8fafc;
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* تنسيق النصوص جوا الكرت */
.luxury-title { font-size: 2.2rem; color: #ffffff; margin: 0 0 10px 0; font-weight: bold; }
.luxury-subtitle { font-size: 1.25rem; color: #94a3b8; margin: 0 0 25px 0; font-style: italic; }
.luxury-desc { font-size: 1.2rem; color: #cbd5e1; line-height: 1.8; margin-bottom: 35px; }

/* شبكة العناصر الفاخرة */
.vip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.vip-item { display: flex; align-items: flex-start; gap: 18px; }
.vip-icon { font-size: 1.8rem; color: #38bdf8; padding-top: 3px; filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.4)); }
.vip-text { font-size: 1.15rem; color: #cbd5e1; line-height: 1.7; margin: 0; }
.vip-text strong { color: #ffffff; font-size: 1.2rem; }

/* تعديل للموبايل */
@media (max-width: 900px) {
    .vip-grid { grid-template-columns: 1fr; }
    .timeline-item { padding-left: 50px; }
    .timeline-dot { left: 8px; }
}

/* رفع المحتوى فوق الدوائر */
.content {
    position: relative;
    z-index: 10; 
    padding: 60px 20px;
    text-align: center;
}

.content h1 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(0, 68, 102, 0.6); /* توهج أزرق خفيف ورا الكلمة */
}

.content p {
    font-size: 1.3rem;
    color: #cbd5e1;
}

/* إعدادات الدوائر الأساسية */
.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px); /* تغبيش عالي جداً لدمج الألوان بنعومة */
    z-index: 1;
    opacity: 0.7;
}

/* الدائرة الأولى: كحلي غامق وضخم */
.orb-1 {
    width: 800px;
    height: 800px;
    background: #002244; 
    top: -200px;
    left: -200px;
    /* نزلنا الوقت لـ 8 ثواني بدل 25 */
    animation: float1 5s infinite ease-in-out alternate;
}

/* الدائرة الثانية: أزرق ساطع */
.orb-2 {
    width: 700px;
    height: 700px;
    background: #00185f; 
    bottom: -150px;
    right: -100px;
    /* نزلنا الوقت لـ 10 ثواني بدل 30 */
    animation: float2 5s infinite ease-in-out alternate;
}

/* الدائرة الثالثة: أزرق فاتح (سيان) */
.orb-3 {
    width: 900px;
    height: 900px;
    background: #00305a; 
    top: 10%;
    left: 30%;
    /* نزلنا الوقت لـ 12 ثانية بدل 35 */
    animation: float3 8s infinite ease-in-out alternate;
}


/* تنسيق شبكة الشباتر */
.chapters-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* تنسيق الكرت (تأثير الزجاج) */
/* تنسيق الكرت (تأثير الزجاج وتكبير الحجم) */
.card {
    background: rgba(255, 255, 255, 0.05); /* خلفية شبه شفافة */
    border: 1px solid rgba(255, 255, 255, 0.1); /* إطار خفيف */
    padding: 30px 60px; /* كبرنا المساحة الداخلية من فوق وتحت ويمين ويسار */
    min-width: 180px; /* ثبتنا العرض عشان يطلعوا كلهم قد بعض */
    text-align: center; /* توسيط النص جوا الكرت */
    border-radius: 20px; /* زوايا دائرية أكثر شوي */
    color: #ffffff;
    text-decoration: none; /* إخفاء الخط تحت الرابط */
    font-size: 1.8rem; /* كبرنا الخط عشان يناسب حجم الكرت الجديد */
    font-weight: bold;
    backdrop-filter: blur(10px); /* تأثير تغبيش الزجاج */
    transition: all 0.3s ease; /* نعومة الحركة */
}

/* تأثير الكرت لما تحط الماوس عليه */
.card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-10px); /* الكرت بيرتفع لفوق شوي */
    box-shadow: 0 10px 30px rgba(203, 206, 209, 0.5); /* توهج أزرق أقوى تحت الكرت */
}


/* حركات الأنميشن السينمائية البطيئة */
@keyframes float1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(400px, 200px) scale(1.3); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-400px, -300px) scale(1.2); }
}

@keyframes float3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-300px, 300px) scale(1.4); }
}
/* تنسيق زر الرجوع للخلف */
.back-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    /* عشان يجي الزر عاليسار */
    position: absolute;
    top: 30px;
    left: 30px;
}

.back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-5px); /* حركة خفيفة لليسار لما تحط الماوس */
    box-shadow: 0 5px 15px rgba(0, 136, 255, 0.3);
}

/* تنسيق مساحة الشرح جوا الشابتر */
.chapter-content {
    margin-top: 40px;
    padding: 40px;
    text-align: left;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.chapter-content h2 {
    color: #00bfff;
    margin-bottom: 20px;
}
/* الشابتر الأول: أزرق افتراضي (أصلي) */

/* الشابتر الثاني: بنفسجي فخم (Purple Theme) */
body.ch2 .orb-1 { background: #2e004e; }
body.ch2 .orb-2 { background: #4a0983; }
body.ch2 .orb-3 { background: #2b004e; }

/* الشابتر الثالث: أخضر تكنولوجي (Emerald Green) */
body.ch3 .orb-1 { background: #0a2e1f; }
body.ch3 .orb-2 { background: #00774f; }
body.ch3 .orb-3 { background: #005234; }

/* الشابتر الرابع: برتقالي وذهبي (Warm Orange) */
body.ch4 .orb-1 { background: #3d1a00; }
body.ch4 .orb-2 { background: #793a00; }
body.ch4 .orb-3 { background: #462e00; }

/* الشابتر الخامس: أحمر ونهدي دافن (Neon Red/Pink) */
body.ch5 .orb-1 { background: #3a0026; }
body.ch5 .orb-2 { background: #800015; }
body.ch5 .orb-3 { background: #55000a; }

/* الشابتر السادس: تيل وفيروزي (Teal & Mint) */
body.ch6 .orb-1 { background: #001f24; }
body.ch6 .orb-2 { background: #00665c; }
body.ch6 .orb-3 { background: #004638; }

/* الشابتر السابع: ماجينتا سينمائي (Magenta Neon) */
body.ch7 .orb-1 { background: #0a2c03; }
body.ch7 .orb-2 { background: #00500b; }
body.ch7 .orb-3 { background: #004209; }
/* شريط المنيو الثابت في أعلى الصفحة */
.top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center; /* بيخلي كل الأزرار على نفس المستوى بخط مستقيم */
    padding: 15px 30px; /* مساحة يمين ويسار */
    box-sizing: border-box; /* عشان المنيو ما تطلع برا الشاشة */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* تنسيق زر الرجوع (على الشمال) */
.back-btn-nav {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: auto; /* هاي الحركة اللي بتدفع زر الرجوع للشمال وبتخلي الباقي يروح يمين */
}

.back-btn-nav:hover {
    transform: translateX(-5px);
}

/* تجميع أزرار الشابتر عشان يضلوا جنب بعض بالنص */
.nav-links {
    display: flex;
    gap: 25px;
    margin-right: auto; /* عشان يوازن شكلهم بالنص */
}

/* تنسيق الخط وتكبيره لكل الأزرار جوا الشريط */
.top-navbar a {
    color: #ffffff;
    text-decoration: none;
    font-size: 2.0rem; /* كبرنا الخط هون صار أوضح بكثير */
    font-weight: bold;
    padding: 10px 22px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.top-navbar a:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px rgba(219, 221, 223, 0.5);
}
/* قسم التعريف في منتصف الشاشة تماماً */
.intro-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* بياخد 70% من ارتفاع الشاشة عشان يتوسط صح */
    text-align: center;
    max-width: 900px;
    margin: 0 auto; /* توسيط أفقي */
}

.intro-section h1 {
    font-size: 3.5rem; /* كبرنا عنوان الشابتر */
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* توهج خفيف للعنوان */
    color: #ffffff;
}

.intro-section p {
    font-size: 1.6rem;
    color: #e0e0e0;
    line-height: 1.8; /* تباعد الأسطر عشان القراءة تكون مريحة */
}
/* تنسيق عنوان الشابتر الرئيسي */
.chapter-header {
    text-align: center;
    margin-bottom: 40px;
    color: #ffffff;
}
.chapter-header h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}
.chapter-header p {
    color: #94a3b8;
    font-size: 1.2rem;
}

/* الشبكة الاحترافية (عرض ممتاز لشاشات اللابتوب مع محاذاة لليمين) */
.pro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1350px; 
    width: 95%;
    margin: 0 auto;
    direction: rtl; 
}

/* تصميم الكروت الفخم (زجاجي ناعم) */
.pro-card {
    background: rgba(15, 23, 42, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 20px; 
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, border-color 0.3s ease; 
    text-align: right;
}

/* حركة خفيفة واحترافية عند مرور الماوس */
.pro-card:hover {
    transform: translateY(-5px); 
    border-color: rgba(56, 189, 248, 0.3); 
}

/* العناوين جوا الكروت */
.pro-card-title {
    font-size: 1.6rem;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

/* خطوط الشرح العادية جوا الكرت */
.pro-card p, .pro-card li {
    font-size: 1.27rem;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 15px;
}

/* المربع الأزرق (التعديل المطلوب: تكبير الخط وترتيبه) */
.highlight-box {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 165, 233, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-right: 4px solid #38bdf8; /* خط مميز عاليمين */
    border-radius: 12px;
    padding: 25px 30px;
    margin-top: 35px;
}

/* عنوان المربع الأزرق */
.highlight-box strong {
    color: #38bdf8;
    font-size: 1.3rem; 
    display: block;
    margin-bottom: 10px;
}

/* النص جوا المربع الأزرق (كبرناه وخلينا لونه أبيض ناصع) */
.highlight-box p {
    font-size: 1.25rem !important; /* حجم ممتاز ومقروء جداً */
    line-height: 1.9 !important;
    color: #f8fafc !important; 
    margin: 0;
}

/* ترتيب الموبايل */
@media (max-width: 768px) {
    .pro-grid {
        grid-template-columns: 1fr;
        width: 90%;
    }
}

/* تحويل التصميم للتلفون عشان ما يضل مساحات فاضية */
@media (max-width: 768px) {
    .pro-grid {
        grid-template-columns: 1fr; /* بخليهم كرت واحد بكل سطر */
    }
}
/* تنسيق قسم طيف الفينتيك الجديد (HTML/CSS نقي بدون مشاكل) */
.spectrum-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    margin-top: 20px;
}

/* الحاوية الرئيسية للطيف */
.spectrum-container {
    position: relative;
    display: flex;
    flex-direction: row;
    direction: ltr; /* عشان تضل كلمة Finance عاليسار و Tech عاليمين */
    align-items: center;
    justify-content: center;
    height: 150px;
    width: 100%;
    margin: 30px auto 10px;
}

/* الكلمة الصفراء فوق الدوائر بالنص */
.spectrum-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    border: 1.5px solid #f59e0b;
    color: #fde68a;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* تصميم الدوائر المشترك */
.spectrum-circle {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

/* دائرة التمويل (قللنا الدفشة عشان يبعدوا شوي) */
.finance-circle {
    border: 2.5px solid #3b82f6;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    transform: translateX(12px); /* قللنا الرقم من 25 لـ 12 */
}

/* دائرة التكنولوجيا (قللنا الدفشة عشان يبعدوا شوي) */
.tech-circle {
    border: 2.5px solid #06b6d4;
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    transform: translateX(-12px); /* قللنا الرقم من -25 لـ -12 */
}
.spectrum-badge {
    position: absolute;
    top: -20px; /* هيك رفعناها لفوق الدوائر */
    left: 50%;
    transform: translateX(-50%); /* هدول السطرين بضمنوا إنها تكون بالنص 100% */
    background: #0f172a;
    border: 1.5px solid #f59e0b;
    color: #fde68a;
    padding: 6px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.spectrum-caption {
    margin-top: 15px;
    font-size: 1.05rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.7;
}
/* =========================================
   تصميم صفحة التطور التاريخي (العصور 3)
   ========================================= */

/* الحاوية الرئيسية للبطاقات */
.history-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    direction: rtl;
}

/* عنوان الصفحة مع الأيقونة */
.history-main-title {
    color: #ffffff;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

/* بطاقة العصر (التصميم الزجاجي الأنيق) */
.era-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 35px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.era-card:hover {
    transform: translateX(-10px); /* حركة انسيابية لليسار عند مرور الماوس */
}

/* هيدر البطاقة (العنوان والباج) */
.era-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.era-title-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.era-title {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

.era-subtitle {
    font-size: 1.2rem;
    color: #94a3b8;
    margin: 0;
}

/* باجات التواريخ */
.era-badge {
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 1px;
}

.era-desc {
    font-size: 1.2rem;
    color: #e2e8f0;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* شبكة النقاط جوا البطاقة */
.era-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 40px; /* مسافة عمودية وأفقية */
}

.era-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.era-icon {
    font-size: 1.5rem;
    padding-top: 5px;
}

.era-text {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0;
}

.era-text strong {
    color: #ffffff;
}

/* --- ألوان مخصصة لكل عصر --- */
/* العصر الأول */
.card-1 { border-right: 4px solid #64748b; }
.card-1:hover { border-color: rgba(100, 116, 139, 0.5); }
.badge-1 { background: #475569; }
.icon-1 { color: #94a3b8; }

/* العصر الثاني */
.card-2 { border-right: 4px solid #3b82f6; }
.card-2:hover { border-color: rgba(59, 130, 246, 0.5); }
.badge-2 { background: #2563eb; }
.icon-2 { color: #60a5fa; }

/* العصر الثالث */
.card-3 { border-right: 4px solid #06b6d4; }
.card-3:hover { border-color: rgba(6, 182, 212, 0.5); }
.badge-3 { background: #0891b2; }
.icon-3 { color: #22d3ee; }

/* للموبايل الشاشات الصغيرة */
@media (max-width: 900px) {
    .era-grid { grid-template-columns: 1fr; }
    .era-header { flex-direction: column-reverse; gap: 15px; }
}
/* =========================================
   تصميم صفحة 3 - المكونات والتقنيات (Split Layout)
   ========================================= */

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1550px;
    margin: 40px auto;
    direction: ltr; /* توجيه الصفحة إنجليزي من اليسار لليمين */
    padding: 0 20px;
}

.column-header {
    text-align: center;
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(255,255,255,0.2);
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* الكرت الزجاجي الملون */
.feature-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--theme-color);
    box-shadow: 0 10px 30px rgba(var(--theme-rgb), 0.15);
}

/* صندوق الأيقونة الجانبي */
.icon-box {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    background: rgba(var(--theme-rgb), 0.1);
    box-shadow: inset 0 0 15px rgba(var(--theme-rgb), 0.1);
}

.card-text-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-title {
    color: var(--theme-color);
    font-size: 1.35rem;
    font-weight: bold;
    margin: 0;
}

.card-desc {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

/* ترتيب الموبايل والشاشات الأصغر */
@media (max-width: 1024px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   تصميم صفحة 4 - الفخامة والإبهار (VIP Infographic & Charts)
   ========================================= */


.page4-layout {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr; /* المحتوى بالإنجليزية */
    padding: 0 20px;
    color: #e2e8f0;
}

.section-title-glow {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    margin-bottom: 40px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}


/* --- القسم الأول: الإنفوجرافيك التفاعلي --- */
.infographic-container {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 50px;
}

.info-text-box {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    border-left: 5px solid #38bdf8;
    padding: 30px;
    border-radius: 0 16px 16px 0;
    font-size: 1.15rem;
    line-height: 1.9;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.info-diagram {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
}
.info-diagram {
    margin-left: 100px;
}

/* الدائرة المركزية في الإنفوجرافيك */
.info-diagram::before {
    content: 'Why Fintech is Important?';
    position: absolute;
    left: -140px;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 145px;
    background: radial-gradient(circle, #0ea5e9, #0284c7);
    border: 4px solid #bae6fd;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 20px;
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.6);
    z-index: 2;
}
.info-diagram {
    margin-left: 10px;
}

/* أزرار الإنفوجرافيك */
.diagram-item {
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.8));
    border-radius: 50px;
    padding: 10px 25px 10px 10px;
    margin-left: 60px; /* مسافة عشان الدائرة */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
}


.diagram-item:hover {
    transform: translateX(15px) scale(1.02);
}

.diagram-num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    margin-right: 20px;
    box-shadow: 0 0 15px currentColor;
}


.diagram-text { font-size: 1.2rem; font-weight: 600; color: #fff; }

/* ألوان الإنفوجرافيك زي الصورة */
.c-blue .diagram-num { background: #2563eb; color: #60a5fa; }
.c-blue:hover { box-shadow: 0 0 20px rgba(37, 99, 235, 0.4); }

.c-orange .diagram-num { background: #ea580c; color: #fdba74; }
.c-orange:hover { box-shadow: 0 0 20px rgba(234, 88, 12, 0.4); }

.c-green .diagram-num { background: #65a30d; color: #d9f99d; }
.c-green:hover { box-shadow: 0 0 20px rgba(101, 163, 13, 0.4); }

.c-teal .diagram-num { background: #0d9488; color: #99f6e4; }
.c-teal:hover { box-shadow: 0 0 20px rgba(13, 148, 136, 0.4); }

.c-lblue .diagram-num { background: #0284c7; color: #bae6fd; }
.c-lblue:hover { box-shadow: 0 0 20px rgba(2, 132, 199, 0.4); }

/* --- كروت الإحصائيات (الأرقام الكبيرة) --- */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.stat-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s;
}

.stat-card:hover { transform: translateY(-8px); border-color: #38bdf8; }

.stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(45deg, #38bdf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

/* --- القسم الثاني: الأسباب والرسم البياني --- */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.reason-card {
    background: rgba(255, 255, 255, 0.03);
    border-top: 4px solid #c084fc;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.reason-card p { font-size: 1.1rem; line-height: 1.8; color: #cbd5e1; }

/* الرسم البياني المبرمج (CSS Bar Chart) */
.chart-container {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 50px;
}

.chart-title {
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 40px;
}

.css-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    height: 250px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
}

.chart-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.bar {
    width: 80px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: growUp 1.5s ease-out forwards;
    transform-origin: bottom;
}

.bar-2020 { height: 100px; background: rgba(192, 132, 252, 0.5); }
.bar-2021 { height: 230px; background: #9333ea; box-shadow: 0 0 30px rgba(147, 51, 234, 0.6); }

.bar-label { font-size: 1.2rem; color: #94a3b8; font-weight: bold; }

.increase-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #d8b4fe;
    font-weight: bold;
    font-size: 1.2rem;
    animation: bounce 2s infinite;
}

@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* للموبايل */
@media (max-width: 1024px) {
    .infographic-container { flex-direction: column; }
    .info-diagram::before { display: none; }
    .diagram-item { margin-left: 0; }
    .stats-grid, .reasons-grid { grid-template-columns: 1fr; }
}
/* =========================================
   تصميم الرسم البياني للنظام المالي (Flow Diagram)
   ========================================= */

.system-diagram-section {
    margin-top: 100px;
    margin-bottom: 60px;
    direction: ltr; /* لغة إنجليزية */
}

/* العنوان فوق الرسمة */
.diagram-titles {
    text-align: center;
    margin-bottom: 40px;
}
.diagram-titles h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.diagram-titles h3 {
    font-size: 1.8rem;
    color: #94a3b8;
    margin: 0;
    font-weight: 400;
}

/* الحاوية الرئيسية للرسمة (مبنية على أبعاد متناسقة 100%) */
.diagram-wrapper {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 2 / 1;
    background-color: rgba(15, 23, 42, 0.5);
    background-image: radial-gradient(rgba(255,255,255,0.04) 2px, transparent 2px);
    background-size: 30px 30px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* طبقة الأسهم المتحركة (SVG Layer) */
.svg-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none; /* عشان ما تعطل الماوس */
}

/* مسارات تدفق الأموال (خطوط متقطعة متحركة) */
.flow-path {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: flowAnim 1.5s linear infinite;
}

.path-red { stroke: #f43f5e; stroke-dasharray: 12 12; }
.path-blue { stroke: #0ea5e9; stroke-dasharray: 12 12; }

@keyframes flowAnim {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

/* ================= الكروت والدوائر (Nodes) ================= */
.diag-node {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.diag-node:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

/* المربعات الجانبية (المقرضين والمقترضين) */
.node-box {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 20px;
    width: 230px;
    color: #f8fafc;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}
.node-box h4 { 
    margin: 0 0 12px 0; font-size: 1.15rem; color: #fff; text-align: center; 
    border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 10px;
}
.node-box ol { margin: 0; padding-left: 22px; font-size: 0.95rem; color: #cbd5e1; line-height: 1.7; }

.node-lender { top: 76%; left: 18%; border-top: 4px solid #facc15; }
.node-borrower { top: 76%; left: 82%; border-top: 4px solid #60a5fa; }

/* الدوائر المركزية (الأسواق والوسطاء) */
.node-circle {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    padding: 20px;
}

.node-intermediaries {
    top: 30%; left: 50%;
    background: radial-gradient(circle, #e11d48, #9f1239);
    border: 4px solid #fda4af;
    box-shadow: 0 0 40px rgba(225, 29, 72, 0.4);
}

.node-markets {
    top: 76%; left: 50%;
    background: radial-gradient(circle, #0284c7, #075985);
    border: 4px solid #7dd3fc;
    box-shadow: 0 0 40px rgba(2, 132, 199, 0.4);
}

/* باجات العناوين (مباشر وغير مباشر) */
.label-badge {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    background: #0f172a;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 1.5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.label-indirect { top: 8%; left: 50%; color: #fda4af; border: 1px solid #fda4af; }
.label-direct { top: 95%; left: 50%; color: #7dd3fc; border: 1px solid #7dd3fc; }

/* تصميم للموبايل */
@media (max-width: 950px) {
    .diagram-wrapper { aspect-ratio: auto; min-height: 900px; display: flex; flex-direction: column; padding: 40px 0; gap: 30px;}
    .svg-layer { display: none; } 
    .diag-node, .label-badge { position: relative; transform: none; top: auto; left: auto; margin: 0 auto; width: 80%; }
    .node-circle { height: auto; padding: 40px; border-radius: 20px; }
    .label-badge { width: max-content; }
}
/* =========================================
   القسم الرابع: المحاور والشركات (Hubs & Companies)
   ========================================= */

/* لوحة زجاجية مشتركة */
.glass-panel {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* تنسيق قسم المحاور (Hubs) */
.hubs-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #e2e8f0;
    margin-bottom: 35px;
}

.city-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.city-tag {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

.city-tag:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.6);
}

/* تنسيق قسم الشركات (Companies) */
.companies-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.companies-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cbd5e1;
}

.companies-text ul {
    list-style-type: none; 
    padding: 0;
    margin-top: 25px;
}

.companies-text li {
    margin-bottom: 18px;
    font-size: 1.15rem;
    background: rgba(255,255,255,0.03);
    padding: 12px 20px;
    border-radius: 12px;
    border-left: 4px solid #4ade80;
}

/* بطاقة اليونيكورن الفخمة */
.unicorn-box {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.15), rgba(147, 51, 234, 0.15));
    border: 1px solid #c084fc;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(147, 51, 234, 0.2);
    transition: transform 0.3s;
}

.unicorn-box:hover {
    transform: translateY(-5px);
    border-color: #d8b4fe;
}

.unicorn-title {
    color: #d8b4fe;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.unicorn-stat {
    font-size: 1.15rem;
    color: #f8fafc;
    margin-bottom: 25px;
    line-height: 1.6;
}

.unicorn-stat span {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 0 0 20px rgba(192, 132, 252, 0.8);
}

@media (max-width: 900px) {
    .companies-grid { grid-template-columns: 1fr; }
}
/* =========================================
   تصميم صفحة 5 - التأثير، التحديات والمستقبل
   ========================================= */

.page5-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr; /* المحتوى بالإنجليزية */
    padding: 0 20px;
}

/* 1. قسم التأثير (Impact) - شبكة كروت مرقمة */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-bottom: 70px;
}

.impact-card {
    background: rgba(15, 23, 42, 0.6);
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, box-shadow 0.3s;
}

.impact-card:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
}

.impact-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(59, 130, 246, 0.3);
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.impact-text {
    font-size: 1.2rem;
    color: #e2e8f0;
    font-weight: 600;
}

/* 2. قسم التحديات والمخاطر (Challenges) - طابع تحذيري */
.challenges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 70px;
}

.challenge-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border-top: 4px solid #ef4444;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

.challenge-card:hover {
    transform: translateY(-5px);
    border-color: #f87171;
}

.challenge-title {
    color: #fca5a5;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.challenge-desc {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* 3. قسم المستقبل (Future) - طابع تكنولوجي */
.future-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.future-card {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.future-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, #a78bfa, transparent);
    animation: scanline 3s infinite linear;
}

@keyframes scanline {
    0% { left: -100%; }
    100% { left: 100%; }
}

.future-title {
    color: #c4b5fd;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.future-desc {
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* الخاتمة */
.conclusion-panel {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 50px;
}

.conclusion-panel p {
    font-size: 1.2rem;
    color: #f8fafc;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* تنسيق مصادر الاقتباس (Citations) لتكون خفيفة على العين */
.citation {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 5px;
    font-style: italic;
}

@media (max-width: 900px) {
    .challenges-grid, .future-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 2 - القائمة الأولى (الخدمات المصرفية الرقمية)
   ========================================= */

.ch2-hero-title {
    background: linear-gradient(90deg, #eab308, #facc15); /* لون أصفر زي السلايد */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* شبكة كروت البداية */
.ch2-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 80px;
    direction: ltr;
}

.ch2-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s, border-color 0.3s;
}

.ch2-card:hover {
    transform: translateY(-5px);
    border-color: #facc15;
}

.ch2-card-title {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(250, 204, 21, 0.3);
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ch2-card p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
}

/* شبكة أيقونات العالم الرقمي التعبيرية */
.digital-icons-mesh {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.mesh-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s;
}

.mesh-icon:hover {
    background: #facc15;
    color: #0f172a;
    transform: scale(1.1) rotate(5deg);
}

/* ================= مقارنة رحلة العميل ================= */
/* =========================================
   مقارنة رحلة العميل (التصميم الاحترافي VIP)
   ========================================= */

.pro-journey-section {
    max-width: 1200px;
    margin: 60px auto;
    direction: ltr;
}

.journey-header {
    text-align: center;
    font-size: 2.5rem;
    color: #facc15;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}

/* الكرت الأساسي للرحلة */
.pro-journey-card {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    backdrop-filter: blur(12px);
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.pro-journey-card:hover {
    transform: translateY(-5px);
}

/* تخصيص التقليدي والرقمي */
.card-traditional {
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 6px solid #ef4444;
}

.card-digital {
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-left: 6px solid #22c55e;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.15);
}

/* باجات الوقت (أسابيع / دقائق) */
.card-badge {
    position: absolute;
    top: -18px;
    right: 40px;
    padding: 8px 25px;
    border-radius: 30px;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.badge-weeks {
    background: #7f1d1d;
    color: #fca5a5;
    border: 2px solid #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.badge-minutes {
    background: #14532d;
    color: #86efac;
    border: 2px solid #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.8); }
    100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.4); }
}

.card-title {
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 40px 0;
}

/* حاوية الخطوات والمسار */
.steps-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 20px;
}

/* الخط الواصل بين الأيقونات */
.steps-wrapper::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 60px;
    right: 60px;
    height: 4px;
    z-index: 0;
}

.card-traditional .steps-wrapper::before {
    background: repeating-linear-gradient(90deg, #475569, #475569 15px, transparent 15px, transparent 25px);
}

.card-digital .steps-wrapper::before {
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    box-shadow: 0 0 15px #22c55e;
}

/* تصميم كل خطوة (أيقونة + نص) */
.pro-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
    text-align: center;
}

.pro-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 15px;
    background: #0f172a;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pro-text {
    font-size: 0.95rem;
    color: #cbd5e1;
    font-weight: 600;
    line-height: 1.5;
}

/* ألوان الأيقونات */
.card-traditional .pro-icon {
    color: #f87171;
    border: 3px solid #7f1d1d;
}

.card-digital .pro-icon {
    color: #4ade80;
    border: 3px solid #22c55e;
    background: #064e3b;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.4);
}

/* حركات الماوس */
.card-traditional .pro-step:hover .pro-icon {
    transform: scale(1.1);
    background: #7f1d1d;
    color: #fff;
}

.card-digital .pro-step:hover .pro-icon {
    transform: scale(1.2) translateY(-10px);
    background: #22c55e;
    color: #0f172a;
    box-shadow: 0 15px 30px rgba(34, 197, 94, 0.6);
}

/* فاصل VS */
.vs-divider {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #facc15;
    margin: 30px 0;
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}

@media (max-width: 900px) {
    .steps-wrapper { flex-direction: column; align-items: center; gap: 40px; }
    .steps-wrapper::before { display: none; }
    .pro-step { width: 100%; }
}
/* =========================================
   تصميم قسم Our Digital World الاحترافي
   ========================================= */

.digital-world-section {
    max-width: 1200px;
    margin: 40px auto 70px auto;
    direction: ltr;
}

.dw-main-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 24px;
    padding: 45px;
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* خط علوي مضيء */
.dw-main-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #eab308, #facc15, #38bdf8);
}

.dw-title {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dw-title i {
    color: #facc15;
    filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5));
}

.dw-desc {
    font-size: 1.2rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 35px;
}

.dw-desc strong {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(250, 204, 21, 0.3);
}

/* شبكة الأيقونات التفاعلية الموزعة */
.dw-grid-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.dw-feature-box {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dw-feature-box:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(250, 204, 21, 0.1);
    border-color: #facc15;
    box-shadow: 0 10px 25px rgba(250, 204, 21, 0.2);
}

.dw-feature-box i {
    font-size: 2.2rem;
    color: #38bdf8;
    margin-bottom: 12px;
    display: block;
    transition: color 0.3s;
}

.dw-feature-box:hover i {
    color: #facc15;
}

.dw-feature-box span {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 600;
}
/* =========================================
   شابتر 2 - القائمة الثانية (Services, Channels, Pros & Cons)
   ========================================= */

.ch2-p2-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق الجدول الاحترافي للخدمات (Digital Banking Services) */
.services-table-wrapper {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(250, 204, 21, 0.2);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    margin-bottom: 60px;
}

.pro-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.pro-table th {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    font-size: 1.3rem;
    padding: 20px 25px;
    border-bottom: 2px solid rgba(250, 204, 21, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pro-table td {
    padding: 18px 25px;
    color: #cbd5e1;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 1.6;
}

.pro-table tr:last-child td {
    border-bottom: none;
}

.pro-table tr {
    transition: background 0.3s;
}

.pro-table tr:hover {
    background: rgba(250, 204, 21, 0.05);
}

.service-num {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #facc15;
    color: #0f172a;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    margin-right: 12px;
}

/* شبكة القنوات (Channels) */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.channel-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.channel-card:hover {
    transform: translateY(-8px);
    border-color: #38bdf8;
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.2);
}

.channel-card i {
    font-size: 2.5rem;
    color: #38bdf8;
    margin-bottom: 15px;
}

.channel-card h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0;
    font-weight: bold;
}

/* شبكة المزايا والعيوب (Advantages & Disadvantages) */
.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.pc-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.pc-advantages {
    border-top: 5px solid #22c55e;
}

.pc-disadvantages {
    border-top: 5px solid #ef4444;
}

.pc-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-advantages .pc-title { color: #4ade80; }
.pc-disadvantages .pc-title { color: #f87171; }

.pc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pc-list li {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.pc-advantages .pc-list li i { color: #22c55e; margin-top: 4px; }
.pc-disadvantages .pc-list li i { color: #ef4444; margin-top: 4px; }

@media (max-width: 900px) {
    .pros-cons-grid { grid-template-columns: 1fr; }
    .pro-table th, .pro-table td { padding: 12px 15px; font-size: 0.95rem; }
}
/* =========================================
   شابتر 2 - القائمة الثالثة (Security & Models & Challenges)
   ========================================= */

.ch2-p3-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

.ch2-section-title {
    text-align: center;
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* --- مقارنة الأمن (Security Comparison) --- */
.security-comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 70px;
}

.security-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.security-col-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.title-trad { color: #94a3b8; }
.title-digi { color: #fb923c; }

.sec-item {
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, box-shadow 0.3s;
}

.sec-item-trad {
    border-left: 4px solid #64748b;
    color: #e2e8f0;
}
.sec-item-trad:hover {
    transform: translateX(-5px);
    background: rgba(100, 116, 139, 0.2);
}

.sec-item-digi {
    border-right: 4px solid #f97316;
    color: #fff;
    flex-direction: row-reverse;
}
.sec-item-digi:hover {
    transform: translateX(5px);
    background: rgba(249, 115, 22, 0.15);
    box-shadow: 0 5px 20px rgba(249, 115, 22, 0.2);
}

.sec-icon {
    font-size: 1.4rem;
}
.sec-item-trad .sec-icon { color: #94a3b8; }
.sec-item-digi .sec-icon { color: #fb923c; }

/* السهم الفاصل بالوسط */
.security-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #f97316;
    animation: pulseArrow 2s infinite;
}
@keyframes pulseArrow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 20px #f97316; }
}


/* --- مقارنة نماذج العمل (Business Models) --- */
.models-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 70px;
}

.model-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border-top: 5px solid;
}

.model-trad { border-color: #64748b; }
.model-digi { border-color: #f97316; box-shadow: 0 15px 35px rgba(249, 115, 22, 0.15); }

.model-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.model-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.model-list li {
    font-size: 1.05rem;
    color: #cbd5e1;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.model-list li i {
    margin-top: 5px;
}
.model-trad li i { color: #94a3b8; }
.model-digi li i { color: #f97316; }


/* --- قسم التحديات (The Challenges) --- */
.challenges-container {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(15px);
    margin-bottom: 50px;
}

.challenges-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.challenge-row {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
}

.challenge-row:hover {
    background: rgba(249, 115, 22, 0.1);
    border-color: #f97316;
    transform: translateX(8px);
}

.challenge-row span {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
}

.challenge-row i {
    font-size: 1.4rem;
    color: #f97316;
}

@media (max-width: 900px) {
    .security-comparison-grid { grid-template-columns: 1fr; gap: 40px; }
    .security-arrow { transform: rotate(90deg); margin: 20px 0; }
    .models-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 2 - القائمة الرابعة (Neobanks vs Challenger Banks)
   ========================================= */

.ch2-p4-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* بطاقات التعريف العلوية */
.definitions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.def-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border-top: 5px solid #38bdf8;
    transition: transform 0.3s;
}

.def-card:hover { transform: translateY(-5px); }

.def-card h3 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.def-card p {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 15px;
}

.def-card p strong { color: #facc15; }

/* جدول المقارنة المتقدم (Neobanks vs Challenger) */
.comparison-table-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.neo-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.neo-table th {
    background: #1e293b;
    color: #fff;
    font-size: 1.25rem;
    padding: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

.neo-table th.col-neo { background: #991b1b; color: #fca5a5; width: 30%; }
.neo-table th.col-chal { background: #7f1d1d; color: #fca5a5; width: 30%; }

.neo-table td {
    padding: 16px 20px;
    color: #cbd5e1;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.neo-table td:first-child {
    text-align: left;
    font-weight: bold;
    color: #fff;
    background: rgba(255,255,255,0.02);
}

.neo-table tr:hover { background: rgba(255, 255, 255, 0.02); }

.check-yes { color: #4ade80; font-size: 1.3rem; }
.dash-no { color: #94a3b8; font-size: 1.3rem; }

/* جدول النماذج الشامل (Master Banking Matrix) */
.matrix-table-box {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 20px;
    overflow-x: auto;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 900px;
}

.matrix-table th {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    font-size: 1.1rem;
    padding: 18px 15px;
    border-bottom: 2px solid rgba(250, 204, 21, 0.4);
    text-transform: uppercase;
}

.matrix-table td {
    padding: 16px 15px;
    color: #cbd5e1;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
    line-height: 1.5;
}

.matrix-table td:first-child {
    font-weight: bold;
    color: #fff;
    background: rgba(250, 204, 21, 0.05);
}

.matrix-table ul {
    margin: 0;
    padding-left: 15px;
}

.matrix-table li {
    margin-bottom: 5px;
}

@media (max-width: 900px) {
    .definitions-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 2 - القائمة الخامسة (Open Banking)
   ========================================= */

.ch2-p5-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

.open-banking-hero {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(59, 130, 246, 0.15));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    backdrop-filter: blur(15px);
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.ob-title {
    font-size: 2.3rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
}

.ob-title i { color: #38bdf8; }

.ob-text {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 20px;
}

.ob-text strong { color: #38bdf8; }

/* شبكة فوائد البنوك المفتوحة (Consumer & Lender) */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
}

.benefit-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border-top: 5px solid;
    transition: transform 0.3s;
}

.benefit-card:hover { transform: translateY(-5px); }

.card-consumer { border-color: #38bdf8; }
.card-lender { border-color: #a78bfa; }

.benefit-card h3 {
    font-size: 1.6rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-consumer h3 { color: #38bdf8; }
.card-lender h3 { color: #c4b5fd; }

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-list li {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.card-consumer .benefit-list li i { color: #38bdf8; margin-top: 5px; }
.card-lender .benefit-list li i { color: #c4b5fd; margin-top: 5px; }

@media (max-width: 900px) {
    .benefits-grid { grid-template-columns: 1fr; }
}
/* =========================================
   مخطط النظام البيئي للبنوك المفتوحة (Open Banking Ecosystem Diagram)
   ========================================= */

.ob-diagram-wrapper {
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 50px 30px;
    margin: 40px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    direction: ltr;
}

.ob-diagram-title {
    text-align: center;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* هيكل الشبكة (Grid Layout) */
.ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 30px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* أعمدة الشبكة */
.eco-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*عقد النظام (Nodes) */
.eco-node {
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.eco-node:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: #38bdf8;
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.3);
}

.eco-node i {
    font-size: 2.2rem;
    margin-bottom: 10px;
    display: block;
}

.eco-node h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.eco-node p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

/* تمييز الأجزاء المختلفة */
.node-user { border-color: #facc15; background: rgba(250, 204, 21, 0.05); }
.node-user i { color: #facc15; }

.node-tpp { border-color: #22c55e; background: rgba(34, 197, 94, 0.1); box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
.node-tpp i { color: #22c55e; }

.node-bank { border-color: #38bdf8; }
.node-bank i { color: #38bdf8; }

.node-app { border-color: #c084fc; background: rgba(192, 132, 252, 0.05); }
.node-app i { color: #c084fc; }

/* خطوط الاتصال المتحركة بالخلفية */
.eco-center-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.5);
    border: 2px dashed rgba(56, 189, 248, 0.4);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}

.hub-icon {
    font-size: 3.5rem;
    color: #38bdf8;
    margin-bottom: 15px;
    animation: pulseHub 2s infinite;
}

@keyframes pulseHub {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(56,189,248,0.5)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(56,189,248,0.9)); }
}

.hub-text {
    color: #e2e8f0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.hub-text strong { color: #facc15; }

@media (max-width: 900px) {
    .ecosystem-grid { grid-template-columns: 1fr; }
}
/* =========================================
   تصميم The Evolution of Open Banking الاحترافي
   ========================================= */

.evolution-section {
    max-width: 1200px;
    margin: 40px auto 60px auto;
    direction: ltr;
}

.evo-card-main {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

.evo-card-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
}

.evo-title {
    font-size: 2.3rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
}

.evo-title i { color: #38bdf8; }

.evo-desc {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 35px;
}

.evo-desc strong { color: #38bdf8; }

/* محطات التطور (Timeline Steps) */
.evo-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.evo-step-box {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.evo-step-box:hover {
    transform: translateY(-8px);
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2);
}

.evo-step-box i {
    font-size: 2.2rem;
    color: #38bdf8;
    margin-bottom: 15px;
    display: block;
}

.evo-step-box h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.evo-step-box p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .evo-steps-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 3 - القائمة الأولى (Digital Payments & Animated Types)
   ========================================= */

.ch3-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* بطاقات التعريف العلوية */
.ch3-def-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    margin-bottom: 30px;
    border-left: 5px solid #38bdf8;
    transition: transform 0.3s;
}

.ch3-def-card:hover {
    transform: translateY(-5px);
}

.ch3-def-card h2 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ch3-def-card h2 i { color: #38bdf8; }

.ch3-def-card p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.8;
    margin: 0;
}

.ch3-def-card p strong { color: #38bdf8; }

/* قسم الأنيميشن المتحرك لأنواع المدفوعات (Types of Digital Payment) */
.animated-types-section {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    margin-top: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.animated-types-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
}

.types-main-title {
    text-align: center;
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* حاوية الشجرة الهيكلية المتحركة */
.tree-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* البوكس الرئيسي (Types of Digital Payment) */
.parent-box {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
    padding: 30px 25px;
    border-radius: 16px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.4);
    min-width: 240px;
    border: 2px solid #bae6fd;
    animation: pulseParent 3s infinite ease-in-out;
}

@keyframes pulseParent {
    0%, 100% { box-shadow: 0 10px 30px rgba(2, 132, 199, 0.4); }
    50% { box-shadow: 0 15px 40px rgba(2, 132, 199, 0.7); transform: scale(1.02); }
}

/* خطوط التوصيل */
.connecting-lines {
    width: 60px;
    height: 350px;
    border-top: 3px solid #38bdf8;
    border-bottom: 3px solid #38bdf8;
    border-left: 3px solid #38bdf8;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    position: relative;
}

/* الأبناء (الأنواع الخمسة المتحركة) */
.children-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    max-width: 650px;
}

.child-type-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 12px;
    padding: 18px 25px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(50px);
    animation: slideInStaggered 0.8s forwards;
    transition: all 0.3s;
}

/* تطبيق الأنيميشن المتسلسل لكل كرت بحركة مذهلة */
.child-type-card:nth-child(1) { animation-delay: 0.2s; }
.child-type-card:nth-child(2) { animation-delay: 0.4s; }
.child-type-card:nth-child(3) { animation-delay: 0.6s; }
.child-type-card:nth-child(4) { animation-delay: 0.8s; }
.child-type-card:nth-child(5) { animation-delay: 1.0s; }

@keyframes slideInStaggered {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.child-type-card:hover {
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    transform: scale(1.03) translateX(5px);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}

.child-type-card i {
    color: #38bdf8;
    font-size: 1.3rem;
}

@media (max-width: 900px) {
    .tree-container { flex-direction: column; }
    .connecting-lines { display: none; }
    .children-stack { width: 100%; }
}
/* =========================================
   شابتر 3 - القائمة الثانية (أنيميشن متقدم وأيقونات VIP)
   ========================================= */

.ch3-p2-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* بطاقات الائتمان العائمة المتحركة */
.pro-animated-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    margin-bottom: 60px;
}

.pro-card-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    animation: floatCard 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pro-card-box:nth-child(2) {
    animation-delay: 2s;
    border-color: rgba(192, 132, 252, 0.3);
}

.pro-card-box:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(56, 189, 248, 0.3);
    border-color: #38bdf8;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.pro-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.pro-icon-badge {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: rgba(56, 189, 248, 0.15);
    border: 2px solid #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); box-shadow: 0 0 15px rgba(56, 189, 248, 0.3); }
    50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(56, 189, 248, 0.7); }
}

.pro-card-title {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 800;
}

.pro-card-desc {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.8;
}

/* جدول المقارنة النبضي المتحرك */
.pro-comparison-section {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(192, 132, 252, 0.4);
    border-radius: 24px;
    padding: 45px;
    margin-bottom: 60px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
}

.pro-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
}

.pro-comp-card {
    background: rgba(30, 41, 59, 0.7);
    border-radius: 18px;
    padding: 30px;
    border-left: 5px solid #c084fc;
    transition: transform 0.3s;
}

.pro-comp-card:hover {
    transform: translateY(-5px);
    background: rgba(192, 132, 252, 0.08);
}

.pro-comp-card h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pro-comp-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pro-comp-card li {
    font-size: 1.05rem;
    color: #cbd5e1;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.pro-comp-card li i {
    color: #c084fc;
    margin-top: 4px;
    font-size: 1.1rem;
}

/* قسم PoS التفاعلي المتحرك */
.pro-pos-section {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
}

.pro-pos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 35px;
}

.pro-pos-box {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 18px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.pro-pos-box:hover {
    transform: translateY(-10px) scale(1.03);
    background: rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.3);
}

.pro-pos-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    background: rgba(56, 189, 248, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #38bdf8;
    border: 2px solid rgba(56, 189, 248, 0.4);
    transition: all 0.4s;
}

.pro-pos-box:hover .pro-pos-icon {
    background: #38bdf8;
    color: #0f172a;
    transform: rotate(360deg);
}

.pro-pos-box h4 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.pro-pos-box p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .pro-animated-grid, .pro-comparison-grid, .pro-pos-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 3 - القائمة الثالثة (Stored-Value Cards & Animations)
   ========================================= */

.ch3-p3-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* الكرت الرئيسي العائم المتحرك */
.stored-card-hero {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    margin-bottom: 50px;
    animation: floatCard 4s ease-in-out infinite;
}

.stored-card-hero h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stored-card-hero h2 i { color: #38bdf8; }

.stored-card-hero p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 20px;
}

.stored-card-hero p strong { color: #38bdf8; }

/* شبكة أنواع البطاقات (Closed vs Open Loop) المتحركة */
.loop-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.loop-card-box {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 20px;
    padding: 35px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border-top: 5px solid #c084fc;
}

.loop-card-box:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #c084fc;
    box-shadow: 0 20px 45px rgba(192, 132, 252, 0.3);
}

.loop-card-box h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.loop-card-box h3 i { color: #c084fc; font-size: 1.6rem; }

.loop-card-box p {
    font-size: 1.1rem;
    color: #cbd5e1;
    line-height: 1.8;
    margin: 0;
}
/* =========================================
   شابتر 3 - القائمة الرابعة (Digital Wallets & Animations)
   ========================================= */

.ch3-p4-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* الكرت الرئيسي العائم للمحفظة الرقمية */
.wallet-hero-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    margin-bottom: 50px;
    animation: floatCard 4s ease-in-out infinite;
}

.wallet-hero-box h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.wallet-hero-box h2 i { color: #38bdf8; }

.wallet-hero-box p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 20px;
}

.wallet-hero-box p strong { color: #38bdf8; }

/* شبكة المحافظ المحلية (Orange, UWallet, Zain Cash) */
.local-wallets-grid {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.local-wallet-badge {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 12px 25px;
    border-radius: 30px;
    color: #38bdf8;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s;
}

.local-wallet-badge:hover {
    transform: translateY(-5px);
    background: #38bdf8;
    color: #0f172a;
}

/* شبكة أنواع المحافظ الثلاثة (Closed, Semi-closed, Open) */
.wallet-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.wallet-type-card {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(192, 132, 252, 0.3);
    border-radius: 20px;
    padding: 35px 25px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border-top: 5px solid #c084fc;
}

.wallet-type-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: #c084fc;
    box-shadow: 0 20px 45px rgba(192, 132, 252, 0.3);
}

.wallet-type-icon {
    width: 60px;
    height: 60px;
    background: rgba(192, 132, 252, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #c084fc;
    margin-bottom: 20px;
    border: 2px solid rgba(192, 132, 252, 0.4);
}

.wallet-type-card h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
}

.wallet-type-card p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .wallet-types-grid, .local-wallets-grid { grid-template-columns: 1fr; flex-direction: column; }
}
/* =========================================
   شابتر 3 - القائمة الخامسة (E-Money & Animated Flow Diagram)
   ========================================= */

.ch3-p5-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* الكرت الرئيسي لتعريف E-Money */
.emoney-hero-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 45px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    margin-bottom: 50px;
    animation: floatCard 4s ease-in-out infinite;
}

.emoney-hero-box h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.emoney-hero-box h2 i { color: #38bdf8; }

.emoney-hero-box p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.9;
    margin-bottom: 15px;
}

.emoney-hero-box p strong { color: #38bdf8; }

/* حاوية الرسمة المتحركة الاحترافية (E-Money Ecosystem Diagram) */
.emoney-diagram-wrapper {
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(192, 132, 252, 0.4);
    border-radius: 24px;
    padding: 50px 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    overflow: hidden;
}

.diagram-title-top {
    text-align: center;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 40px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* مثلث التفاعل الثلاثي */
.triangle-flow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.flow-node-box {
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.flow-node-box:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: #38bdf8;
    box-shadow: 0 20px 45px rgba(56, 189, 248, 0.4);
}

.flow-node-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px auto;
    background: rgba(56, 189, 248, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #38bdf8;
    border: 2px solid rgba(56, 189, 248, 0.4);
    animation: pulseIcon 2s infinite;
}

.flow-node-box h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.flow-node-box .country-tag {
    display: inline-block;
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 1px solid rgba(192, 132, 252, 0.3);
}

/* أسهم الحركة التفاعلية الوسطية */
.flow-connections-banner {
    margin-top: 40px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px dashed rgba(56, 189, 248, 0.3);
}

.connection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 1.05vrem;
    font-weight: 600;
}

.connection-item i {
    color: #38bdf8;
    font-size: 1.5rem;
    animation: bounceRight 1.5s infinite alternate;
}

@keyframes bounceRight {
    from { transform: translateX(-5px); }
    to { transform: translateX(5px); }
}

@media (max-width: 900px) {
    .triangle-flow-grid, .flow-connections-banner { grid-template-columns: 1fr; flex-direction: column; gap: 20px; }
}
/* =========================================
/* =========================================
   محاكاة رسمة E-Money الحركية الدقيقة (المضبوطة 100%)
   ========================================= */

.slide-diagram-box {
    background: radial-gradient(circle at center, #0f172a, #020617);
    border: 2px solid rgba(56, 189, 248, 0.4);
    border-radius: 24px;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    direction: ltr;
    margin-top: 30px;
}

.slide-diagram-title {
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.slide-canvas {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 420px;
    margin: 0 auto;
}

.orbit-node {
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    border: 3px solid;
    border-radius: 40px;
    padding: 12px 25px;
    text-align: center;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
    z-index: 5;
}

.orbit-node h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
    font-weight: bold;
}

.orbit-node span {
    font-size: 0.8rem;
    font-weight: bold;
}

/* مواقع العقد الثابتة والآمنة بدون تداخل */
.node-supplier-pos { top: 40px; left: 8%; border-color: #a855f7; }
.node-supplier-pos span { color: #a855f7; }

.node-customer-pos { top: 40px; right: 8%; border-color: #38bdf8; }
.node-customer-pos span { color: #38bdf8; }

.node-issuer-pos { bottom: 15px; left: 50%; transform: translateX(-50%); border-color: #22c55e; }
.node-issuer-pos span { color: #22c55e; }

.orbit-svg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.path-line {
    fill: none;
    stroke-width: 2;
    opacity: 0.3;
}

/* النصوص التوضيحية الثابتة على المسارات لمنع أي تطاير أو تداخل */
.fixed-label {
    position: absolute;
    font-size: 0.85rem;
    font-weight: bold;
    z-index: 4;
    background: rgba(15, 23, 42, 0.85);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}

.lbl-goods { top: 35px; left: 46%; color: #cbd5e1; }
.lbl-emoney-top { top: 75px; left: 45%; color: #38bdf8; }
.lbl-sup-down { top: 210px; left: 24%; color: #22c55e; }
.lbl-cus-down { top: 210px; right: 24%; color: #22c55e; }
/* =========================================
   تصميم رسمة E-Money الهرمية الواضحة والاحترافية
   ========================================= */

.emoney-flow-container {
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(56, 189, 248, 0.4);
    border-radius: 24px;
    padding: 40px 20px;
    margin-top: 30px;
    direction: ltr;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
}

.flow-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.flow-card {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.flow-card:hover {
    transform: translateY(-5px);
}

.card-supplier { border: 3px solid #a855f7; }
.card-customer { border: 3px solid #38bdf8; }
.card-issuer { border: 3px solid #22c55e; margin: 0 auto; width: 320px; }

.flow-card h4 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0 0 8px 0;
}

.flow-card .country {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

.card-supplier .country { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
.card-customer .country { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); }
.card-issuer .country { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }

/* صندوق التبادل بالوسط */
.flow-exchange-box {
    flex: 1;
    background: rgba(30, 41, 59, 0.7);
    border: 1px dashed rgba(56, 189, 248, 0.5);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.exchange-item {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .flow-top-row { flex-direction: column; }
    .flow-card { width: 100%; }
}
/* =========================================
   شابتر 4 - القائمة الأولى (Introduction to Data Science)
   ========================================= */

.ch4-p1-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* الكرت الافتتاحي (Historical Context) */
.intro-glass-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
    border-left: 5px solid #a855f7;
    border-radius: 20px;
    padding: 35px;
    margin-bottom: 40px;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.intro-glass-card p {
    font-size: 1.25rem;
    color: #e2e8f0;
    line-height: 1.8;
    margin: 0;
}

/* أسباب زيادة استخدام الداتا (The Surge Factors) */
.surge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.surge-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.3s forwards;
    position: relative;
    overflow: hidden;
}

.surge-card::before {
    content: '';
    position: absolute;
    top: -50px; right: -50px; width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3), transparent);
    border-radius: 50%;
    transition: transform 0.4s ease;
}

.surge-card:hover {
    transform: translateY(-10px);
    border-color: #38bdf8;
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

.surge-card:hover::before { transform: scale(3); }

.surge-card i {
    font-size: 2.5rem;
    color: #38bdf8;
    margin-bottom: 20px;
    display: block;
}

.surge-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.surge-card p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.7;
}

/* تطبيقات الحياة اليومية (Everyday Applications) */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.app-box {
    background: rgba(30, 41, 59, 0.6);
    border-top: 4px solid #10b981;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.6s forwards;
}

.app-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2);
}

.app-box .icon-container {
    width: 60px; height: 60px;
    margin: 0 auto 20px auto;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #10b981;
}

.app-box h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.app-box p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}

.transition-panel {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(56, 189, 248, 0.1));
    border: 1px dashed rgba(255,255,255,0.2);
    padding: 20px;
    text-align: center;
    border-radius: 15px;
    color: #f8fafc;
    font-size: 1.2rem;
    font-style: italic;
    opacity: 0;
    animation: fadeUpAnim 1s ease-out 0.9s forwards;
}

@keyframes fadeUpAnim {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .surge-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 4 - القائمة الثانية (Industry Use Cases & What is DS)
   ========================================= */

.ch4-p2-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* شبكة حالات الاستخدام (Use Cases Grid) */
.use-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 70px;
}

.uc-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.uc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

/* ألوان مخصصة لكل بطاقة */
.uc-promo { border-top: 5px solid #ec4899; }
.uc-promo:hover { border-color: #ec4899; box-shadow: 0 15px 35px rgba(236, 72, 153, 0.15); }
.uc-promo .uc-icon { color: #ec4899; background: rgba(236, 72, 153, 0.1); }

.uc-recom { border-top: 5px solid #8b5cf6; }
.uc-recom:hover { border-color: #8b5cf6; box-shadow: 0 15px 35px rgba(139, 92, 246, 0.15); }
.uc-recom .uc-icon { color: #8b5cf6; background: rgba(139, 92, 246, 0.1); }

.uc-risk { border-top: 5px solid #f59e0b; }
.uc-risk:hover { border-color: #f59e0b; box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15); }
.uc-risk .uc-icon { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }

.uc-fraud { border-top: 5px solid #ef4444; }
.uc-fraud:hover { border-color: #ef4444; box-shadow: 0 15px 35px rgba(239, 68, 68, 0.15); }
.uc-fraud .uc-icon { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.uc-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.uc-icon {
    width: 65px; height: 65px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.uc-header h3 {
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
}

.uc-body p {
    font-size: 1.05rem;
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 15px;
}

.uc-body p:last-child { margin-bottom: 0; }
.uc-body strong { color: #f8fafc; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; }

/* قسم تعريف Data Science */
.ds-definition-box {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 24px;
    padding: 50px;
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpAnim 0.8s ease-out 0.6s forwards;
}

.ds-title {
    text-align: center;
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 40px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ds-title i { color: #38bdf8; text-shadow: 0 0 20px rgba(56,189,248,0.5); }

.ds-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ds-list li {
    background: rgba(15, 23, 42, 0.6);
    border-left: 4px solid #38bdf8;
    padding: 25px 30px;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #e2e8f0;
    line-height: 1.8;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ds-list li i {
    font-size: 1.5rem;
    color: #38bdf8;
    margin-top: 5px;
}

.ds-list li strong { color: #38bdf8; }
.ds-list li u { text-decoration-color: #38bdf8; text-underline-offset: 4px; }

@media (max-width: 1024px) {
    .use-cases-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 4 - القائمة الثالثة (AI vs ML, Big Data & Lifecycle)
   ========================================= */

.ch4-p3-container {
    max-width: 1300px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* كروت المقارنة (Tech Cards) */
.tech-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.tech-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
}

.tech-card:hover {
    transform: translateY(-8px);
}

.tech-card.ai { border-top: 4px solid #f43f5e; }
.tech-card.ai:hover { box-shadow: 0 10px 25px rgba(244, 63, 94, 0.2); }
.tech-card.ai h3 i { color: #f43f5e; }

.tech-card.ml { border-top: 4px solid #38bdf8; }
.tech-card.ml:hover { box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2); }
.tech-card.ml h3 i { color: #38bdf8; }

.tech-card.dl { border-top: 4px solid #a855f7; }
.tech-card.dl:hover { box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2); }
.tech-card.dl h3 i { color: #a855f7; }

.tech-card h3 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tech-card p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.tech-card p:last-child { margin-bottom: 0; }
.tech-card u { text-underline-offset: 4px; text-decoration-color: inherit; }

/* مصطلح Data Science الشامل */
.ds-broad-term {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(15, 23, 42, 0.5));
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 60px;
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
}

.ds-broad-term u { text-decoration-color: #10b981; text-underline-offset: 4px; }

/* قسم البيانات الضخمة (Big Data) */
.big-data-section {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 70px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.bd-title {
    color: #facc15;
    font-size: 2rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bd-text {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.bd-text u { text-decoration-color: #facc15; text-underline-offset: 4px; }

.bd-activities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.bd-activity-card {
    background: rgba(30, 41, 59, 0.6);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border: 1px solid rgba(255,255,255,0.05);
}

.bd-activity-card i {
    font-size: 1.8rem;
    color: #facc15;
    margin-top: 2px;
}

/* دورة حياة المشروع (Lifecycle) */
.lc-header {
    text-align: center;
    margin-bottom: 40px;
}

.lc-header h2 { color: #38bdf8; font-size: 2.2rem; margin-bottom: 10px; }
.lc-header h3 { color: #94a3b8; font-size: 1.5rem; margin-bottom: 20px; }
.lc-header p { color: #cbd5e1; font-size: 1.15rem; line-height: 1.7; max-width: 900px; margin: 0 auto 10px auto; }

.lifecycle-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lc-step {
    background: rgba(15, 23, 42, 0.75);
    border-left: 4px solid #38bdf8;
    border-radius: 12px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.lc-step:hover {
    transform: translateX(10px);
    background: rgba(56, 189, 248, 0.1);
}

.lc-step-icon {
    width: 50px;
    height: 50px;
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    font-weight: bold;
}

.lc-step-text {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.6;
}
/* =========================================
   شابتر 4 - القائمة الرابعة (Case Study - Data Science in Banks)
   ========================================= */

.ch4-p4-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* 1. قسم المشكلة والهدف (Hero Section) */
.cs-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.cs-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 6px; height: 100%;
    background: linear-gradient(to bottom, #38bdf8, #facc15, #f43f5e);
}

.cs-title {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.cs-title i { color: #38bdf8; }

.cs-text {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.cs-objective {
    background: rgba(56, 189, 248, 0.1);
    border: 1px dashed #38bdf8;
    padding: 20px;
    border-radius: 12px;
    margin-top: 25px;
    color: #fff;
    font-size: 1.2rem;
}

/* 2. شبكة الأساليب الثلاثة (Approaches Grid) */
.approaches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
}

.approach-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid;
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.approach-card:hover { transform: translateY(-8px); }

.ac-1 { border-color: #facc15; }
.ac-1:hover { box-shadow: 0 10px 30px rgba(250, 204, 21, 0.15); }
.ac-1 h3 i { color: #facc15; }

.ac-2 { border-color: #a855f7; }
.ac-2:hover { box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15); }
.ac-2 h3 i { color: #a855f7; }

.ac-3 { border-color: #10b981; }
.ac-3:hover { box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15); }
.ac-3 h3 i { color: #10b981; }

.approach-card h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.approach-details p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.approach-details strong { color: #fff; }

/* 3. خطوات تطبيق ML (Steps Grid) */
.ml-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 70px;
}

.ml-step-box {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    transition: all 0.3s ease;
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.ml-step-box:hover {
    background: rgba(56, 189, 248, 0.05);
    border-color: rgba(56, 189, 248, 0.4);
    transform: scale(1.02);
}

.step-number {
    position: absolute;
    top: -20px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #38bdf8;
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(56,189,248,0.3);
}

.ml-step-box h3 {
    color: #38bdf8;
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ml-step-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ml-step-box ul li {
    color: #e2e8f0;
    font-size: 1.05rem;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.7;
}

.ml-step-box ul li::before {
    content: '•';
    color: #38bdf8;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px;
}

.ml-step-box ul li ul li::before { content: '◦'; color: #a855f7; }

/* 4. تحليل البيانات (EDA) */
.eda-section {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 70px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

.eda-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.eda-card {
    background: rgba(255,255,255,0.03);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

.eda-card i {
    font-size: 2.2rem;
    color: #f43f5e;
    margin-bottom: 15px;
}

.eda-card h4 { color: #fff; margin-bottom: 10px; font-size: 1.2rem; }
.eda-card p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; }

/* 5. التوصيات النهائية (Recommendations) */
.recom-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    padding: 45px;
    animation: fadeUpAnim 0.8s ease-out 0.8s forwards;
    opacity: 0;
}

.recom-list {
    list-style: none;
    padding: 0; margin: 0 0 30px 0;
}

.recom-list li {
    background: rgba(15, 23, 42, 0.6);
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.6;
}

.recom-list li i { color: #10b981; margin-top: 4px; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .ml-steps-grid { grid-template-columns: 1fr; }
    .eda-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 4 - القائمة الخامسة (Challenges & Animated Market Charts)
   ========================================= */

.ch4-p5-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* ================= 1. شبكة التحديات (Challenges Grid) ================= */
.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.challenge-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 35px 30px 30px 30px;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
}

.challenge-box:hover {
    transform: translateY(-8px);
    background: rgba(30, 41, 59, 0.9);
    border-color: #f43f5e;
    box-shadow: 0 15px 30px rgba(244, 63, 94, 0.2);
}

.ch-number {
    position: absolute;
    top: -20px;
    left: 30px;
    width: 45px; height: 45px;
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(244, 63, 94, 0.4);
}

.challenge-box h3 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.challenge-box p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

/* ================= 2. الرسومات البيانية المتحركة (CSS Charts) ================= */
.charts-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.chart-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: fadeUpAnim 1s ease-out forwards;
    opacity: 0;
}

.chart-title {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* الرسم العمودي (Bar Chart) */
.css-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 300px;
    padding-bottom: 30px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    border-left: 2px solid rgba(255,255,255,0.2);
    padding-left: 10px;
    gap: 5px;
    position: relative;
}

.chart-y-axis {
    position: absolute;
    left: -45px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #94a3b8;
    font-size: 0.85rem;
    padding-bottom: 30px;
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.bar-fill {
    width: 70%;
    background: linear-gradient(to top, #2563eb, #3b82f6);
    border-radius: 4px 4px 0 0;
    animation: growBar 1.5s ease-out forwards;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: filter 0.3s;
}

.bar-group:hover .bar-fill { filter: brightness(1.3); cursor: pointer; }

.bar-label {
    margin-top: 10px;
    color: #94a3b8;
    font-size: 0.75rem;
    transform: rotate(-45deg);
}

@keyframes growBar { to { transform: scaleY(1); } }

/* الرسومات الدائرية (Pie Charts) */
.pie-charts-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.pie-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.css-pie {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: spinIn 1.5s ease-out forwards;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Pie 1: Application (Approximated from image) */
.pie-app {
    background: conic-gradient(
        #3b82f6 0% 30%, 
        #ea580c 30% 45%, 
        #a1a1aa 45% 55%, 
        #eab308 55% 65%, 
        #2563eb 65% 75%, 
        #22c55e 75% 85%, 
        #1e40af 85% 92%, 
        #9a3412 92% 100%
    );
}

/* Pie 2: Component (Approximated from image) */
.pie-comp {
    background: conic-gradient(
        #3b82f6 0% 60%, 
        #84cc16 60% 85%, 
        #06b6d4 85% 100%
    );
}

.pie-legend {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pie-legend li {
    color: #cbd5e1;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-box { width: 15px; height: 15px; border-radius: 3px; }

@keyframes spinIn {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (max-width: 1024px) {
    .pie-charts-container { grid-template-columns: 1fr; }
    .pie-layout { flex-direction: column; }
    .css-bar-chart { height: 200px; }
}
/* =========================================
   شابتر 5 - القائمة الأولى (Network Architectures & Animated SVGs)
   ========================================= */

.ch5-p1-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* ================= 1. قسم الرسمات التفاعلية (Animated Network Diagrams) ================= */
.networks-hero {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.95));
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 50px 30px;
    margin-bottom: 60px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.networks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.network-diagram-box {
    text-align: center;
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.1);
    transition: all 0.4s ease;
}

.network-diagram-box:hover {
    background: rgba(56, 189, 248, 0.05);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

.network-diagram-box h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-top: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* إعدادات الـ SVG والأنيميشن */
.net-svg {
    width: 100%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.svg-line {
    stroke: rgba(56, 189, 248, 0.3);
    stroke-width: 2;
    transition: stroke 0.3s;
}

.svg-line.flow {
    stroke: rgba(56, 189, 248, 0.8);
    stroke-width: 2.5;
    stroke-dasharray: 8 6;
    animation: flowData 1s linear infinite;
}

.svg-node {
    fill: #38bdf8;
    animation: pulseNode 3s infinite alternate;
}

.svg-node-center {
    fill: #facc15;
    filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.8));
    animation: pulseCenter 2s infinite alternate;
}

.svg-node-hub {
    fill: #a855f7;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
    animation: pulseHub 2.5s infinite alternate;
}

@keyframes flowData { to { stroke-dashoffset: -14; } }
@keyframes pulseNode { 
    0% { r: 4; opacity: 0.6; } 
    100% { r: 6; opacity: 1; fill: #fff; } 
}
@keyframes pulseCenter { 
    0% { r: 14; } 
    100% { r: 18; filter: drop-shadow(0 0 25px rgba(250, 204, 21, 1)); } 
}
@keyframes pulseHub { 
    0% { r: 9; } 
    100% { r: 12; filter: drop-shadow(0 0 20px rgba(168, 85, 247, 1)); } 
}

/* ================= 2. بطاقات الشرح والتفاصيل (Content Cards) ================= */
.net-details-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.net-card {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 20px;
    padding: 40px;
    border-left: 5px solid;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
}

.net-card:nth-child(1) { border-color: #facc15; animation-delay: 0.2s; }
.net-card:nth-child(2) { border-color: #a855f7; animation-delay: 0.4s; }
.net-card:nth-child(3) { border-color: #38bdf8; animation-delay: 0.6s; }

.net-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.net-card-header h2 {
    font-size: 2rem;
    color: #fff;
    margin: 0;
}

.example-tag {
    background: rgba(255,255,255,0.1);
    padding: 8px 20px;
    border-radius: 30px;
    color: #cbd5e1;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.example-tag strong { color: #fff; }

.net-description {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.pros-box, .cons-box {
    background: rgba(30, 41, 59, 0.5);
    padding: 25px;
    border-radius: 15px;
}

.pros-box h4 { color: #10b981; font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.cons-box h4 { color: #f43f5e; font-size: 1.2rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

.pros-cons-list { list-style: none; padding: 0; margin: 0; }
.pros-cons-list li {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.pros-list li i { color: #10b981; margin-top: 4px; }
.cons-list li i { color: #f43f5e; margin-top: 4px; }

@media (max-width: 900px) {
    .networks-grid { grid-template-columns: 1fr; }
    .pros-cons-grid { grid-template-columns: 1fr; }
    .net-card-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}
/* =========================================
   شابتر 5 - القائمة الثانية (Blockchain, Hashing & Mining)
   ========================================= */

.ch5-p2-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) بشكل أنيق ومخفي جزئياً */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
    transition: color 0.3s;
}
.cite-tag:hover { color: rgba(56, 189, 248, 0.8); }

/* ================= 1. انيميشن السلسلة (Chain of Blocks) ================= */
.blockchain-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 20px;
    border: 1px dashed rgba(56, 189, 248, 0.4);
    margin: 30px 0 50px 0;
    overflow: hidden;
}

.bc-block {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border: 2px solid #60a5fa;
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    text-align: center;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
    position: relative;
    animation: floatBlock 3s ease-in-out infinite alternate;
}

.bc-block:nth-child(2) { animation-delay: 0.5s; }
.bc-block:nth-child(3) { animation-delay: 1s; }
.bc-block:nth-child(4) { animation-delay: 1.5s; }

.bc-link {
    color: #cbd5e1;
    font-size: 1.5rem;
    animation: linkPulse 2s infinite;
}

@keyframes floatBlock {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes linkPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 1; color: #38bdf8; }
}

.bc-hash-info {
    font-size: 0.8rem;
    background: rgba(0,0,0,0.3);
    padding: 5px 10px;
    border-radius: 6px;
    margin-top: 10px;
}

/* ================= 2. جدول الـ Hashing التفاعلي ================= */
.hashing-demo {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.hash-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 10px;
    transition: transform 0.3s;
}

.hash-row:hover { transform: scale(1.02); border-left: 4px solid #facc15; }

.h-input { background: #06b6d4; color: #000; padding: 10px; border-radius: 6px; font-weight: bold; }
.h-func { background: #facc15; color: #000; padding: 10px; border-radius: 6px; text-align: center; font-size: 0.9rem; }
.h-digest { background: #ec4899; color: #fff; padding: 10px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; letter-spacing: 1px; word-break: break-all; }

/* ================= 3. خطوات العمل (6 Steps Grid) ================= */
.steps-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

.step-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s;
}

.step-card:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
    transform: translateY(-8px);
}

.step-num-badge {
    position: absolute;
    top: -15px; left: 50%;
    transform: translateX(-50%);
    background: #38bdf8;
    color: #0f172a;
    width: 35px; height: 35px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 1.2rem;
    border: 3px solid #0f172a;
}

.step-card i { font-size: 3rem; color: #38bdf8; margin: 20px 0 15px 0; }
.step-card p { color: #e2e8f0; font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ================= 4. كروت المعلومات العامة (Mining, Validation) ================= */
.info-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.info-panel {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border-left: 5px solid #a855f7;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

.info-panel h2 { color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.info-panel h2 i { color: #a855f7; }

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 15px;
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.info-list li i { color: #a855f7; margin-top: 5px; }

/* Principles Section */
.principles-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 30px;
    margin-top: 30px;
}
.principles-box h3 { color: #10b981; margin-bottom: 15px; }
.principles-box p { color: #e2e8f0; line-height: 1.7; font-size: 1.1rem; margin-bottom: 15px; }

@media (max-width: 900px) {
    .steps-timeline { grid-template-columns: 1fr; }
    .info-panels-grid { grid-template-columns: 1fr; }
    .hash-row { grid-template-columns: 1fr; text-align: center; gap: 10px; }
}
/* =========================================
   شابتر 5 - القائمة الثالثة (Public vs Private Blockchain)
   ========================================= */

.ch5-p3-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) الأنيق */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
    transition: color 0.3s;
}
.cite-tag:hover { color: #38bdf8; }

/* ================= 1. Intro & Types ================= */
.intro-glass-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    border-left: 5px solid #38bdf8;
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 50px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.intro-glass-box p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.blockchain-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.bc-type-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    opacity: 0;
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
}

.bc-type-card:hover { transform: translateY(-10px); }

.bc-public { border-top: 4px solid #10b981; }
.bc-public:hover { box-shadow: 0 15px 35px rgba(16, 185, 129, 0.2); }
.bc-public h3 i { color: #10b981; }

.bc-private { border-top: 4px solid #f43f5e; }
.bc-private:hover { box-shadow: 0 15px 35px rgba(244, 63, 94, 0.2); }
.bc-private h3 i { color: #f43f5e; }

.bc-type-card h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bc-type-card p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* ================= 2. Benefits Comparison (VS Layout) ================= */
.benefits-wrapper {
    display: flex;
    gap: 40px;
    margin-bottom: 70px;
    position: relative;
}

.benefits-column {
    flex: 1;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 20px;
    padding: 40px;
    border: 1px dashed rgba(255,255,255,0.1);
    opacity: 0;
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
}

.vs-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #10b981, #f43f5e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    z-index: 5;
    border: 4px solid #0f172a;
}

.benefits-column h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
}
.col-public h2 { color: #10b981; }
.col-private h2 { color: #f43f5e; }

.benefit-list { list-style: none; padding: 0; margin: 0; }
.benefit-list li {
    background: rgba(15, 23, 42, 0.8);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.3s;
}
.benefit-list li:hover { transform: scale(1.02); }

.benefit-list li strong { color: #fff; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.col-public .benefit-list li strong i { color: #10b981; }
.col-private .benefit-list li strong i { color: #f43f5e; }

/* ================= 3. Consensus Models ================= */
.consensus-section {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    opacity: 0;
    animation: fadeUpAnim 0.8s ease-out 0.6s forwards;
}

.consensus-header {
    text-align: center;
    margin-bottom: 40px;
}

.consensus-header h2 { color: #facc15; font-size: 2.2rem; margin-bottom: 15px; }
.consensus-header p { color: #e2e8f0; font-size: 1.15rem; max-width: 900px; margin: 0 auto; line-height: 1.7; }

.models-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.model-card {
    background: rgba(30, 41, 59, 0.6);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s;
}
.model-card:hover { transform: translateY(-5px); background: rgba(30, 41, 59, 0.9); }

.model-pow { border-top: 4px solid #f59e0b; }
.model-poa { border-top: 4px solid #8b5cf6; }

.model-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.model-pow h3 { color: #f59e0b; }
.model-poa h3 { color: #8b5cf6; }

.model-list { list-style: none; padding: 0; margin: 0; }
.model-list li {
    color: #cbd5e1;
    font-size: 1.05rem;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}
.model-pow .model-list li i { color: #f59e0b; margin-top: 5px; }
.model-poa .model-list li i { color: #8b5cf6; margin-top: 5px; }

@media (max-width: 1024px) {
    .blockchain-types-grid, .benefits-wrapper, .models-grid { grid-template-columns: 1fr; flex-direction: column; }
    .vs-badge { display: none; }
}
/* =========================================
   شابتر 5 - القائمة الرابعة (Crypto, Bitcoin & Transactions)
   ========================================= */

.ch5-p4-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) الأنيق */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
}

/* ================= 1. Intro & Table (Fiat vs Crypto) ================= */
.crypto-intro {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 30px;
    border-left: 5px solid #38bdf8;
    margin-bottom: 50px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.crypto-intro p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-bottom: 60px;
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.crypto-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.crypto-table th {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
    color: #fff;
    padding: 20px;
    font-size: 1.4rem;
    text-align: center;
}

.crypto-table td {
    padding: 20px;
    color: #cbd5e1;
    font-size: 1.1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background 0.3s;
}

.crypto-table tr:hover td { background: rgba(56, 189, 248, 0.1); }
.crypto-table tr:last-child td { border-bottom: none; }
.crypto-table td:first-child { border-right: 1px solid rgba(255,255,255,0.05); font-weight: bold; color: #f8fafc; }

/* ================= 2. Bitcoin Hero Section ================= */
.bitcoin-hero {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.btc-icon-wrapper {
    flex-shrink: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, #f59e0b, #d97706);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: #fff;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.6);
    animation: floatBlock 3s ease-in-out infinite alternate;
}

.btc-details h2 { color: #f59e0b; font-size: 2.2rem; margin-bottom: 15px; }
.btc-details p { color: #e2e8f0; font-size: 1.15rem; margin-bottom: 20px; }
.btc-list { list-style: none; padding: 0; margin: 0; }
.btc-list li { color: #cbd5e1; font-size: 1.1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.btc-list li i { color: #f59e0b; }

/* ================= 3. Transactions Workflow ================= */
.workflow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.trad-workflow {
    background: rgba(225, 29, 72, 0.1);
    border-left: 5px solid #e11d48;
    padding: 30px;
    border-radius: 16px;
    animation: fadeUpAnim 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

.trad-workflow h3 { color: #e11d48; font-size: 1.6rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px;}
.trad-workflow ul { list-style: none; padding: 0; }
.trad-workflow ul li { color: #cbd5e1; font-size: 1.1rem; margin-bottom: 15px; display: flex; gap: 10px; }
.trad-workflow ul li i { color: #e11d48; margin-top: 4px; }

/* رحلة حوالة البتكوين (The Animated BTC Journey) */
.btc-journey-container {
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    animation: fadeUpAnim 0.8s ease-out 0.8s forwards;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.btc-journey-title {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.btc-journey-subtitle {
    text-align: center;
    color: #f59e0b;
    font-size: 1.1rem;
    margin-bottom: 40px;
    background: rgba(245, 158, 11, 0.1);
    padding: 10px;
    border-radius: 8px;
}

.journey-path {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    position: relative;
}

.j-step {
    width: 180px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    position: relative;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.j-step:hover { transform: translateY(-5px); border-color: #f59e0b; background: rgba(245, 158, 11, 0.1); }

.j-icon {
    width: 60px; height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #f59e0b;
    margin-bottom: 15px;
}
.j-step:hover .j-icon { background: #f59e0b; color: #fff; box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }

.j-text {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.4;
}

.j-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #f59e0b;
    animation: slideRight 1.5s infinite;
}

@keyframes slideRight {
    0% { transform: translateX(-5px); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
    100% { transform: translateX(-5px); opacity: 0.5; }
}

@media (max-width: 1024px) {
    .bitcoin-hero { flex-direction: column; text-align: center; }
    .journey-path { flex-direction: column; align-items: center; }
    .j-arrow { transform: rotate(90deg); animation: slideDown 1.5s infinite; margin: 10px 0; }
    @keyframes slideDown { 0% { transform: translateY(-5px) rotate(90deg); opacity: 0.5; } 50% { transform: translateY(5px) rotate(90deg); opacity: 1; } 100% { transform: translateY(-5px) rotate(90deg); opacity: 0.5; } }
}
/* =========================================
   شابتر 5 - القائمة الخامسة (Smart Contracts & Ethereum)
   ========================================= */

.ch5-p5-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* ================= 1. What is Smart Contract? ================= */
.sc-intro-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.sc-intro-list {
    list-style: none;
    padding: 0; margin: 0;
}

.sc-intro-list li {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.sc-intro-list li i { color: #10b981; margin-top: 6px; font-size: 1.1rem; }
.sc-intro-list li strong { color: #10b981; }

/* ================= 2. Ethereum & Code Block ================= */
.ethereum-section {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 70px;
    border-left: 5px solid #8b5cf6;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.eth-text {
    color: #cbd5e1;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.eth-text i { color: #8b5cf6; margin-top: 6px; }

/* Code terminal style for comparisons */
.code-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.code-terminal {
    background: #020617;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    overflow: hidden;
}

.code-terminal::before {
    content: 'Terminal';
    position: absolute;
    top: 0; left: 0; width: 100%;
    background: rgba(255,255,255,0.1);
    padding: 5px 15px;
    font-size: 0.8rem;
    color: #94a3b8;
    font-family: sans-serif;
}

.term-btc { border-top: 3px solid #f59e0b; }
.term-eth { border-top: 3px solid #8b5cf6; }

.term-content {
    margin-top: 20px;
    color: #10b981;
    font-size: 1.05rem;
    line-height: 1.6;
}
.term-btc .term-content { color: #facc15; }
.term-eth .term-content { color: #c084fc; }

/* ================= 3. How Smart Contracts Work (Mind-Blowing Animation) ================= */
.sc-workflow-container {
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9), #020617);
    border: 2px solid rgba(244, 63, 94, 0.4);
    border-radius: 24px;
    padding: 50px 30px;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
    opacity: 0;
    overflow: hidden;
}

.sc-workflow-title {
    text-align: center;
    color: #f43f5e;
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(244, 63, 94, 0.5);
}

.sc-workflow-subtitle {
    text-align: center;
    color: #cbd5e1;
    font-size: 1.2rem;
    margin-bottom: 60px;
    letter-spacing: 5px;
}

.pipeline-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}

/* الخط المضيء المتحرك في الخلفية */
.pipeline-track::before {
    content: '';
    position: absolute;
    top: 45px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    z-index: 1;
}

.pipeline-track::after {
    content: '';
    position: absolute;
    top: 45px;
    left: 10%;
    width: 80%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #f43f5e, #38bdf8, transparent);
    background-size: 200% 100%;
    animation: dataFlowAnim 2s linear infinite;
    z-index: 2;
}

@keyframes dataFlowAnim {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.pipeline-node {
    text-align: center;
    position: relative;
    z-index: 5;
}

.node-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px auto;
    background: #0f172a;
    border: 3px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pipeline-node:hover .node-icon { transform: scale(1.1); }

.node-1 .node-icon { border-color: #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
.node-2 .node-icon { border-color: #eab308; box-shadow: 0 0 20px rgba(234, 179, 8, 0.6); }
.node-3 .node-icon { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); }
.node-4 .node-icon { border-color: #10b981; box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }

.node-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 5px;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
}
.node-1 .node-title { color: #3b82f6; }
.node-2 .node-title { color: #eab308; }
.node-3 .node-title { color: #8b5cf6; }
.node-4 .node-title { color: #10b981; }

.node-text {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
}

@media (max-width: 1024px) {
    .pipeline-track { grid-template-columns: 1fr; gap: 40px; }
    .pipeline-track::before, .pipeline-track::after { display: none; }
    .code-compare-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 6 - القائمة الأولى (Crowdfunding)
   ========================================= */

.ch6-p1-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) */
.cite-tag {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 5px;
    font-style: italic;
}

/* ================= 1. Intro Sections ================= */
.cf-intro-box {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(15, 23, 42, 0.9));
    border-left: 5px solid #ea580c;
    border-radius: 16px;
    padding: 35px;
    margin-bottom: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.cf-intro-box p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* ================= 2. Animated Diagrams (Traditional vs Crowdfunding) ================= */
.funding-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 70px;
}

.funding-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.funding-card h3 {
    color: #ea580c;
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.funding-card p {
    color: #cbd5e1;
    font-size: 1rem;
    margin-top: 30px;
    font-weight: bold;
}

/* الرسمة المبرمجة - Traditional */
.anim-traditional {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 120px;
}

.anim-traditional i.bank { font-size: 4rem; color: #94a3b8; }
.anim-traditional i.arrow { font-size: 3rem; color: #3b82f6; animation: slideArrow 1.5s infinite; }
.anim-traditional i.money { font-size: 4rem; color: #3b82f6; }

@keyframes slideArrow {
    0% { transform: translateX(-10px); opacity: 0.5; }
    50% { transform: translateX(10px); opacity: 1; }
    100% { transform: translateX(-10px); opacity: 0.5; }
}

/* الرسمة المبرمجة - Crowdfunding */
.anim-crowd {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 120px;
}

.crowd-center {
    font-size: 4rem;
    color: #3b82f6;
    position: relative;
    z-index: 5;
    animation: pulseIcon 2s infinite;
}

.crowd-users {
    position: absolute;
    width: 100%;
    height: 100%;
}

.c-user {
    position: absolute;
    color: #94a3b8;
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-user i.fa-user { margin-bottom: 5px; }
.c-user i.fa-arrow-right { font-size: 1rem; color: #3b82f6; }

/* توزيع المستخدمين حول المركز */
.c-user:nth-child(1) { top: 0; left: 10%; transform: rotate(45deg); }
.c-user:nth-child(1) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.1s; }

.c-user:nth-child(2) { top: 50%; left: 0; transform: translateY(-50%); }
.c-user:nth-child(2) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.3s; }

.c-user:nth-child(3) { bottom: 0; left: 10%; transform: rotate(-45deg); }
.c-user:nth-child(3) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.5s; }

.c-user:nth-child(4) { top: 0; right: 10%; transform: rotate(135deg); }
.c-user:nth-child(4) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.2s; }

.c-user:nth-child(5) { top: 50%; right: 0; transform: translateY(-50%) rotate(180deg); }
.c-user:nth-child(5) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.4s; }

.c-user:nth-child(6) { bottom: 0; right: 10%; transform: rotate(-135deg); }
.c-user:nth-child(6) i.fa-arrow-right { animation: flyToCenter 1.5s infinite 0.6s; }

@keyframes flyToCenter {
    0% { transform: translateX(-15px); opacity: 0; }
    50% { transform: translateX(5px); opacity: 1; }
    100% { transform: translateX(15px); opacity: 0; }
}

/* ================= 3. How Does it Work (10 Steps) ================= */
.cf-steps-wrapper {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.steps-timeline-10 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.cf-step-card {
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    padding: 20px 15px;
    text-align: center;
    border-top: 4px solid #ea580c;
    position: relative;
    transition: transform 0.3s;
}

.cf-step-card:hover { transform: translateY(-5px); background: rgba(234, 88, 12, 0.1); }

.cf-step-num {
    background: #ea580c;
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    margin: -35px auto 15px auto;
    box-shadow: 0 5px 10px rgba(234, 88, 12, 0.4);
}

.cf-step-card i {
    font-size: 2rem;
    color: #ea580c;
    margin-bottom: 15px;
}

.cf-step-card p {
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .funding-compare-grid { grid-template-columns: 1fr; }
    .steps-timeline-10 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .steps-timeline-10 { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 6 - القائمة الثانية (Crowdfunding Types & Animated Diagrams)
   ========================================= */

.ch6-p2-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
    transition: color 0.3s;
}
.cite-tag:hover { color: #ea580c; }

/* ================= 1. How it works Box ================= */
.cf-details-box {
    background: rgba(15, 23, 42, 0.75);
    border-radius: 16px;
    padding: 35px;
    border-left: 5px solid #ea580c;
    margin-bottom: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.cf-details-list { list-style: none; padding: 0; margin: 0; }
.cf-details-list li {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.cf-details-list li i { color: #ea580c; margin-top: 6px; }

/* ================= 2. Types Grid & P2P Animation ================= */
.type-section {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.type-header {
    color: #ea580c;
    font-size: 1.8rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* P2P Animated Diagram */
.p2p-diagram-container {
    background: #f0fdfa; /* لون فاتح مشابه للصورة */
    border-radius: 20px;
    padding: 40px;
    position: relative;
    margin-top: 40px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.p2p-title {
    text-align: center;
    color: #0f766e;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 40px;
}
.p2p-title i { color: #10b981; }

.p2p-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 0;
}

.p2p-entity {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.p2p-entity i {
    font-size: 4rem;
    margin-bottom: 10px;
}

.entity-borrower i { color: #0d9488; }
.entity-platform i { color: #0f172a; }
.entity-lender i { color: #ea580c; }
.p2p-entity span { color: #0f172a; font-weight: bold; font-size: 1.1rem; }

/* SVG Arrows for P2P */
.p2p-svg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.p2p-path {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 4;
}

.p2p-path-animated {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 4;
    stroke-dasharray: 10 10;
    animation: p2pFlow 1.5s linear infinite;
}

.p2p-fee-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0f172a;
    font-weight: bold;
    position: absolute;
}
.fee-left { left: 25%; top: 50%; transform: translateY(-50%); }
.fee-right { right: 25%; top: 50%; transform: translateY(-50%); }
.p2p-fee-arrow i { color: #f59e0b; font-size: 2rem; margin-top: 5px; animation: slideSmall 1s infinite alternate; }

.p2p-label-top { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); color: #0f172a; font-weight: bold; }
.p2p-label-bottom { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); color: #0f172a; font-weight: bold; }

@keyframes p2pFlow { to { stroke-dashoffset: -20; } }
@keyframes slideSmall { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* ================= 3. Equity Flow Animation ================= */
.equity-flow {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
    padding-left: 20px;
    border-left: 3px dashed #10b981;
    position: relative;
}

.eq-step {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.eq-step::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
    animation: pulseIcon 2s infinite;
}

.eq-icon {
    width: 60px; height: 60px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #10b981;
}

.eq-text { color: #cbd5e1; font-size: 1.1rem; line-height: 1.6; }

/* ================= 4. Other Types ================= */
.other-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ot-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 16px;
    padding: 30px;
    border-top: 4px solid;
    transition: transform 0.3s;
}
.ot-card:hover { transform: translateY(-5px); }

.ot-reward { border-color: #eab308; }
.ot-donation { border-color: #ec4899; }

.ot-card h3 { font-size: 1.4rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.ot-reward h3 { color: #eab308; }
.ot-donation h3 { color: #ec4899; }
.ot-card p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.7; }

@media (max-width: 900px) {
    .p2p-layout { flex-direction: column; gap: 60px; padding: 20px 0; }
    .p2p-svg-layer { display: none; } /* Hide complex SVG on mobile for simplicity */
    .other-types-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 6 - القائمة الثالثة (SWOT Analysis)
   ========================================= */

.ch6-p3-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* ================= SWOT Grid Layout ================= */
.swot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 70px;
}

.swot-card {
    background: rgba(15, 23, 42, 0.7);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.swot-card:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

/* 1. Strengths (Green) */
.swot-strengths {
    border-top: 5px solid #10b981;
    animation: fadeUpAnim 0.8s ease-out 0.1s forwards;
}
.swot-strengths:hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); border-color: #34d399; }
.swot-strengths h2 { color: #10b981; }
.swot-strengths .swot-list li i { color: #10b981; }

/* 2. Weaknesses (Red) */
.swot-weaknesses {
    border-top: 5px solid #f43f5e;
    animation: fadeUpAnim 0.8s ease-out 0.3s forwards;
}
.swot-weaknesses:hover { box-shadow: 0 20px 40px rgba(244, 63, 94, 0.2); border-color: #fb7185; }
.swot-weaknesses h2 { color: #f43f5e; }
.swot-weaknesses .swot-list li i { color: #f43f5e; }

/* 3. Opportunities (Blue) */
.swot-opportunities {
    border-top: 5px solid #38bdf8;
    animation: fadeUpAnim 0.8s ease-out 0.5s forwards;
}
.swot-opportunities:hover { box-shadow: 0 20px 40px rgba(56, 189, 248, 0.2); border-color: #7dd3fc; }
.swot-opportunities h2 { color: #38bdf8; }
.swot-opportunities .swot-list li i { color: #38bdf8; }

/* 4. Threats (Orange) */
.swot-threats {
    border-top: 5px solid #f59e0b;
    animation: fadeUpAnim 0.8s ease-out 0.7s forwards;
}
.swot-threats:hover { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2); border-color: #fbbf24; }
.swot-threats h2 { color: #f59e0b; }
.swot-threats .swot-list li i { color: #f59e0b; }

/* Header & Icon Styling */
.swot-card h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.swot-bg-icon {
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 6rem;
    opacity: 0.05;
    z-index: 0;
    transition: opacity 0.4s, transform 0.4s;
}
.swot-card:hover .swot-bg-icon { opacity: 0.15; transform: scale(1.1) rotate(10deg); }

/* List Styling */
.swot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.swot-list li {
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s;
}
.swot-list li:hover { background: rgba(255,255,255,0.08); }
.swot-list li i { margin-top: 5px; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .swot-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 6 - القائمة الرابعة (Robo-Advisor - AI Tech Theme)
   ========================================= */

.ch6-p4-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق (Citations) الأنيق والمخفي جزئياً */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.25);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
    transition: color 0.3s;
}
.cite-tag:hover { color: #06b6d4; }

/* ================= 1. Hero & Definition ================= */
.robo-hero {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(8, 145, 178, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 20px;
    padding: 45px;
    margin-bottom: 60px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.robo-hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1), transparent 70%);
    border-radius: 50%;
    animation: pulseCenter 4s infinite alternate;
}

.robo-title {
    color: #06b6d4;
    font-size: 2.8rem;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.robo-text {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

/* ================= 2. Animated AI Goals Network ================= */
.robo-network-container {
    background: #020617;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 50px 20px;
    margin-bottom: 60px;
    position: relative;
    box-shadow: inset 0 0 50px rgba(6, 182, 212, 0.1);
    animation: fadeUpAnim 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

.ai-brain-center {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    background: rgba(6, 182, 212, 0.1);
    border: 3px solid #06b6d4;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #06b6d4;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
    animation: floatBlock 3s infinite alternate, pulseCenter 2s infinite alternate;
    position: relative;
    z-index: 10;
}

.ai-goals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
    position: relative;
}

/* خطوط نقل البيانات المتحركة */
.ai-data-line {
    position: absolute;
    top: -50px;
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, transparent, #06b6d4, transparent);
    background-size: 100% 200%;
    animation: dataStream 1.5s linear infinite;
    z-index: 1;
}

.line-1 { left: 12.5%; }
.line-2 { left: 37.5%; animation-delay: 0.3s; }
.line-3 { left: 62.5%; animation-delay: 0.6s; }
.line-4 { left: 87.5%; animation-delay: 0.9s; }

@keyframes dataStream { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } }

.ai-goal-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    transition: transform 0.3s, border-color 0.3s;
    position: relative;
    z-index: 5;
}

.ai-goal-card:hover { transform: translateY(-10px); border-color: #10b981; }

.ai-goal-card i { font-size: 2.5rem; color: #10b981; margin-bottom: 15px; }
.ai-goal-card h4 { color: #fff; font-size: 1.1rem; margin: 0; }

/* ================= 3. Algorithm Terminal & Benefits ================= */
.tech-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.algo-terminal {
    background: #0f172a;
    border-radius: 16px;
    border-left: 5px solid #8b5cf6;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    animation: fadeUpAnim 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.algo-terminal h3 { color: #8b5cf6; font-size: 1.6rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.algo-terminal p { color: #cbd5e1; font-size: 1.1rem; line-height: 1.8; margin-bottom: 15px; }
.algo-terminal strong { color: #fff; }

.benefits-glowing-list {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 30px;
    animation: fadeUpAnim 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

.benefits-glowing-list h3 { color: #facc15; font-size: 1.6rem; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }

.b-list { list-style: none; padding: 0; margin: 0; }
.b-list li {
    background: rgba(255,255,255,0.03);
    border-left: 3px solid #facc15;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s;
}
.b-list li:hover { background: rgba(250, 204, 21, 0.1); transform: translateX(10px); }
.b-list li i { color: #facc15; font-size: 1.2rem; }

@media (max-width: 1024px) {
    .ai-goals-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .tech-split-grid { grid-template-columns: 1fr; }
    .line-1 { left: 25%; } .line-2 { left: 75%; }
    .line-3 { left: 25%; top: 150px; } .line-4 { left: 75%; top: 150px; }
}
/* =========================================
   شابتر 7 - القائمة الأولى (Introduction to RegTech)
   ========================================= */

.ch7-p1-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* التوثيق (Citations) */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
    transition: color 0.3s;
}
.cite-tag:hover { color: #8b5cf6; }

/* ================= 1. Definition Box ================= */
.regtech-def-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(15, 23, 42, 0.9));
    border-left: 5px solid #8b5cf6;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.regtech-def-box p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 15px;
}
.regtech-def-box strong { color: #8b5cf6; font-size: 1.25rem; }

/* ================= 2. Why is RegTech Important? ================= */
.importance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
}

.importance-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
}

.importance-card:nth-child(1) { animation-delay: 0.2s; border-top: 4px solid #f43f5e; }
.importance-card:nth-child(2) { animation-delay: 0.4s; border-top: 4px solid #facc15; }
.importance-card:nth-child(3) { animation-delay: 0.6s; border-top: 4px solid #10b981; }

.importance-card:hover {
    transform: translateY(-10px);
    background: rgba(30, 41, 59, 0.9);
}
.importance-card:nth-child(1):hover { box-shadow: 0 15px 30px rgba(244, 63, 94, 0.2); }
.importance-card:nth-child(2):hover { box-shadow: 0 15px 30px rgba(250, 204, 21, 0.2); }
.importance-card:nth-child(3):hover { box-shadow: 0 15px 30px rgba(16, 185, 129, 0.2); }

.importance-card i {
    font-size: 3rem;
    margin-bottom: 20px;
    display: inline-block;
}
.importance-card:nth-child(1) i { color: #f43f5e; }
.importance-card:nth-child(2) i { color: #facc15; }
.importance-card:nth-child(3) i { color: #10b981; }

.importance-card p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ================= 3. Core Functions ================= */
.core-func-wrapper {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    margin-bottom: 60px;
    animation: fadeUpAnim 0.8s ease-out 0.8s forwards;
    opacity: 0;
}

.core-func-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.func-card {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 25px;
    border: 1px dashed rgba(139, 92, 246, 0.3);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.func-card:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
    transform: scale(1.03);
}

.func-card h3 {
    color: #c084fc;
    font-size: 1.3rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.func-card p { color: #e2e8f0; font-size: 1rem; line-height: 1.6; }

/* ================= 4. The Need for RegTech ================= */
.need-section {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.9));
    border-left: 5px solid #ef4444;
    border-radius: 16px;
    padding: 40px;
    animation: fadeUpAnim 0.8s ease-out 1s forwards;
    opacity: 0;
}

.need-list { list-style: none; padding: 0; margin: 0; }
.need-list li {
    background: rgba(15, 23, 42, 0.6);
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 10px;
    color: #cbd5e1;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(239, 68, 68, 0.1);
    transition: transform 0.3s;
}
.need-list li:hover { transform: translateX(10px); border-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.need-list li i { color: #ef4444; font-size: 1.4rem; }

@media (max-width: 900px) {
    .core-func-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 7 - القائمة الثانية (Key Technologies & Applications)
   ========================================= */

.ch7-p2-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* تنسيق التوثيق */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
}

/* شبكة التقنيات والتطبيقات */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
}

.tech-box {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    backdrop-filter: blur(12px);
    transition: all 0.4s ease;
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
    border-top: 5px solid #8b5cf6;
}

.tech-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
    border-color: #c084fc;
}

.tech-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.tech-icon {
    width: 60px; height: 60px;
    background: rgba(139, 92, 246, 0.15);
    color: #c084fc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.tech-header h3 {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
}

.tech-content ul {
    list-style: none;
    padding: 0; margin: 0;
}

.tech-content ul li {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tech-content ul li i { color: #8b5cf6; margin-top: 5px; }

@media (max-width: 900px) {
    .tech-grid { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 7 - القائمة الثالثة (Challenges & Future of RegTech)
   ========================================= */

.ch7-p3-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* التوثيق */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
}

/* شبكة التحديات (Challenges Grid) */
.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 70px;
}

.chal-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
    border-top: 4px solid #f43f5e;
}

.chal-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(244, 63, 94, 0.2);
    border-color: #fb7185;
}

.chal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.chal-icon {
    width: 50px; height: 50px;
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}

.chal-header h3 { color: #fff; font-size: 1.25rem; margin: 0; }

.chal-body ul { list-style: none; padding: 0; margin: 0; }
.chal-body ul li {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.chal-body ul li i { color: #f43f5e; margin-top: 4px; }

/* مستقبل RegTech (Future Section) */
.future-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.future-box {
    background: rgba(30, 41, 59, 0.7);
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
    border-top: 5px solid;
}

.future-trends { border-color: #38bdf8; animation-delay: 0.5s; }
.future-trends:hover { box-shadow: 0 20px 40px rgba(56, 189, 248, 0.2); }
.future-trends h2 { color: #38bdf8; }

.future-opps { border-color: #10b981; animation-delay: 0.7s; }
.future-opps:hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); }
.future-opps h2 { color: #10b981; }

.future-box h2 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.future-list { list-style: none; padding: 0; margin: 0; }
.future-list li {
    color: #e2e8f0;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: rgba(255,255,255,0.03);
    padding: 15px;
    border-radius: 12px;
    transition: background 0.3s;
}
.future-list li:hover { background: rgba(255,255,255,0.08); }
.future-trends .future-list li i { color: #38bdf8; margin-top: 5px; }
.future-opps .future-list li i { color: #10b981; margin-top: 5px; }

@media (max-width: 1024px) {
    .future-wrapper { grid-template-columns: 1fr; }
}
/* =========================================
   شابتر 7 - القائمة الرابعة والأخيرة (InsurTech & Grand Finale)
   ========================================= */

.ch7-p4-container {
    max-width: 1400px;
    margin: 40px auto;
    direction: ltr;
    padding: 0 20px;
}

/* التوثيق العلمي */
.cite-tag {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.2);
    margin-left: 5px;
    vertical-align: super;
    font-style: italic;
}

/* ================= 1. InsurTech Intro ================= */
.insur-intro {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(14, 165, 233, 0.4);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: fadeUpAnim 0.8s ease-out forwards;
}

.insur-intro p {
    color: #e2e8f0;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.insur-intro p:last-child { margin-bottom: 0; }

/* ================= 2. Key Features & Benefits (Cards Grid) ================= */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 70px;
}

.feat-card {
    background: rgba(30, 41, 59, 0.7);
    border-radius: 20px;
    padding: 35px;
    position: relative;
    backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeUpAnim 0.8s ease-out forwards;
    opacity: 0;
    border-top: 5px solid;
}

.feat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.fc-1 { border-color: #38bdf8; animation-delay: 0.1s; }
.fc-1:hover { box-shadow: 0 20px 40px rgba(56, 189, 248, 0.2); }
.fc-1 .fc-icon { color: #38bdf8; background: rgba(56,189,248,0.15); }

.fc-2 { border-color: #a855f7; animation-delay: 0.2s; }
.fc-2:hover { box-shadow: 0 20px 40px rgba(168, 85, 247, 0.2); }
.fc-2 .fc-icon { color: #a855f7; background: rgba(168,85,247,0.15); }

.fc-3 { border-color: #10b981; animation-delay: 0.3s; }
.fc-3:hover { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2); }
.fc-3 .fc-icon { color: #10b981; background: rgba(16,185,129,0.15); }

.fc-4 { border-color: #f59e0b; animation-delay: 0.4s; }
.fc-4:hover { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2); }
.fc-4 .fc-icon { color: #f59e0b; background: rgba(245,158,11,0.15); }

.fc-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.fc-icon {
    width: 55px; height: 55px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}

.fc-header h3 { color: #fff; font-size: 1.35rem; margin: 0; }

.fc-sublist { list-style: none; padding: 0; margin: 0; }
.fc-sublist li {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}
.fc-sublist li strong { color: #f8fafc; display: block; margin-bottom: 3px; }

/* ================= 3. Applications of InsurTech ================= */
.apps-wrapper {
    background: rgba(15, 23, 42, 0.85);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 80px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    animation: fadeUpAnim 0.8s ease-out 0.5s forwards;
    opacity: 0;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.app-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s;
}
.app-item:hover {
    background: rgba(14, 165, 233, 0.1);
    border-color: #0ea5e9;
    transform: translateY(-5px);
}
.app-item i { font-size: 2.5rem; color: #0ea5e9; margin-bottom: 15px; }
.app-item h4 { color: #fff; font-size: 1.2rem; margin: 0; }

/* ================= 4. Grand Finale Completion Badge (ختام المادة الأسطوري) ================= */
.grand-finale-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));
    border: 2px solid #10b981;
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(16, 185, 129, 0.3);
    animation: fadeUpAnim 1s ease-out 0.6s forwards;
    opacity: 0;
    margin-top: 60px;
}

.grand-finale-banner::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: rotateGlow 10s linear infinite;
}

@keyframes rotateGlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.gf-icon {
    font-size: 4rem;
    color: #10b981;
    margin-bottom: 20px;
    animation: bounceIcon 2s infinite;
}

@keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.gf-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.gf-desc {
    color: #e2e8f0;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
}

.gf-badge {
    display: inline-block;
    background: #10b981;
    color: #0f172a;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4);
}

@media (max-width: 1024px) {
    .apps-grid { grid-template-columns: 1fr; }
}
/* =========================================
   تعديلات وتحسينات التلفون الشاملة (Mobile Responsive)
   ========================================= */

@media (max-width: 768px) {
    /* ضبط الهوامش العامة للمحتوى على الشاشات الصغيرة */
    .content {
        padding-top: 80px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ضبط شريط المنيو العلوي ليناسب الموبايل */
    .top-navbar {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
        height: auto;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .nav-links a {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .back-btn-nav {
        font-size: 0.85rem;
        padding: 5px 10px;
    }

    /* العناوين الرئيسية */
    .section-title-glow, .robo-title, .sc-workflow-title, .btc-journey-title {
        font-size: 1.5rem !important;
        letter-spacing: 1px !important;
        text-align: center;
    }

    /* تحويل كل الشبكات (Grids) إلى عمود واحد */
    .networks-grid,
    .pros-cons-grid,
    .steps-timeline,
    .info-panels-grid,
    .blockchain-types-grid,
    .models-grid,
    .funding-compare-grid,
    .steps-timeline-10,
    .other-types-grid,
    .swot-grid,
    .ai-goals-grid,
    .tech-split-grid,
    .challenges-grid,
    .future-wrapper,
    .features-grid,
    .apps-grid,
    .core-func-grid,
    .importance-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* جداول المقارنة لتكون قابلة للتمرير الأفقي بدون أن تكسر التصميم */
    .comparison-table-wrapper, .crypto-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* تصغير الكروت واللوحات لتتطاير بسلاسة مع الشاشة */
    .net-card, .info-panel, .bc-type-card, .model-card, .crypto-intro, 
    .bitcoin-hero, .btc-journey-container, .sc-intro-box, .ethereum-section, 
    .sc-workflow-container, .cf-intro-box, .funding-card, .cf-steps-wrapper, 
    .type-section, .ot-card, .swot-card, .robo-hero, .robo-network-container, 
    .algo-terminal, .benefits-glowing-list, .regtech-def-box, .importance-card, 
    .core-func-wrapper, .need-section, .tech-box, .chal-card, .future-box, 
    .insur-intro, .feat-card, .apps-wrapper, .grand-finale-banner {
        padding: 20px 15px !important;
    }

    /* إخفاء أو تصغير الرسوم الكبيرة والمعقدة أفقياً لترتيب المحتوى عمودياً */
    .pipeline-track {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .pipeline-track::before, .pipeline-track::after {
        display: none;
    }

    /* تصغير النصوص الطويلة والكود داخل التيرمينال */
    .code-compare-grid {
        grid-template-columns: 1fr !important;
    }
    .code-terminal {
        font-size: 0.8rem !important;
        padding: 15px !important;
    }
}
/* =========================================
   إصلاح رسمة P2P (تعديل اللون وفك التداخل)
   ========================================= */

/* 1. تحويل الخلفية للون داكن فخم مع حدود برتقالية خفيفة */
.p2p-diagram-container {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(234, 88, 12, 0.3) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}

/* 2. تعديل لون العنوان وتكبير المسافة تحته عشان ما يدعس عليه النص */
.p2p-title {
    color: #ea580c !important;
    margin-bottom: 70px !important;
}

/* 3. تنزيل النص المتداخل لتحت وتعديل لونه للأبيض */
.p2p-label-top { 
    top: 100px !important; 
    color: #fff !important; 
}

/* 4. تعديل لون النص اللي تحت للأبيض */
.p2p-label-bottom { 
    color: #fff !important; 
}

/* 5. تعديل ألوان الكلمات (المقرض والمقترض) لتصير فاتحة ومقروءة */
.p2p-entity span { 
    color: #cbd5e1 !important; 
    margin-top: 10px;
}

/* 6. تعديل لون أيقونة اللابتوب بالنص والرسوم */
.entity-platform i { color: #38bdf8 !important; }
.p2p-fee-arrow { color: #cbd5e1 !important; }
html {
    background-color: #0f172a; /* لون كحلي فخم بيعبي أي مساحة فاضية تحت */
}

body {
    background-attachment: fixed; /* بخلي الخلفية ثابتة وممتدة بدون ما تأثر عالطول */
}
/* تثبيت خلفية الشباتر وتمديدها بدون مشاكل السكرول */
body {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    min-height: 100vh;
}
/* =========================================
   تمديد الخلفية لكل شابتر (مع الاحتفاظ بلونه الأصلي)
   ========================================= */

html {
    height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    
    /* هدول الأسطر بثبتوا أي خلفية إنت حاططها (مهما كان لونها) وبخلوها تمتد لتحت */
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    
    /* هاد السطر بيقتل الشريط الثاني المزعج */
    overflow-y: visible !important; 
}
/* =========================================
   تصغير خط وحجم الروابط في شريط التنقل العلوي
   ========================================= */
.top-navbar .nav-links a {
    font-size: 1.95rem !important; /* تصغير حجم الخط ليصبح أنعم وأرتب */
    padding: 6px 12px !important;    /* تصغير المسافات الداخلية لتتناسب مع طول الكلمات */
}
/* =========================================
   التجاوب الذكي مع الشاشات الصغيرة والتلفونات
   ========================================= */
@media screen and (max-width: 768px) {
    /* تصغير العناوين الرئيسية على التلفون لتناسب الشاشة */
    .chapter-header h1 {
        font-size: 1.5rem !important;
    }
    
    /* جعل المربعات والكروت تأخذ عرض الشاشة بالكامل وبدون زحمة */
    .pro-card, .highlight-box, .spectrum-box {
        padding: 15px !important;
        margin: 10px 5px !important;
        width: 100% !important;
    }
    
    /* ضبط حجم خط النصوص لتكون مقروءة وواضحة على الموبايل */
    p, li, span {
        font-size: 0.95rem !important;
    }
}
/* إخفاء شارة نتلافي نهائياً من أي زاوية */
iframe[id^="netlify"], div[style*="z-index: 2147483647"], a[href*="netlify.com/support"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* --- Horizontal FINTECH TIMELINE (Blue Theme & Centered) --- */
.horizontal-timeline-wrapper {
    max-width: 900px; /* صغرنا العرض شوي عشان تيجي سنتر وفوق المربع بالضبط */
    margin: 40px auto 60px auto; 
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 40px 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden; 
}

.hz-timeline-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 20px;
}

.hz-line {
    position: absolute;
    top: 85px; 
    left: 5%;
    height: 4px;
    /* الخط لونه أزرق فخم متناسق مع الموقع */
    background: linear-gradient(90deg, transparent, #38bdf8 10%, #38bdf8 90%, transparent);
    z-index: 1;
    width: 0; 
    animation: drawLine 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hz-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 5px;
    
    opacity: 0;
    transform: translateY(30px);
    animation: popUpItem 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* تأخير الانيميشن */
.hz-item:nth-child(2) { animation-delay: 0.3s; }
.hz-item:nth-child(3) { animation-delay: 0.6s; }
.hz-item:nth-child(4) { animation-delay: 0.9s; }
.hz-item:nth-child(5) { animation-delay: 1.2s; }
.hz-item:nth-child(6) { animation-delay: 1.5s; }
.hz-item:nth-child(7) { animation-delay: 1.8s; }

.hz-year {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff; 
    margin-bottom: 25px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: color 0.3s ease;
}

.hz-dot {
    width: 22px;
    height: 22px;
    background-color: #1e293b;
    border: 4px solid #94a3b8;
    border-radius: 50%;
    margin-bottom: 25px;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hz-text {
    font-size: 0.8rem;
    color: #cbd5e1;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* ==== تأثيرات Hover (أزرق وإضاءة فخمة) ==== */
.hz-item:hover .hz-dot {
    border-color: #38bdf8;
    background-color: #38bdf8;
    transform: scale(1.4);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 0 5px rgba(56, 189, 248, 0.2);
}

.hz-item:hover .hz-text {
    color: #fff;
}

.hz-item:hover .hz-year {
    color: #38bdf8;
}

/* ==== الانيميشن ==== */
@keyframes drawLine {
    0% { width: 0; opacity: 0; }
    10% { opacity: 1; }
    100% { width: 90%; opacity: 1; }
}

@keyframes popUpItem {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==== ترتيبها للموبايل باللون الأزرق ==== */
@media (max-width: 768px) {
    .hz-timeline-container { flex-direction: column; }
    .hz-line {
        width: 4px;
        height: 0;
        left: 50%;
        top: 5%;
        transform: translateX(-50%);
        background: linear-gradient(180deg, transparent, #38bdf8 10%, #38bdf8 90%, transparent);
        animation: drawLineMobile 2s ease forwards;
    }
    .hz-item { margin-bottom: 40px; }
    
    @keyframes drawLineMobile {
        0% { height: 0; opacity: 0; }
        10% { opacity: 1; }
        100% { height: 90%; opacity: 1; }
    }
}
/* =======================================================
   VIP TIMELINE - ANIMATIONS & COLORS (القائمة الثانية)
======================================================== */

/* 1. تغيير لون الوصف تحت كل عصر (بدل السكني) وتنسيقه */
.luxury-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #f8fafc; /* أبيض ناصع ومريح جداً للعين */
    background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    border-left: 4px solid transparent;
}

/* تلوين الخط الجانبي لكل وصف حسب العصر عشان يطلع فخم */
.timeline-item:nth-child(1) .luxury-desc { border-left-color: #38bdf8; } /* أزرق للفنتك 1 */
.timeline-item:nth-child(2) .luxury-desc { border-left-color: #818cf8; } /* نيلي للفنتك 2 */
.timeline-item:nth-child(3) .luxury-desc { border-left-color: #c084fc; } /* نهدي للفنتك 3 */

/* 2. لون النصوص جوا التواريخ والنقاط (بدل السكني الباهت) */
.vip-text {
    color: #f1f5f9; /* لون ساطع وفخم */
    font-size: 0.95rem;
    line-height: 1.6;
}
.vip-text strong {
    color: #ffffff; /* العناوين باللون الأبيض الفاقع لتبرز */
    font-size: 1.05rem;
    text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* 3. الانيميشن الاحترافي لدخول القائمة (من اليسار لليمين) */
.timeline-item {
    opacity: 0;
    transform: translateX(-60px); /* بتبلش مخفية وعاليسار */
    animation: slideInVIP 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* تأخير دخول العصور ورا بعض (عشان يعطي تأثير سينمائي) */
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
.timeline-item:nth-child(2) { animation-delay: 0.6s; }
.timeline-item:nth-child(3) { animation-delay: 1.0s; }

@keyframes slideInVIP {
    0% { opacity: 0; transform: translateX(-60px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 4. انيميشن وتأثيرات فخمة لما تحط الماوس (Hover) عالنقاط */
.vip-item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
    padding: 15px;
    border-radius: 12px;
}

.vip-item:hover {
    transform: translateY(-8px) scale(1.02); /* بتنط لفوق وبتكبر نتفة */
    background: rgba(255, 255, 255, 0.08); /* بتضوي أبيض شفاف */
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}
/* تغيير لون الجملة اللي تحت الفنتك وفوق الشرح للون أصفر فخم */
.luxury-subtitle {
    color: #facc15 !important; /* لون أصفر ذهبي حلو */
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.4); /* توهج أصفر خفيف */
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 1 - PAGE 3 (COMPONENTS & TECH)
======================================================== */

/* 1. حركة دخول العناوين الرئيسية (من فوق لتحت) */
.column-header {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInHeader 0.8s ease forwards;
}

/* تأخير عنوان العمود الثاني شوي */
.cards-container:nth-child(2) .column-header {
    animation-delay: 0.2s;
}

@keyframes fadeInHeader {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. إعداد الكروت لحركة الدخول (مخفية بالبداية) */
.feature-card {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: cardSlideUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 3. ترتيب تأخير دخول الكروت (عشان يطلعوا ورا بعض بنعومة) */
/* العمود الأول */
.cards-container:nth-child(1) .feature-card:nth-child(2) { animation-delay: 0.1s; }
.cards-container:nth-child(1) .feature-card:nth-child(3) { animation-delay: 0.3s; }
.cards-container:nth-child(1) .feature-card:nth-child(4) { animation-delay: 0.5s; }
.cards-container:nth-child(1) .feature-card:nth-child(5) { animation-delay: 0.7s; }
.cards-container:nth-child(1) .feature-card:nth-child(6) { animation-delay: 0.9s; }
.cards-container:nth-child(1) .feature-card:nth-child(7) { animation-delay: 1.1s; }
.cards-container:nth-child(1) .feature-card:nth-child(8) { animation-delay: 1.3s; }

/* العمود الثاني */
.cards-container:nth-child(2) .feature-card:nth-child(2) { animation-delay: 0.2s; }
.cards-container:nth-child(2) .feature-card:nth-child(3) { animation-delay: 0.4s; }
.cards-container:nth-child(2) .feature-card:nth-child(4) { animation-delay: 0.6s; }
.cards-container:nth-child(2) .feature-card:nth-child(5) { animation-delay: 0.8s; }
.cards-container:nth-child(2) .feature-card:nth-child(6) { animation-delay: 1.0s; }
.cards-container:nth-child(2) .feature-card:nth-child(7) { animation-delay: 1.2s; }

/* حركة الكروت من تحت لفوق */
@keyframes cardSlideUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 4. تأثيرات فخمة لما تحط الماوس (Hover) على الكرت */
.feature-card:hover {
    transform: translateY(-10px) scale(1.03);
    /* استخدمنا نفس المتغيرات تبعت ألوانك عشان كل كرت يضوي بلونه الخاص! */
    box-shadow: 0 15px 35px rgba(var(--theme-rgb), 0.25), 
                inset 0 0 0 2px rgba(var(--theme-rgb), 0.5);
    background: rgba(255, 255, 255, 0.05);
}

/* 5. أنيميشن للأيقونة اللي جوا الكرت لما تقرب الماوس */
.icon-box i {
    transition: all 0.4s ease;
}

.feature-card:hover .icon-box i {
    transform: scale(1.2) rotate(10deg);
    color: var(--theme-color);
    text-shadow: 0 0 15px var(--theme-color);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 1 - PAGE 1 (DEFINITIONS)
======================================================== */

/* 1. حركة دخول العنوان الرئيسي (ينزل من فوق) */
.chapter-header {
    opacity: 0;
    transform: translateY(-30px);
    animation: dropDownHeader 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes dropDownHeader {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. حركة الكروت الاحترافية (تطلع من تحت لفوق ورا بعض) */
.pro-card {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation: slideUpProCard 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* تأخير الكرت الثاني عشان يطلع بعد الأول بشوي */
.pro-card:nth-child(1) { animation-delay: 0.2s; }
.pro-card:nth-child(2) { animation-delay: 0.5s; }

@keyframes slideUpProCard {
    0% { opacity: 0; transform: translateY(40px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* تأثير الماوس (Hover) الفخم للكروت */
.pro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* 3. حركة النقاط (الليست) جوا الكرت الأول (تدخل من اليسار لليمين نقطة نقطة) */
.pro-card ul li {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideRightLi 0.5s ease forwards;
}

/* ترتيب دخول النقاط */
.pro-card ul li:nth-child(1) { animation-delay: 0.5s; }
.pro-card ul li:nth-child(2) { animation-delay: 0.7s; }
.pro-card ul li:nth-child(3) { animation-delay: 0.9s; }

@keyframes slideRightLi {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 4. حركة المربع الأزرق (التعريف الإضافي) */
.highlight-box {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUpBox 0.6s ease forwards;
    animation-delay: 1.1s; /* بيطلع بعد ما تخلص النقاط */
    transition: all 0.3s ease;
}

.highlight-box:hover {
    background: rgba(59, 130, 246, 0.1);
    border-left-width: 6px;
}

@keyframes fadeUpBox {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 5. تفاعل دوائر طيف الفينتيك (Spectrum) لما تحط الماوس عليها */
.spectrum-circle {
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pro-card:hover .finance-circle {
    transform: translateX(10px) scale(1.05);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
    z-index: 5;
}

.pro-card:hover .tech-circle {
    transform: translateX(-10px) scale(1.05);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 1 - PAGE 5 (IMPACT, CHALLENGES & FUTURE)
======================================================== */

/* 1. حركة دخول العناوين الرئيسية لكل قسم */
.section-title-glow {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: glowTitlePop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* تأخير العناوين عشان ينزلوا ورا بعض حسب مكانهم بالصفحة */
.section-title-glow:nth-of-type(1) { animation-delay: 0.1s; }
.section-title-glow:nth-of-type(2) { animation-delay: 0.8s; }
.section-title-glow:nth-of-type(3) { animation-delay: 1.5s; }

@keyframes glowTitlePop {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* =======================================================
   2. حركات قسم التأثير (Impact Grid)
======================================================== */
.impact-card {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInImpact 0.6s ease forwards;
    transition: all 0.3s ease;
}

/* ترتيب دخول كروت التأثير ورا بعض */
.impact-card:nth-child(1) { animation-delay: 0.2s; }
.impact-card:nth-child(2) { animation-delay: 0.3s; }
.impact-card:nth-child(3) { animation-delay: 0.4s; }
.impact-card:nth-child(4) { animation-delay: 0.5s; }
.impact-card:nth-child(5) { animation-delay: 0.6s; }
.impact-card:nth-child(6) { animation-delay: 0.7s; }

@keyframes slideInImpact {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* تأثير الماوس (Hover) لكروت التأثير */
.impact-card:hover {
    transform: translateX(10px) translateY(-5px);
    background: rgba(59, 130, 246, 0.1); /* توهج أزرق خفيف */
    border-left: 4px solid #3b82f6;
}

/* =======================================================
   3. حركات قسم التحديات والمخاطر (Challenges Grid)
======================================================== */
.challenge-card {
    opacity: 0;
    transform: translateY(40px);
    animation: popUpChallenge 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.4s ease;
}

/* ترتيب دخول كروت التحديات */
.challenge-card:nth-child(1) { animation-delay: 1.0s; }
.challenge-card:nth-child(2) { animation-delay: 1.1s; }
.challenge-card:nth-child(3) { animation-delay: 1.2s; }
.challenge-card:nth-child(4) { animation-delay: 1.3s; }
.challenge-card:nth-child(5) { animation-delay: 1.4s; }

@keyframes popUpChallenge {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* تأثير الماوس (Hover) لكروت التحديات (توهج أحمر) */
.challenge-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* =======================================================
   4. حركات قسم المستقبل (Future Grid)
======================================================== */
.future-card {
    opacity: 0;
    transform: scale(0.9);
    animation: zoomInFuture 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

/* ترتيب دخول كروت المستقبل */
.future-card:nth-child(1) { animation-delay: 1.7s; }
.future-card:nth-child(2) { animation-delay: 1.8s; }
.future-card:nth-child(3) { animation-delay: 1.9s; }
.future-card:nth-child(4) { animation-delay: 2.0s; }

@keyframes zoomInFuture {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* تأثير الماوس (Hover) لكروت المستقبل (توهج نهدي) */
.future-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.5);
}

/* =======================================================
   5. حركة لوحة الخاتمة (Conclusion Panel)
======================================================== */
.conclusion-panel {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpConclusion 1s ease forwards;
    animation-delay: 2.5s; /* بتطلع آخر إشي */
    transition: all 0.5s ease;
}

@keyframes fadeUpConclusion {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.conclusion-panel:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 2 - PAGE 1 (DIGITAL BANKING)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch2-hero-title {
    opacity: 0;
    transform: translateY(-30px);
    animation: slideDownHero 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes slideDownHero {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول الكرت الأول (Our Digital World) */
.dw-main-card {
    opacity: 0;
    transform: scale(0.95);
    animation: popInCard 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.2s;
}

/* 3. ظهور أيقونات الخدمات ورا بعض */
.dw-feature-box {
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpIcon 0.5s ease forwards;
    transition: all 0.3s ease;
}

.dw-feature-box:nth-child(1) { animation-delay: 0.4s; }
.dw-feature-box:nth-child(2) { animation-delay: 0.5s; }
.dw-feature-box:nth-child(3) { animation-delay: 0.6s; }
.dw-feature-box:nth-child(4) { animation-delay: 0.7s; }
.dw-feature-box:nth-child(5) { animation-delay: 0.8s; }
.dw-feature-box:nth-child(6) { animation-delay: 0.9s; }

.dw-feature-box:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(56, 189, 248, 0.15);
    box-shadow: 0 10px 20px rgba(56, 189, 248, 0.2);
}

@keyframes slideUpIcon {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 4. كرت تعريف البنك الرقمي */
.ch2-card {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUpCard 0.8s ease forwards;
    animation-delay: 0.8s;
    transition: all 0.4s ease;
}

.ch2-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(250, 204, 21, 0.15);
    border-color: rgba(250, 204, 21, 0.4);
}

@keyframes fadeUpCard {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 5. دخول قسم رحلة العميل (المقارنة) */
.journey-header {
    opacity: 0;
    animation: simpleFadeIn 0.8s ease forwards;
    animation-delay: 1.0s;
}

/* دخول كرت البنك التقليدي من اليسار */
.card-traditional {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideRightCard 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.2s;
}

/* دخول كرت البنك الرقمي من اليمين */
.card-digital {
    opacity: 0;
    transform: translateX(40px);
    animation: slideLeftCard 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.4s;
}

/* دخول دائرة VS بالوسط بقوة */
.vs-divider {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    animation: popVS 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 1.6s;
}

@keyframes simpleFadeIn { to { opacity: 1; } }
@keyframes popInCard { to { opacity: 1; transform: scale(1); } }
@keyframes slideRightCard { to { opacity: 1; transform: translateX(0); } }
@keyframes slideLeftCard { to { opacity: 1; transform: translateX(0); } }
@keyframes popVS { to { opacity: 1; transform: scale(1) rotate(0); } }

/* 6. حركة تفاعلية لخطوات رحلة العميل (بتضوي ورا بعض) */
.pro-step {
    opacity: 0;
    transform: translateX(-15px);
    animation: stepReveal 0.5s ease forwards;
    transition: all 0.3s ease;
}

/* ترتيب خطوات التقليدي */
.card-traditional .pro-step:nth-child(1) { animation-delay: 1.7s; }
.card-traditional .pro-step:nth-child(2) { animation-delay: 1.9s; }
.card-traditional .pro-step:nth-child(3) { animation-delay: 2.1s; }
.card-traditional .pro-step:nth-child(4) { animation-delay: 2.3s; }
.card-traditional .pro-step:nth-child(5) { animation-delay: 2.5s; }

/* ترتيب خطوات الرقمي */
.card-digital .pro-step:nth-child(1) { animation-delay: 2.1s; }
.card-digital .pro-step:nth-child(2) { animation-delay: 2.3s; }

@keyframes stepReveal {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

.pro-step:hover {
    transform: scale(1.05) translateX(5px);
    filter: brightness(1.3);
}

.pro-step i {
    transition: transform 0.3s ease;
}

.pro-step:hover i {
    transform: scale(1.2) rotate(5deg);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 2 - PAGE 2 (SERVICES, CHANNELS, PROS/CONS)
======================================================== */

/* 1. دخول العناوين الرئيسية */
.section-title-glow {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDownTitle 0.8s ease forwards;
}

.section-title-glow:nth-of-type(1) { animation-delay: 0.1s; }
.section-title-glow:nth-of-type(2) { animation-delay: 1.2s; } /* يتأخر عشان ينزل لما توصل قسمه */

@keyframes fadeDownTitle {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. حركات جدول الخدمات (الصفوف بتدخل ورا بعض) */
.pro-table tbody tr {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideInRow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.3s ease;
}

/* ترتيب دخول صفوف الجدول الـ 8 */
.pro-table tbody tr:nth-child(1) { animation-delay: 0.2s; }
.pro-table tbody tr:nth-child(2) { animation-delay: 0.3s; }
.pro-table tbody tr:nth-child(3) { animation-delay: 0.4s; }
.pro-table tbody tr:nth-child(4) { animation-delay: 0.5s; }
.pro-table tbody tr:nth-child(5) { animation-delay: 0.6s; }
.pro-table tbody tr:nth-child(6) { animation-delay: 0.7s; }
.pro-table tbody tr:nth-child(7) { animation-delay: 0.8s; }
.pro-table tbody tr:nth-child(8) { animation-delay: 0.9s; }

@keyframes slideInRow {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* تأثير الماوس على صفوف الجدول لتسهيل القراءة */
.pro-table tbody tr:hover {
    background: rgba(250, 204, 21, 0.08); /* لون أصفر خفيف جداً يتماشى مع عنوان القسم */
    transform: scale(1.01);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 2;
    position: relative;
}

/* 3. حركات كروت قنوات البنك (Channels Grid) */
.channel-card {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    animation: popUpChannel 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

/* ترتيب دخول الكروت الـ 6 */
.channels-grid .channel-card:nth-child(1) { animation-delay: 1.4s; }
.channels-grid .channel-card:nth-child(2) { animation-delay: 1.5s; }
.channels-grid .channel-card:nth-child(3) { animation-delay: 1.6s; }
.channels-grid .channel-card:nth-child(4) { animation-delay: 1.7s; }
.channels-grid .channel-card:nth-child(5) { animation-delay: 1.8s; }
.channels-grid .channel-card:nth-child(6) { animation-delay: 1.9s; }

@keyframes popUpChannel {
    0% { opacity: 0; transform: translateY(40px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.channel-card:hover {
    transform: translateY(-10px) scale(1.05);
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
    box-shadow: 0 15px 30px rgba(56, 189, 248, 0.2);
}

.channel-card:hover i {
    transform: rotate(15deg) scale(1.2);
    color: #38bdf8;
}

.channel-card i {
    transition: all 0.4s ease;
}

/* 4. حركات المزايا والعيوب (Pros & Cons) */
.pc-card {
    transition: all 0.4s ease;
}

/* دخول المزايا من اليسار */
.pc-advantages {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInSide 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.2s;
}

/* دخول العيوب من اليمين */
.pc-disadvantages {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInSide 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.5s;
}

@keyframes slideInSide {
    0% { opacity: 0; transform: translateX(var(--start-x, 0)); } /* بعتمد على الترانسفورم اللي فوق */
    100% { opacity: 1; transform: translateX(0); }
}

/* تأثير الـ Hover على كروت المزايا والعيوب */
.pc-advantages:hover {
    box-shadow: 0 15px 35px rgba(74, 222, 128, 0.15);
    transform: translateY(-5px);
}

.pc-disadvantages:hover {
    box-shadow: 0 15px 35px rgba(239, 68, 68, 0.15);
    transform: translateY(-5px);
}

/* حركات النقاط الداخلية جوا المزايا والعيوب (بتدخل وحدة ورا الثانية) */
.pc-list li {
    opacity: 0;
    transform: translateX(-15px);
    animation: fadeRightItem 0.5s ease forwards;
}

/* تأخير نقاط المزايا */
.pc-advantages .pc-list li:nth-child(1) { animation-delay: 2.6s; }
.pc-advantages .pc-list li:nth-child(2) { animation-delay: 2.7s; }
.pc-advantages .pc-list li:nth-child(3) { animation-delay: 2.8s; }
.pc-advantages .pc-list li:nth-child(4) { animation-delay: 2.9s; }
.pc-advantages .pc-list li:nth-child(5) { animation-delay: 3.0s; }
.pc-advantages .pc-list li:nth-child(6) { animation-delay: 3.1s; }

/* تأخير نقاط العيوب */
.pc-disadvantages .pc-list li:nth-child(1) { animation-delay: 3.0s; }
.pc-disadvantages .pc-list li:nth-child(2) { animation-delay: 3.1s; }
.pc-disadvantages .pc-list li:nth-child(3) { animation-delay: 3.2s; }
.pc-disadvantages .pc-list li:nth-child(4) { animation-delay: 3.3s; }

@keyframes fadeRightItem {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 2 - PAGE 3 (SECURITY, MODELS, CHALLENGES)
======================================================== */

/* 1. دخول العناوين الرئيسية */
.ch2-section-title {
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeDownTitle 0.6s ease forwards;
}

@keyframes fadeDownTitle {
    to { opacity: 1; transform: translateY(0); }
}

/* 2. قسم الحماية (Security Grid) */
.security-column {
    opacity: 0;
    transform: scale(0.95);
    animation: popInCard 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.security-column:nth-child(1) { animation-delay: 0.2s; }
.security-column:nth-child(3) { animation-delay: 0.4s; }

.security-arrow {
    opacity: 0;
    transform: scale(0);
    animation: popInCard 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.6s;
}

/* دخول نقاط الحماية (من اليمين واليسار) */
.sec-item-trad {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideRightItem 0.5s ease forwards;
}
.sec-item-digi {
    opacity: 0;
    transform: translateX(30px);
    animation: slideLeftItem 0.5s ease forwards;
}

/* تأخير نقاط الحماية للترتيب */
.sec-item-trad:nth-child(2) { animation-delay: 0.4s; }
.sec-item-trad:nth-child(3) { animation-delay: 0.5s; }
.sec-item-trad:nth-child(4) { animation-delay: 0.6s; }
.sec-item-trad:nth-child(5) { animation-delay: 0.7s; }
.sec-item-trad:nth-child(6) { animation-delay: 0.8s; }

.sec-item-digi:nth-child(2) { animation-delay: 0.6s; }
.sec-item-digi:nth-child(3) { animation-delay: 0.7s; }
.sec-item-digi:nth-child(4) { animation-delay: 0.8s; }
.sec-item-digi:nth-child(5) { animation-delay: 0.9s; }
.sec-item-digi:nth-child(6) { animation-delay: 1.0s; }

@keyframes slideRightItem { to { opacity: 1; transform: translateX(0); } }
@keyframes slideLeftItem { to { opacity: 1; transform: translateX(0); } }

.sec-item:hover {
    transform: scale(1.05);
    background: rgba(255,255,255,0.1);
}

/* 3. قسم النماذج (Models Grid) */
.model-trad {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideRightItem 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.2s;
}
.model-digi {
    opacity: 0;
    transform: translateX(50px);
    animation: slideLeftItem 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.4s;
}

.model-list li {
    opacity: 0;
    transform: translateY(15px);
    animation: slideUpLi 0.4s ease forwards;
}

/* تأخير نقاط النماذج */
.model-trad .model-list li:nth-child(1) { animation-delay: 1.5s; }
.model-trad .model-list li:nth-child(2) { animation-delay: 1.6s; }
.model-trad .model-list li:nth-child(3) { animation-delay: 1.7s; }
.model-trad .model-list li:nth-child(4) { animation-delay: 1.8s; }
.model-trad .model-list li:nth-child(5) { animation-delay: 1.9s; }

.model-digi .model-list li:nth-child(1) { animation-delay: 1.7s; }
.model-digi .model-list li:nth-child(2) { animation-delay: 1.8s; }
.model-digi .model-list li:nth-child(3) { animation-delay: 1.9s; }
.model-digi .model-list li:nth-child(4) { animation-delay: 2.0s; }
.model-digi .model-list li:nth-child(5) { animation-delay: 2.1s; }

@keyframes slideUpLi { to { opacity: 1; transform: translateY(0); } }

/* تأثير الماوس على النماذج */
.model-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255,255,255,0.05);
}

/* 4. قسم التحديات (Challenges List) */
.challenge-row {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpLi 0.5s ease forwards;
    transition: all 0.3s ease;
}

.challenge-row:nth-child(1) { animation-delay: 2.4s; }
.challenge-row:nth-child(2) { animation-delay: 2.5s; }
.challenge-row:nth-child(3) { animation-delay: 2.6s; }
.challenge-row:nth-child(4) { animation-delay: 2.7s; }
.challenge-row:nth-child(5) { animation-delay: 2.8s; }

.challenge-row:hover {
    transform: translateX(10px) scale(1.02);
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 2 - PAGE 4 (NEOBANKS & MATRICES)
======================================================== */

/* 1. حركات كروت التعريف (Neobank vs Challenger) */
.def-card {
    opacity: 0;
    transform: translateY(40px);
    animation: popUpDef 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

.definitions-grid .def-card:nth-child(1) { animation-delay: 0.2s; }
.definitions-grid .def-card:nth-child(2) { animation-delay: 0.4s; }

@keyframes popUpDef {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.def-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

/* 2. حركات جدول مقارنة الخدمات (Services Matrix) */
.neo-table tbody tr {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideRightNeo 0.5s ease forwards;
    transition: all 0.3s ease;
}

/* ترتيب دخول صفوف الجدول ورا بعض */
.neo-table tbody tr:nth-child(1) { animation-delay: 0.5s; }
.neo-table tbody tr:nth-child(2) { animation-delay: 0.6s; }
.neo-table tbody tr:nth-child(3) { animation-delay: 0.7s; }
.neo-table tbody tr:nth-child(4) { animation-delay: 0.8s; } /* صف كلمة SERVICES */
.neo-table tbody tr:nth-child(5) { animation-delay: 0.9s; }
.neo-table tbody tr:nth-child(6) { animation-delay: 1.0s; }
.neo-table tbody tr:nth-child(7) { animation-delay: 1.1s; }
.neo-table tbody tr:nth-child(8) { animation-delay: 1.2s; }
.neo-table tbody tr:nth-child(9) { animation-delay: 1.3s; }
.neo-table tbody tr:nth-child(10){ animation-delay: 1.4s; }

@keyframes slideRightNeo {
    to { opacity: 1; transform: translateX(0); }
}

/* تفاعل الماوس مع الجدول (ما عدا صف العنوان الداخلي) */
.neo-table tbody tr:hover:not(:nth-child(4)) {
    background: rgba(56, 189, 248, 0.08);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}

/* حركة علامات الصح جوا الجدول لما تحط الماوس ع الصف */
.check-yes, .dash-no {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.neo-table tbody tr:hover .check-yes {
    transform: scale(1.4) rotate(10deg);
    color: #4ade80; /* أخضر فاقع */
}
.neo-table tbody tr:hover .dash-no {
    transform: scale(1.4);
    color: #ef4444; /* أحمر فاقع */
}

/* 3. حركات الجدول الشامل (Comprehensive Matrix) */
.matrix-table tbody tr {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpMatrix 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.3s ease;
}

/* ترتيب الدخول لصفوف الجدول الأخير */
.matrix-table tbody tr:nth-child(1) { animation-delay: 1.4s; }
.matrix-table tbody tr:nth-child(2) { animation-delay: 1.6s; }
.matrix-table tbody tr:nth-child(3) { animation-delay: 1.8s; }

@keyframes slideUpMatrix {
    to { opacity: 1; transform: translateY(0); }
}

.matrix-table tbody tr:hover {
    background: rgba(250, 204, 21, 0.05); /* لون ذهبي خفيف */
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 2 - PAGE 5 (OPEN BANKING)
======================================================== */

.ch2-p5-container > div {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUpOpenBanking 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: all 0.4s ease;
}

.ch2-p5-container > div:nth-child(1) { animation-delay: 0.1s; }
.ch2-p5-container > div:nth-child(2) { animation-delay: 0.3s; }
.ch2-p5-container > div:nth-child(3) { animation-delay: 0.5s; }
.ch2-p5-container > div:nth-child(4) { animation-delay: 0.7s; }

@keyframes fadeUpOpenBanking {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ch2-p5-container > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 3 - PAGE 1 (DIGITAL PAYMENTS)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: fadeDownTitle 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeDownTitle {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول كروت التعريف الأساسية (Digital Payment & Cashless Economy) */
.ch3-def-card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpDefCard 0.8s ease forwards;
    transition: all 0.4s ease;
}

.ch3-def-card:nth-of-type(1) { animation-delay: 0.2s; }
.ch3-def-card:nth-of-type(2) { animation-delay: 0.4s; }

@keyframes fadeUpDefCard {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ch3-def-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.5);
}

/* 3. شجرة أنواع المدفوعات (Types of Digital Payment Animation) */
.animated-types-section {
    opacity: 0;
    transform: scale(0.95);
    animation: zoomInTree 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.6s;
}

@keyframes zoomInTree {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* دخول البوكس الأب (الرئيسي) */
.parent-box {
    opacity: 0;
    transform: translateY(-20px);
    animation: popParent 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.8s;
    transition: all 0.3s ease;
}

@keyframes popParent {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.parent-box:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 30px rgba(56, 189, 248, 0.25);
}

/* ظهور الكروت الفرعية ورا بعض (Staggered Animation) */
.child-type-card {
    opacity: 0;
    transform: translateX(-30px);
    animation: slideRightChild 0.5s ease forwards;
    transition: all 0.3s ease;
}

.child-type-card:nth-child(1) { animation-delay: 1.1s; }
.child-type-card:nth-child(2) { animation-delay: 1.3s; }
.child-type-card:nth-child(3) { animation-delay: 1.5s; }
.child-type-card:nth-child(4) { animation-delay: 1.7s; }
.child-type-card:nth-child(5) { animation-delay: 1.9s; }

@keyframes slideRightChild {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* تفاعل الماوس على كروت الأنواع الفرعية */
.child-type-card:hover {
    transform: translateX(10px) scale(1.02);
    background: rgba(56, 189, 248, 0.12);
    border-color: #38bdf8;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2);
}

.child-type-card i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.child-type-card:hover i {
    transform: scale(1.3) rotate(10deg);
    color: #38bdf8;
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 3 - PAGE 2 (CARDS & POS)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch3-p2-container .section-title-glow {
    opacity: 0;
    transform: translateY(-30px);
    animation: ch3P2FadeDown 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch3P2FadeDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول كروت بطاقات الدفع (Credit & Debit) */
.pro-card-box {
    opacity: 0;
    transform: translateY(40px);
    animation: ch3P2FadeUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

.pro-animated-grid .pro-card-box:nth-child(1) { animation-delay: 0.2s; }
.pro-animated-grid .pro-card-box:nth-child(2) { animation-delay: 0.4s; }

@keyframes ch3P2FadeUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pro-card-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. دخول قسم جدول المقارنة (Credit vs Debit) */
.pro-comparison-section {
    opacity: 0;
    animation: ch3P2SimpleFade 0.8s ease forwards;
    animation-delay: 0.6s;
}

@keyframes ch3P2SimpleFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* دخول كروت المقارنة (من اليسار واليمين) */
.pro-comp-card:nth-child(1) {
    opacity: 0;
    transform: translateX(-40px);
    animation: ch3P2SlideRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.8s;
}

.pro-comp-card:nth-child(2) {
    opacity: 0;
    transform: translateX(40px);
    animation: ch3P2SlideLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.0s;
}

@keyframes ch3P2SlideRight { to { opacity: 1; transform: translateX(0); } }
@keyframes ch3P2SlideLeft { to { opacity: 1; transform: translateX(0); } }

.pro-comp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* 4. دخول قسم نقطة البيع (PoS) */
.pro-pos-section {
    opacity: 0;
    transform: translateY(40px);
    animation: ch3P2FadeUp 0.8s ease forwards;
    animation-delay: 1.2s;
}

/* ظهور بوكسات الـ POS الثلاثة ورا بعض (Insert, Swipe, Tap) */
.pro-pos-box {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    animation: ch3P2PopBox 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;
}

.pro-pos-grid .pro-pos-box:nth-child(1) { animation-delay: 1.4s; }
.pro-pos-grid .pro-pos-box:nth-child(2) { animation-delay: 1.6s; }
.pro-pos-grid .pro-pos-box:nth-child(3) { animation-delay: 1.8s; }

@keyframes ch3P2PopBox {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.pro-pos-box:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2);
}

.pro-pos-box i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.pro-pos-box:hover i {
    transform: scale(1.3) rotate(10deg);
    color: #38bdf8;
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 3 - PAGE 3 (PREPAID CARDS)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch3-p3-container .section-title-glow {
    opacity: 0;
    transform: translateY(-30px);
    animation: ch3P3FadeDown 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch3P3FadeDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول كرت التعريف الأساسي (Stored-Value Card Hero) */
.stored-card-hero {
    opacity: 0;
    transform: translateY(40px);
    animation: ch3P3FadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
    transition: all 0.4s ease;
}

@keyframes ch3P3FadeUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.stored-card-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. دخول عنوان أنواع البطاقات الرئيسي */
.ch3-p3-container > h2 {
    opacity: 0;
    transform: scale(0.95);
    animation: ch3P3ZoomIn 0.8s ease forwards;
    animation-delay: 0.5s;
}

@keyframes ch3P3ZoomIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* 4. دخول كروت الأنواع (Closed Loop & Open Loop) من اليمين واليسار */
.loop-card-box:nth-child(1) {
    opacity: 0;
    transform: translateX(-40px);
    animation: ch3P3SlideRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.7s;
}

.loop-card-box:nth-child(2) {
    opacity: 0;
    transform: translateX(40px);
    animation: ch3P3SlideLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.9s;
}

@keyframes ch3P3SlideRight { to { opacity: 1; transform: translateX(0); } }
@keyframes ch3P3SlideLeft { to { opacity: 1; transform: translateX(0); } }

.loop-card-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 3 - PAGE 4 (E-WALLETS)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch3-p4-container .section-title-glow {
    opacity: 0;
    transform: translateY(-30px);
    animation: ch3P4FadeDown 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch3P4FadeDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول بوكس التعريف الأساسي (Wallet Hero) */
.wallet-hero-box {
    opacity: 0;
    transform: translateY(40px);
    animation: ch3P4FadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
    transition: all 0.4s ease;
}

@keyframes ch3P4FadeUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.wallet-hero-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. دخول عنوان أنواع المحافظ */
.ch3-p4-container > h2 {
    opacity: 0;
    transform: scale(0.95);
    animation: ch3P4ZoomIn 0.8s ease forwards;
    animation-delay: 0.4s;
}

@keyframes ch3P4ZoomIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* 4. دخول كروت المحافظ الثلاثة ورا بعض (Staggered Animation) */
.wallet-type-card {
    opacity: 0;
    transform: translateY(30px);
    animation: ch3P4CardUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.wallet-types-grid .wallet-type-card:nth-child(1) { animation-delay: 0.6s; }
.wallet-types-grid .wallet-type-card:nth-child(2) { animation-delay: 0.8s; }
.wallet-types-grid .wallet-type-card:nth-child(3) { animation-delay: 1.0s; }

@keyframes ch3P4CardUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.wallet-type-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 3 - PAGE 5 (E-MONEY FINAL)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch3-p5-container .section-title-glow {
    opacity: 0;
    transform: translateY(-30px);
    animation: ch3P5FadeDown 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch3P5FadeDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. دخول بوكس التعريف الأساسي (Hero Box) */
.emoney-hero-box {
    opacity: 0;
    transform: translateY(30px);
    animation: ch3P5FadeUp 0.8s ease forwards;
    animation-delay: 0.2s;
    transition: all 0.4s ease;
}

@keyframes ch3P5FadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.emoney-hero-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. دخول لوحة الرسمة الهندسية بالكامل بتأثير Zoom In ناعم وتوهج */
.ch3-p5-container > div:nth-child(3) {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
    animation: ch3P5DiagramReveal 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.4s;
    transition: all 0.4s ease;
}

@keyframes ch3P5DiagramReveal {
    0% { opacity: 0; transform: scale(0.96) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.ch3-p5-container > div:nth-child(3):hover {
    box-shadow: 0 25px 60px rgba(192, 132, 252, 0.25);
}

/* 4. نبض وتوهج خفيف للأسهم والخطوط لتعطي طابع حيوي */
.ch3-p5-container svg line {
    animation: svgLineGlow 3s infinite alternate;
}

@keyframes svgLineGlow {
    0% { filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.2)); }
    100% { filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6)); }
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 5 - PAGE 2 (BLOCKCHAIN & HASHING)
======================================================== */

/* 1. دخول العناوين الرئيسية تدريجياً */
.ch5-p2-container h1.section-title-glow,
.ch5-p2-container h2.section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch5P2FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ch5-p2-container h1:nth-of-type(1) { animation-delay: 0.1s; }
.ch5-p2-container h2:nth-of-type(1) { animation-delay: 0.3s; }
.ch5-p2-container h2:nth-of-type(2) { animation-delay: 0.5s; }
.ch5-p2-container h2:nth-of-type(3) { animation-delay: 0.7s; }

@keyframes ch5P2FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. انيميشن سلسلة البلوكات (Blockchain Visual Blocks) */
.blockchain-visual {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    animation: ch5P2ScaleUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.2s;
}

@keyframes ch5P2ScaleUp {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* نبض خفيف للبلوكات لتشعر بالحياة */
.bc-block {
    transition: all 0.3s ease;
}
.bc-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}

/* 3. صفوف الـ Hashing تظهر ورا بعضها */
.hash-row {
    opacity: 0;
    transform: translateX(-30px);
    animation: ch5P2SlideRight 0.6s ease forwards;
}

.hashing-demo .hash-row:nth-child(1) { animation-delay: 0.4s; }
.hashing-demo .hash-row:nth-child(2) { animation-delay: 0.6s; }
.hashing-demo .hash-row:nth-child(3) { animation-delay: 0.8s; }

@keyframes ch5P2SlideRight {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

.hash-row:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 20px rgba(250, 204, 21, 0.15);
}

/* 4. انيميشن خطوات الـ Timeline (الـ 6 خطوات) ورا بعض */
.steps-timeline .step-card {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P2CardUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

.steps-timeline .step-card:nth-child(1) { animation-delay: 0.3s; }
.steps-timeline .step-card:nth-child(2) { animation-delay: 0.45s; }
.steps-timeline .step-card:nth-child(3) { animation-delay: 0.6s; }
.steps-timeline .step-card:nth-child(4) { animation-delay: 0.75s; }
.steps-timeline .step-card:nth-child(5) { animation-delay: 0.9s; }
.steps-timeline .step-card:nth-child(6) { animation-delay: 1.05s; }

@keyframes ch5P2CardUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25);
}

/* 5. لوحات التحقق والتعدين (Info Panels) والـ Principles */
.info-panel, .principles-box {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P2FadeUp 0.7s ease forwards;
    transition: all 0.3s ease;
}

.info-panels-grid .info-panel:nth-child(1) { animation-delay: 0.5s; }
.info-panels-grid .info-panel:nth-child(2) { animation-delay: 0.7s; }
.principles-box { animation-delay: 0.9s; }

@keyframes ch5P2FadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.info-panel:hover, .principles-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 5 - PAGE 3 (PUBLIC VS PRIVATE)
======================================================== */

/* 1. دخول العنوان الرئيسي والمقدمة */
.ch5-p3-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch5P3FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.intro-glass-box {
    opacity: 0;
    transform: translateY(20px);
    animation: ch5P3FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch5P3FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch5P3FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت الأنواع (Permissionless vs Permissioned) تظهر جنباً بجنب */
.blockchain-types-grid .bc-type-card {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: ch5P3ScaleUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

.blockchain-types-grid .bc-type-card:nth-child(1) { animation-delay: 0.3s; }
.blockchain-types-grid .bc-type-card:nth-child(2) { animation-delay: 0.5s; }

@keyframes ch5P3ScaleUp {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bc-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(56, 189, 248, 0.2);
}

/* 3. أعمدة المقارنة (Benefits Wrapper & VS Badge) */
.benefits-wrapper {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P3FadeUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.benefits-column {
    transition: all 0.4s ease;
}

.benefits-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* 4. قسم نماذج الإجماع (Consensus Models & Cards) */
.consensus-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P3FadeUp 0.8s ease forwards;
    animation-delay: 0.8s;
}

.models-grid .model-card {
    opacity: 0;
    transform: translateY(25px);
    animation: ch5P3CardUp 0.7s ease forwards;
    transition: all 0.4s ease;
}

.models-grid .model-card:nth-child(1) { animation-delay: 1.0s; }
.models-grid .model-card:nth-child(2) { animation-delay: 1.2s; }

@keyframes ch5P3CardUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.model-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(250, 204, 21, 0.2);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 5 - PAGE 4 (CRYPTOCURRENCY & WORKFLOW)
======================================================== */

/* 1. دخول العناوين الرئيسية ومقدمة العملات الرقمية */
.ch5-p4-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch5P4FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.crypto-intro {
    opacity: 0;
    transform: translateY(20px);
    animation: ch5P4FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch5P4FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch5P4FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. جدول المقارنة (Fiat vs Crypto) */
.comparison-table-wrapper {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P4FadeUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.crypto-table tbody tr {
    transition: all 0.3s ease;
}

.crypto-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.08);
    transform: scale(1.01);
}

/* 3. قسم البيتكوين الرئيسي (Bitcoin Hero) */
.bitcoin-hero {
    opacity: 0;
    transform: scale(0.96) translateY(25px);
    animation: ch5P4ScaleUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.4s;
    transition: all 0.4s ease;
}

@keyframes ch5P4ScaleUp {
    0% { opacity: 0; transform: scale(0.96) translateY(25px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.bitcoin-hero:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 4. قسم سير العمليات (Transactions Workflow) والمقارنة التقليدية */
.trad-workflow {
    opacity: 0;
    transform: translateX(-30px);
    animation: ch5P4SlideRight 0.7s ease forwards;
    animation-delay: 0.5s;
}

@keyframes ch5P4SlideRight {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* 5. رحلة معاملة البيتكوين الخطوات (Journey Steps متسلسلة ورا بعض) */
.btc-journey-container {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P4FadeUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.journey-path .j-step {
    opacity: 0;
    transform: translateY(20px);
    animation: ch5P4StepUp 0.5s ease forwards;
    transition: all 0.3s ease;
}

/* ترتيبة دخول الخطوات ورا بعضها بانتظام */
.journey-path .j-step:nth-child(1) { animation-delay: 0.7s; }
.journey-path .j-step:nth-child(3) { animation-delay: 0.8s; }
.journey-path .j-step:nth-child(5) { animation-delay: 0.9s; }
.journey-path .j-step:nth-child(7) { animation-delay: 1.0s; }
.journey-path .j-step:nth-child(9) { animation-delay: 1.1s; }
.journey-path .j-step:nth-child(11) { animation-delay: 1.2s; }
.journey-path .j-step:nth-child(13) { animation-delay: 1.3s; }
.journey-path .j-step:nth-child(15) { animation-delay: 1.4s; }
.journey-path .j-step:nth-child(17) { animation-delay: 1.5s; }
.journey-path .j-step:nth-child(19) { animation-delay: 1.6s; }
.journey-path .j-step:nth-child(21) { animation-delay: 1.7s; }
.journey-path .j-step:nth-child(23) { animation-delay: 1.8s; }

@keyframes ch5P4StepUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.j-step:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.3);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 5 - PAGE 5 (SMART CONTRACTS)
======================================================== */

/* 1. دخول العناوين الرئيسية وصندوق مقدمة العقود الذكية */
.ch5-p5-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch5P5FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.sc-intro-box {
    opacity: 0;
    transform: translateY(20px);
    animation: ch5P5FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch5P5FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch5P5FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. قسم الإيثيريوم ومقارنة الـ Terminals (Bitcoin vs Ethereum) */
.ethereum-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P5FadeUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

.code-compare-grid > div {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
    animation: ch5P5ScaleUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

.code-compare-grid > div:nth-child(1) { animation-delay: 0.5s; }
.code-compare-grid > div:nth-child(2) { animation-delay: 0.7s; }

@keyframes ch5P5ScaleUp {
    0% { opacity: 0; transform: scale(0.96) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.code-terminal:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. صندوق مسار العمليات (Smart Contracts Pipeline Workflow) والـ Nodes الأربعة */
.sc-workflow-container {
    opacity: 0;
    transform: translateY(30px);
    animation: ch5P5FadeUp 0.8s ease forwards;
    animation-delay: 0.8s;
}

.pipeline-track .pipeline-node {
    opacity: 0;
    transform: translateY(25px);
    animation: ch5P5NodeUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.pipeline-track .pipeline-node:nth-child(1) { animation-delay: 0.9s; }
.pipeline-track .pipeline-node:nth-child(2) { animation-delay: 1.05s; }
.pipeline-track .pipeline-node:nth-child(3) { animation-delay: 1.2s; }
.pipeline-track .pipeline-node:nth-child(4) { animation-delay: 1.35s; }

@keyframes ch5P5NodeUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pipeline-node:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 6 - PAGE 1 (CROWDFUNDING)
======================================================== */

/* 1. دخول العنوان الرئيسي ومقدمة التمويل الجماعي */
.ch6-p1-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch6P1FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cf-intro-box {
    opacity: 0;
    transform: translateY(20px);
    animation: ch6P1FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch6P1FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch6P1FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت المقارنة (Traditional vs Crowdfunding) */
.funding-compare-grid .funding-card {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: ch6P1ScaleUp 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.4s ease;
}

.funding-compare-grid .funding-card:nth-child(1) { animation-delay: 0.3s; }
.funding-compare-grid .funding-card:nth-child(2) { animation-delay: 0.5s; }

@keyframes ch6P1ScaleUp {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.funding-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(234, 88, 12, 0.2);
}

/* 3. حاوية خطوات كيف يعمل التمويل الجماعي (How Does Crowdfunding Work) */
.cf-steps-wrapper {
    opacity: 0;
    transform: translateY(30px);
    animation: ch6P1FadeUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

/* 4. كروت الخطوات الـ 10 تظهر ورا بعضها بتسلسل سينمائي مذهل */
.steps-timeline-10 .cf-step-card {
    opacity: 0;
    transform: translateY(25px);
    animation: ch6P1CardUp 0.5s ease forwards;
    transition: all 0.3s ease;
}

.steps-timeline-10 .cf-step-card:nth-child(1) { animation-delay: 0.7s; }
.steps-timeline-10 .cf-step-card:nth-child(2) { animation-delay: 0.8s; }
.steps-timeline-10 .cf-step-card:nth-child(3) { animation-delay: 0.9s; }
.steps-timeline-10 .cf-step-card:nth-child(4) { animation-delay: 1.0s; }
.steps-timeline-10 .cf-step-card:nth-child(5) { animation-delay: 1.1s; }
.steps-timeline-10 .cf-step-card:nth-child(6) { animation-delay: 1.2s; }
.steps-timeline-10 .cf-step-card:nth-child(7) { animation-delay: 1.3s; }
.steps-timeline-10 .cf-step-card:nth-child(8) { animation-delay: 1.4s; }
.steps-timeline-10 .cf-step-card:nth-child(9) { animation-delay: 1.5s; }
.steps-timeline-10 .cf-step-card:nth-child(10) { animation-delay: 1.6s; }

@keyframes ch6P1CardUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.cf-step-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(234, 88, 12, 0.25);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 6 - PAGE 2 (CROWDFUNDING TYPES)
======================================================== */

/* 1. دخول العناوين الرئيسية تدريجياً */
.ch6-p2-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch6P2FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ch6-p2-container > p {
    opacity: 0;
    transform: translateY(20px);
    animation: ch6P2FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch6P2FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch6P2FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. صندوق تفاصيل التمويل وصندوق القواعد (Details & Boxes) */
.cf-details-box {
    opacity: 0;
    transform: translateY(25px);
    animation: ch6P2FadeUp 0.7s ease forwards;
    animation-delay: 0.3s;
}

/* 3. أقسام الأنواع الرئيسية (Peer-to-Peer & Equity) تظهر بانسجام */
.type-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch6P2FadeUp 0.8s ease forwards;
    transition: all 0.4s ease;
}

.ch6-p2-container > .type-section:nth-of-type(1) { animation-delay: 0.4s; }
.ch6-p2-container > .type-section:nth-of-type(2) { animation-delay: 0.6s; }

.type-section:hover {
    transform: translateY(-4px);
}

/* 4. انيميشن خطوات الـ Equity Flow (المربعات الأربعة ورا بعض) */
.equity-flow .eq-step {
    opacity: 0;
    transform: translateY(20px);
    animation: ch6P2StepUp 0.5s ease forwards;
    transition: all 0.3s ease;
}

.equity-flow .eq-step:nth-child(1) { animation-delay: 0.7s; }
.equity-flow .eq-step:nth-child(2) { animation-delay: 0.85s; }
.equity-flow .eq-step:nth-child(3) { animation-delay: 1.0s; }
.equity-flow .eq-step:nth-child(4) { animation-delay: 1.15s; }

@keyframes ch6P2StepUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.eq-step:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.25);
}

/* 5. كروت الأنواع الأخيرة (Rewards & Donation Based) */
.other-types-grid {
    opacity: 0;
    transform: translateY(30px);
    animation: ch6P2FadeUp 0.8s ease forwards;
    animation-delay: 1.3s;
}

.ot-card {
    transition: all 0.4s ease;
}

.ot-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(234, 88, 12, 0.25);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 6 - PAGE 4 (ROBO-ADVISOR)
======================================================== */

/* 1. دخول القسم الرئيسي (Robo Hero Definition) */
.robo-hero {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch6P4FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch6P4FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. انيميشن شبكة الأهداف والذكاء الاصطناعي (AI Goals Network & Brain) */
.robo-network-container {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: ch6P4ScaleUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.3s;
}

@keyframes ch6P4ScaleUp {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* كروت الأهداف تظهر ورا بعضها بتسلسل فخم */
.ai-goal-card {
    opacity: 0;
    transform: translateY(20px);
    animation: ch6P4CardUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

.ai-goals-grid .ai-goal-card:nth-child(5) { animation-delay: 0.4s; }
.ai-goals-grid .ai-goal-card:nth-child(6) { animation-delay: 0.55s; }
.ai-goals-grid .ai-goal-card:nth-child(7) { animation-delay: 0.7s; }
.ai-goals-grid .ai-goal-card:nth-child(8) { animation-delay: 0.85s; }

@keyframes ch6P4CardUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ai-goal-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.3);
}

/* 3. قسم خوارزميات المنطق والفوائد (Tech Split Grid: Terminal & Benefits) */
.tech-split-grid {
    opacity: 0;
    transform: translateY(30px);
    animation: ch6P4FadeUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

.algo-terminal, .benefits-glowing-list {
    transition: all 0.4s ease;
}

.algo-terminal:hover, .benefits-glowing-list:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

@keyframes ch6P4FadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 7 - PAGE 1 (REGTECH INTRO)
======================================================== */

/* 1. دخول العنوان الرئيسي والمقدمة */
.ch7-p1-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch7P1FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.regtech-def-box {
    opacity: 0;
    transform: translateY(20px);
    animation: ch7P1FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch7P1FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch7P1FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت الأهمية (Importance Grid) تظهر ورا بعضها */
.importance-card {
    opacity: 0;
    transform: translateY(20px);
    animation: ch7P1CardUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

.importance-grid .importance-card:nth-child(1) { animation-delay: 0.3s; }
.importance-grid .importance-card:nth-child(2) { animation-delay: 0.45s; }
.importance-grid .importance-card:nth-child(3) { animation-delay: 0.6s; }

@keyframes ch7P1CardUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.importance-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.25);
}

/* 3. حاوية الوظائف الأساسية (Core Functions) والكروت الداخلية */
.core-func-wrapper {
    opacity: 0;
    transform: translateY(30px);
    animation: ch7P1FadeUp 0.8s ease forwards;
    animation-delay: 0.7s;
}

.core-func-grid .func-card {
    opacity: 0;
    transform: translateY(20px);
    animation: ch7P1CardUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

.core-func-grid .func-card:nth-child(1) { animation-delay: 0.8s; }
.core-func-grid .func-card:nth-child(2) { animation-delay: 0.95s; }
.core-func-grid .func-card:nth-child(3) { animation-delay: 1.1s; }

.func-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15);
}

/* 4. قسم الحاجة إلى RegTech (The Need for RegTech List) */
.need-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch7P1FadeUp 0.8s ease forwards;
    animation-delay: 1.2s;
}

.need-list li {
    opacity: 0;
    transform: translateX(-20px);
    animation: ch7P1SlideRight 0.5s ease forwards;
    transition: all 0.3s ease;
}

.need-list li:nth-child(1) { animation-delay: 1.3s; }
.need-list li:nth-child(2) { animation-delay: 1.45s; }
.need-list li:nth-child(3) { animation-delay: 1.6s; }

@keyframes ch7P1SlideRight {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.need-list li:hover {
    transform: translateX(5px);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 7 - PAGE 4 (INSURTECH & FINALE)
======================================================== */

/* 1. دخول عنوان ومقدمة الـ InsurTech */
.ch7-p4-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch7P4FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.insur-intro {
    opacity: 0;
    transform: translateY(20px);
    animation: ch7P4FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch7P4FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch7P4FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت الخصائص والفوائد الأربعة (Features Grid) تظهر ورا بعضها بتسلسل فخم */
.feat-card {
    opacity: 0;
    transform: translateY(25px);
    animation: ch7P4CardUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.features-grid .feat-card:nth-child(1) { animation-delay: 0.3s; }
.features-grid .feat-card:nth-child(2) { animation-delay: 0.45s; }
.features-grid .feat-card:nth-child(3) { animation-delay: 0.6s; }
.features-grid .feat-card:nth-child(4) { animation-delay: 0.75s; }

@keyframes ch7P4CardUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.feat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.25);
}

/* 3. قسم التطبيقات (Applications Grid) */
.apps-wrapper {
    opacity: 0;
    transform: translateY(30px);
    animation: ch7P4FadeUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

.apps-grid .app-item {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: ch7P4ScaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;
}

.apps-grid .app-item:nth-child(1) { animation-delay: 1.0s; }
.apps-grid .app-item:nth-child(2) { animation-delay: 1.1s; }
.apps-grid .app-item:nth-child(3) { animation-delay: 1.2s; }
.apps-grid .app-item:nth-child(4) { animation-delay: 1.3s; }

@keyframes ch7P4ScaleUp {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.app-item:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.3);
}

/* 4. بانر التخرج والختام الأسطوري (Grand Finale Completion Badge) */
.grand-finale-banner {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    animation: ch7P4FinalePopup 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 1.4s;
    transition: all 0.4s ease;
}

@keyframes ch7P4FinalePopup {
    0% { opacity: 0; transform: scale(0.9) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.grand-finale-banner:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 45px rgba(250, 204, 21, 0.3);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 4 - PAGE 3 (AI vs ML & BIG DATA)
======================================================== */

/* 1. دخول العنوان الرئيسي */
.ch4-p3-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch4P3FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes ch4P3FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت المقارنة (AI vs ML vs DL) تظهر ورا بعضها */
.tech-comparison-grid .tech-card {
    opacity: 0;
    transform: translateY(25px);
    animation: ch4P3CardUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.tech-comparison-grid .tech-card:nth-child(1) { animation-delay: 0.2s; }
.tech-comparison-grid .tech-card:nth-child(2) { animation-delay: 0.35s; }
.tech-comparison-grid .tech-card:nth-child(3) { animation-delay: 0.5s; }

@keyframes ch4P3CardUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.2);
}

/* 3. صندوق تعريف Data Science الشامل */
.ds-broad-term {
    opacity: 0;
    transform: translateY(20px);
    animation: ch4P3FadeUp 0.7s ease forwards;
    animation-delay: 0.6s;
}

@keyframes ch4P3FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 4. قسم Big Data وأنشطته اليومية */
.big-data-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch4P3FadeUp 0.8s ease forwards;
    animation-delay: 0.7s;
}

.bd-activities .bd-activity-card {
    opacity: 0;
    transform: translateX(-20px);
    animation: ch4P3SlideRight 0.5s ease forwards;
    transition: all 0.3s ease;
}

.bd-activities .bd-activity-card:nth-child(1) { animation-delay: 0.8s; }
.bd-activities .bd-activity-card:nth-child(2) { animation-delay: 0.95s; }
.bd-activities .bd-activity-card:nth-child(3) { animation-delay: 1.1s; }

@keyframes ch4P3SlideRight {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.bd-activity-card:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* 5. دورة حياة المشروع (Lifecycle Steps تظهر بتسلسل مذهل) */
.lc-header {
    opacity: 0;
    transform: translateY(25px);
    animation: ch4P3FadeUp 0.8s ease forwards;
    animation-delay: 1.2s;
}

.lifecycle-steps .lc-step {
    opacity: 0;
    transform: translateY(20px);
    animation: ch4P3CardUp 0.5s ease forwards;
    transition: all 0.3s ease;
}

.lifecycle-steps .lc-step:nth-child(1) { animation-delay: 1.3s; }
.lifecycle-steps .lc-step:nth-child(2) { animation-delay: 1.42s; }
.lifecycle-steps .lc-step:nth-child(3) { animation-delay: 1.54s; }
.lifecycle-steps .lc-step:nth-child(4) { animation-delay: 1.66s; }
.lifecycle-steps .lc-step:nth-child(5) { animation-delay: 1.78s; }

.lc-step:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}
/* =======================================================
   ANIMATIONS FOR CHAPTER 4 - PAGE 3 (CASE STUDY)
======================================================== */

/* 1. دخول العنوان الرئيسي وخلفية دراسة الحالة */
.ch4-p3-container .section-title-glow {
    opacity: 0;
    transform: translateY(-25px);
    animation: ch4P4FadeDown 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.cs-hero {
    opacity: 0;
    transform: translateY(20px);
    animation: ch4P4FadeUp 0.7s ease forwards;
    animation-delay: 0.2s;
}

@keyframes ch4P4FadeDown {
    0% { opacity: 0; transform: translateY(-25px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ch4P4FadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. كروت الطرق الثلاثة للحل (Approaches Grid) تظهر ورا بعضها */
.approach-card {
    opacity: 0;
    transform: translateY(25px);
    animation: ch4P4CardUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.approaches-grid .approach-card:nth-child(1) { animation-delay: 0.3s; }
.approaches-grid .approach-card:nth-child(2) { animation-delay: 0.45s; }
.approaches-grid .approach-card:nth-child(3) { animation-delay: 0.6s; }

@keyframes ch4P4CardUp {
    0% { opacity: 0; transform: translateY(25px); }
    100% { opacity: 1; transform: translateY(0); }
}

.approach-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.25);
}

/* 3. خطوات تطبيق الـ Machine Learning الأربعة (ML Steps) تظهر بتسلسل مذهل */
.ml-step-box {
    opacity: 0;
    transform: translateY(25px);
    animation: ch4P4CardUp 0.6s ease forwards;
    transition: all 0.4s ease;
}

.ml-steps-grid .ml-step-box:nth-child(1) { animation-delay: 0.7s; }
.ml-steps-grid .ml-step-box:nth-child(2) { animation-delay: 0.85s; }
.ml-steps-grid .ml-step-box:nth-child(3) { animation-delay: 1.0s; }
.ml-steps-grid .ml-step-box:nth-child(4) { animation-delay: 1.15s; }

.ml-step-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.25);
}

/* 4. قسم تحليل البيانات الاستكشافي (EDA Section) */
.eda-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch4P4FadeUp 0.8s ease forwards;
    animation-delay: 1.3s;
}

.eda-card {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    animation: ch4P4ScaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: all 0.3s ease;
}

.eda-grid .eda-card:nth-child(1) { animation-delay: 1.4s; }
.eda-grid .eda-card:nth-child(2) { animation-delay: 1.5s; }
.eda-grid .eda-card:nth-child(3) { animation-delay: 1.6s; }

@keyframes ch4P4ScaleUp {
    0% { opacity: 0; transform: scale(0.95) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.eda-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3);
}

/* 5. قسم التوصيات النهائية (Final Recommendations) */
.recom-section {
    opacity: 0;
    transform: translateY(30px);
    animation: ch4P4FadeUp 0.8s ease forwards;
    animation-delay: 1.7s;
}

.recom-list li {
    opacity: 0;
    transform: translateX(-20px);
    animation: ch4P4SlideRight 0.5s ease forwards;
    transition: all 0.3s ease;
}

.recom-list li:nth-child(1) { animation-delay: 1.8s; }
.recom-list li:nth-child(2) { animation-delay: 1.9s; }
.recom-list li:nth-child(3) { animation-delay: 2.0s; }
.recom-list li:nth-child(4) { animation-delay: 2.1s; }

@keyframes ch4P4SlideRight {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.recom-list li:hover {
    transform: translateX(5px);
}
/* تأثير دائرة الضوء المتبعة للماوس */
.mouse-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(139, 92, 246, 0.04) 40%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 99999;
    will-change: transform;
    transition: width 0.3s ease, height 0.3s ease;
}
/* دائرة الضوء المضيئة الواضحة تتبع الماوس */
.perfect-glow-circle {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(139, 92, 246, 0.15) 50%, transparent 75%);
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.2);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 99999;
    will-change: transform;
}
/* تنسيق المربعات للنصوص العادية (Info Cards) */
.info-card {
    background: rgba(15, 23, 42, 0.6); /* خلفية زجاجية غامقة */
    border: 1px solid rgba(56, 189, 248, 0.2); /* إطار خفيف سماوي */
    border-left: 5px solid #38bdf8; /* خط عريض من اليسار */
    padding: 20px 25px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.info-card:hover {
    transform: translateX(10px); /* حركة خفيفة لليمين عند التأشير */
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.5);
}

.info-card i {
    font-size: 1.5rem;
    color: #38bdf8;
    margin-top: 3px;
}

.info-card p {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.6;
}
/* =======================================================
   ANIMATIONS FOR INFO CARDS (CHAPTER 5 - PAGE 2)
======================================================== */

/* تجهيز الكروت للأنيميشن */
.info-card {
    opacity: 0;
    transform: translateY(30px);
    animation: infoCardSlideUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* تسلسل ظهور كروت الـ Blockchain */
.blockchain-info-container .info-card:nth-child(1) { animation-delay: 0.2s; }
.blockchain-info-container .info-card:nth-child(2) { animation-delay: 0.4s; }
.blockchain-info-container .info-card:nth-child(3) { animation-delay: 0.6s; }

/* مربع الـ Hashing (لو كان لحاله برا الحاوية) */
h1 + .info-card, h2 + .info-card, .info-card[style*="border-left-color"] {
    animation-delay: 0.3s;
}

/* حركة الدخول الانسيابية */
@keyframes infoCardSlideUp {
    0% { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}
/* لجعل جميع نصوص الموقع بخط عريض */
p, a, li, span, div, td, th, h1, h2, h3, h4, h5, h6 {
    font-weight: bold !important; 
}