diff --git a/index.html b/index.html
index d3a898d..43004ee 100644
--- a/index.html
+++ b/index.html
@@ -3,163 +3,81 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>أمان | ملاذك الآمن</title>
-    
+    <title>ملاذ | فضاؤك الرقمي الآمن</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <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">
-    
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap" rel="stylesheet">
     <style>
         :root {
             --paper: #FAFAF8;
             --ink: #1A1A1A;
-            --night: #121417; /* Deep Charcoal */
-            --accent-soft: #FDE8D5;
-            --accent-bold: #D94F30;
-            --sage: #3A5A48;
+            --night: #0a1e2e;
+            --accent-soft: #D6EDF0;
+            --accent-bold: #0F3858;
+            --sage: #36909E;
         }
-
         * { 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;
-        }
+        body { font-family: 'Cairo', sans-serif; background-color: var(--paper); color: var(--ink); overflow-x: hidden; }
 
-        /* --- 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;
+            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%;
+            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;
+            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;
+            position: absolute; width: 150vw; height: 150vw;
+            background: radial-gradient(circle, rgba(54, 144, 158, 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;
-        }
-
+        .hero-content { position: relative; z-index: 10; text-align: center; padding: 0 2rem; color: #E0F4F6; }
+        .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;
+            position: relative; padding: 1.5rem 4rem;
+            background: transparent; border: 1.5px solid #E0F4F6;
+            color: #E0F4F6; font-weight: 700; font-size: 1rem;
+            border-radius: 100px; cursor: pointer; overflow: hidden;
+            transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 2;
+            font-family: 'Cairo', sans-serif;
         }
         .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);
+            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: var(--sage); 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-wrapper { position: relative; background-color: var(--paper); z-index: 20; box-shadow: 0 -50px 100px rgba(0,0,0,0.2); }
         .glass-card {
-            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);
+            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); }
+        .serif { font-family: 'Noto Kufi Arabic', sans-serif; }
+
+        #mainNav { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; }
+        #mainNav.scrolled {
+            background: rgba(10, 30, 46, 0.95);
+            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
+            padding-top: 1.25rem; padding-bottom: 1.25rem;
+        }
+        #mainNav.scrolled a, #mainNav.scrolled div { color: #E0F4F6; }
 
-        .serif { font-family: 'Noto Naskh Arabic', serif; }
-        
-        /* Animations */
         .reveal-up { opacity: 0; transform: translateY(60px); }
         .fade-in { opacity: 0; }
 
-        /* --- 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;
-        }
-        .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); }
-
-        /* --- 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; }
@@ -169,51 +87,94 @@
         .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; }
 
+        /* Telegram Section */
+        .telegram-section {
+            background: linear-gradient(135deg, #0a1e2e 0%, #0F3858 60%, #1a4d6e 100%);
+            position: relative; overflow: hidden;
+        }
+        .telegram-section::before {
+            content: ''; position: absolute; top: -50%; right: -20%;
+            width: 600px; height: 600px; border-radius: 50%;
+            background: radial-gradient(circle, rgba(54,144,158,0.2) 0%, transparent 70%);
+        }
+        .telegram-section::after {
+            content: ''; position: absolute; bottom: -30%; left: -10%;
+            width: 400px; height: 400px; border-radius: 50%;
+            background: radial-gradient(circle, rgba(214,237,240,0.08) 0%, transparent 70%);
+        }
+        .telegram-btn {
+            display: inline-flex; align-items: center; gap: 1rem;
+            background: #229ED9; color: white;
+            padding: 1.2rem 2.5rem; border-radius: 100px;
+            font-weight: 700; font-size: 1.1rem;
+            transition: all 0.3s ease; text-decoration: none;
+            border: 2px solid transparent;
+        }
+        .telegram-btn:hover {
+            background: transparent; border-color: #229ED9;
+            transform: translateY(-2px); box-shadow: 0 15px 40px rgba(34,158,217,0.3);
+        }
+        .telegram-feature {
+            display: flex; align-items: flex-start; gap: 1rem;
+            padding: 1.5rem; border-radius: 12px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            transition: all 0.3s ease;
+        }
+        .telegram-feature:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
+
+        .stat-card {
+            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px; padding: 2rem; text-align: center;
+            backdrop-filter: blur(10px);
+        }
+
+        /* Nav mobile menu */
+        .mobile-menu { display: none; }
+        .mobile-menu.active { display: flex; }
+
+        nav a.nav-link { transition: color 0.2s; }
+        nav a.nav-link:hover { color: var(--sage) !important; }
+        nav a.active-page { color: var(--sage) !important; border-bottom: 2px solid var(--sage); }
     </style>
 </head>
 <body>
 
-    <!-- Cursor -->
-    <div class="cursor-dot"></div>
-    <div class="cursor-ring"></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>
+    <!-- Navigation -->
+    <nav id="mainNav" class="fixed top-0 w-full z-50 px-6 md:px-16 py-6 flex justify-between items-center transition-all duration-500">
+        <div class="flex gap-6 md:gap-8 text-xs tracking-[0.2em] font-bold text-white">
+            <a href="index.html" class="nav-link active-page">الرئيسية</a>
+            <a href="violence.html" class="nav-link">العنف الرقمي</a>
+            <a href="support.html" class="nav-link">الدعم</a>
+            <a href="about.html" class="nav-link">من نحن</a>
+            <a href="faq.html" class="nav-link">أسئلة</a>
         </div>
-        <div class="text-white text-xl font-black hover-target">أمان.</div>
+        <a href="index.html">
+            <img src="Malazlogo.png" alt="ملاذ" class="h-8 w-auto" style="filter: brightness(0) invert(1);" onerror="this.style.display='none'">
+        </a>
     </nav>
 
-    <!-- HERO SECTION (The Sanctuary) -->
+    <!-- HERO -->
     <section class="hero-sanctuary" id="hero">
-        
-        <!-- Background Ghost Text -->
-        <div class="ghost-text">أمان</div>
-        
-        <!-- Mouse Follow Spotlight -->
+        <div class="ghost-text">ملاذ</div>
         <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>
+            <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 class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+                <div id="magneticArea" class="inline-block">
+                    <button class="magnetic-btn" onclick="window.open('https://t.me/malaz_support','_blank')">
+                        ابدأ الحوار الآمن
+                    </button>
+                </div>
+                <a href="violence.html" class="text-white/60 hover:text-white transition font-bold text-sm tracking-widest underline underline-offset-4">
+                    تعرّف على حقوقك
+                </a>
             </div>
         </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">
@@ -222,76 +183,136 @@
         </div>
     </section>
 
-    <!-- CONTENT WRAPPER (The Light) -->
+    <!-- CONTENT -->
     <div class="content-wrapper">
 
-        <!-- IMPACT SECTION -->
-        <section id="impact" class="py-32 px-8 md:px-20 relative">
+        <!-- Quick Overview Cards -->
+        <section class="py-24 px-6 md:px-20">
             <div class="max-w-7xl mx-auto">
-                <div class="mb-20 grid md:grid-cols-2 gap-12 items-end">
+                <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="grid md:grid-cols-3 gap-8">
+                    <a href="violence.html" class="glass-card p-8 rounded-sm reveal-up block group">
+                        <div class="w-14 h-14 rounded-full bg-[#D6EDF0] flex items-center justify-center mb-6 text-2xl">⚖️</div>
+                        <h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">المعرفة القانونية</h4>
+                        <p class="text-sm leading-relaxed text-black/70 serif mb-4">تعرّف على أنواع العنف الرقمي وحقوقك القانونية بموجب قانون الجرائم المعلوماتية رقم 20 لعام 2022.</p>
+                        <span class="text-[var(--sage)] font-bold text-sm">اقرأ المزيد ←</span>
+                    </a>
+                    <a href="https://t.me/malaz_support" target="_blank" rel="noopener noreferrer" class="glass-card p-8 rounded-sm reveal-up block group">
+                        <div class="w-14 h-14 rounded-full bg-[#cce4e8] flex items-center justify-center mb-6 text-2xl">💬</div>
+                        <h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">قناة الدعم الآمنة</h4>
+                        <p class="text-sm leading-relaxed text-black/70 serif mb-4">تواصل معنا بشكل سري ومشفّر. فريقنا من المختصين القانونيين جاهز للمساعدة على مدار الساعة.</p>
+                        <span class="text-[var(--sage)] font-bold text-sm">تواصل معنا ←</span>
+                    </a>
+                    <a href="about.html" class="glass-card p-8 rounded-sm reveal-up block group">
+                        <div class="w-14 h-14 rounded-full bg-[#b8d9de] flex items-center justify-center mb-6 text-2xl">🤝</div>
+                        <h4 class="text-xl font-bold mb-3 text-[#0F3858] group-hover:text-[var(--sage)] transition-colors">عن ملاذ</h4>
+                        <p class="text-sm leading-relaxed text-black/70 serif mb-4">من نحن وما هي رسالتنا؟ تعرّف على فريقنا والقيم التي نؤمن بها في بناء مجتمع رقمي أكثر أماناً.</p>
+                        <span class="text-[var(--sage)] font-bold text-sm">تعرّف علينا ←</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- TELEGRAM COMMUNITY SECTION -->
+        <section class="telegram-section py-32 px-6 md:px-20">
+            <div class="max-w-6xl mx-auto relative z-10">
+                <div class="grid md:grid-cols-2 gap-16 items-center">
+                    <!-- Content -->
                     <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">
-                            تواجه النساء في الفضاء الرقمي أنواعاً متعددة من العنف، بدءاً من التحرش والابتزاز الإلكتروني، وصولاً إلى انتهاك الخصوصية وتشويه السمعة. 
+                        <span class="text-xs font-bold tracking-[0.3em] text-[#36909E] mb-4 block reveal-up">المجتمع</span>
+                        <h2 class="text-4xl md:text-5xl font-black text-white leading-tight mb-6 reveal-up">
+                            انضم إلى<br><span class="text-[#36909E]">مجتمع ملاذ</span><br>على تيليغرام
+                        </h2>
+                        <p class="text-white/70 leading-relaxed mb-8 serif text-lg reveal-up">
+                            كوّن جزءاً من مجتمع داعم من الأفراد الذين يؤمنون بحقوقهم الرقمية. اطّلع على آخر المستجدات، شارك تجربتك بشكل آمن، واحصل على الدعم الذي تحتاجه.
                         </p>
-                        <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 class="space-y-4 mb-10">
+                            <div class="telegram-feature reveal-up">
+                                <div class="text-2xl flex-shrink-0">🔒</div>
+                                <div>
+                                    <h4 class="font-bold text-white mb-1">مجتمع آمن وخاص</h4>
+                                    <p class="text-white/60 text-sm serif">فضاء محمي يمكنك التعبير فيه بحرية دون خوف من الانتقام أو الكشف عن هويتك</p>
+                                </div>
+                            </div>
+                            <div class="telegram-feature reveal-up">
+                                <div class="text-2xl flex-shrink-0">📚</div>
+                                <div>
+                                    <h4 class="font-bold text-white mb-1">محتوى توعوي حصري</h4>
+                                    <p class="text-white/60 text-sm serif">نصائح أمنية، دليل للحقوق القانونية، وتحديثات مستمرة حول العنف الرقمي</p>
+                                </div>
+                            </div>
+                            <div class="telegram-feature reveal-up">
+                                <div class="text-2xl flex-shrink-0">🤝</div>
+                                <div>
+                                    <h4 class="font-bold text-white mb-1">دعم متبادل بين الأعضاء</h4>
+                                    <p class="text-white/60 text-sm serif">تواصل مع أشخاص مرّوا بتجارب مشابهة واحصل على الدعم العاطفي والعملي</p>
+                                </div>
+                            </div>
+                            <div class="telegram-feature reveal-up">
+                                <div class="text-2xl flex-shrink-0">⚡</div>
+                                <div>
+                                    <h4 class="font-bold text-white mb-1">تنبيهات فورية</h4>
+                                    <p class="text-white/60 text-sm serif">احصل على تنبيهات فورية حول تهديدات جديدة وكيفية حماية نفسك منها</p>
+                                </div>
+                            </div>
                         </div>
+                        <a href="https://t.me/malaz_community" target="_blank" rel="noopener noreferrer" class="telegram-btn reveal-up">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-current flex-shrink-0">
+                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+                            </svg>
+                            انضم إلى مجتمعنا الآن
+                        </a>
                     </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>
+                    <!-- Visual CTA Card -->
+                    <div class="flex flex-col gap-6 reveal-up">
+                        <div class="bg-white/5 border border-white/15 rounded-2xl p-8 text-center flex flex-col items-center gap-6">
+                            <div class="w-20 h-20 bg-[#229ED9] rounded-full flex items-center justify-center shadow-lg shadow-[#229ED9]/30">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 fill-white">
+                                    <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+                                </svg>
+                            </div>
+                            <div>
+                                <p class="text-white font-black text-2xl mb-1">@malaz_community</p>
+                                <p class="text-white/50 text-sm serif">القناة الرسمية لملاذ على تيليغرام</p>
+                            </div>
+                            <a href="https://t.me/malaz_community" target="_blank" rel="noopener noreferrer" class="w-full telegram-btn justify-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 fill-current flex-shrink-0"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
+                                انضم الآن
+                            </a>
+                        </div>
+                        <div class="bg-white/5 border border-white/15 rounded-2xl p-6 flex items-center gap-4">
+                            <div class="w-12 h-12 bg-[#36909E]/30 rounded-full flex items-center justify-center flex-shrink-0 text-xl">🔒</div>
+                            <div>
+                                <p class="text-white font-bold text-sm mb-1">سرية تامة ومساحة آمنة</p>
+                                <p class="text-white/50 text-xs serif">مجتمع مُدار ومحمي، يمكنك الانضمام بهوية مجهولة</p>
+                            </div>
+                        </div>
+                        <div class="bg-white/5 border border-white/15 rounded-2xl p-6 flex items-center gap-4">
+                            <div class="w-12 h-12 bg-[#36909E]/30 rounded-full flex items-center justify-center flex-shrink-0 text-xl">⚡</div>
+                            <div>
+                                <p class="text-white font-bold text-sm mb-1">دعم فوري على مدار الساعة</p>
+                                <p class="text-white/50 text-xs serif">متواجدون دائماً للمساعدة</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </section>
 
-        <!-- FAQ SECTION -->
-        <section id="faq" class="py-32 px-8 md:px-20 bg-[var(--stone)]">
+        <!-- Quick FAQ Preview -->
+        <section class="py-24 px-6 md:px-20 bg-[#FAFAF8]">
             <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>
+                    <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)">
+                        <div class="faq-question" onclick="toggleFaq(this)">
                             <h4>هل هويتي مكفولة السرية تماماً؟</h4>
                             <div class="faq-icon text-2xl font-light">+</div>
                         </div>
@@ -299,9 +320,8 @@
                             <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)">
+                        <div class="faq-question" onclick="toggleFaq(this)">
                             <h4>ماذا يجب أن أفعل إذا تعرضت للابتزاز؟</h4>
                             <div class="faq-icon text-2xl font-light">+</div>
                         </div>
@@ -309,222 +329,129 @@
                             <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-question" 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>
+                            <p class="text-black/60 leading-relaxed pr-8 serif">نعم. المجموعة مُدارة بعناية من قِبل فريق ملاذ. يمكنك الانضمام بهوية مجهولة، ولا يُشارَك أي معلومة شخصية. يُطبَّق قانون صارم للحفاظ على سلامة الأعضاء.</p>
                         </div>
                     </div>
                 </div>
+                <div class="text-center mt-10">
+                    <a href="faq.html" class="inline-block px-8 py-4 border-2 border-[var(--ink)] rounded-full font-bold hover:bg-[var(--ink)] hover:text-white transition-colors">
+                        جميع الأسئلة
+                    </a>
+                </div>
             </div>
         </section>
 
-        <!-- 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>
-                    <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 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 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>
-        </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">
+        <!-- Footer -->
+        <footer class="bg-[var(--ink)] text-white pt-20 pb-12 px-6 md:px-20 relative overflow-hidden">
+            <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-l from-[#36909E] via-[#D6EDF0] to-[#0F3858]"></div>
+            <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                 <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>
+                    <p class="text-2xl font-black mb-3">ملاذ</p>
+                    <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>
+                        <!-- Telegram -->
+                        <a href="https://t.me/malaz_community" target="_blank" aria-label="تيليغرام" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-[#229ED9] transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
+                        </a>
+                        <!-- Instagram -->
+                        <a href="https://instagram.com/malaz_sy" target="_blank" aria-label="انستغرام" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-pink-400 transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
+                        </a>
+                        <!-- LinkedIn -->
+                        <a href="https://linkedin.com/company/malaz-sy" target="_blank" aria-label="لينكدإن" class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 hover:border-[#0A66C2] transition">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+                        </a>
                     </div>
                 </div>
-                <div class="md:col-span-1">
-                    <h4 class="font-bold text-sm mb-6 tracking-wider">روابط سريعة</h4>
+                <div>
+                    <h4 class="font-bold text-sm mb-5 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>
+                        <li><a href="index.html" class="hover:text-white transition">الرئيسية</a></li>
+                        <li><a href="violence.html" class="hover:text-white transition">العنف الرقمي</a></li>
+                        <li><a href="support.html" class="hover:text-white transition">الدعم</a></li>
+                        <li><a href="about.html" class="hover:text-white transition">من نحن</a></li>
+                        <li><a href="faq.html" class="hover:text-white 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>
+                    <h4 class="font-bold text-sm mb-5 tracking-wider">تواصل معنا</h4>
+                    <ul class="space-y-3 text-sm text-white/50">
+                        <li><a href="https://t.me/malaz_community" target="_blank" class="hover:text-white transition flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
+                            تيليغرام
+                        </a></li>
+                        <li><a href="https://instagram.com/malaz_sy" target="_blank" class="hover:text-white transition flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
+                            انستغرام
+                        </a></li>
+                        <li><a href="https://linkedin.com/company/malaz-sy" target="_blank" class="hover:text-white transition flex items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current flex-shrink-0" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+                            لينكدإن
+                        </a></li>
+                    </ul>
                 </div>
             </div>
             <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="w-2 h-2 bg-[var(--sage)] rounded-full animate-pulse inline-block"></span>
                     <span class="text-xs text-white/30">اتصالك بهذه الصفحة آمن ومشفر بالكامل</span>
                 </div>
-                <p class="text-xs text-white/20">© ٢٠٢٥ أمان. جميع الحقوق محمية.</p>
+                <p class="text-xs text-white/20">© 2026 ملاذ. جميع الحقوق محفوظة.</p>
             </div>
         </footer>
     </div>
 
     <script>
-        // --- 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')); });
-
-        // --- 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"
-            });
+            gsap.to(spotlight, { x: e.clientX - rect.left - rect.width/2, y: e.clientY - rect.top - rect.height/2, duration: 0.8, ease: "power2.out" });
         });
 
-        // 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
+        if (magneticArea) {
+            magneticArea.addEventListener('mousemove', (e) => {
+                const rect = magneticArea.getBoundingClientRect();
+                gsap.to(magneticBtn, { x: (e.clientX - rect.left - rect.width/2) * 0.3, y: (e.clientY - rect.top - rect.height/2) * 0.3, duration: 0.2 });
             });
-        });
-
-        magneticArea.addEventListener('mouseleave', () => {
-            gsap.to(magneticBtn, {
-                x: 0,
-                y: 0,
-                duration: 0.5,
-                ease: "elastic.out(1, 0.3)"
+            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
+        const mainNav = document.getElementById('mainNav');
+        function handleNav() {
+            if (window.innerWidth <= 1024 || window.scrollY > 80) {
+                mainNav.classList.add('scrolled');
+            } else {
+                mainNav.classList.remove('scrolled');
             }
-        });
+        }
+        window.addEventListener('scroll', handleNav);
+        window.addEventListener('resize', handleNav);
+        handleNav();
 
-        // Reveal Up Animations
+        gsap.registerPlugin(ScrollTrigger);
+        gsap.to('.ghost-text', { scale: 1.5, opacity: 0.1, scrollTrigger: { trigger: ".hero-sanctuary", start: "top top", end: "bottom top", scrub: 1 } });
         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" }
-            });
+            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 ---
-        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-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 = userInput.value.trim();
-            if(!text) return;
-            addMsg(text, true);
-            userInput.value = '';
-            setTimeout(() => {
-                addMsg("تم استلام رسالتك بسرية تامة. فريقنا سيقوم بالرد عليك وتقديم الدعم المناسب لحالتك.", false);
-            }, 1000);
-        }
-
-        sendBtn.addEventListener('click', handleSend);
-        userInput.addEventListener('keypress', e => { if(e.key === 'Enter') handleSend(); });
-
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
