diff --git a/index.html b/index.html
index b8405d9..d3a898d 100644
--- a/index.html
+++ b/index.html
@@ -2,551 +2,529 @@
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    <title>أمان | ملاذك الرقمي الآمن</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>أمان | ملاذك الآمن</title>
+    
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;400;600;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&display=swap" rel="stylesheet">
+    
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        
-        body {
-            font-family: 'Cairo', sans-serif;
-            background: #FEFAF5;
-            color: #1E1A17;
-            overflow-x: hidden;
-            /* Subtle texture for warmth */
-            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d94f30' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+        :root {
+            --paper: #FAFAF8;
+            --ink: #1A1A1A;
+            --night: #121417; /* Deep Charcoal */
+            --accent-soft: #FDE8D5;
+            --accent-bold: #D94F30;
+            --sage: #3A5A48;
         }
 
-        /* --- Sanctuary Color Palette --- */
-        :root {
-            --primary: #D94F30;   /* Warm Terracotta */
-            --secondary: #5E8B7E; /* Sage Green (Safety/Trust) */
-            --bg: #FEFAF5;        /* Cream */
-            --text: #2D2A26;      /* Soft Charcoal */
+        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
+        body {
+            font-family: 'Cairo', sans-serif;
+            background-color: var(--paper);
+            color: var(--ink);
+            overflow-x: hidden;
+            cursor: none;
+        }
+
+        /* --- Custom Cursor --- */
+        .cursor-dot { width: 6px; height: 6px; background: var(--accent-bold); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; mix-blend-mode: difference; }
+        .cursor-ring { width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s, border-color 0.3s; }
+        body.hover-active .cursor-ring { width: 80px; height: 80px; border-color: var(--accent-bold); }
+
+        /* --- NEW HERO: Immersive Dark Sanctuary --- */
+        .hero-sanctuary {
+            position: relative;
+            height: 100vh;
+            width: 100%;
+            background-color: var(--night);
+            color: white;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 10;
+        }
+
+        /* The Background Text (Ghost Typography) */
+        .ghost-text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 20vw;
+            font-weight: 900;
+            white-space: nowrap;
+            opacity: 0.03;
+            color: white;
+            pointer-events: none;
+            user-select: none;
+        }
+
+        /* Fluid Light Effect */
+        .hero-spotlight {
+            position: absolute;
+            width: 150vw;
+            height: 150vw;
+            background: radial-gradient(circle, rgba(217, 79, 48, 0.15) 0%, rgba(0,0,0,0) 70%);
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            transition: all 0.1s ease-out;
+            z-index: 1;
+        }
+
+        /* Hero Content Layer */
+        .hero-content {
+            position: relative;
+            z-index: 10;
+            text-align: center;
+            padding: 0 2rem;
+            mix-blend-mode: exclusion; /* Inverts color for cool effect */
+        }
+
+        .hero-headline {
+            font-size: clamp(3rem, 9vw, 8rem);
+            font-weight: 900;
+            line-height: 0.95;
+            letter-spacing: -0.04em;
+            margin-bottom: 2rem;
+        }
+
+        .magnetic-btn {
+            position: relative;
+            padding: 1.5rem 4rem;
+            background: transparent;
+            border: 1.5px solid white;
+            color: white;
+            font-weight: 700;
+            font-size: 1rem;
+            border-radius: 100px;
+            cursor: none;
+            overflow: hidden;
+            transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+            z-index: 2;
+        }
+        .magnetic-btn::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background: var(--accent-bold);
+            transform: translateY(100%);
+            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+            z-index: -1;
+        }
+        .magnetic-btn:hover::before {
+            transform: translateY(0);
+        }
+        .magnetic-btn:hover {
+            border-color: var(--accent-bold);
+        }
+
+        /* --- Content Sections (Light Mode) --- */
+        .content-wrapper {
+            position: relative;
+            background-color: var(--paper);
+            z-index: 20;
+            margin-top: 0; 
+            /* Pinned effect handled by JS, but for fallback: */
+            box-shadow: 0 -50px 100px rgba(0,0,0,0.2);
         }
 
         .glass-card {
-            background: rgba(255, 255, 255, 0.85);
-            backdrop-filter: blur(24px);
-            border-radius: 48px;
-            border: 1px solid rgba(255, 255, 255, 0.9);
-            box-shadow: 0 20px 40px -10px rgba(217, 79, 48, 0.08), 0 0 0 1px rgba(0,0,0,0.01);
+            background: rgba(255, 255, 255, 0.6);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(0,0,0,0.03);
+            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
+            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
         }
+        .glass-card:hover { transform: translateY(-3px); }
 
-        /* --- Typography & Hierarchy --- */
-        h1, h2, h3 { letter-spacing: -0.02em; }
+        .serif { font-family: 'Noto Naskh Arabic', serif; }
         
-        .text-sanctuary {
-            background: linear-gradient(135deg, var(--primary), #E88B6B);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-
-        .text-safe {
-            color: var(--secondary);
-        }
-
-        /* --- Buttons: Tactile & Friendly --- */
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-            padding: 18px 40px;
-            border-radius: 100px;
-            font-weight: 700;
-            font-size: 1.1rem;
-            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-            box-shadow: 0 10px 20px -5px rgba(217, 79, 48, 0.3);
-            border: none;
-            cursor: pointer;
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .btn-primary:hover {
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.4);
-            background: #E05A3A;
-        }
-        .btn-primary:active { transform: scale(0.98); }
-
-        .btn-secondary {
-            background: rgba(94, 139, 126, 0.1);
-            color: var(--secondary);
-            padding: 16px 32px;
-            border-radius: 100px;
-            font-weight: 700;
-            border: 2px solid transparent;
-            transition: all 0.3s;
-        }
-        .btn-secondary:hover {
-            background: var(--secondary);
-            color: white;
-            border-color: var(--secondary);
-        }
-
-        /* --- Chat Interface: Friendly & Private --- */
-        .chat-container {
-            border-radius: 40px;
-            background: #FFFFFF;
-            border: 1px solid #F5EFE7;
-            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.08);
-        }
-        
-        .user-bubble {
-            background: var(--primary);
-            color: white;
-            border-radius: 30px 30px 6px 30px;
-            padding: 16px 24px;
-            box-shadow: 0 4px 12px rgba(217, 79, 48, 0.15);
-            position: relative;
-        }
-
-        .ai-bubble {
-            background: #F7F4F0;
-            color: #3D3A36;
-            border-radius: 30px 30px 30px 6px;
-            padding: 16px 24px;
-            border: 1px solid #EDE6DB;
-        }
-
-        .chat-input {
-            border: 2px solid #F0E8DD;
-            border-radius: 100px;
-            padding: 18px 28px;
-            font-size: 1.05rem;
-            transition: all 0.2s;
-        }
-        .chat-input:focus {
-            border-color: var(--secondary);
-            box-shadow: 0 0 0 4px rgba(94, 139, 126, 0.15);
-            outline: none;
-        }
-
-        /* --- Floating Elements --- */
-        .float-cta {
-            position: fixed;
-            bottom: 32px;
-            right: 32px;
-            z-index: 999;
-            background: var(--primary);
-            color: white;
-            border-radius: 100px;
-            padding: 16px 40px;
-            box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.5);
-            animation: pulse-soft 3s infinite;
-        }
-
-        .emergency-btn {
-            position: fixed;
-            top: 50%;
-            left: 0;
-            transform: translateY(-50%);
-            z-index: 999;
-            background: #2D2A26;
-            color: white;
-            padding: 12px 8px;
-            border-radius: 0 12px 12px 0;
-            writing-mode: vertical-rl;
-            text-orientation: mixed;
-            font-weight: 700;
-            cursor: pointer;
-            opacity: 0.7;
-            transition: 0.2s;
-            border-left: 3px solid var(--primary);
-        }
-        .emergency-btn:hover { opacity: 1; background: #000; }
-
         /* Animations */
-        @keyframes pulse-soft {
-            0%, 100% { box-shadow: 0 15px 30px -8px rgba(217, 79, 48, 0.5); }
-            50% { box-shadow: 0 15px 40px -5px rgba(217, 79, 48, 0.7); }
-        }
+        .reveal-up { opacity: 0; transform: translateY(60px); }
+        .fade-in { opacity: 0; }
 
-        .status-indicator {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            background: rgba(94, 139, 126, 0.1);
-            color: var(--secondary);
-            padding: 6px 16px;
-            border-radius: 50px;
-            font-size: 0.85rem;
-            font-weight: 700;
+        /* --- Chat Specifics --- */
+        .chat-input-line {
+            background: transparent; border: none; border-bottom: 2px solid var(--ink);
+            padding: 1rem 0; width: 100%; font-size: 1.1rem; font-family: 'Cairo', sans-serif; outline: none;
         }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            background: var(--secondary);
-            border-radius: 50%;
-            animation: blink 2s infinite;
-        }
-        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+        .chat-input-line:focus { border-color: var(--accent-bold); }
+        .msg-user { background: var(--ink); color: white; border-radius: 4px 4px 20px 4px; padding: 16px 24px; }
+        .msg-bot { background: var(--accent-soft); color: #4A3F35; border-radius: 4px 4px 4px 20px; padding: 16px 24px; border: 1px solid rgba(255,255,255,0.5); }
 
-        /* Scrollbar */
-        ::-webkit-scrollbar { width: 6px; }
-        ::-webkit-scrollbar-track { background: #F5F0EA; }
-        ::-webkit-scrollbar-thumb { background: #D9CBBE; border-radius: 20px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
+        /* --- FAQ Accordion --- */
+        .faq-item { border-bottom: 1px solid rgba(0,0,0,0.05); }
+        .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; cursor: pointer; text-align: right; }
+        .faq-question h4 { font-size: 1.2rem; font-weight: 700; transition: color 0.3s; }
+        .faq-question:hover h4 { color: var(--accent-bold); }
+        .faq-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); color: var(--sage); }
+        .faq-item.active .faq-icon { transform: rotate(45deg); }
+        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s; }
+        .faq-item.active .faq-answer { max-height: 500px; padding-bottom: 2rem; }
 
-        .faq-item.active .faq-answer { max-height: 500px; padding-bottom: 24px; }
-        .faq-answer { 
-            max-height: 0; 
-            overflow: hidden; 
-            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.1s; 
-        }
-        .faq-item.active i { transform: rotate(180deg); color: var(--primary); }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .glass-card { border-radius: 32px; }
-            h1 { font-size: 2.5rem; }
-        }
     </style>
 </head>
 <body>
 
-    <!-- Emergency Escape Button (Discreet but accessible) -->
-    <div class="emergency-btn" id="emergencyBtn" title="مخرج طوارئ سريع">
-        <i class="fas fa-arrow-right-from-bracket mb-2"></i>
-        خروج آمن
-    </div>
+    <!-- Cursor -->
+    <div class="cursor-dot"></div>
+    <div class="cursor-ring"></div>
 
-    <!-- Navigation -->
-    <nav class="fixed top-0 w-full z-50 py-4 px-6 bg-white/80 backdrop-blur-xl border-b border-black/5">
-        <div class="max-w-7xl mx-auto flex justify-between items-center">
-            <div class="flex items-center gap-3">
-                <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#D94F30] to-[#A52E10] flex items-center justify-center shadow-lg transform -rotate-3 hover:rotate-0 transition-transform">
-                    <i class="fas fa-shield-heart text-white text-xl"></i>
-                </div>
-                <div class="flex flex-col">
-                    <span class="text-2xl font-black tracking-tight leading-none">أمان</span>
-                    <span class="text-[10px] font-bold text-[#D94F30] tracking-wider">ملاذك الرقمي</span>
-                </div>
-            </div>
-            <div class="hidden md:flex gap-8 font-semibold text-[#4D3828] text-sm">
-                <a href="#home" class="hover:text-[#D94F30] transition">الرئيسية</a>
-                <a href="#report" class="hover:text-[#D94F30] transition">ابدأ الحوار</a>
-                <a href="#knowledge" class="hover:text-[#D94F30] transition">معلومات قانونية</a>
-                <a href="#faq" class="hover:text-[#D94F30] transition">أسئلة مكررة</a>
-            </div>
-            <div class="status-indicator">
-                <span class="status-dot"></span>
-                اتصال آمن 256-bit
-            </div>
+    <!-- Navigation (Fixed Over Hero) -->
+    <nav class="fixed top-0 w-full z-50 px-8 md:px-16 py-8 flex justify-between items-center mix-blend-difference">
+        <div class="flex gap-8 text-xs tracking-[0.2em] font-bold text-white">
+            <a href="#impact" class="hover-target">التأثير</a>
+            <a href="#sanctuary" class="hover-target">الدعم</a>
+            <a href="#faq" class="hover-target">أسئلة</a>
         </div>
+        <div class="text-white text-xl font-black hover-target">أمان.</div>
     </nav>
 
-    <!-- Hero Section: Emotional & Inviting -->
-    <section id="home" class="pt-36 pb-20 px-6 max-w-7xl mx-auto">
-        <div class="grid lg:grid-cols-5 gap-16 items-center">
-            <div class="lg:col-span-3 space-y-8">
-                <div class="status-indicator mb-4 inline-flex">
-                    <i class="fas fa-hands-holding-heart ml-2 text-[#D94F30]"></i>
-                    مساعدون متطوعون متاحون الآن
-                </div>
-                <h1 class="text-5xl md:text-6xl font-black leading-tight">
-                    لست وحدك.<br>
-                    <span class="text-sanctuary">ملاذك الآمن</span> يبدأ هنا.
-                </h1>
-                <p class="text-lg text-[#6A5D52] leading-relaxed max-w-xl font-medium">
-                    نحن هنا لنستمع إليك بدنّة تامة. مساحة رقمية مشفرة لتشارك همومك، تبلغ عن انتهاك، أو تطلب استشارة قانونية أو نفسية دون خوف من التتبع أو الحكم.
-                </p>
-                <div class="flex flex-wrap gap-4 pt-4">
-                    <button id="heroReportBtn" class="btn-primary">
-                        <i class="fas fa-comment-dots"></i>
-                        ابدأ محادثة سرية
-                    </button>
-                    <button id="heroAnonBtn" class="btn-secondary">
-                        <i class="fas fa-user-ninja"></i>
-                        تعرف على حمايتك
-                    </button>
-                </div>
-                <div class="flex gap-6 text-sm text-[#8C7B6B] font-semibold pt-4">
-                    <span class="flex items-center gap-2"><i class="fas fa-lock text-[#5E8B7E]"></i> تشفير كامل</span>
-                    <span class="flex items-center gap-2"><i class="fas fa-ghost text-[#5E8B7E]"></i> لا سجلات</span>
-                    <span class="flex items-center gap-2"><i class="fas fa-heart text-[#D94F30]"></i> +12,000 حالة دُعمنا</span>
-                </div>
+    <!-- HERO SECTION (The Sanctuary) -->
+    <section class="hero-sanctuary" id="hero">
+        
+        <!-- Background Ghost Text -->
+        <div class="ghost-text">أمان</div>
+        
+        <!-- Mouse Follow Spotlight -->
+        <div class="hero-spotlight" id="spotlight"></div>
+
+        <!-- Main Content -->
+        <div class="hero-content">
+            <p class="text-xs md:text-sm font-bold tracking-[0.3em] mb-4 opacity-60 fade-in">فضاؤك الرقمي الآمن</p>
+            <h1 class="hero-headline">
+                لست وحدك.
+            </h1>
+            <p class="text-lg md:text-xl font-light max-w-xl mx-auto mb-10 opacity-80 fade-in serif">
+                في خضم الضجيج الرقمي، نحن هنا لنستمع. مساحة سرية للدعم النفسي والقانوني.
+            </p>
+            
+            <div id="magneticArea" class="inline-block">
+                <button class="magnetic-btn hover-target" onclick="document.getElementById('sanctuary').scrollIntoView({behavior: 'smooth'})">
+                    ابدأ الحوار الآمن
+                </button>
             </div>
-            <div class="lg:col-span-2 hidden lg:block">
-                <div class="relative">
-                    <!-- Abstract shapes for "Safety" feeling -->
-                    <div class="absolute -top-10 -right-10 w-48 h-48 bg-[#D94F30]/10 rounded-full blur-3xl"></div>
-                    <div class="absolute -bottom-10 -left-10 w-48 h-48 bg-[#5E8B7E]/10 rounded-full blur-3xl"></div>
-                    
-                    <div class="glass-card p-8 relative hover:scale-[1.01] transition-transform duration-500">
-                        <div class="flex items-center gap-4 mb-6">
-                            <div class="w-14 h-14 rounded-full bg-[#FFF0E8] flex items-center justify-center text-[#D94F30]">
-                                <i class="fas fa-quote-right text-2xl"></i>
-                            </div>
-                            <div>
-                                <h3 class="font-bold text-gray-800">رسالة من نجاة</h3>
-                                <p class="text-xs text-gray-500">تمت المساعدة منذ 3 أيام</p>
-                            </div>
-                        </div>
-                        <p class="text-gray-600 leading-relaxed font-medium text-sm border-r-4 border-[#5E8B7E] pr-4">
-                            "كنت خائفة جدًا من الإبلاغ، لكن الدعم النفسي هنا جعلني أشعر بالقوة. شكرًا لأنكم كنتم صوتي حين لم أستطع التحدث."
+        </div>
+
+        <!-- Scroll Indicator -->
+        <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/30 text-xs tracking-widest">
+            <span>انزل للاكتشاف</span>
+            <div class="w-px h-10 bg-white/20 relative overflow-hidden">
+                <div class="w-full h-1/2 bg-white absolute animate-pulse bottom-0"></div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CONTENT WRAPPER (The Light) -->
+    <div class="content-wrapper">
+
+        <!-- IMPACT SECTION -->
+        <section id="impact" class="py-32 px-8 md:px-20 relative">
+            <div class="max-w-7xl mx-auto">
+                <div class="mb-20 grid md:grid-cols-2 gap-12 items-end">
+                    <div>
+                        <h2 class="text-xs font-bold tracking-[0.2em] text-[#D94F30] mb-4 reveal-up">العنف الرقمي</h2>
+                        <h3 class="text-5xl md:text-6xl font-black leading-tight reveal-up">أثر حقيقي<br>وإصابات عميقة.</h3>
+                    </div>
+                    <p class="text-black/60 leading-relaxed reveal-up serif text-lg">
+                        العنف الرقمي ليس مجرد كلمات على شاشة. إنه سلاح موجه غالباً نحو النساء، يهدف إلى إسكات الحريات.
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-2 gap-12 mb-20 border-t border-black/10 pt-16">
+                    <div class="reveal-up">
+                        <h4 class="text-3xl font-bold mb-6 border-b-4 border-[var(--accent-soft)] pb-2 inline-block">الواقع المؤلم</h4>
+                        <p class="serif leading-loose text-black/80 text-lg mb-6">
+                            تواجه النساء في الفضاء الرقمي أنواعاً متعددة من العنف، بدءاً من التحرش والابتزاز الإلكتروني، وصولاً إلى انتهاك الخصوصية وتشويه السمعة. 
                         </p>
-                        <div class="mt-6 bg-green-50 rounded-2xl p-4 flex items-center gap-3">
-                            <i class="fas fa-check-circle text-[#5E8B7E] text-xl"></i>
-                            <div class="text-xs font-bold text-[#5E8B7E]">تم حل الحالة بأمان تام وسرية كاملة</div>
+                        <p class="serif leading-loose text-black/60 mb-6">
+                            <span class="text-[var(--accent-bold)] font-bold">التأثير النفسي:</span> يؤدي هذا العنف إلى العزلة الاجتماعية، الخوف من التعبير عن الرأي، وحالات من الاكتئاب الحاد. الضحية غالباً ما تشعر بأنها "المذنبة" مما يزيدها انغلاقاً.
+                        </p>
+                    </div>
+
+                    <div class="reveal-up">
+                        <h4 class="text-3xl font-bold mb-6 border-b-4 border-[var(--sage)] pb-2 inline-block">الطريق إلى الشفاء</h4>
+                        <p class="serif leading-loose text-black/80 text-lg mb-6">
+                            الخطوة الأولى نحو الشفاء هي كسر صمت الخوف. العنف الرقمي جريمة يعاقب عليها القانون، وللضحية حقوق كاملة في الملاحقة القانونية مع حماية هويتها.
+                        </p>
+                        <div class="bg-[var(--accent-soft)] p-6 rounded-sm mt-8">
+                            <p class="font-bold text-[var(--accent-bold)]">هل تعلم؟</p>
+                            <p class="text-sm mt-2 text-black/70">القوانين العربية تطورت لتشمل عقوبات رادعة للجرائم الإلكترونية، منها السجن والغرامات المالية.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="grid md:grid-cols-3 gap-8" id="knowledge">
+                    <div class="glass-card p-8 rounded-sm hover-target">
+                        <div class="w-12 h-12 rounded-full bg-[#FFD9C0] flex items-center justify-center mb-6 text-xl">🛡️</div>
+                        <h4 class="text-2xl font-bold mb-4">التنمر الإلكتروني</h4>
+                        <p class="text-sm font-light leading-relaxed text-black/60 mb-6">التحرش المستمر والسخرية. التنمر قد يكون صامتاً ولكن أثره عميق.</p>
+                    </div>
+                    <div class="glass-card p-8 rounded-sm hover-target">
+                        <div class="w-12 h-12 rounded-full bg-[#D9E8D5] flex items-center justify-center mb-6 text-xl">⚖️</div>
+                        <h4 class="text-2xl font-bold mb-4">خطاب الكراهية</h4>
+                        <p class="text-sm font-light leading-relaxed text-black/60 mb-6">الهجوم على الهوية أو المعتقد. أنت محمي بقوانين صارمة تحظر التحريض.</p>
+                    </div>
+                    <div class="glass-card p-8 rounded-sm hover-target">
+                        <div class="w-12 h-12 rounded-full bg-[#F0D9D9] flex items-center justify-center mb-6 text-xl">🔒</div>
+                        <h4 class="text-2xl font-bold mb-4">الابتزاز الرقمي</h4>
+                        <p class="text-sm font-light leading-relaxed text-black/60 mb-6">التهديد بمعلومات أو صور خاصة. لدينا فريق متخصص لإنهاء هذا الملف بذكاء.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- FAQ SECTION -->
+        <section id="faq" class="py-32 px-8 md:px-20 bg-[var(--stone)]">
+            <div class="max-w-4xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-4 reveal-up">الأسئلة الشائعة</h2>
+                    <h3 class="text-4xl md:text-5xl font-black leading-tight reveal-up">كل ما تحتاج معرفته.</h3>
+                </div>
+
+                <div class="border-t border-black/10">
+                    <div class="faq-item reveal-up">
+                        <div class="faq-question hover-target" onclick="toggleFaq(this)">
+                            <h4>هل هويتي مكفولة السرية تماماً؟</h4>
+                            <div class="faq-icon text-2xl font-light">+</div>
+                        </div>
+                        <div class="faq-answer">
+                            <p class="text-black/60 leading-relaxed pr-8 serif">نعم، بشكل مطلق. نستخدم تقنيات تشفير متقدمة ولا نطلب أي بيانات تعريفية. حتى فريق الدعم لا يرى هويتك الحقيقية.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item reveal-up">
+                        <div class="faq-question hover-target" onclick="toggleFaq(this)">
+                            <h4>ماذا يجب أن أفعل إذا تعرضت للابتزاز؟</h4>
+                            <div class="faq-icon text-2xl font-light">+</div>
+                        </div>
+                        <div class="faq-answer">
+                            <p class="text-black/60 leading-relaxed pr-8 serif">توقف عن التواصل مع المبتز فوراً ولا تدفع أي أموال. خذ لقطات شاشة للأدلة. تواصل معنا عبر القناة الآمنة لتوجيهك قانونياً وتقنياً.</p>
+                        </div>
+                    </div>
+
+                    <div class="faq-item reveal-up">
+                        <div class="faq-question hover-target" onclick="toggleFaq(this)">
+                            <h4>هل يمكنكم مساعدتي في حذف صور خاصة من الإنترنت؟</h4>
+                            <div class="faq-icon text-2xl font-light">+</div>
+                        </div>
+                        <div class="faq-answer">
+                            <p class="text-black/60 leading-relaxed pr-8 serif">نعم، لدينا فريق تقني متخصص في إزالة المحتوى من المنصات والتعاون مع الجهات المعنية لسحب المواد المخالفة.</p>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
 
-    <!-- Chat Section: The Core Experience -->
-    <section id="report" class="max-w-6xl mx-auto px-6 py-16">
-        <div class="glass-card p-2 md:p-3 rounded-[48px] overflow-hidden">
-            <div class="bg-[#FFFBF7] rounded-[44px] p-6 md:p-8">
-                <div class="flex flex-col md:flex-row gap-8">
-                    <!-- Chat Area -->
-                    <div class="flex-1 flex flex-col">
-                        <div class="flex justify-between items-center mb-6 pb-4 border-b border-gray-100">
-                            <div>
-                                <h2 class="text-2xl font-black text-gray-900">مساحة الحوار الآمن</h2>
-                                <p class="text-sm text-gray-500 mt-1">محادثتك مشفرة ولا يتم تخزينها نهائياً</p>
-                            </div>
-                            <div class="hidden md:flex items-center gap-2 text-xs font-bold text-gray-500 bg-white px-4 py-2 rounded-full shadow-sm">
-                                <i class="fas fa-shield-check text-[#5E8B7E]"></i>
-                                مشفر TLS 1.3
-                            </div>
-                        </div>
-
-                        <div id="chatMessages" class="flex-1 space-y-5 mb-6 h-[400px] overflow-y-auto pr-2 scroll-smooth">
-                            <!-- Chat bubbles will be injected here -->
-                        </div>
-
-                        <div class="bg-white rounded-2xl p-2 flex gap-2 shadow-sm border border-gray-100">
-                            <input type="text" id="chatInput" placeholder="اكتب رسالتك هنا... خطوتك الأولى نحو الحل" class="chat-input flex-1 border-none bg-transparent shadow-none focus:ring-0">
-                            <button id="sendMessageBtn" class="btn-primary !py-4 !px-8 !rounded-2xl">
-                                <i class="fas fa-paper-plane"></i>
-                            </button>
-                        </div>
+        <!-- THE SANCTUARY (Chat) -->
+        <section id="sanctuary" class="min-h-screen py-32 px-8 md:px-20 grid grid-cols-1 md:grid-cols-12 gap-16 items-center bg-[#FAFAF8]">
+            <div class="md:col-span-4 flex flex-col justify-center">
+                <span class="text-xs font-bold tracking-[0.2em] text-[var(--sage)] mb-6 reveal-up">قناة الاستماع</span>
+                <h2 class="text-5xl md:text-6xl font-black leading-tight mb-8 reveal-up">الحديث<br>أول خطوات<br>الشفاء.</h2>
+                <p class="text-black/60 leading-relaxed mb-8 font-light reveal-up">هذه القناة مشفرة بالكامل. رسائلك تمحى فور إغلاق الجلسة.</p>
+                
+                <div class="space-y-4 mt-4 text-sm">
+                    <div class="flex items-center gap-3 reveal-up">
+                        <span class="w-8 h-8 rounded-full bg-[var(--ink)] text-white flex items-center justify-center font-bold">١</span>
+                        <span>اكتب مشكلتك</span>
                     </div>
-
-                    <!-- Sidebar: Tips & Safety -->
-                    <div class="w-full md:w-72 space-y-6 bg-white/50 rounded-3xl p-6 border border-gray-100">
-                        <div>
-                            <h3 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
-                                <i class="fas fa-lightbulb text-[#D94F30]"></i>
-                                نصائح قبل البدء
-                            </h3>
-                            <ul class="space-y-3 text-sm text-gray-600">
-                                <li class="flex items-start gap-2">
-                                    <span class="text-[#5E8B7E] mt-1">●</span>
-                                    <span>لا تشارك اسمك الحقيقي أو موقعك.</span>
-                                </li>
-                                <li class="flex items-start gap-2">
-                                    <span class="text-[#5E8B7E] mt-1">●</span>
-                                    <span>احتفظ بلقطات الشاشة كدليل خارج المنصة.</span>
-                                </li>
-                                <li class="flex items-start gap-2">
-                                    <span class="text-[#5E8B7E] mt-1">●</span>
-                                    <span>استخدم زر "الخروج الآمن" إذا شعرت بالخطر.</span>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="bg-[#FEF3F0] rounded-2xl p-4">
-                            <h4 class="font-bold text-[#D94F30] text-sm mb-2">هل أنت في خطر فوري؟</h4>
-                            <p class="text-xs text-gray-600 mb-3">إذا كنت في وضع يهدد حياتك، تواصل مع الطوارئ المحلية فوراً.</p>
-                            <button class="w-full bg-[#D94F30] text-white text-sm py-2 rounded-full font-bold hover:bg-[#C24020] transition">اتصل بالطوارئ</button>
-                        </div>
+                    <div class="flex items-center gap-3 reveal-up">
+                        <span class="w-8 h-8 rounded-full border border-[var(--ink)] flex items-center justify-center font-bold text-xs">٢</span>
+                        <span class="opacity-50">استمع للدعم</span>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
 
-    <!-- Knowledge Section -->
-    <section id="knowledge" class="max-w-7xl mx-auto px-6 py-20">
-        <div class="text-center mb-14">
-            <span class="inline-block px-4 py-1 bg-[#E8F0ED] text-[#5E8B7E] rounded-full text-sm font-bold mb-4">معرفتك قوتك</span>
-            <h2 class="text-4xl md:text-5xl font-black text-gray-900">حقوقك القانونية محمية</h2>
-            <p class="text-gray-500 text-lg max-w-2xl mx-auto mt-4">اختر بلدك للاطلاع على القوانين التي تحميك من التحرش والابتزاز الإلكتروني.</p>
-        </div>
+            <div class="md:col-span-8 glass-card p-8 md:p-12 rounded-sm shadow-xl border-l-4 border-[var(--accent-soft)]">
+                <div id="chatBox" class="min-h-[450px] flex flex-col justify-end mb-8 pr-2 space-y-6 overflow-y-auto max-h-[60vh]">
+                    <div class="flex justify-start reveal-up">
+                        <div class="msg-bot max-w-md">
+                            <p class="font-bold text-sm text-[#3A5A48] mb-1">مرحباً بك في "أمان"</p>
+                            <p class="text-sm leading-relaxed">سواء كنت تواجهين تنمراً، خطاب كراهية، أو أي خطر رقمي... نحن هنا لنساعدك. كيف يمكننا مساعدتك اليوم؟</p>
+                        </div>
+                    </div>
+                </div>
 
-        <div class="flex flex-wrap justify-center gap-3 mb-10" id="countryContainer">
-            <!-- Country buttons injected via JS -->
-        </div>
-
-        <div id="legalInfoCard" class="glass-card p-8 hidden transition-all duration-500 scale-95 opacity-0 transform">
-            <div class="flex justify-between items-start mb-4">
-                <h3 id="countryTitle" class="text-2xl font-black text-[#D94F30]"></h3>
-                <button id="closeLegalCard" class="text-gray-400 hover:text-gray-700 text-2xl">&times;</button>
+                <div class="flex gap-6 items-end pt-6 border-t border-black/5">
+                    <div class="flex-1">
+                        <input type="text" id="userInput" placeholder="اكتب رسالتك هنا..." class="chat-input-line hover-target">
+                    </div>
+                    <button id="sendBtn" class="w-14 h-14 rounded-full bg-[var(--ink)] text-white flex items-center justify-center hover:bg-[var(--accent-bold)] transition-colors hover-target">
+                        <i class="fas fa-long-arrow-alt-left"></i>
+                    </button>
+                </div>
+                
+                <div class="mt-6 flex items-center gap-2 text-xs text-black/40 bg-[#FFD9C0]/20 p-3 rounded-sm">
+                    <i class="fas fa-shield-heart"></i>
+                    <span>هذه المحادثة محمية بتشفير من طرف إلى طرف ولا يتم تسجيلها.</span>
+                </div>
             </div>
-            <p id="countryDescription" class="text-gray-700 leading-relaxed text-lg border-r-4 border-[#5E8B7E] pr-4"></p>
-            <div class="mt-6 flex flex-wrap gap-4">
-                <button id="legalHelpBtn" class="btn-secondary text-sm">اطلب محامي متطوع</button>
+        </section>
+
+        <!-- FOOTER -->
+        <footer class="bg-[var(--ink)] text-white pt-24 pb-12 px-8 md:px-20 relative overflow-hidden">
+            <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-l from-[var(--accent-bold)] via-[var(--accent-soft)] to-[var(--sage)]"></div>
+            <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-16 mb-20">
+                <div class="md:col-span-2">
+                    <h3 class="text-4xl font-black mb-4">أمان</h3>
+                    <p class="text-sm text-white/50 leading-relaxed mb-6 max-w-md">مبادرة غير ربحية تهدف لتوفير ملاذ رقمي آمن للناجيات من العنف الإلكتروني في المنطقة العربية.</p>
+                    <div class="flex gap-4">
+                        <a href="#" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition hover-target"><i class="fab fa-twitter text-sm"></i></a>
+                        <a href="#" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition hover-target"><i class="fab fa-instagram text-sm"></i></a>
+                    </div>
+                </div>
+                <div class="md:col-span-1">
+                    <h4 class="font-bold text-sm mb-6 tracking-wider">روابط سريعة</h4>
+                    <ul class="space-y-3 text-sm text-white/50">
+                        <li><a href="#" class="hover:text-white hover-target transition">الرئيسية</a></li>
+                        <li><a href="#knowledge" class="hover:text-white hover-target transition">المعرفة القانونية</a></li>
+                        <li><a href="#faq" class="hover:text-white hover-target transition">الأسئلة الشائعة</a></li>
+                    </ul>
+                </div>
+                <div class="md:col-span-1 bg-white/5 p-6 rounded-sm">
+                    <h4 class="font-bold text-sm mb-2">طوارئ</h4>
+                    <p class="text-xs text-white/40 mb-4">إذا كنت في خطر جسدي فوري، يرجى التواصل مع:</p>
+                    <a href="tel:911" class="flex items-center gap-2 text-[var(--accent-soft)] text-sm font-bold hover-target">
+                        <i class="fas fa-phone"></i>
+                        الطوارئ المحلية
+                    </a>
+                </div>
             </div>
-        </div>
-    </section>
-
-    <!-- FAQ Section -->
-    <section id="faq" class="max-w-4xl mx-auto px-6 py-20">
-        <div class="text-center mb-12">
-            <h2 class="text-4xl font-black text-gray-900">أسئلة شائعة حول الأمان</h2>
-        </div>
-        <div class="space-y-4" id="faqContainer">
-            <!-- FAQ items injected via JS -->
-        </div>
-    </section>
-
-    <!-- Floating Chat Button (Mobile) -->
-    <div class="float-cta md:hidden" id="mobileChatBtn">
-        <i class="fas fa-comments"></i>
-        <span class="mr-2 font-bold">تحدث معنا</span>
+            <div class="border-t border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+                <div class="flex items-center gap-2">
+                    <span class="w-2 h-2 bg-[var(--sage)] rounded-full animate-pulse"></span>
+                    <span class="text-xs text-white/30">اتصالك بهذه الصفحة آمن ومشفر بالكامل</span>
+                </div>
+                <p class="text-xs text-white/20">© ٢٠٢٥ أمان. جميع الحقوق محمية.</p>
+            </div>
+        </footer>
     </div>
 
-    <footer class="text-center py-12 border-t border-gray-100 bg-white">
-        <div class="max-w-7xl mx-auto px-6">
-            <div class="flex justify-center gap-6 mb-6">
-                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-[#D94F30] hover:text-white transition">
-                    <i class="fab fa-twitter"></i>
-                </div>
-                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-[#D94F30] hover:text-white transition">
-                    <i class="fab fa-instagram"></i>
-                </div>
-            </div>
-            <p class="text-sm text-gray-400 font-medium">© 2025 أمان. مبادرة غير ربحية لحماية الأفراد في الفضاء الرقمي.</p>
-            <p class="text-xs text-gray-300 mt-2">تشفير من طرف إلى طرف · لا سياسة حفظ بيانات · ملاذك الآمن</p>
-        </div>
-    </footer>
-
     <script>
-        // Data
-        const countries = [
-            { id: 'egypt', name: '🇪🇬 مصر', desc: 'قانون مكافحة جرائم تقنية المعلومات رقم 175 لسنة 2018. عقوبة الابتزاز الإلكتروني تصل للسجن المشدد وغرامة تصل إلى 500 ألف جنيه.' },
-            { id: 'ksa', name: '🇸🇦 السعودية', desc: 'نظام مكافحة الجرائم المعلوماتية. عقوبة الابتزاز تصل إلى 5 سنوات سجن وغرامة 3 ملايين ريال. الإبلاغ عبر تطبيق "كلنا آمن".' },
-            { id: 'uae', name: '🇦🇪 الإمارات', desc: 'المرسوم بقانون اتحادي رقم 34 لسنة 2021 بشأن مكافحة الجرائم المعلوماتية. يجرم الابتزاز ويوفر الحماية للضحايا عبر النيابة العامة.' },
-            { id: 'jordan', name: '🇯🇴 الأردن', desc: 'قانون الجرائم الإلكترونية رقم 27 لسنة 2015. يوفر حماية مشددة للخصوصية ويعاقب على نشر الصور الخاصة دون موافقة.' }
-        ];
+        // --- Cursor Logic ---
+        const cursorDot = document.querySelector('.cursor-dot');
+        const cursorRing = document.querySelector('.cursor-ring');
+        let mouseX = 0, mouseY = 0; let ringX = 0, ringY = 0;
+        window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; gsap.to(cursorDot, { x: mouseX, y: mouseY, duration: 0 }); });
+        function animateRing() { ringX += (mouseX - ringX) * 0.1; ringY += (mouseY - ringY) * 0.1; cursorRing.style.left = ringX + 'px'; cursorRing.style.top = ringY + 'px'; requestAnimationFrame(animateRing); } animateRing();
+        const hoverTargets = document.querySelectorAll('.hover-target, a, button, input');
+        hoverTargets.forEach(target => { target.addEventListener('mouseenter', () => document.body.classList.add('hover-active')); target.addEventListener('mouseleave', () => document.body.classList.remove('hover-active')); });
 
-        const faqs = [
-            { q: "كيف تضمنون سرية هويتي؟", a: "نستخدم تقنية التشفير من طرف إلى طرف (End-to-End Encryption) ولا نطلب أي بيانات تعريفية (اسم، هاتف، بريد). الخادم يتعامل معك كرقم عشوائي مؤقت، ولا نحتفظ بسجلات (No-Log Policy)." },
-            { q: "هل يمكن لأحد تتبع مكاني؟", a: "لا. نحن لا نخزن عناوين IP الخاصة بك، وجميع الاتصالات تتم عبر قنوات مشفرة (SSL/TLS) مماثلة لتلك المستخدمة في البنوك." },
-            { q: "ماذا أفعل إذا تلقيت تهديدات الآن؟", a: "حاول عدم الرد على المهدد، خذ لقطات شاشة كاملة للأدلة، وتواصل معنا فوراً لتوجيهك للجهة القانونية المختصة في بلدك." },
-            { q: "هل الخدمة مجانية؟", a: "نعم، المنصة مجانية بالكامل. نحن فريق من المتطوعين والمحامين والمعالجين النفسيين الذين يهدفون لتوفير ملاذ آمن للجميع." }
-        ];
-
-        // Elements
-        const chatMsgs = document.getElementById('chatMessages');
-        const chatInput = document.getElementById('chatInput');
-        const countryCont = document.getElementById('countryContainer');
-        const faqCont = document.getElementById('faqContainer');
-        const legalCard = document.getElementById('legalInfoCard');
-
-        // Initialize UI
-        function init() {
-            // Render Countries
-            countries.forEach(c => {
-                const btn = document.createElement('button');
-                btn.className = "px-6 py-3 rounded-full bg-white border border-gray-200 text-gray-700 font-bold text-sm hover:border-[#D94F30] hover:text-[#D94F30] transition shadow-sm";
-                btn.textContent = c.name;
-                btn.onclick = () => showLegal(c);
-                countryCont.appendChild(btn);
+        // --- Hero Interaction Logic ---
+        // 1. Spotlight Follow
+        const spotlight = document.getElementById('spotlight');
+        const heroSection = document.querySelector('.hero-sanctuary');
+        
+        heroSection.addEventListener('mousemove', (e) => {
+            const rect = heroSection.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            // Move spotlight slightly delayed for dreamy effect
+            gsap.to(spotlight, {
+                x: x - (rect.width / 2),
+                y: y - (rect.height / 2),
+                duration: 0.8,
+                ease: "power2.out"
             });
+        });
 
-            // Render FAQs
-            faqs.forEach(item => {
-                const div = document.createElement('div');
-                div.className = "faq-item bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden transition-all hover:shadow-md cursor-pointer";
-                div.innerHTML = `
-                    <div class="faq-q flex justify-between items-center p-6">
-                        <span class="font-bold text-gray-800 text-lg">${item.q}</span>
-                        <i class="fas fa-chevron-down text-gray-400 transition-transform"></i>
-                    </div>
-                    <div class="faq-answer px-6 text-gray-600 leading-relaxed overflow-hidden max-h-0">
-                        <p class="pb-4">${item.a}</p>
-                    </div>
-                `;
-                div.onclick = () => div.classList.toggle('active');
-                faqCont.appendChild(div);
+        // 2. Magnetic Button
+        const magneticBtn = document.querySelector('.magnetic-btn');
+        const magneticArea = document.getElementById('magneticArea');
+        
+        magneticArea.addEventListener('mousemove', (e) => {
+            const rect = magneticArea.getBoundingClientRect();
+            const x = e.clientX - rect.left - rect.width / 2;
+            const y = e.clientY - rect.top - rect.height / 2;
+            
+            gsap.to(magneticBtn, {
+                x: x * 0.3,
+                y: y * 0.3,
+                duration: 0.2
             });
+        });
 
-            // Initial Chat Message
-            addMsg('مرحباً بك في "أمان". هذه قناة سرية تماماً. كيف يمكننا مساعدتك اليوم؟', false);
+        magneticArea.addEventListener('mouseleave', () => {
+            gsap.to(magneticBtn, {
+                x: 0,
+                y: 0,
+                duration: 0.5,
+                ease: "elastic.out(1, 0.3)"
+            });
+        });
+
+        // --- GSAP Animations ---
+        gsap.registerPlugin(ScrollTrigger);
+
+        // Hero Parallax Text on Scroll
+        gsap.to('.ghost-text', {
+            scale: 1.5,
+            opacity: 0.1,
+            scrollTrigger: {
+                trigger: ".hero-sanctuary",
+                start: "top top",
+                end: "bottom top",
+                scrub: 1
+            }
+        });
+
+        // Reveal Up Animations
+        gsap.utils.toArray('.reveal-up').forEach(elem => {
+            gsap.to(elem, {
+                y: 0, opacity: 1, duration: 1, ease: "power3.out",
+                scrollTrigger: { trigger: elem, start: "top 85%", toggleActions: "play none none reverse" }
+            });
+        });
+
+        // Fade In Animations (Hero specific)
+        gsap.to('.fade-in', { opacity: 0.8, duration: 1.5, stagger: 0.2, delay: 0.5 });
+
+        // --- FAQ Logic ---
+        function toggleFaq(element) {
+            const faqItem = element.parentElement;
+            const isActive = faqItem.classList.contains('active');
+            document.querySelectorAll('.faq-item').forEach(item => item.classList.remove('active'));
+            if (!isActive) faqItem.classList.add('active');
         }
 
-        // Chat Logic
+        // --- Chat Logic ---
+        const chatBox = document.getElementById('chatBox');
+        const userInput = document.getElementById('userInput');
+        const sendBtn = document.getElementById('sendBtn');
+
         function addMsg(text, isUser) {
             const div = document.createElement('div');
-            div.className = `flex ${isUser ? 'justify-start' : 'justify-end'}`; // RTL flip
-            div.innerHTML = `<div class="${isUser ? 'user-bubble' : 'ai-bubble'} max-w-[85%]">${text}</div>`;
-            chatMsgs.appendChild(div);
-            chatMsgs.scrollTop = chatMsgs.scrollHeight;
-        }
-
-        function showTyping() {
-            const t = document.createElement('div');
-            t.id = 'typing';
-            t.className = 'flex justify-end'; // RTL
-            t.innerHTML = `<div class="ai-bubble opacity-70">جاري الكتابة...</div>`;
-            chatMsgs.appendChild(t);
-            chatMsgs.scrollTop = chatMsgs.scrollHeight;
-        }
-
-        function removeTyping() {
-            const t = document.getElementById('typing');
-            if(t) t.remove();
+            div.className = `flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`;
+            const bubble = document.createElement('div');
+            bubble.className = isUser ? 'msg-user max-w-sm' : 'msg-bot max-w-sm';
+            bubble.innerHTML = `<p class="text-sm">${text}</p>`;
+            div.appendChild(bubble);
+            chatBox.appendChild(div);
+            chatBox.scrollTop = chatBox.scrollHeight;
+            gsap.from(div, { opacity: 0, y: 20, duration: 0.4 });
         }
 
         function handleSend() {
-            const text = chatInput.value.trim();
+            const text = userInput.value.trim();
             if(!text) return;
-            
             addMsg(text, true);
-            chatInput.value = '';
-            
-            showTyping();
-            
+            userInput.value = '';
             setTimeout(() => {
-                removeTyping();
-                // Simple empathetic logic
-                let res = "شكراً لمشاركتك. مشاركتك الأولى هي خطوة شجاعة. فريقنا يستقبل رسالتك الآن وسيرد عليك بتوجيهات دقيقة خلال دقائق. أنت في مأمن.";
-                if(text.includes("صور") || text.includes("ابتزاز")) {
-                    res = "هذا موقف صعب، لكنك لست وحدك. لا ترسل أي أموال ولا تتواصل مع المبتز. خذ لقطات شاشة للأدلة. فريقنا القانوني سيتواصل معك الآن لإيقاف هذا.";
-                }
-                addMsg(res, false);
-            }, 1500);
+                addMsg("تم استلام رسالتك بسرية تامة. فريقنا سيقوم بالرد عليك وتقديم الدعم المناسب لحالتك.", false);
+            }, 1000);
         }
 
-        document.getElementById('sendMessageBtn').onclick = handleSend;
-        chatInput.onkeypress = (e) => { if(e.key === 'Enter') handleSend(); };
+        sendBtn.addEventListener('click', handleSend);
+        userInput.addEventListener('keypress', e => { if(e.key === 'Enter') handleSend(); });
 
-        // Legal Logic
-        function showLegal(c) {
-            document.getElementById('countryTitle').textContent = c.name;
-            document.getElementById('countryDescription').textContent = c.desc;
-            legalCard.classList.remove('hidden');
-            setTimeout(() => {
-                legalCard.classList.remove('scale-95', 'opacity-0');
-                legalCard.classList.add('scale-100', 'opacity-100');
-            }, 10);
-            legalCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-
-        document.getElementById('closeLegalCard').onclick = () => {
-            legalCard.classList.add('hidden');
-        };
-
-        // Emergency
-        document.getElementById('emergencyBtn').onclick = () => {
-            window.location.href = 'https://www.google.com'; // Safe redirect
-        };
-
-        // Hero Buttons
-        document.getElementById('heroReportBtn').onclick = () => document.getElementById('report').scrollIntoView({ behavior: 'smooth' });
-        document.getElementById('heroAnonBtn').onclick = () => document.getElementById('knowledge').scrollIntoView({ behavior: 'smooth' });
-
-        // Init
-        init();
     </script>
 </body>
 </html>
\ No newline at end of file
