/* ============================================================================
   PORTFOLIO — M & M · Moataz Mohamed
   الملف: 11.css  (ملف التنسيقات الرئيسي والوحيد)
   ============================================================================

   ⚠️  قبل أي تعديل، اقرا الفهرس ده كويس.

   ----------------------------------------------------------------------------
   طريقة التفكير في الملف ده
   ----------------------------------------------------------------------------
   الملف مكتوب بترتيب «من العام للخاص»:
     1) الإعدادات العامة والخلفية
     2) الأجزاء الثابتة (هيدر / نوافذ / أزرار)
     3) الوضع الفاتح (light-mode) — كل ألوان الوضع الفاتح مجمّعة
     4) أقسام الصفحة بالترتيب اللي بتبان بيه (هيرو ← عني ← مشاريع ← فوتر)
     5) المؤثرات (شاشة التحميل / شاشة الاسم / الخلفية التفاعلية)
     6) ملاحق الإصلاحات + التجاوب (Responsive) في الآخر
        ⚠️ آخر الملف بيكسب — أي قاعدة في الآخر بتغلب أي قاعدة قبلها
        بنفس الخصوصية (specificity). خد بالك وانت بتضيف في الآخر.

   ----------------------------------------------------------------------------
   متغيرات التصميم (نظام الألوان الموحّد)
   ----------------------------------------------------------------------------
   كل الموقع بيستخدم نفس درجات الذهبي:  #d4af37 (الأساسي) / #e8c15a (الفاتح)
   و #f6c344 (اللامع) و #ffe9a3 (الأفتح). لو عايز تغير هوية الموقع،
   بدّل الأرقام دي في الملف كله (ابحث بـ d4af37 وهتلاقي كل مكان مستخدم فيه).

   ----------------------------------------------------------------------------
   فهرس الأقسام (بالترتيب جوه الملف)
   ----------------------------------------------------------------------------
     1)   التنسيقات العامة + الخلفية "الحية" (body / * / ::before / ::after)
     2)   طبقات الخلفية التفاعلية + المؤشر المخصص (bg-scanlines … cursor-dot)
     3)   الشريط العلوي (Header) — شكلان: كبسولة / ملزوق عند النزول
     3.1) الوضع الفاتح الكامل (body.light-mode …) — كل الألوان الفاتحة
     3.2) أزرار تبديل اللغة والإعدادات
     4)   مربع البحث (Search Box) + تمييز النتائج
     5)   قسم الهيرو (Hero) — العنوان والأزرار والكارت والصورة
     6)   كروت "عني" (About) + السلايدرز
     6.1) كروت الشهادات (Certificates) + أزرار التمرير
     7)   قسم المشاريع (Portfolio Card) + معاينة المشروع
     8)   قسم التواصل (Contact Strip + Contact Form)
     9)   الفوتر (Footer) + مواقع التواصل
    10)   شاشة التحميل (Preloader)
    11)   شاشة الاسم اللامع (Name Intro)
    12)   ظهور المحتوى عند النزول (Scroll Reveal)
    13)   المساعد الذكي (اتشال) — مساحة محجوزة للملاحظات
    14)   شاشة الموبايل والتجاوب (Responsive) — في آخر الملف

   ----------------------------------------------------------------------------
   قواعد مهمة لأي حد بيعدّل هنا
   ----------------------------------------------------------------------------
     • الملف كله بستخدم box-sizing: border-box — يعني أي width: 100%
       معاه padding مش بيطلع برة الشاشة. متغيّرش القاعدة دي.
     • أي كلاس بتبدأ بـ body.light-mode هي خاصة بالوضع الأبيض بس.
     • لو ضفت كلاس جديد لازم بياناته في index.html، وإلا مش هيحصل حاجة.
     • الألوان دايمًا rgba/blur — الموقع مبني على الطبقات الشفافة.
     • بنحترم دايًما إعداد (prefers-reduced-motion) — أي أنيميشن جديد
       لازم يكون له استثناء في البلوك بتاعه.
     • على الموبايل: شوف القسم 14 قبل ما تعدل أي مقاس.
   ============================================================================ */

/* ==================== 1. التنسيقات العامة والتحضير ==================== */

/* إعادة ضبط عالمية: الحشو والبوردر يتحسبوا جوه العرض
   (من غيرها أي عنصر بـ width: 100% + padding بيطلع برة الشاشة) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background-color: #07060a;
    /* ==========================================================================
       خلفية متحركة «حيّة»: شبكة فضائية + هالة ذهبية تتنفّس
       الطبقات دي بتفضل تحت كل المحتوى (z-index: 0) ومش بتلمس أي تفاعل
       ========================================================================== */
    background-image:
        radial-gradient(circle at top left, rgba(255, 199, 87, 0.08), transparent 26%),
        radial-gradient(circle at 80% 10%, rgba(191, 143, 40, 0.07), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(255, 214, 122, 0.08), transparent 32%),
        linear-gradient(135deg, rgba(13, 12, 16, 0.98), rgba(5, 5, 8, 1) 42%, rgba(13, 12, 16, 0.96)),
        linear-gradient(rgba(212, 175, 55, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.06) 1px, transparent 1px);
    background-size: auto, auto, auto, 100% 100%, 34px 34px, 34px 34px;
    background-position: center, center, center, center, top left, top left;
    background-attachment: fixed;
    color: #f4f4f4;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
   〰 هالة الخلفية «بتتنفّس»: تدرّج ذهبي بيكبر ويصغر ببطء
   (بتفضل خلف كل حاجة، وبتشتغل بـ transform عشان تبقى سلسة)
   ---------------------------------------------------------------------------- */
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    background:
        radial-gradient(60% 60% at 22% 18%, rgba(246, 195, 68, 0.14), transparent 62%),
        radial-gradient(50% 50% at 82% 26%, rgba(191, 143, 40, 0.12), transparent 60%),
        radial-gradient(48% 48% at 62% 88%, rgba(255, 214, 122, 0.09), transparent 62%);
    animation: auraDrift 26s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

@keyframes auraDrift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.10); }
}

/* خفض شدة الهالة لو المستخدم طالب تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none;
    }
}

/* (اتشالت طبقة التوهج اللي كانت بتعمل حافة ذهبية في أول الصفحة) */

/* ============================================================================
   ✨ طبقات الخلفية التفاعلية «الخيالية البرمجية»
   ----------------------------------------------------------------------------
   1) .bg-grid-glow  — شبكة كود بتضيء في المنطقة اللي حول الماوس
                        (زي لو بتلمس شبكة كهرباء)
   2) .cursor-aura    — هالة ذهبية ناعمة بتجري ورا الماوس بنعومة
   3) .cursor-ring    — حلقة رقيقة بتنطق من الماوس وبتتلاشى
                        (إحساس «خطفة» برمجية)
   4) .bg-scanlines   — خطوط ماسحة أفقية بتعدّي ببطء
   كلها pointer-events: none عشان ما تلمسش أي تفاعل، وكلها تحت المحتوى
   ============================================================================ */

/* --- 1) شبكة الكود اللي بتضيء حول الماوس --- */
.bg-grid-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0; /* بتظهر بس لما الماوس يتحرك جوه الصفحة */
    transition: opacity 0.6s ease;
    background-image:
        linear-gradient(rgba(246, 195, 68, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(246, 195, 68, 0.5) 1px, transparent 1px);
    background-size: 34px 34px;
    /* القناع ده هو السر: الخطوط بتبان بس حوالي مكان الماوس */
    -webkit-mask-image: radial-gradient(
        260px 260px at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.45) 42%,
        transparent 78%
    );
    mask-image: radial-gradient(
        260px 260px at var(--mx, 50%) var(--my, 50%),
        #000 0%,
        rgba(0, 0, 0, 0.45) 42%,
        transparent 78%
    );
}

body.is-pointer-live .bg-grid-glow {
    opacity: 0.55;
}

/* --- 2) الهالة الذهبية اللي بتجري ورا الماوس --- */
.cursor-aura {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: radial-gradient(
        circle,
        rgba(255, 216, 122, 0.20) 0%,
        rgba(212, 175, 55, 0.12) 34%,
        rgba(212, 175, 55, 0.04) 58%,
        transparent 74%
    );
    filter: blur(26px);
    /* الجافاسكربت هو اللي بيحرّكها بـ transform */
    will-change: transform;
}

body.is-pointer-live .cursor-aura {
    opacity: 1;
}

/* ============================================================================
   🖱 مؤشر ماوس مخصص «برمجي مهندم» — شكل سهم (Arrow)
   ----------------------------------------------------------------------------
   بنخفي مؤشر النظام ونرسم سهم نضيف بزوايا حادة:
     • سهم ذهبي بحافة رقيقة — زي مؤشر محرر أكواد محترف
     • بيتقلب لونه للأبيض لما يعدّي على حاجة قابلة للدوس
     • حلقة دائرية ناعمة بتتبع الماوس في الخلفية

   مهم: بيشتغل بس على الأجهزة اللي فيها ماوس حقيقي،
   وبنرجّع المؤشر العادي في حقول الكتابة عشان النص يبقى واضح.
   ============================================================================ */

/* --- إخفاء مؤشر النظام (بس لما المؤشر المخصص يكون شغال) --- */
/* بنستخدم !important لأن قواعد المتصفح الافتراضية (زي الإيد على اللينكات
   والأزرار) بتغلب أي قاعدة عادية، فكانت الإيد بتظهر فوق سهمنا. */
body.has-custom-cursor,
body.has-custom-cursor *,
body.has-custom-cursor *::before,
body.has-custom-cursor *::after {
    cursor: none !important;
}

/* كل العناصر التفاعلية بنغطيها صراحةً كمان — لزيادة الأمان */
body.has-custom-cursor a,
body.has-custom-cursor a *,
body.has-custom-cursor button,
body.has-custom-cursor button *,
body.has-custom-cursor [role="button"],
body.has-custom-cursor [role="button"] *,
body.has-custom-cursor summary,
body.has-custom-cursor label[for],
body.has-custom-cursor .btn,
body.has-custom-cursor .btn *,
body.has-custom-cursor .lang-btn,
body.has-custom-cursor .slider-btn,
body.has-custom-cursor .scroll-btn,
body.has-custom-cursor .header-cta,
body.has-custom-cursor .settings-pill,
body.has-custom-cursor .project-btn,
body.has-custom-cursor .certificate-btn,
body.has-custom-cursor .contact-strip-btn,
body.has-custom-cursor .btn-submit,
body.has-custom-cursor .social-link {
    cursor: none !important;
}

/* بنرجّع المؤشر العادي في الحقول اللي المستخدم بيكتب فيها — ده أهم حاجة
   عشان الكتابة والنص المحدد يبقوا واضحين */
body.has-custom-cursor input:not([type="checkbox"]):not([type="radio"]),
body.has-custom-cursor textarea,
body.has-custom-cursor select,
body.has-custom-cursor [contenteditable="true"] {
    cursor: text !important;
}

/* ----------------------------------------------------------------------------
   مهم جدًا: في حقول الكتابة بنخفي سهمنا بالكامل
   ----------------------------------------------------------------------------
   عشان مايبقاش فيه مؤشرين مع بعض (سهمنا + مؤشر الكتابة بتاع الجهاز).
   الجافاسكربت بيضيف كلاس .is-typing على الـ body لما الماوس يبقى فوق حقل.
   (وفيه كمان قاعدة :has تحت كطبقة حماية إضافية في المتصفحات اللي بتدعمها)
   ---------------------------------------------------------------------------- */
body.has-custom-cursor.is-typing .cursor-dot {
    opacity: 0 !important;
}

/* طبقة حماية إضافية للمتصفحات اللي بتدعم :has */
body.has-custom-cursor:has(input:hover) .cursor-dot,
body.has-custom-cursor:has(textarea:hover) .cursor-dot,
body.has-custom-cursor:has(select:hover) .cursor-dot,
body.has-custom-cursor:has([contenteditable="true"]:hover) .cursor-dot {
    opacity: 0 !important;
}

/* --- حاوية السهم --- */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s ease;
    will-change: transform;
}

body.has-custom-cursor .cursor-dot {
    opacity: 1;
}

/* --- رأس السهم: مرسوم بتدرّج ذهبي + حدود ناعمة --- */
.cursor-dot-arrow {
    position: absolute;
    /* طرف السهم بالظبط على نقطة الماوس */
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    transform-origin: 0 0;
    /* ظل خفيف يخلي السهم يبان على أي خلفية */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 6px rgba(246, 195, 68, 0.45));
    transition: filter 0.2s ease;
}

/* ----------------------------------------------------------------------------
   👆 أيقونة الإيد اللي بتحل مكان السهم على الحاجات القابلة للدوس
   ----------------------------------------------------------------------------
   فكرة أنضف من إن السهم والإيد يظهروا مع بعض: لما نعدّي على زرار أو لينك،
   الإيد بتحل محل السهم بنعومة (زي مؤشر النظام بالظبط)، وبيرجع سهم على
   المساحات العادية. كده مفيش تشويش ومفيش تقاطع بين الشكلين.
   ---------------------------------------------------------------------------- */
.cursor-dot-hand {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    opacity: 0;
    transform-origin: 0 0;
    /* بتبدأ أصغر شوية وتطلع لحجمها */
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 6px rgba(246, 195, 68, 0.6));
    pointer-events: none;
}

/* على حاجة قابلة للدوس: الإيد تظهر والسهم يختفي */
body.is-hovering-target .cursor-dot-hand {
    opacity: 1;
    transform: scale(1);
}

body.is-hovering-target .cursor-dot-arrow {
    opacity: 0;
    transform: scale(0.7);
}

/* لما ندوس: الإيد تصغر شوية (إحساس بالضغط) */
body.is-pressing .cursor-dot-hand {
    transform: scale(0.86);
    transition: transform 0.1s ease;
}

/* السهم محتاج transition للـ opacity والـ transform عشان التحويل يبقى ناعم */
.cursor-dot-arrow {
    transition: filter 0.2s ease, opacity 0.18s ease, transform 0.22s ease;
}

/* ----------------------------------------------------------------------------
   احترام إعداد «تقليل الحركة»
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cursor-dot-hand {
        transition: opacity 0.15s ease;
        transform: none;
    }
}

/* ----------------------------------------------------------------------------
   الحلقة اللي بتتبع الماوس: بتتجمع شوية وبتكبر لما المؤشر يعدّي على
   أي حاجة قابلة للدوس (زرار، لينك، حقل) — كده المستخدم حاسس بالتفاعل
   ---------------------------------------------------------------------------- */
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    border: 1.5px solid rgba(246, 195, 68, 0.75);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    will-change: transform;
    transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease,
        border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

body.is-pointer-live .cursor-ring {
    opacity: 1;
}

/* في حقول الكتابة: نخفي الحلقة كمان عشان يبقى مؤشر الكتابة لوحده */
body.is-typing .cursor-ring {
    opacity: 0;
}

/* لما المؤشر يعدّي على حاجة قابلة للدوس: الحلقة تكبر وبقى لها لون */
body.is-hovering-target .cursor-ring {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-color: rgba(246, 195, 68, 0.95);
    background-color: rgba(246, 195, 68, 0.1);
}

/* ولما يدوس: الحلقة تصغر شوية (إحساس بالضغط) */
body.is-pressing .cursor-ring {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    background-color: rgba(246, 195, 68, 0.22);
}

/* الكلاس بيتشال ويتضاف من الجافاسكربت، فالأنيميشن بتعيد نفسها كل مرة */
.cursor-ring.is-pulsing {
    animation: ringBurst 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ringBurst {
    0% {
        opacity: 0.85;
        transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) scale(0.35);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) scale(2.6);
    }
}

/* --- 4) خطوط ماسحة بتعدّي على الخلفية ببطء --- */
.bg-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 214, 122, 0.045),
        rgba(255, 214, 122, 0.045) 1px,
        transparent 1px,
        transparent 28px
    );
}

/* خط واحد لامع بيعّدي من فوق لتحت كل شوية — إحساس «ماسح ضوئي» */
.bg-scanlines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(246, 195, 68, 0.055),
        transparent
    );
    animation: scanSweep 9s linear infinite;
}

@keyframes scanSweep {
    0%   { top: -18%; }
    100% { top: 108%; }
}

/* ----------------------------------------------------------------------------
   احترام إعداد «تقليل الحركة»: نوقف كل الأنيميشن ونسيب لمسات ثابتة هادية
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bg-scanlines::after,
    .cursor-ring {
        animation: none;
        display: none;
    }

    .bg-grid-glow {
        opacity: 0.25;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* على الأجهزة اللمسية (موبايل/تابلت) مفيش ماوس → نخفي طبقات الماوس */
@media (hover: none) {
    .cursor-aura,
    .cursor-ring,
    .bg-grid-glow {
        display: none;
    }
}

/* كل عنصر مباشر داخل body يظهر فوق طبقة الخلفية المزخرفة */
body > * {
    position: relative;
    z-index: 1;
}

.hidden {
    display: none !important;
}

/* ============================================================================
   2) الشريط العلوي (Header) — التفاصيل الكاملة
   ----------------------------------------------------------------------------
   الشريط له شكلان مختلفين حسب مكان التمرير:

   ── الشكل الأول: وانت فوق (الافتراضي) ───────────────────────────
      كبسولة بيضاوية (border-radius: 999px) بعرض محدود وهامش من الجوانب،
      نازلة 8px من الحافة — يعني "واقفة لوحدها" مش ملزوقة فوق.

   ── الشكل الثاني: لما تنزل (كلاس .scrolled) ───────────────────
      • position: fixed → يطلع لفوق ويلزق في الحافة
      • top: 0 / margin: 0 / width: 100% → يمتد بعرض الشاشة كامل
      • padding أنحف (8px بدل 10px) → يبقى أرفع
      • border-radius: 0 0 22px 22px → زوايا ناعمة تحت بس
      • المساحة اللي فقدها بتتعوّض بـ body.header-is-fixed (شوف تحت)

   الكلاسين (.scrolled و .header-is-fixed) بيتضافوا من script.js (القسم 5)
   مش من هنا — إحنا بس بنديهم الشكل.

   ⚠️ مهم: في وضع النزول الشريط position: fixed — يعني بيطلع من تدفق
   الصفحة. عشان كده بنضيف padding-top على الـ body بمقدار ارتفاعه
   (المتغير --header-h اللي الجافاسكربت بيحسبه) عشان مفيش محتوى يتغطى.
   ============================================================================ */

/* القائمة المنسدلة للإعدادات (الزر بتاع الجير + اللغة) */
.settings-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.settings-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: #e8c15a;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.settings-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(13, 12, 16, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55);
    min-width: 120px;
    z-index: 1001;
    display: block;
}

.settings-dropdown.hidden {
    display: none;
}

.header {
    background: rgba(10, 9, 12, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
    /* الشكل البيضاوي (كبسولة) */
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 999px;
    position: sticky;
    /* مسافة صغيرة من الحافة العلوية (كانت 16px) */
    top: 8px !important;
    z-index: 1000;
    overflow: visible;
    /* عرض محدود وهوامش من الجوانب عشان يبان كبسولة واقفة لوحدها */
    width: min(1400px, calc(100% - 32px));
    max-width: 1400px;
    margin: 8px auto 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    /* بنعمل أنيميشن لكل حاجة بتتغير عند النزول */
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        border-radius 0.3s ease,
        box-shadow 0.3s ease,
        width 0.3s ease,
        margin 0.3s ease,
        padding 0.3s ease,
        top 0.3s ease;
}

/* ============================================================================
   حالة النزول (scrolled): الشريط يطلع لفوق ويلزق في الحافة،
   ويبقى أنحف وأصغر، ويرجع مستطيل بزوايا ناعمة بدل الكبسولة.

   مهم: بنستخدم position: fixed عشان الشريط يقف ثابت في الحافة،
   وبنسيب مساحة تحته (--header-h) على جسم الصفحة عشان المحتوى
   ميتغطاش بالشريط أبداً.
   ============================================================================ */
.header.scrolled {
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(10, 9, 12, 0.93);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border-color: rgba(212, 175, 55, 0.34);
    /* يطلع فوق خالص ويلزق في حافة الشاشة */
    top: 0 !important;
    /* يمتد بعرض الصفحة بالكامل */
    width: 100%;
    max-width: none;
    margin: 0 !important;
    /* أنحف: حشو أقل */
    padding: 8px 30px;
    /* زوايا ناعمة تحت بس، عشان يبان ملزوق في الحافة من فوق */
    border-radius: 0 0 22px 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* المساحة اللي بتتعوّض عن الشريط لما يبقى fixed
   (الجافاسكربت بيحدّث --header-h بارتفاع الشريط الحقيقي) */
body.header-is-fixed {
    padding-top: var(--header-h, 52px);
    transition: padding-top 0.3s ease;
}

/* الشريط يبقى أنحف كمان: صغّر اللوجو واللينكات في حالة النزول */
.header.scrolled .logo-container img {
    height: 34px;
    width: 34px;
    transition: height 0.3s ease, width 0.3s ease;
}

.header.scrolled .logo-container .logo-text {
    font-size: 1.05rem;
    transition: font-size 0.3s ease;
}

/* لوغو الموقع واسم الشركة: بيظهر في الشمال أو الوسط حسب التصميم */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-container img {
    height: 42px;
    width: 42px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #d4af37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
    display: block;
    flex-shrink: 0;
}

.logo-container .logo-text {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-links a {
    color: #a9a49b;
    text-decoration: none;
    position: relative;
    padding: 6px 10px;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: #e8c15a;
}

.nav-links a.active {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.38);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.1), 0 0 18px rgba(212, 175, 55, 0.16);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: #d4af37;
    transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* ==================== 3. زر الدعوة للتواصل (Header CTA) ==================== */

/* زر «كلمني»: بيظهر في نهاية الهيدر وبيمنح شكل زر واضح ومميز */
.header-cta {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 8px 20px;
    border: 1px solid #d4af37;
    background: transparent;
    color: #e8c15a;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.header-cta:hover {
    color: #07060a;
    background-color: #d4af37;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

.contact-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 3, 5, 0.72);
    backdrop-filter: blur(6px);
    z-index: 2000;
}

.contact-modal.hidden {
    display: none;
}

.contact-modal-content {
    position: relative;
    width: min(100%, 420px);
    background: rgba(13, 12, 16, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 18px;
    padding: 28px 24px 20px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 175, 55, 0.08);
}

.contact-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 1.2rem;
    cursor: pointer;
}

.contact-modal-content h3 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: #f8fafc;
}

.contact-modal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}

.contact-modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.contact-modal-item i {
    width: 18px;
    text-align: center;
    color: #e8c15a;
}

.contact-modal-item.whatsapp i {
    color: #25d366;
}

.contact-modal-item:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-1px);
}

body.light-mode .contact-modal-content {
    background: rgba(255, 252, 245, 0.97);
    border-color: rgba(191, 143, 40, 0.28);
    box-shadow: 0 24px 48px rgba(191, 143, 40, 0.18);
}

body.light-mode .contact-modal-close {
    color: #0f172a;
    background: rgba(148, 163, 184, 0.08);
}

/* ==================== 3.1. أزرار اللغة ==================== */
/* ==================== 3.2. قائمة الإعدادات وأزرار اللغة ==================== */
/* قائمة اللغة (عربي / إنجليزي) — بتظهر جوه ال قائمة المنسدلة
   والزرار النشِط ببتاخد لون ذهبي عشان يبان أي لغة مختارة حاليًا.
   ملاحظة: تبديل اللغة نفسه بيتنفّذ من script.js مش من CSS. */
.lang-switcher {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}

.lang-btn {
    border: none;
    background: transparent;
    color: #a9a49b;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-btn.active {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.lang-btn:hover {
    color: #ffffff;
}

.settings-action-btn {
    width: 100%;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-action-btn.is-active {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(148, 163, 184, 0.35);
    color: #0f172a;
}

/* ============================================================================
   3.1) الوضع الفاتح (Light Mode) — كل ألوان الثيم الفاتح
   ----------------------------------------------------------------------------
   ده القسم الأخطر في الملف — كل ما يخص الوضع الأبيض مجمّع هنا.

   كيف بيشتغل؟
     script.js بيضيف كلاس .light-mode على الـ <body> لما الزائر يبدل،
     وكل قاعدة بتبدا بـ body.light-mode بتشتغل ساعتها بس.
     يعني الوضع الأساسي (الداكن) مش محتاج أي كلاس — هو الأصل.

   ⚠️ لو ضفت عنصر جديد في الصفحة وملوش نسخة body.light-mode هنا،
   هيبقى نصه غامق/فاتح غلط لما الزائر يبدل للوضع الفاتح.

   ملاحظة: الهوامش/المقاسات مش بتتغير في الوضع الفاتح — الألوان بس.
   ============================================================================ */
body.light-mode {
    background:
        radial-gradient(circle at top left, rgba(212, 175, 55, 0.07), transparent 24%),
        radial-gradient(circle at 80% 8%, rgba(247, 215, 116, 0.07), transparent 22%),
        linear-gradient(135deg, #fdfaf2 0%, #f7f1e3 44%, #fdfaf3 100%),
        linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
    background-size: auto, auto, 100% 100%, 34px 34px, 34px 34px;
    background-position: center, center, center, top left, top left;
    background-attachment: fixed;
    color: #14120c;
}

body.light-mode .header {
    background: rgba(255, 252, 245, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(191, 143, 40, 0.35);
    box-shadow: 0 12px 32px rgba(120, 90, 20, 0.14);
}

body.light-mode .header.scrolled {
    background: rgba(255, 252, 245, 0.9);
    border-color: rgba(191, 143, 40, 0.28);
    box-shadow: 0 10px 28px rgba(120, 90, 20, 0.12);
}

body.light-mode .settings-dropdown {
    background: rgba(255, 252, 245, 0.99);
    border-color: rgba(191, 143, 40, 0.35);
    box-shadow: 0 14px 30px rgba(120, 90, 20, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

body.light-mode .settings-pill,
body.light-mode .header-cta,
body.light-mode .lang-btn,
body.light-mode .search-btn,
body.light-mode .nav-links a,
body.light-mode .contact-item,
body.light-mode .btn-secondary,
body.light-mode .search-input,
body.light-mode .search-input::placeholder,
body.light-mode .description,
body.light-mode .about-card p,
body.light-mode .footer-quote,
body.light-mode .footer-bottom,
body.light-mode .badge-status,
body.light-mode .card-footer-motto,
body.light-mode .skill-box span,
body.light-mode .certificate-text span,
body.light-mode .main-title,
body.light-mode .logo-container .logo-text,
body.light-mode .section-title,
body.light-mode .about-card h3,
body.light-mode .footer-info h3,
body.light-mode .certificate-text h4,
body.light-mode .welcome-pill {
    color: #0f172a;
}

body.light-mode .search-input::placeholder {
    color: #64748b;
}

body.light-mode .settings-pill {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(191, 143, 40, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
    color: #7a5c10;
}

body.light-mode .lang-switcher {
    background: rgba(255, 252, 245, 0.92);
    border-color: rgba(191, 143, 40, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

body.light-mode .lang-btn {
    color: #3a3527;
}

body.light-mode .lang-btn.active {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

body.light-mode .lang-btn:hover,
body.light-mode .settings-pill:hover,
body.light-mode .search-btn:hover,
body.light-mode .header-cta:hover,
body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25), 0 0 18px rgba(212, 175, 55, 0.16);
    transform: translateY(-1px);
}

body.light-mode .nav-links a:hover,
body.light-mode .nav-links a.active {
    color: #b8860b;
}

body.light-mode .nav-links a.active {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(191, 143, 40, 0.5);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12), 0 0 18px rgba(212, 175, 55, 0.16);
}

body.light-mode .settings-action-btn {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.28);
    color: #0f172a;
}

body.light-mode .settings-action-btn.is-active {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(191, 143, 40, 0.45);
    color: #7a5c10;
}

body.light-mode .nav-links {
    background: rgba(255, 252, 245, 0.75);
    border: 1px solid rgba(191, 143, 40, 0.25);
    border-radius: 18px;
    padding: 6px 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}

body.light-mode .search-box {
    background: rgba(255, 252, 245, 0.9);
    border-color: rgba(191, 143, 40, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38), 0 0 0 1px rgba(191, 143, 40, 0.08);
}

body.light-mode .search-box:focus-within {
    background: rgba(255, 252, 245, 1);
    border-color: rgba(191, 143, 40, 0.75);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

body.light-mode .search-input {
    color: #14120c;
}

body.light-mode .search-btn {
    color: #b8860b;
    background: rgba(255, 252, 245, 0.7);
    border-radius: 12px;
}

body.light-mode .welcome-pill {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(191, 143, 40, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26);
}

body.light-mode .btn-primary {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    box-shadow: 0 12px 22px rgba(191, 143, 40, 0.28);
}

body.light-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
    color: #0f172a;
}

body.light-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
}

body.light-mode .hero-visual-card {
    background: linear-gradient(145deg, #edf6ff, #f8fbff);
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255,255,255,0.4);
}

body.light-mode .badge-status {
    background: rgba(15, 23, 42, 0.04);
}

body.light-mode .skill-box {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

body.light-mode .skill-box i,
body.light-mode .laptop-icon,
body.light-mode .about-card .icon,
body.light-mode .certificate-icon {
    color: #b8860b;
}

body.light-mode .about-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(241, 245, 249, 0.28));
    border-color: rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05), inset 0 0 0 1px rgba(255,255,255,0.35);
}

body.light-mode .about-card::before,
body.light-mode .about-card.certificates-card::before {
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 36%);
}

body.light-mode .about-card:hover {
    border-color: rgba(191, 143, 40, 0.5);
    box-shadow: 0 16px 26px rgba(191, 143, 40, 0.14);
}

body.light-mode .footer-section {
    background: linear-gradient(180deg, #edf4ff, #eaf2ff);
    border-top-color: rgba(148, 163, 184, 0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* الوضع الأبيض: صندوق مواقع التواصل يبقى فاتح */
body.light-mode .footer-social-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(247, 215, 116, 0.28));
    border-color: rgba(191, 143, 40, 0.3);
}

body.light-mode .footer-social-title {
    color: #0f172a;
}

body.light-mode .footer-social-subtitle {
    color: #475569;
}

body.light-mode .footer-socials .social-link {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.28);
    color: #0f172a;
}

body.light-mode .footer-socials .social-link.github i {
    color: #0f172a;
}

body.light-mode .footer-socials .social-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(191, 143, 40, 0.5);
    color: #14120c;
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.25);
}

body.light-mode .footer-credo {
    color: #b8860b;
}

body.light-mode .footer-rights,
body.light-mode .footer-signature {
    color: #475569;
}

body.light-mode .about-card.certificates-card {
    background: linear-gradient(145deg, rgba(255, 252, 245, 0.98), rgba(247, 241, 227, 0.96));
}

body.light-mode .project-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(247, 241, 227, 0.28));
    border-color: rgba(191, 143, 40, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 35px rgba(191, 143, 40, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

body.light-mode .project-info h3 {
    color: #0f172a;
}

body.light-mode .project-info p {
    color: #475569;
}

body.light-mode .project-tag {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(191, 143, 40, 0.45);
    color: #7a5c10;
}

body.light-mode .project-nav-btn {
    background: rgba(255, 252, 245, 0.96);
    border-color: rgba(191, 143, 40, 0.5);
    color: #7a5c10;
    box-shadow: 0 10px 20px rgba(191, 143, 40, 0.15);
}

body.light-mode .project-nav-btn:hover {
    background: rgba(247, 215, 116, 0.22);
    box-shadow: 0 14px 22px rgba(191, 143, 40, 0.22);
}

body.light-mode .project-btn.primary {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    box-shadow: 0 10px 18px rgba(191, 143, 40, 0.28);
}

body.light-mode .project-btn.secondary {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

body.light-mode .project-btn.change {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(191, 143, 40, 0.45);
    color: #7a5c10;
}

body.light-mode .preview-window {
    background: rgba(255, 252, 245, 0.92);
    border-color: rgba(191, 143, 40, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 10px 18px rgba(191, 143, 40, 0.12);
}

body.light-mode .preview-sidebar {
    background: linear-gradient(180deg, rgba(247, 215, 116, 0.18), rgba(212, 175, 55, 0.2));
    border-color: rgba(212, 175, 55, 0.3);
}

body.light-mode .preview-cards span {
    background: linear-gradient(135deg, rgba(247, 215, 116, 0.16), rgba(212, 175, 55, 0.2));
    border-color: rgba(191, 143, 40, 0.25);
}

body.light-mode .scroll-btn {
    background: rgba(255, 252, 245, 0.95);
    border-color: rgba(191, 143, 40, 0.45);
    color: #7a5c10;
    box-shadow: 0 10px 20px rgba(191, 143, 40, 0.12);
}

body.light-mode .scroll-btn:hover {
    background: rgba(247, 215, 116, 0.22);
    box-shadow: 0 14px 22px rgba(191, 143, 40, 0.22);
}

body.light-mode .certificate-item {
    background: linear-gradient(135deg, rgba(247, 215, 116, 0.4), rgba(212, 175, 55, 0.22));
    border-color: rgba(191, 143, 40, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

body.light-mode .certificate-item:nth-child(1) {
    background: linear-gradient(135deg, rgba(247, 215, 116, 0.5), rgba(212, 175, 55, 0.28));
}

body.light-mode .certificate-item:nth-child(2) {
    background: linear-gradient(135deg, rgba(255, 233, 163, 0.5), rgba(212, 175, 55, 0.24));
}

body.light-mode .certificate-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(255, 199, 87, 0.4), rgba(191, 143, 40, 0.24));
}

body.light-mode .certificate-item:hover {
    border-color: rgba(191, 143, 40, 0.6);
    box-shadow: 0 14px 24px rgba(212, 175, 55, 0.2);
}

body.light-mode .certificate-btn.view {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(191, 143, 40, 0.45);
    color: #7a5c10;
}

body.light-mode .certificate-btn.download {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(191, 143, 40, 0.35);
    color: #7a5c10;
}

body.light-mode .certificate-btn.view:hover {
    background: rgba(212, 175, 55, 0.22);
}

body.light-mode .certificate-btn.download:hover {
    background: rgba(212, 175, 55, 0.18);
}

body.light-mode .certificate-number {
    background: rgba(255, 252, 245, 0.9);
    border-color: rgba(191, 143, 40, 0.28);
    color: #7a5c10;
}

body.light-mode .certificate-thumb {
    border-color: rgba(191, 143, 40, 0.25);
    background: rgba(255, 252, 245, 0.75);
}

body.light-mode .certificate-item.certificate-placeholder .certificate-thumb {
    border-color: rgba(191, 143, 40, 0.45);
    background: rgba(255, 252, 245, 0.35);
}

body.light-mode .certificate-text span {
    background: rgba(255, 252, 245, 0.85);
    border-color: rgba(191, 143, 40, 0.22);
    color: #5a5445;
}

body.light-mode .contact-item:hover {
    color: #7a5c10;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(247, 215, 116, 0.32));
    border-color: rgba(191, 143, 40, 0.45);
    box-shadow: 0 0 0 2px rgba(191, 143, 40, 0.1), 0 10px 22px rgba(191, 143, 40, 0.18);
}

body.light-mode .settings-dropdown,
body.light-mode .lang-switcher,
body.light-mode .settings-action-btn,
body.light-mode .settings-pill,
body.light-mode .search-box,
body.light-mode .hero-visual-card,
body.light-mode .about-card,
body.light-mode .about-card.certificates-card,
body.light-mode .certificate-item,
body.light-mode .footer-socials .social-link {
    transition: all 0.3s ease;
}

/* ==================== 4. مربع البحث (Search Box) ==================== */

/* مربع البحث: بيخلي المستخدم يقدر يبحث داخل الموقع بسهولة */
.search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 20px;
    padding: 4px 10px;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    border-color: #d4af37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.06);
}

.search-match {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.75);
    transition: all 0.2s ease;
}

body.light-mode .search-match {
    background: rgba(212, 175, 55, 0.22);
    box-shadow: inset 0 0 0 1px rgba(191, 143, 40, 0.55);
}

.search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fcfcfc;
    font-size: 0.85rem;
    width: 110px;
    transition: width 0.3s ease;
}

.search-input:focus {
    width: 150px;
}

.search-input::placeholder {
    color: #8b857b;
}

.search-btn {
    background: transparent;
    border: none;
    color: #e8c15a;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   5) قسم الهيرو (Hero) — الجزء الأول: القيم الأساسية
   ----------------------------------------------------------------------------
   ⚠️ تنبيه مهم للتيم (اقرا ده قبل أي تعديل هنا):

   قسم الهيرو مكتوب على جيلين:
     • الجيل ده (القيم الأساسية) — اتكتب الأول
     • جيل تاني تحت في الملف — بيضم تفاصيل أكتر (السلايدر / الصورة / الكارت)

   الـ CSS بيتدمج: البلوكات دي مش مكررة بالكامل، كل واحد فيه تصريحات
   زيادة عن التاني، والاتنين بيشتغلوا مع بعض.

   مثال حي (اتأكدنا منه بقياس حي في المتصفح):
     .hero-section هنا يقول flex-direction: row
     لكن البلوك الثاني بيقول flex-direction: column وده اللي بيكسب
     → يعني الهيرو في الحقيقة عمودي مش أفقي في الكود ده

   اللي فاهم منه: لو عدلت حاجة هنا ومشفتش أي تغيير، دوّر على نفس
   الـ selector تحت في الملف — غالبًا هو اللي كسب.
   ============================================================================ */

/* قسم الهيرو: إناء رئيسي بيضم النص والصورة جانب بعضهما (على الشاشات الكبيرة) */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 80px 8%;
    max-width: 1400px;
    margin: 0 auto;
}

/* بلوك نص الهيرو: هنا بنحدد محتوى الـ hero من عنوان ووصف وزرار */
/* نص الهيرو: بيحتوي على نص الترحيب وشرح مختصر عن صاحب الموقع */
.hero-text-content {
    flex: 1;
}

.welcome-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    color: #e8c15a;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.green-dot {
    width: 8px;
    height: 8px;
    background-color: #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

.main-title {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 18px;
    color: #ffffff;
}

.description {
    color: #a9a49b;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* أزرار الهيرو: زر رئيسي وزر ثانوي للتواصل أو مشاهدة الأعمال */
.cta-buttons {
    display: flex;
    gap: 16px;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.28);
}

.btn-primary:hover {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.65);
    transform: translateY(-2px);
}

.btn-secondary {
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #e8c15a;
    background: rgba(212, 175, 55, 0.04);
}

.btn-secondary:hover {
    background: rgba(212, 175, 55, 0.12);
}

/* بلوك البطاقة البصرية: هنا الشكل اللي على اليمين في الهيرو */
/* بطاقة الجانب البصري Hero Card */
.hero-visual-card {
    flex: 1;
    position: relative;
    background: linear-gradient(145deg, #14110f, #1c1815);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

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

.laptop-icon {
    font-size: 1.5rem;
    color: #e8c15a;
}

.badge-status {
    background: rgba(212, 175, 55, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #a9a49b;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 20px 0;
}

.skill-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
}

.skill-box i {
    color: #e8c15a;
}

.skill-box h4 {
    margin: 0;
    font-size: 0.85rem;
}

.skill-box span {
    font-size: 0.75rem;
    color: #8b857b;
}

.card-footer-motto {
    color: #8b857b;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

/* ==================== 7. قسم المشاريع (Portfolio Section) ==================== */
/* قسم المشاريع: بيعرض كارت المشروع المميز مع إمكانية التنقل بين المشاريع */
.portfolio-section {
    padding: 32px 8% 10px;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-strip-section {
    padding: 20px 8% 0;
    max-width: 1400px;
    margin: 0 auto 40px;
}

.contact-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.96), rgba(10, 9, 12, 0.85));
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
}

.contact-strip-kicker {
    margin: 0 0 6px;
    color: #e8c15a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-strip h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.contact-strip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.contact-strip-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(212, 175, 55, 0.35);
}

.portfolio-header {
    margin-bottom: 24px;
}

.section-kicker {
    margin: 0 0 10px;
    color: #e8c15a;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-card {
    --project-primary: #d4af37;
    --project-secondary: #f7d774;
    --project-tertiary: #bf8f28;
    --project-primary-soft: rgba(212, 175, 55, 0.14);
    --project-primary-soft-2: rgba(191, 143, 40, 0.18);
    position: relative;
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.45), rgba(10, 9, 12, 0.3));
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 24px;
    /* مساحة على الجوانب عشان أسهم التنقل ما تغطيش المحتوى */
    padding: 28px 74px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.55);
}

/* أزرار التنقل: بتتحط فوق صورة المعاينة على الأطراف (مش فوق النص) */
.project-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: rgba(10, 9, 12, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f7d774;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: 5;
}

/* زر السابق على الطرف الشمال للكارت، والتالي على الطرف اليمين */
.project-nav-btn.prev {
    left: 14px;
}

.project-nav-btn.next {
    right: 14px;
}

/* على الشاشات الضيقة: الأزرار تنزل تحت الكارت بدل ما تغطي المحتوى */
@media (max-width: 900px) {
    .project-nav-btn {
        top: auto;
        bottom: 14px;
        transform: none;
    }

    .project-nav-btn.prev {
        left: 14px;
    }

    .project-nav-btn.next {
        right: 14px;
    }

    .project-nav-btn:hover {
        transform: scale(1.08);
    }
}

.project-nav-btn:hover {
    transform: translateY(-50%) scale(1.08);
    background: rgba(212, 175, 55, 0.22);
    color: #fff8e1;
    box-shadow: 0 14px 24px rgba(212, 175, 55, 0.4);
}

.project-arrow {
    transition: transform 0.35s ease;
}

.project-nav-btn:hover .project-arrow {
    transform: rotate(360deg);
}

.project-info {
    flex: 1;
}

.project-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--project-primary-soft);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: var(--project-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-info h3 {
    margin: 16px 0 12px;
    color: #ffffff;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
}

.project-info p {
    margin: 0;
    color: #a9a49b;
    line-height: 1.7;
    font-size: 1rem;
}

/* صف التصنيف + عدّاد المشروع (01 / 06) */
.project-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.project-index {
    color: rgba(247, 215, 116, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    /* العدّاد لازم يفضل «01 / 04» في العربي كمان مش يتقلب */
    direction: ltr;
    unicode-bidi: isolate;
}

/* شرائح التقنيات المستخدمة في المشروع */
.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.project-tech[hidden] {
    display: none;
}

.project-tech li {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(212, 175, 55, 0.08);
    color: #d9c98f;
    font-size: 0.72rem;
    line-height: 1.2;
}

/* نقط التنقل بين المشاريع */
.project-dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.project-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.28);
    cursor: pointer;
    transition: all 0.25s ease;
}

.project-dot:hover {
    background: rgba(247, 215, 116, 0.6);
}

.project-dot[aria-current="true"] {
    width: 22px;
    background: linear-gradient(135deg, #f7d774, #d4af37);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.project-dot:focus-visible {
    outline: 2px solid #f7d774;
    outline-offset: 3px;
}

.project-card:focus-visible {
    outline: 2px solid rgba(247, 215, 116, 0.75);
    outline-offset: 4px;
}

/* السحب الأفقي للتنقل من غير ما نعطّل التمرير الرأسي */
.project-card {
    touch-action: pan-y;
}

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.project-btn.primary {
    background: linear-gradient(135deg, #f7d774, #d4af37);
    color: #1a1305;
}

.project-btn.secondary {
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #e8c15a;
    background: rgba(212, 175, 55, 0.04);
}

.project-btn.change {
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.12);
    color: #f7d774;
    cursor: pointer;
}

.project-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 18px rgba(212, 175, 55, 0.3);
}

.project-preview {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* نافذة المعاينة: صندوق شكله زي المتصفح وفيه الصورة بنسبة ثابتة (16:9) */
.preview-window {
    position: relative;
    width: min(100%, 520px);
    background: rgba(10, 9, 12, 0.96);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 18px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgba(212,175,55,0.04), 0 18px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* الصورة بتاخد مساحة ثابتة بنسبة 16:9 عشان تبان كاملة من غير تشوية */
.project-preview-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    object-position: top center;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
    background: #07060a;
    z-index: 2;
}

/* الشكل الوهمي (المكتب المبسّط) بيظهر فقط لو مفيش صورة للمشروع */
.preview-body {
    display: flex;
    gap: 14px;
    min-height: 220px;
    margin-top: 12px;
}

.preview-window.has-image .preview-body {
    display: none;
}

.preview-sidebar {
    width: 24%;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--project-primary-soft), var(--project-primary-soft-2));
    border: 1px solid rgba(212, 175, 55, 0.28);
}

.preview-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preview-line {
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--project-primary), rgba(148, 163, 184, 0.12));
}

.preview-line.short { width: 45%; }
.preview-line.medium { width: 65%; }
.preview-line.long { width: 80%; }

.preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.preview-cards span {
    display: block;
    height: 78px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--project-primary-soft), var(--project-primary-soft-2));
    border: 1px solid rgba(212, 175, 55, 0.22);
}

.about-section {
    padding: 32px 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    letter-spacing: -0.03em;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, #f7d774, #d4af37);
    border-radius: 2px;
}

/* بلوك شبكة About Me: هنا ترتيب الكروت داخل القسم */
/* شبكة الكروت: بتخلي الكروت تتوزع بشكل مرتب ومتناغم في الصفحات */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* بلوك الكروت الفردية: هنا الشكل العام لكل بطاقة About Me */
/* ==================== 6.2. كروت About Me ==================== */
/* كل كارت داخل About Me: بيحمل عنوانًا ووصفًا ومناسبة خاصة له */
.about-card {
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.45), rgba(10, 9, 12, 0.3));
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 28px;
    border-radius: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.about-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.16), transparent 36%);
    pointer-events: none;
}

.about-card:hover {
    border-color: rgba(212, 175, 55, 0.75);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.12);
}

.about-card .icon {
    font-size: 2rem;
    color: #e8c15a;
    margin-bottom: 16px;
}

.about-card h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.about-card p {
    color: #a9a49b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* بلوك الفوتر: هنا تنسيق آخر جزء في الصفحة وبيانات التواصل */
/* ==================== 10. Footer / التواصل النهائي ==================== */
/* جزء الفوتر في النهاية: فيه بيانات التواصل وروابط السوشيال ميديا */
.footer-section {
    background-color: #0a090c;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding: 40px 8% 20px;
    margin-top: 32px;
}

/* حاوية الفوتر: بتوزع المعلومات داخل الفوتر بشكل متوازن */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 30px;
}

.footer-info h3 {
    color: #ffffff;
    margin: 0 0 6px 0;
    font-size: 1.3rem;
}

.footer-quote {
    color: #a9a49b;
    font-size: 0.88rem;
    margin: 0;
}

.footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.contact-item {
    color: #a9a49b;
    text-decoration: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    border-radius: 10px;
    padding: 6px 10px;
    border: 1px solid transparent;
}

.contact-item i {
    color: #e8c15a;
}

.contact-item:hover {
    color: #f7d774;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(191, 143, 40, 0.12));
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12), 0 8px 18px rgba(212, 175, 55, 0.22);
    transform: translateY(-2px);
}

body.light-mode .contact-item {
    color: #334155;
}

body.light-mode .contact-item:hover {
    color: #7a5c10;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(247, 215, 116, 0.3));
    border-color: rgba(191, 143, 40, 0.45);
    box-shadow: 0 0 0 2px rgba(191, 143, 40, 0.1), 0 10px 22px rgba(191, 143, 40, 0.18);
}

.contact-item.whatsapp i {
    color: #25d366;
}

/* ==================== 10.1. قسم مواقع التواصل الاجتماعي ==================== */
/*
   ده الجزء اللي بيبرز حساباتي. حاطط له صندوق خاص بيه في نص الفوتر
   عشان يتشاف بسرعة، والأيقونات بقت أكبر ومعاها اسم الموقع مكتوب
*/
.footer-social-section {
    max-width: 1400px;
    margin: 0 auto 32px;
    padding: 24px 20px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.09), rgba(191, 143, 40, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.24);
}

.footer-social-title {
    margin: 0 0 6px;
    color: #f8fafc;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.footer-social-subtitle {
    margin: 0 auto 20px;
    max-width: 520px;
    color: #a9a49b;
    font-size: 0.88rem;
    line-height: 1.6;
}

/* صف اللينكات: بيلف على سطر تاني لو الشاشة ضاقت */
.footer-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* كل لينك بقى شكل كبسولة: أيقونة + اسم الموقع */
.footer-socials .social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.footer-socials .social-link i {
    font-size: 1.05rem;
}

/* كل موقع بلونه الأصلي عشان يميّز نفسه */
.footer-socials .social-link.linkedin i {
    color: #e8c15a;
}

.footer-socials .social-link.facebook i {
    color: #1877f2;
}

.footer-socials .social-link.instagram i {
    color: #e1306c;
}

.footer-socials .social-link.github i {
    color: #e2e8f0;
}

/* عند المرور: اللينك يترفع شوية ولوحته تنوّر */
.footer-socials .social-link:hover {
    transform: translateY(-3px);
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.55);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.3);
}

/* ==================== 10.2. آخر سطر في الفوتر ==================== */
.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    padding-top: 22px;
    color: #8b857b;
    font-size: 0.8rem;
}

/* الجملة الكرييتف: بلون مميز عشان تبان */
.footer-credo {
    margin: 0 0 10px;
    color: #e8c15a;
    font-size: 0.95rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.2px;
}

/* سطر الحقوق */
.footer-rights {
    margin: 0 0 6px;
    color: #a9a49b;
}

/* سطر التوقيع في الآخر */
.footer-signature {
    margin: 0;
    color: #8b857b;
    font-size: 0.76rem;
}

/* بلوك الشهادات: هنا تنسيق الكارت الكبير الخاص بالشهادات */
/* ==================== 6.3. قسم الشهادات (Certificates) ==================== */
/* ده الجزء الخاص بالشهادات: كل عنصر فيه بيعرض أيقونة، صورة الشهادة، واسمها بشكل مرتب */
.about-card.certificates-card {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(20, 17, 15, 0.97), rgba(10, 9, 12, 0.88));
}

.about-card.certificates-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 36%);
    pointer-events: none;
}

/* بلوك قائمة الشهادات: هنا ترتيب البطاقات داخل الكارت الكبير */
/* ==================== 6.3.1. قائمة الشهادات ==================== */
/* قائمة الشهادات: كل عنصر فيها بيحمل أيقونة، صورة، ونص صغير يشرح الشهادة */
.certificate-controls {
    position: absolute;
    top: 50%;
    left: 8px;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    pointer-events: none;
}

.scroll-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: rgba(10, 9, 12, 0.5);
    backdrop-filter: blur(8px);
    color: #f7d774;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.scroll-btn i {
    transition: transform 0.35s ease;
}

.scroll-btn:hover {
    transform: translateY(-2px) scale(1.04);
    background: rgba(212, 175, 55, 0.28);
    box-shadow: 0 14px 22px rgba(212, 175, 55, 0.3);
}

.scroll-btn:hover i {
    transform: rotate(360deg);
}

/* ملاحظة: ماينفعش نحط justify-content: center على حاوية scroll أفقي،
   لأنها بتعمل overflow غير قابل للوصول من الشمال (أول كارت بيتقص)
   فبنستخدم margin: auto على العناصر بدالها عشان تتوسّط لما تكون فاضية المساحة */
.certificates-list {
    margin-top: 4px;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 24px 8px;
    scroll-snap-type: x proximity;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch; /* تمرير ناعم على iOS */
    overscroll-behavior-x: contain;     /* مايسحبش الصفحة معاه */
}

/* توسيط الشهادات لما تكون كلها داخلة في الشاشة بدون تمرير،
   ومع أول كارت يفضل قابل للوصول أول ما يبقى فيه تمرير */
.certificates-list .certificate-item:first-child {
    margin-inline-start: auto;
}

.certificates-list .certificate-item:last-child {
    margin-inline-end: auto;
}

.certificates-list::-webkit-scrollbar {
    height: 8px;
}

.certificates-list::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.55);
    border-radius: 999px;
}

/* بلوك البطاقة الواحدة: هنا الشكل العام لكل شهادة */
/* ==================== 6.3.2. كل بطاقة شهادة ==================== */
/* كل عنصر شهادة: بيضم أيقونة الشهادة، صورة الشهادة، واسمها */
.certificate-item {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(191, 143, 40, 0.12));
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 14px;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}

.certificate-item:nth-child(1) {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(191, 143, 40, 0.16));
}

.certificate-item:nth-child(2) {
    background: linear-gradient(135deg, rgba(247, 215, 116, 0.2), rgba(191, 143, 40, 0.18));
}

.certificate-item:nth-child(3) {
    background: linear-gradient(135deg, rgba(255, 199, 87, 0.2), rgba(120, 90, 20, 0.22));
}

.certificate-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.1), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.certificate-move-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.move-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.3);
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.move-btn:hover {
    background: rgba(212, 175, 55, 0.22);
    border-color: rgba(212, 175, 55, 0.55);
    transform: translateY(-1px);
}

.certificate-item:hover {
    border-color: rgba(212, 175, 55, 0.75);
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 175, 55, 0.14);
}

.certificate-item:hover::after {
    opacity: 1;
}

.certificate-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #e8c15a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.certificate-number {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(10, 9, 12, 0.72);
    border: 1px solid rgba(212, 175, 55, 0.35);
    color: #f7d774;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* بلوك الصورة والنص: هنا شكل الصورة واسم الشهادة */
/* ==================== 6.3.3. صورة الشهادة والنص ==================== */
/* صورة الشهادة: بيتم عرضها داخل مربع صغير لتبقى مرتبة وواضحة */
.certificate-thumb {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
}

.certificate-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.certificate-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(191, 143, 40, 0.16));
    border: 1px solid rgba(212, 175, 55, 0.28);
}

.certificate-placeholder-text {
    color: #f8fafc;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.certificate-item:hover .certificate-thumb img {
    transform: scale(1.04);
}

/* نص الشهادة: بيحوي اسم الشهادة وتاريخ إكمالها */
.certificate-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.certificate-note {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.68rem;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    flex: 1 1 auto; /* بيملا الفراغ المتبقي عشان ميبقاش فيه فراغ كبير تحت */
}

.certificate-meta {
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 4px;
    color: #cbd5e1;
    font-size: 0.68rem;
    line-height: 1.5;
    flex: 1 1 auto; /* نفس الفكرة: بيملا الفراغ المتبقي */
}

.certificate-meta p {
    margin: 0;
}

.certificate-item.certificate-placeholder .certificate-meta {
    display: block;
}

.certificate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    margin-top: auto; /* يثبّت الأزرار تحت، فالفراغ يبان فوقها مش تحتها */
}

.certificate-btn {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.certificate-btn.view {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.5);
    color: #f7d774;
}

.certificate-btn.download {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.38);
    color: #e8c15a;
}

.certificate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}

.certificate-btn.view:hover {
    background: rgba(212, 175, 55, 0.26);
}

.certificate-btn.download:hover {
    background: rgba(212, 175, 55, 0.2);
}

.certificate-text h4 {
    margin: 0;
    color: #ffffff;
    font-size: 0.8rem;
}

.certificate-text span {
    color: #a9a49b;
    font-size: 0.68rem;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 999px;
    padding: 3px 6px;
}

@media (max-width: 900px) {
    .project-card {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 18px;
        gap: 20px;
    }

    .project-preview {
        width: 100%;
    }

    .preview-window {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .project-actions {
        flex-direction: column;
    }

    .project-btn {
        width: 100%;
    }
}

.tech-slider-section {
  padding: 3rem 1rem;
  text-align: center;
  position: relative;
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  /* مسافة للأسهم عشان ما تدوسش على الكروت */
  padding: 0 52px;
}

/* حاوية السلايدر الأفقي */
.tech-slider-container {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0.5rem;
  scrollbar-width: none; /* إخفاء شريط التمرير لمظهر أنيق */
}

.tech-slider-container::-webkit-scrollbar {
  display: none;
}

/* تصميم البطاقة الرفيعة */
.tech-card-slim {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem;
  border-radius: 50px; /* شكل بيضاوي رفيع */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tech-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.tech-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* === تأثير الهوفر الخيالي (Glow Effect & Neon Flare) === */
.tech-card-slim:hover {
  transform: translateY(-4px) scale(1.05);
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4),
              0 0 40px rgba(212, 175, 55, 0.12);
}

.tech-card-slim:hover .tech-logo {
  transform: rotate(12deg) scale(1.15);
}

/* حركة ضوء متوهج يمر عبر البطاقة عند الهوفر */
.tech-card-slim::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: 0.6s;
}

.tech-card-slim:hover::before {
  left: 100%;
}

/* === زراير التحكم والتنقل === */
.slider-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  flex-shrink: 0;
}

.slider-btn:hover {
  background: rgba(212, 175, 55, 0.25); /* خلفية ذهبي شفافة */
  color: #e8c15a; /* لون السهم ذهبي */
  border-color: #d4af37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.65);
    transform: scale(1.1);
}

/* الأسهم بتاخد مكانها من حشو الـ .slider-wrapper فمش محتاجة margin زيادة */
.prev-btn { margin-right: 0; }
.next-btn { margin-left: 0; }

/* إعطاء مساحة للحاوية لمنع القطع الحاد */
.tech-slider-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  /* قناع تلاشي ناعم على الأطراف: يبدأ متأخر (5%) عشان ما يقطعش الكارت
     اللي جنب الحافة، وبيبان إن فيه كروت زيادة برّه */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
}

/* منع انكماش النص داخل البطاقات */
.tech-card-slim {
  flex-shrink: 0; /* يضمن عدم انكماش الكلمات مطلقاً */
}

/* بلوك الـ Responsive: هنا ضبط الشكل على الشاشات الصغيرة */
/* ==================== 11. Responsive / شاشة الموبايل ==================== */
/* ============================================================================
   14) التجاوب — شاشة الموبايل (Responsive)
   ----------------------------------------------------------------------------
   الموقع متجاوب على تلات مراحل، كل مرحلة بتزيد التضييق:

     • 900px وأقل  → تابلت / موبايل عريض
                     الشريط يبقى أنحف، والحشو يقل، شبكة "عني" تبقى عمودين
     • 600px وأقل  → موبايل
                     الشريط يلف على أكتر من سطر، البحث ياخد عرض كامل،
                     شبكة "عني" تبقى عمود واحد
     • 480px وأقل  → موبايل صغير
                     كل المقاسات تتصغّر، والزوايا تقل عشان الشكل يبقى نضيف
     • 499px وأقل  → حالة خاصة لأسهم الشهادات (بتنقل تحت القائمة)

   ⚠️ مهم جدًا للتيم:
     البلوكات دي في **آخر الملف** — يعني بتغلب أي قاعدة فوقها.
     لو بتضيف مقاس جديد للموبايل، ضيفه في البلوك المناسب هنا،
     مش في نص الملف — وإلا مش هيشتغل.

   ملاحظة على الشريط على الموبايل:
     الاستدارة بتقل (24-26px بدل 999px) لأن الشريط بيلف على أكتر من
     سطر، فالكبسولة الكاملة بتبان غلط في الحالة دي.
   ============================================================================ */

@media (max-width: 900px) {
    .header {
        padding: 12px 16px;
    }

    .nav-links {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-section {
        gap: 24px;
        padding: 60px 6%;
    }

    .about-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

@media (max-width: 600px) {
    .header {
        padding: 10px 14px;
        flex-wrap: wrap;
        justify-content: center;
        /* الشريط بيلف على أكتر من سطر → استدارة ناعمة بدل الكبسولة */
        border-radius: 24px;
        top: 10px !important;
    }

    /* عند النزول على الموبايل: يطلع فوق ويلزق في الحافة ويرجع مستطيل */
    .header.scrolled {
        top: 0 !important;
        width: 100%;
        margin: 0 0 8px !important;
        border-radius: 0 0 18px 18px;
        padding: 8px 14px;
    }

    .logo-container {
        width: 100%;
        justify-content: center;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .search-box {
        width: 100%;
        max-width: 100%;
    }

    .search-input {
        width: 100%;
    }

    .hero-section {
        flex-direction: column;
        text-align: center;
        padding: 50px 20px;
    }

    .cta-buttons {
        justify-content: center;
        flex-direction: column;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .project-card {
        padding: 20px 16px;
    }

    .project-actions {
        flex-direction: column;
    }

    .project-btn {
        width: 100%;
    }
}

 /* ==========================================================================
    Hero Section — الجيل التاني (التفصيلي) — ده اللي بيكسب في الآخر
    ==========================================================================
    ⚠️ البلوك ده بياخد الأولوية على قسم الهيرو اللي فوق في الملف
    لأن الاتنين بنفس الخصوصية والـ CSS بيحب الأخير.

    يعني: القيم اللي هنا هي اللي بتظهر فعلًا في المتصفح.

    اللي جواه:
      .hero-section      → الحاوية الرئيسية (عمودية، عرضها محدود)
      .hero-top-row      → صف واحد فيه النص والصورة جنب بعض
      .hero-text-content → عمود النص (عنوان + وصف + أزرار)
      .hero-image-wrapper → الحاوية اللي حاطة صورة الشخص
      .hero-visual-card  → الكارت الزجاجي اللي تحت (المهارات)
      .card-glow/.card-inner → توهج جميل جوه الكارت والمحتوى فوقه
      .skills-grid       → شبكة المهارات الأربعة
      .cta-buttons .btn  → تنسيق موحّد لأزرار الهيرو التلاتة

    لو هتعدل في الهيرو، عدّل هنا مش فوق.
    ========================================================================== */
 /* الحاوية الرئيسية للهيرو وترتيبها رأسياً */
 /* (تعريف واحد فقط — كان فيه 5 تعريفات متكررة بتلغي بعض) */
 .hero-section {
     display: flex;
     flex-direction: column;
     gap: 18px;
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     /* حشو علوي صغير عشان الهيرو يبقى قريب من الشريط */
     padding: 12px 24px 12px;
 }

 /* الصف العلوي: النص والصورة جنب بعض على الشاشات الكبيرة */
 .hero-top-row {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     gap: 48px;
     width: 100%;
     max-width: 1180px;
     margin: 0 auto 8px;
 }

 /* النص: مبيتمدّدش أكتر من اللازم عشان الصورة تلاقي مكان جنبه */
 .hero-text-content {
     flex: 1 1 auto;
     min-width: 0;
     max-width: 720px;
     text-align: left;
 }

 /* الصورة: عرض ثابت على الشاشات الكبيرة (زي ما كانت) */
 .hero-image-wrapper {
     flex: 0 0 auto;
     width: 400px;
     height: 280px;
 }

 .hero-text-content .cta-buttons {
     justify-content: flex-start;
 }

 /* تنسيق مجموعة الأزرار */
 .cta-buttons {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
      flex-wrap: wrap;
  }

 /* تصميم الصورة المعزولة وتأثير الإضاءة (Cyber Glow) */
 .hero-image-wrapper {
     position: relative;
     width: 380px;
     height: 250px;
     flex-shrink: 0;
     border-radius: 18px;
 }

 .cyber-glow {
     position: absolute;
     top: -6px;
     left: -6px;
     right: -6px;
     bottom: -6px;
     background: linear-gradient(135deg, #f7d774 0%, #bf8f28 100%);
     border-radius: 24px;
     filter: blur(18px);
     opacity: 0.5;
     z-index: 1;
     transition: opacity 0.3s ease;
 }

 .hero-image-wrapper:hover .cyber-glow {
     opacity: 0.8;
 }

 .hero-standalone-img {
     position: relative;
     z-index: 2;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     border-radius: 18px;
     border: 1px solid rgba(212, 175, 55, 0.45);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
 }

 /* كارت الهيرو البصري (الكارت السفلي) — لون داكن زجاجي متناسق مع الموقع */
 .hero-visual-card {
     position: relative;
     width: 100%;
     flex: none;
     background: linear-gradient(145deg, rgba(20, 17, 15, 0.9), rgba(10, 9, 12, 0.78));
     border: 1px solid rgba(212, 175, 55, 0.22);
     border-radius: 20px;
     padding: 28px 32px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     overflow: hidden;
 }

 /* توهج خفيف جوه الكارت */
 .card-glow {
     position: absolute;
     top: -40%;
     right: -10%;
     width: 320px;
     height: 320px;
     background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent 65%);
     filter: blur(10px);
     pointer-events: none;
     z-index: 0;
 }

 .card-inner {
     position: relative;
     z-index: 1;
 }

 .card-body h2 {
     margin: 0 0 10px;
     font-size: clamp(1.2rem, 2vw, 1.6rem);
     color: #ffffff;
 }

 .card-text {
     margin: 0;
     color: #a9a49b;
     font-size: 0.95rem;
     line-height: 1.6;
 }

 /* شبكة المهارات داخل الكارت لتتوزع بشكل متناسق */
 .skills-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     margin-top: 20px;
 }

 /* تنسيق عام وموحد للأزرار الثلاثة (View Work / Let's Talk / Download CV) */
 .cta-buttons .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 12px;
     font-size: 0.95rem;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     cursor: pointer;
     box-sizing: border-box;
 }

 /* 1. الزر الرئيسي (View Work) */
 .btn-primary {
     background: linear-gradient(135deg, #f7d774, #d4af37);
     color: #1a1305;
     border: 1px solid #d4af37;
     box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
 }

 .btn-primary:hover {
     background: linear-gradient(135deg, #ffe9a3, #f7d774);
     border-color: #f7d774;
     color: #1a1305;
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.65);
     transform: translateY(-2px);
 }

 /* 2. الزر الثانوي (Let's Talk) */
 .btn-secondary {
     background-color: rgba(212, 175, 55, 0.05);
     color: #e8c15a;
     border: 1px solid rgba(212, 175, 55, 0.35);
 }

 .btn-secondary:hover {
     background-color: rgba(212, 175, 55, 0.15);
     border-color: rgba(212, 175, 55, 0.6);
     transform: translateY(-2px);
 }

 /* 3. زر تنزيل الـ CV (Download CV) */
 .btn-tertiary {
     background-color: transparent;
     color: #d4af37;
     border: 1px solid rgba(212, 175, 55, 0.45);
 }

 .btn-tertiary:hover {
     background-color: rgba(212, 175, 55, 0.12);
     border-color: #d4af37;
     color: #f7d774;
     box-shadow: 0 0 14px rgba(212, 175, 55, 0.4);
     transform: translateY(-2px);
 }

 /* === التجاوب في الهيرو (تابلت / موبايل) === */
 /* على التابلت والموبايل: الصورة تحت النص، والكل في النص */
 @media (max-width: 992px) {
     .hero-top-row {
         flex-direction: column;
         text-align: center;
         gap: 32px;
         max-width: 100%;
     }

     .hero-text-content {
         flex: 0 1 auto;
         width: 100%;
         max-width: 700px;
         text-align: center;
     }

     .hero-text-content .cta-buttons {
         justify-content: center;
     }

     .hero-text-content .welcome-pill {
         margin-left: auto;
         margin-right: auto;
     }

     .hero-image-wrapper {
         width: 100%;
         max-width: 480px;
         height: 270px;
     }

     .skills-grid {
         grid-template-columns: 1fr;
     }
 }

 body.light-mode .hero-visual-card {
     background: linear-gradient(145deg, #edf6ff, #f8fbff);
     border-color: rgba(148, 163, 184, 0.2);
     box-shadow: 0 18px 32px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
 }

 /* ==================== 8. قسم التواصل والنموذج (Contact) ==================== */
.contact-section {
    width: 100%;
    padding: 32px 0;
    margin-top: 24px;
}

.contact-container {
    max-width: 800px; /* عرض مناسب ونظامي للنموذج */
    margin: 0 auto;
    background: rgba(13, 12, 16, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
}

.contact-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-header h2 {
    color: #ffffff;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.contact-header p {
    color: #a9a49b;
    font-size: 0.95rem;
}

/* تنسيق صف الحقول المزدوجة (الاسم والرقم) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* تنسيق خانات الإدخال والرسائل */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.05);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}

.form-group textarea {
    resize: vertical; /* السماح بتغيير حجم خانة الرسالة رأسياً فقط */
}

/* زر الإرسال */
.btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f7d774 0%, #d4af37 100%);
    color: #1a1305;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-submit:hover {
    opacity: 0.92;
    box-shadow: 0 0 22px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

/* الزرار وهو بيستنى الرد من السيرفر */
.btn-submit:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

/* سطر حالة إرسال الرسالة (نجاح / خطأ) */
.form-status {
    min-height: 22px;
    margin: 12px 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

.form-status.is-ok {
    color: #6ee7b7;
}

.form-status.is-error {
    color: #f87171;
}

/* التجاوب مع شاشات الموبايل */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-container {
        padding: 24px;
    }
}

/* ==================== 9. شاشة التحميل (Preloader) ==================== */
/* شاشة التحميل بتغطي كامل الشاشة فوق كل العناصر لحد ما الصفحة تحمّل */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #07060a; /* نفس لون خلفية الموقع */
    z-index: 99999; /* لضمان ظهورها فوق الهيدر وكل العناصر */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* كلاس بيتضاف من الجافاسكربت لإخفاء الشاشة بنعومة بعد تحميل الصفحة */
#preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* محتوى الشاشة: الشعار والنص جنب بعض في سطر واحد */
.loader-content {
    display: flex !important;
    flex-direction: row !important; /* محاذاة أفقية على سطر واحد */
    align-items: center !important;
    justify-content: center !important;
    gap: 12px; /* مسافة بين الشعار والنص */
    white-space: nowrap; /* منع نزول النص لسطر جديد */
}

/* ضبط حجم الشعار وإلغاء أي هوامش مسبقة */
.loader-content .logo-container,
.loader-content .logo-wrapper {
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    display: inline-block;
}

/* تنسيق النص ليصبح بصف واحد بجانب الشعار */
.loader-status,
.loader-status span,
.brand-text {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    display: inline-block !important;
    line-height: 1;
}/* ============================================================================
   إضافات إصلاح الألوان (كانت ناقصة تمامًا ومسببة كسر الشكل)
   - شاشة التحميل (Space Theme) اللي الـ HTML بيستخدم كلاساتها
   - شريط الزينة العلوي (top-bar)
   - عناصر الهيرو كارت (card-body / card-inner)
   - بعض عناصر البحث والتواصل
   ============================================================================ */

/* ==================== شاشة التحميل (Preloader · Space Theme) ==================== */
.space-theme {
    background:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.12), transparent 45%),
        linear-gradient(160deg, #050408, #07060a 55%, #0d0b06);
}

.loader-content {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px;
    white-space: nowrap;
}

.stars-overlay {
    position: absolute;
    inset: -200px;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 214, 122, 0.9), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(255, 214, 122, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.6), transparent);
    background-size: 300px 300px;
    opacity: 0.7;
    pointer-events: none;
    animation: starsDrift 40s linear infinite;
}

@keyframes starsDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-120px, -120px, 0); }
}

.circular-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.space-logo {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.7);
    z-index: 2;
}

.orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.38);
    inset: 0;
}

.ring-1 {
    border-top-color: #d4af37;
    animation: orbitSpin 3s linear infinite;
}

.ring-2 {
    inset: 8px;
    border-right-color: #f7d774;
    animation: orbitSpin 4.5s linear infinite reverse;
}

.ring-3 {
    inset: 16px;
    border-bottom-color: #bf8f28;
    animation: orbitSpin 6s linear infinite;
}

@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}

.space-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.35), transparent 65%);
    filter: blur(12px);
    z-index: 1;
    pointer-events: none;
}

.status-bar {
    width: 160px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.status-bar::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4af37, #f7d774);
    animation: statusMove 1.2s ease-in-out infinite;
}

@keyframes statusMove {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* ==================== عناصر ناقصة متفرقة ==================== */
/* ⚠️ ملاحظة للتيم: العناوين المرقّمة اللي فوق في الملف (زي "5) الهيرو"
   و "7) المشاريع" و "6.2) العني" و "10) الفوتر") أرقامها **مش**
   بترتيب ورودها — ده لأن الملف اتوسّع على مراحل وكل جزء اتضاف في وقت.
   الأرقام دي بتجمّع الأقسام حسب **الموضوع** مش حسب مكانها.
   الفهرس اللي فوق في أول الملف هو المرجع الوحيد للترتيب الحقيقي. */
.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.night-mode-btn {
    width: 100%;
}

.contact-form {
    display: flex;
    flex-direction: column;
}

.contact-strip-text {
    flex: 1;
}

@media (max-width: 768px) {
    .contact-strip {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .contact-strip-btn {
        width: 100%;
    }
}
/* ============================================================================
   ملاحظة: الأزرار العائمة على جنب الشاشة (واتساب + مساعد الذكاء الاصطناعي)
   ولوحة الشات موجودة تاني في آخر الملف تحت قسم «الأزرار العائمة».
   ============================================================================ */

/* ============================================================================
   تجاوب الموبايلات الصغيرة (Small phones — 480px وأقل، وحتى 360px)
   الهدف: منع أي تمرير أفقي (horizontal scroll) وتكبير العناصر للمس
   ============================================================================ */

/* --- منع التمرير الأفقي من أصله على أي شاشة --- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* التمرير الناعم + مساحة تحت الشريط الثابت
   (عشان لما حد يدوس على لينك في التنقل، العنوان ما يتغطاش بالشريط) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

/* العناصر اللي كانت بتخرج برة الشاشة على الموبايل */
@media (max-width: 600px) {
    /* التوهج الزخرفي جوه كارت الهيرو: بيتحدد بعرض ثابت وكان بيوسّع الصفحة */
    .card-glow {
        width: 200px;
        height: 200px;
        right: -20%;
    }

    /* طبقة النجوم في شاشة التحميل */
    .stars-overlay {
        max-width: 100%;
        overflow: hidden;
    }
}

/* ==================== موبايلات صغيرة (480px وأقل) ==================== */
@media (max-width: 480px) {
    /* --- الهيدر والتنقل --- */
    .header {
        padding: 10px 12px;
        top: 10px !important;
        gap: 8px;
        /* على الموبايل الشريط بيلف على سطرين، فبنخفّف استدارة الزوايا */
        border-radius: 26px;
        width: calc(100% - 24px);
        margin: 10px auto !important;
    }

    /* عند النزول: يطلع فوق ويلزق في الحافة */
    .header.scrolled {
        top: 0 !important;
        width: 100%;
        margin: 0 0 8px !important;
        border-radius: 0 0 18px 18px;
        padding: 8px 12px;
    }

    .logo-container img {
        height: 34px;
        width: 34px;
    }

    .logo-container .logo-text {
        font-size: 1.05rem;
    }

    .nav-links {
        gap: 6px;
        width: 100%;
    }

    .nav-links a {
        padding: 6px 8px;
        font-size: 0.85rem;
    }

    /* مربع البحث بعرض كامل ومريح للإصبع */
    .search-box {
        width: 100%;
        padding: 8px 12px;
        border-radius: 14px;
    }

    .search-input {
        width: 100%;
        font-size: 0.9rem;
    }

    /* خانة البحث ما لازمش تكبر عند التركيز على الموبايل */
    .search-input:focus {
        width: 100%;
    }

    .header-cta {
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    /* قائمة الإعدادات: تفضل جوه الشاشة */
    .settings-dropdown {
        right: 0;
        left: auto;
        min-width: 110px;
    }

    html[dir="rtl"] .settings-dropdown {
        right: auto;
        left: 0;
    }

    /* --- قسم الهيرو --- */
    /* نفس حشو باقي الأقسام (29px) عشان الهيرو ما يبانش مايل لليمين */
    .hero-section {
        padding: 36px 29px;
        gap: 22px;
    }

    .hero-top-row {
        gap: 24px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    /* نص الهيرو ياخد عرض الصف كامل بدون ما يطلع برة */
    .hero-text-content {
        max-width: 100%;
        width: 100%;
    }

    .welcome-pill {
        font-size: 0.78rem;
        padding: 6px 12px;
    }

    .main-title {
        font-size: 1.65rem;
        line-height: 1.3;
        margin-bottom: 14px;
    }

    .description {
        font-size: 0.92rem;
        margin-bottom: 22px;
    }

    /* الأزرار تبقى بعرض كامل وتحت بعض عشان الضغط يسهل */
    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .cta-buttons .btn {
        width: 100%;
        padding: 13px 18px;
    }

    /* صورة الهيرو: كانت 380px بعرض ثابت — تخليها مرنة */
    .hero-image-wrapper {
        width: 100%;
        max-width: 100%;
        height: 200px;
    }

    .cyber-glow {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 18px;
        filter: blur(14px);
    }

    /* كارت الهيرو البصري: نقلّل الحشو */
    .hero-visual-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    /* الأيقونة والـ badge جنب بعض في النص بدل ما يتفرقوا على الجوانب */
    .card-header {
        justify-content: center;
        gap: 10px;
        margin-bottom: 14px;
    }

    .card-body h2 {
        font-size: 1.15rem;
    }

    .card-text {
        font-size: 0.9rem;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .skill-box {
        padding: 10px 12px;
    }

    /* --- قسم المشاريع --- */
    .project-card {
        padding: 18px 16px 64px;
        border-radius: 18px;
        gap: 18px;
    }

    .project-info h3 {
        font-size: 1.1rem;
    }

    .project-info p {
        font-size: 0.9rem;
    }

    .project-nav-btn {
        width: 38px;
        height: 38px;
        bottom: 10px;
    }

    .project-nav-btn.prev {
        left: 12px;
    }

    .project-nav-btn.next {
        right: 12px;
    }

    /* --- قسم About Me --- */
    .about-grid {
        gap: 16px;
    }

    .about-card {
        padding: 20px 18px;
    }

    .about-card .icon {
        font-size: 1.7rem;
        margin-bottom: 12px;
    }

    .about-card h3 {
        font-size: 1.08rem;
    }

    .about-card p {
        font-size: 0.9rem;
    }

    /* --- قسم الشهادات --- */
    /* عرض ثابت معقول بدل نسبة كبيرة، عشان يبان كارت وجزء من اللي بعده */
    .certificate-item {
        flex: 0 0 200px;
        width: 200px;
        min-width: 0;
    }

    /* مساحة مخصصة للأسهم على الجانبين عشان ما تغطّيش الكروت */
    .certificates-list {
        padding: 4px 56px 8px;
        scroll-snap-type: x mandatory;
    }

    /* --- قسم التواصل --- */
    .contact-section {
        padding: 40px 0;
    }

    .contact-container {
        padding: 18px 16px;
        border-radius: 18px;
        margin: 0 12px;
    }

    .contact-header h2 {
        font-size: 1.4rem;
    }

    .contact-header p {
        font-size: 0.88rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 12px 14px;
        font-size: 16px; /* 16px يمنع تكبير الصفحة تلقائيًا في iOS */
    }

    /* --- الفوتر --- */
    .footer-section {
        padding: 30px 16px 16px;
        margin-top: 40px;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .footer-info h3 {
        font-size: 1.1rem;
    }

    .footer-quote,
    .footer-bottom {
        font-size: 0.85rem;
    }

    /* --- النوافذ المنبثقة --- */
    .contact-modal-content {
        padding: 22px 16px 16px;
        border-radius: 14px;
    }

    .contact-modal-content h3 {
        font-size: 1.2rem;
    }

    /* --- أزرار التمرير --- */
    .scroll-btn {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================================
   مساحة مخصصة لأسهم تمرير الشهادات
   الأسهم بتقع في فراغ على الجانبين، فمش بتغطي صور الشهادات
   (متاخدة هنا في الآخر عشان تغلب أي قاعدة padding تانية فوقها)
   ============================================================================ */
.certificates-list {
    padding-left: 66px;
    padding-right: 66px;
    scroll-padding-left: 66px;
    scroll-padding-right: 66px;
}

@media (max-width: 600px) {
    .certificates-list {
        padding-left: 54px;
        padding-right: 54px;
        scroll-padding-left: 54px;
        scroll-padding-right: 54px;
    }
}

/* ============================================================================
   الشاشات الضيقة جدًا (أقل من 500px)
   عرض الكارت قريب من عرض الشاشة، فمفيش مكان للأسهم على الجانبين
   فبننقل الأسهم تحت القائمة بدل ما تبقى فوقها — كده ما بتغطي أي حاجة
   ============================================================================ */
@media (max-width: 499px) {
    .certificate-controls {
        position: static;
        transform: none;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
        pointer-events: auto;
    }

    .certificates-list {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
    }
}

/* ==================== موبايلات ضيقة جدًا (360px وأقل) ==================== */
@media (max-width: 360px) {
    .main-title {
        font-size: 1.45rem;
    }

    .nav-links a {
        font-size: 0.78rem;
        padding: 5px 6px;
    }

    .hero-image-wrapper {
        height: 170px;
    }

    .certificate-item {
        flex: 0 0 180px;
        width: 180px;
    }

    .scroll-btn {
        width: 34px;
        height: 34px;
    }

    .contact-container {
        margin: 0 8px;
        padding: 16px 12px;
    }
}

/* ============================================================================
   مساحة فاضية في آخر الصفحة على الموبايل
   ============================================================================ */
@media (max-width: 600px) {
    body {
        padding-bottom: 0;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ============================================================================
   (تمت إزالة طبقات توهج الماوس — Cursor Glow / Spotlight)
   الصفحة مافيهاش أي عنصر عائم أو توهج بيتبع الماوس.
   ============================================================================ */

/* ============================================================================
   ==================== 12. انيميشن الاسم اللامع (Name Intro) ====================
   بتظهر بعد اختفاء شاشة التحميل تمامًا، والاسم بيعدّي عليه شعاع لمعة بيلمع
   من الشمال لليمين. وبيتفاعل مع الماوس: توهج بيتبع المؤشر، وكلوس/Enter
   بيعمل أفيكت والنهاية الاسم بيتشال من الصفحة.
   ============================================================================ */

.name-intro {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #07060a;
    background-image:
        radial-gradient(circle at 50% 45%, rgba(212, 175, 55, 0.16), transparent 60%),
        linear-gradient(160deg, #050408, #07060a 55%, #0d0b06);
    z-index: 99998; /* أقل من شاشة التحميل، وأعلى من كل حاجة تانية */
    opacity: 1;
    transition: opacity 0.42s ease, visibility 0.42s ease;
}

/* الكلاس اللي بنضيفه من الجافاسكربت لإخفاء شاشة الاسم */
.name-intro.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.name-intro-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
    animation: nameIntroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nameIntroIn {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* السطر الصغير فوق الاسم */
.name-intro-kicker {
    margin: 0 0 14px;
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #8b857b;
    opacity: 0;
    animation: fadeUpSoft 0.8s ease 0.25s forwards;
}

@keyframes fadeUpSoft {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 0.9; transform: translateY(0); }
}

/* عنوان الاسم نفسه */
.name-intro-title {
    margin: 0;
    font-size: clamp(2rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 1px;
    direction: ltr; /* الاسم إنجليزي فبنخليه من الشمال لليمين حتى في الوضع العربي */
}

/* الاسم نفسه — بيعدّي عليه شعاع اللمعة وبيتفاعل مع الماوس */
.name-intro-text {
    position: relative;
    display: inline-block;
    background: linear-gradient(
        100deg,
        #6b6250 0%,
        #a89a78 38%,
        #6b6250 60%,
        #6b6250 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: nameShine 2.6s ease-in-out 0.5s infinite;
    filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

/* شعاع اللمعة الذهبي اللي بيعدّي من الشمال لليمين */
@keyframes nameShine {
    0% {
        background-position: 220% 0;
        filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }
    22% {
        background-position: 0% 0;
        filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.55));
    }
    42% {
        background-position: -220% 0;
        filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }
    100% {
        background-position: -220% 0;
        filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }
}

/* ---- التفاعل بالماوس: لما المؤشر يمرّ على الاسم ---- */
/* بنوقف الأنيميشن ونحط الحالة المضيئة مباشرة (توهج ذهبي واضح) */
.name-intro.is-name-hover .name-intro-text {
    animation: none;
    background-position: 22% 0;
    filter: drop-shadow(0 0 26px rgba(247, 215, 116, 0.85));
    transform: translateY(-3px) scale(1.045);
}

/* الأندرلاين بيولّع مع الـ hover */
.name-intro.is-name-hover .name-intro-underline {
    box-shadow: 0 0 28px rgba(247, 215, 116, 0.95);
}

/* ---- أفيكت الكليك / Enter: النبضة الضوئية ---- */
/* لحظة الدوس: الاسم ينضغط شوية */
.name-intro.is-pressing .name-intro-text {
    transform: translateY(-1px) scale(0.97);
    filter: drop-shadow(0 0 34px rgba(247, 215, 116, 1));
}

/* حلقة ضوئية بتتوسّع من الاسم لحظة الدوس */
.name-intro-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    border: 2px solid rgba(247, 215, 116, 0.9);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.85), inset 0 0 30px rgba(212, 175, 55, 0.4);
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.name-intro.is-bursting .name-intro-burst {
    animation: nameBurst 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes nameBurst {
    0% {
        opacity: 0.95;
        transform: scale(0.35);
    }
    70% {
        opacity: 0.5;
        transform: scale(3.4);
    }
    100% {
        opacity: 0;
        transform: scale(5);
    }
}

/* لحظة الخروج: الاسم يتكبّر ويطير لأبرة مع وميض ذهبي */
.name-intro.is-leaving .name-intro-inner {
    animation: nameLeave 0.6s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes nameLeave {
    from { opacity: 1; transform: scale(1); }
    40%  { opacity: 1; transform: scale(1.08); filter: brightness(1.6); }
    to   { opacity: 0; transform: scale(1.5); filter: brightness(2); }
}

/* فلاش بيعم كل الشاشة لحظة الخروج */
.name-intro-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(247, 215, 116, 0.85), rgba(212, 175, 55, 0.35) 40%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.name-intro.is-bursting .name-intro-flash {
    animation: nameFlash 0.75s ease-out forwards;
}

@keyframes nameFlash {
    0%   { opacity: 0; }
    35%  { opacity: 0.85; }
    100% { opacity: 0; }
}

/* خط ذهبي رفيع بيتوسّع تحت الاسم */
.name-intro-underline {
    width: 0;
    height: 2px;
    margin: 22px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #f7d774, #d4af37, transparent);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.6);
    animation: underlineGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes underlineGrow {
    from { width: 0; opacity: 0; }
    to   { width: min(320px, 70vw); opacity: 1; }
}

/* الوضع الأبيض: خلفية فاتحة والاسم يتلوّن بالذهبي الداكن */
body.light-mode .name-intro {
    background: #fdfaf2;
    background-image:
        radial-gradient(circle at 50% 45%, rgba(212, 175, 55, 0.22), transparent 60%),
        linear-gradient(160deg, #fdfaf3, #f7f1e3 55%, #fdfaf3);
}

body.light-mode .name-intro-kicker {
    color: #7a5c10;
}

/* ============================================================================
   ==================== 13. ظهور المحتوى عند النزول (Scroll Reveal) ============
   بنضيف كلاس .reveal-init من جافاسكربت، وبعدين .is-visible لما العنصر
   يدخل الشاشة، وهو اللي بيعمل الحركة الناعمة
   ============================================================================ */

.reveal-init {
    opacity: 0;
    transform: translateY(46px);
    filter: blur(6px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-init.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* كارت الهيرو الجانبي: بيظهر من ناحية اليمين شوية */
.reveal-init.reveal-right {
    transform: translateX(56px) translateY(20px);
}

.reveal-init.reveal-right.is-visible {
    transform: translateX(0) translateY(0);
}

/* الكروت: بتظهر بتكبير بسيط */
.reveal-init.reveal-zoom {
    transform: translateY(34px) scale(0.94);
}

.reveal-init.reveal-zoom.is-visible {
    transform: translateY(0) scale(1);
}

/* تأخير متتالي للكروت اللي جوه نفس الشبكة (ستاجر) */
.reveal-init.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-init.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-init.reveal-delay-3 { transition-delay: 0.24s; }

/* احترام إعداد "تقليل الحركة" */
@media (prefers-reduced-motion: reduce) {
    .reveal-init,
    .name-intro-inner,
    .name-intro-kicker,
    .name-intro-title,
    .name-intro-text,
    .name-intro-underline,
    .name-intro-burst,
    .name-intro-flash {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .name-intro-burst,
    .name-intro-flash {
        display: none !important;
    }

    .name-intro-text {
        -webkit-text-fill-color: #e8c15a;
        color: #e8c15a;
        background: none;
    }
}

/* ============================================================================
   الأزرار العائمة (Floating Buttons) — واتساب + مساعد الذكاء الاصطناعي
   ----------------------------------------------------------------------------
      الزرارين بقوا جوّه روبوت الموقع العائم (.bot-fab-dock):
         • .whatsapp-fab — دايرة خضرا بتفتح محادثة واتساب مباشرة
         • .ai-fab       — زر المساعد: بيفتح ويقفل لوحة الشات (.ai-panel)

      الروبوت ثابت في جنب الشاشة من تحت، والزرارين فوق صدره.
      في العربي (RTL) كله بيتقلب للجنب التاني.
      ============================================================================ */

   /* --- حاوية الروبوت العائم: كارت ثابت في الركن، مقصوص جوه الشاشة --- */
   .bot-fab-dock {
       position: fixed;
       bottom: 14px;
       right: 14px;
       /* المقاسات دي مقصوصة على قدّ الروبوت + إيدين ورجلين وهالة الأرض */
       width: 124px;
       height: 164px;
       padding-top: 14px;
       box-sizing: border-box;
       z-index: 1500;
       pointer-events: none;
       overflow: visible;
       border-radius: 22px;
       background: radial-gradient(circle at 50% 72%, rgba(212, 175, 55, 0.14), transparent 68%);
       border: 1px solid rgba(212, 175, 55, 0.28);
       box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }

   /* حبس الروبوت جوه الكارت: أي زائد بره بيتقص، والفقاعة ليها مساحة فوق */
   @supports (overflow: clip) {
       .bot-fab-dock {
           overflow: clip;
           /* مساحة yam كل حاجة بره الكارت: الفقاعة بتطلع فوق */
           overflow-clip-margin: 200px;
       }
   }

   .bot-fab-dock .hero-bot {
       pointer-events: auto;
       margin: 0 auto;
   }

   /* --- الزراير جوّه الروبوت: صف فوق الصدر --- */
   .bot-fab-buttons {
       position: absolute;
       top: 80px;
       left: 50%;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 3px 4px;
       border-radius: 16px;
       background: rgba(6, 6, 10, 0.85);
       box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 4px 12px rgba(0, 0, 0, 0.6);
       z-index: 6;
   }

   .whatsapp-fab,
   .ai-fab {
       position: static;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.95rem;
       cursor: pointer;
       z-index: 5;
       transition: transform 0.25s ease, box-shadow 0.25s ease;
   }

   /* --- زر الواتساب --- */
   .whatsapp-fab {
       background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    border: 1px solid rgba(37, 211, 102, 0.55);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.whatsapp-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 18px 34px rgba(37, 211, 102, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}

/* هالة بتنبعث حوالين الزر عشان تلفت النظر */
.whatsapp-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.6);
    animation: whatsapp-ring 2.6s ease-out infinite;
}

@keyframes whatsapp-ring {
    0%   { transform: scale(1);    opacity: 0.7; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* --- زر المساعد --- */
.ai-fab {
    border: 1px solid rgba(0, 242, 254, 0.5);
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    color: #0d131a;
    font-size: 1.35rem;
    box-shadow: 0 12px 28px rgba(0, 242, 254, 0.35), 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ai-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 18px 34px rgba(0, 242, 254, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* عند فتح اللوحة: الأيقونة تتحول من روبوت إلى علامة إغلاق */
.ai-fab .ai-fab-close {
    display: none;
}

.ai-fab.is-open .ai-fab-open {
    display: none;
}

.ai-fab.is-open .ai-fab-close {
    display: block;
}

/* نقطة خضرا صغيرة بتعمل نبضة نيون عشان تشد انتباه الزائر */
.ai-fab-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #0d131a;
    animation: ai-pulse 2s ease-in-out infinite;
}

.ai-fab.is-open .ai-fab-dot {
    display: none;
}

@keyframes ai-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

/* --- لوحة الشات: بتفتح فوق الزرين --- */
.ai-panel {
    position: fixed;
    bottom: 190px;
    right: 24px;
    width: min(400px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 200px));
    overflow-y: auto;
    padding: 22px;
    background: rgba(13, 19, 26, 0.97);
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-sizing: border-box;
    z-index: 1500;
    animation: ai-panel-in 0.25s ease;
}

@keyframes ai-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- رأس المساعد: الأيقونة والعنوان --- */
.ai-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

/* زر إغلاق اللوحة */
.ai-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-inline-start: auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ai-close:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.5);
    color: #fca5a5;
}

.ai-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    color: #0d131a;
    font-size: 1.25rem;
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.35);
}

.ai-header-text h3 {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
}

.ai-header-text p {
    margin: 0;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.5;
}

/* --- أزرار الأسئلة السريعة --- */
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.ai-suggestion {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: rgba(0, 242, 254, 0.06);
    color: #a5f3fc;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ai-suggestion:hover {
    background: rgba(0, 242, 254, 0.16);
    border-color: rgba(0, 242, 254, 0.55);
    color: #ecfeff;
    transform: translateY(-1px);
}

.ai-suggestion:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 2px;
}

/* --- صف الإدخال والزر --- */
.ai-box {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.ai-input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.ai-input::placeholder {
    color: #64748b;
}

.ai-input:focus {
    border-color: #00f2fe;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);
}

/* الزر: بيستخدم نفس تدرّج لون المساعد */
.ai-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 50px;
    padding: 14px;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    color: #0d131a;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-send-btn:hover:not(:disabled) {
    opacity: 0.9;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
    transform: translateY(-2px);
}

.ai-send-btn:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* الأيقونة بتلف بدل النص أثناء ما الإجابة بتيجي */
.ai-send-btn.is-loading i {
    animation: ai-spin 1s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* --- صندوق الإجابة --- */
.response-box {
    margin-top: 16px;
    padding: 16px;
    min-height: 60px;
    max-height: 260px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid #00f2fe;
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.8;
    /* الحفاظ على أسطر الإجابة كما هي */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.45) transparent;
}

/* حالة الخطأ */
.response-box.is-error {
    border-left-color: #f87171;
    color: #fca5a5;
}

/* --- الوضع الأبيض --- */
body.light-mode .ai-panel {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(56, 189, 248, 0.35);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

body.light-mode .whatsapp-fab {
    border-color: rgba(18, 140, 126, 0.45);
    box-shadow: 0 12px 28px rgba(18, 140, 126, 0.28), 0 4px 12px rgba(15, 23, 42, 0.14);
}

body.light-mode .ai-fab {
    border-color: rgba(2, 132, 199, 0.4);
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.28), 0 4px 12px rgba(15, 23, 42, 0.14);
}

body.light-mode .ai-suggestion {
    background: rgba(2, 132, 199, 0.06);
    border-color: rgba(2, 132, 199, 0.25);
    color: #0369a1;
}

body.light-mode .ai-suggestion:hover {
    background: rgba(2, 132, 199, 0.14);
    color: #075985;
}

body.light-mode .ai-fab-dot {
    border-color: #ffffff;
}

body.light-mode .ai-close {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

body.light-mode .ai-header-text h3 {
    color: #0f172a;
}

body.light-mode .ai-header-text p {
    color: #475569;
}

body.light-mode .ai-input {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

body.light-mode .ai-input::placeholder {
    color: #94a3b8;
}

body.light-mode .response-box {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.1);
    border-left-color: #0ea5e9;
    color: #334155;
}

body.light-mode .response-box.is-error {
    border-left-color: #dc2626;
    color: #b91c1c;
}

/* --- الموبايل: اللوحة تاخد عرض الشاشة تقريبًا والزرين يفضلوا مريحين للإصبع --- */
@media (max-width: 768px) {
    .bot-fab-dock {
        bottom: 10px;
        right: 10px;
        width: 112px;
        height: 150px;
        padding-top: 10px;
    }

    .whatsapp-fab,
    .ai-fab {
        width: 30px;
        height: 30px;
    }

    .ai-panel {
        bottom: 150px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 180px);
        padding: 18px;
    }
}

/* --- الاتجاه من اليمين للشمال (العربي): الزرين واللوحة ينقلبوا للجنب التاني --- */
html[dir="rtl"] .bot-fab-dock {
    right: auto;
    left: 14px;
}

html[dir="rtl"] .ai-panel {
    right: auto;
    left: 24px;
}

html[dir="rtl"] .ai-close {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

@media (max-width: 768px) {
    html[dir="rtl"] .bot-fab-dock {
        left: 14px;
        right: auto;
        transform-origin: bottom left;
    }

    html[dir="rtl"] .ai-panel {
        left: 12px;
        right: 12px;
    }
}/* ============================================================================
   تظبيط المقاسات والمسافات (Layout Polish & Scrollbar)
   ----------------------------------------------------------------------------
   القسم ده في آخر الملف عن قصد، عشان ياخد الأولوية على أي قاعدة فوقه
   (نفس الخصوصية = الأخير بيفوز).

   اللي بيعمله:
     1) إلغاء شريط التمرير الجانبي (العمودي) تمامًا من غير ما نلغي التمرير
     2) توحيد عرض كل الأقسام على نفس الحاوية (--site-max) عشان الحواف
        تبقى على خط واحد بالظبط من فوق لتحت
     3) تظبيط مسافات الهيرو والشهادات من حواف الصفحة بدقة
     4) ضبط ارتفاع الصفحة عشان إلغاء الشريط ما يعملش قفزة في الترتيب

   ⚠️ ملاحظة مهمة: إلغاء شريط التمرير بيتم بـ scrollbar-width: none
   (فايرفوكس) و ::-webkit-scrollbar { display: none } (كروم/إيدج/سفاري).
   التمرير نفسه شغال عادي بالعجلة واللمس وأزرار الكيبورد —
   اللي بيتشال هو الشكل المرئي بس.
   ============================================================================ */

:root {
    /* عرض المحتوى الأقصى الموحّد لكل أقسام الموقع */
    --site-max: 1200px;

    /* الحشو الجانبي الثابت — من 1024px وطالع المسافات دي هي اللي بتظهر،
       فالخط البصري للحواف بيفضل ثابت على أي شاشة كبيرة */
    --site-pad-desktop: 40px;

    /* الحشو على الشاشات الأصغر (بيتناسب مع العرض) */
    --site-pad-fluid: 5%;

    /* أقل مسافة من الحافة على أي شاشة */
    --site-pad-min: 16px;
}

/* ----------------------------------------------------------------------------
   1) إلغاء شريط التمرير الجانبي (لكن التمرير نفسه شغال)
   ---------------------------------------------------------------------------- */
html {
    /* إلغاء شريط التمرير بالفايرفوكس (الحديث) */
    scrollbar-width: none;
    /* لون الشريط القديم في إيدج/IE */
    -ms-overflow-style: none;
}

/* إلغاء شريط التمرير في كروم / سفاري / إيدج */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* كمان أي عنصر عليه تمرير جوه الصفحة ما يورِيش الشريط
   (ما عدا .certificates-list — شوف تحت، ده ليه شريط رفيع مقصود) */
.certificates-list::-webkit-scrollbar {
    height: 8px;
}

/* ----------------------------------------------------------------------------
   2) توحيد حاويات الأقسام — كلها على نفس العرض ونفس الحواف
   ---------------------------------------------------------------------------- */
.hero-section,
.portfolio-section,
.contact-strip-section,
.about-section,
.footer-container {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* الحاويات اللي جوه الأقسام (زي شبكة «من أنا» والفوتر) لازم تاخد
   عرض الحاوية كلها بدون أي هامش إضافي، عشان حواف الكروت تبقى
   على نفس خط حواف العنوان بالظبط.
   ⚠️ السبب: عناصر بـ data-reveal بتاخد transform مؤقت (scale/translate)
   وده بيغيّر شكلك المقاس بـ getBoundingClientRect — فلو حطينا أي
   حشو إضافي هنا، الكروت هتبان «نايمة لجوّه» عن باقي الأقسام. */
.about-section .about-grid {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* من 1024px وطالع: حشو ثابت من الجانبين (مش نسبة %) عشان الحواف
   تفضل على خط واحد مهما كان عرض الشاشة */
@media (min-width: 1024px) {
    .hero-section,
    .portfolio-section,
    .contact-strip-section,
    .about-section {
        padding-left: var(--site-pad-desktop);
        padding-right: var(--site-pad-desktop);
    }
}

/* من 1024px ونازل: الحشو يبقى نسبة بسيطة مع حد أدنى */
@media (max-width: 1023px) {
    .hero-section,
    .portfolio-section,
    .contact-strip-section,
    .about-section {
        padding-left: var(--site-pad-fluid);
        padding-right: var(--site-pad-fluid);
    }
}

@media (max-width: 600px) {
    .hero-section,
    .portfolio-section,
    .contact-strip-section,
    .about-section {
        padding-left: var(--site-pad-min);
        padding-right: var(--site-pad-min);
    }
}

/* الفوتر: نفس عرض الأقسام ونفس الحواف بالظبط */
.footer-section {
    padding-left: var(--site-pad-desktop);
    padding-right: var(--site-pad-desktop);
}

@media (max-width: 1023px) {
    .footer-section {
        padding-left: var(--site-pad-fluid);
        padding-right: var(--site-pad-fluid);
    }
}

@media (max-width: 600px) {
    .footer-section {
        padding-left: var(--site-pad-min);
        padding-right: var(--site-pad-min);
    }
}

/* ----------------------------------------------------------------------------
   3) مسافات الهيرو من الحواف
   ---------------------------------------------------------------------------- */
.hero-section {
    /* الحشو الجانبي جاي من قواعد توحيد الحاويات فوق — نضبط الرأسي بس */
    padding-top: 24px;
    padding-bottom: 24px;
    gap: 20px;
}

.hero-top-row {
    /* العرض محدد من الحاوية الأم — من غير تكرار عشان مفيش انزياح */
    max-width: 100%;
    gap: 44px;
    margin-bottom: 12px;
    /* مرجع التح positioning للروبوت اللي جوّه */
    position: relative;
}

/* الصف اللي جوه الكارت الزجاجي: نتأكد إن محتواه ما يلمسش الحواف */
.hero-visual-card {
    box-sizing: border-box;
    width: 100%;
}

/* ============================================================================
   🤖 روبوت الهيرو — بيتبص على حركة الماوس
   ============================================================================
   بيقف في المساحة الفاضية بين النص (يمين) والصورة (شمال).

   التحكّم كله عن طريق متغيّرات CSS بتحدّثها الجافاسكربت:
     --eye-x / --eye-y → اتجاه النظر (بالنسبة لنصEye قطرها، من -1 لـ 1)
     --tilt            → ميلان الرأس بالدرجات
     --bot-glow        → شدّة التوهّج لما الماوس يقرب

   كل الألوان جاية من نفس درجات الموقع (ذهبي #d4af37 + أسود).
   ============================================================================ */

.hero-bot {
    flex: 0 0 auto;
    position: relative;
    width: 108px;
    height: 140px;
    /* 👇 دلوقتي قابل للضغط (مش pointer-events: none) عشان يطلع رد فعل */
    cursor: pointer;
    z-index: 2;
    margin: 0 auto;
    animation: botFloat 5s ease-in-out infinite;
    transition: scale 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

/* لمعة خفيفة لما划过 فوقه بالماوس */
.hero-bot::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 30px;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(246, 195, 68, calc(var(--bot-glow, 0) * 0.22)),
        transparent 70%
    );
    pointer-events: none;
    transition: background 0.3s ease;
}

/* رد فعل اللمس/الضغط: RoboBot ينضغط شوية */
.hero-bot.is-pressed {
    scale: 0.94;
    animation-play-state: paused;
}

/* ============================================================================
   💬 فقاعة الترحيب — بتظهر عند الضغط على الروبوت
   ============================================================================
   • فوق راسه بمسافة كافية
   • ذيل صغير (الـ tail) متربّط بالشكل اللي فوق
   • أنيميشن دخول: بيطلع لفوق + ي fade in
   • بتقفل تلقائي بعد 4 ثواني أو عند الضغط تاني
   ============================================================================ */
.bot-bubble {
    position: absolute;
    bottom: calc(100% + 16px);      /* فوق الروبوت */
    /* مثبّت ناحية جوه الشاشة (الشمال) عشان ما يخرجش بره حافة الشاشة */
    right: -18px;
    left: auto;
    transform: translateY(10px) scale(0.9);
    transform-origin: bottom right;
    width: max-content;
    max-width: 186px;
    padding: 11px 16px;
    border-radius: 16px;
    background: rgba(255, 253, 249, 0.98);
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        visibility 0.28s ease;
    z-index: 10;
}

/* الذيل: مثلث صغير متربّط بأسفل الفقاعة (على ناحية الروبوت) */
.bot-bubble-tail {
    position: absolute;
    bottom: -7px;
    right: 18px;
    transform: rotate(45deg);
    width: 14px;
    height: 14px;
    background: rgba(255, 253, 249, 0.98);
    border-right: 1px solid rgba(212, 175, 55, 0.5);
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
}

.bot-bubble-text {
    margin: 0;
    color: #241b10;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
}

/* الحالة open: الفقاعة ظاهرة */
.hero-bot.is-talking .bot-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ============================================================================
   🤖 أنيميشن: الفقاعة بتنبض وهي بتتكلم (زي الكلام)
   ============================================================================ */
@keyframes botBubbleTalk {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-2px) scale(1.015); }
}

.hero-bot.is-talking .bot-bubble {
    animation: botBubbleTalk 1.1s ease-in-out infinite;
}

/* ============================================================================
   🤖 حركات إنسانية — بتخلي الروبوت يتنفس ويطرف ويروح وثابت

/* --- هالة خفيفة تحت الروبوت عشان يبان ماسك في المكان --- */
.hero-bot::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.28), transparent 70%);
    filter: blur(5px);
    animation: botShadowPulse 5s ease-in-out infinite;
}

/* --- الهوائي: ساق + لمبة في الآخر --- */
.bot-antenna {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 20px;
    margin-left: -1.5px;
    background: linear-gradient(to bottom, #8a6a1e, #d4af37);
    border-radius: 2px;
    transform-origin: bottom center;
    transform: rotate(calc(var(--tilt, 0deg) * -0.4));
    animation: botAntenna 5.5s ease-in-out infinite;
}

.bot-antenna-tip {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff0b8, #d4af37 60%, #a8801f);
    box-shadow: 0 0 calc(10px + var(--bot-glow, 0) * 14px)
        rgba(246, 195, 68, 0.8);
    transition: box-shadow 0.3s ease;
    animation: botTipBlink 2.4s ease-in-out infinite;
}

/* --- الرأس: مربع مقوّس بلاستيك غامق --- */
.bot-head {
    position: absolute;
    top: 17px;
    left: 50%;
    width: 86px;
    height: 62px;
    margin-left: -43px;
    border-radius: 22px;
    background: linear-gradient(155deg, #3a3a42 0%, #1c1c22 55%, #101014 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotate(var(--tilt, 0deg));
    animation: botHeadIdle 6.5s ease-in-out infinite;
}

/* --- أذنين على الجنب --- */
.bot-ear {
    position: absolute;
    top: 22px;
    width: 8px;
    height: 20px;
    border-radius: 4px;
    background: #2a2a32;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.bot-ear-left { left: -7px; }
.bot-ear-right { right: -7px; }

/* --- الوش: المنطقة السوداء جوه الرأس (تحت فيه العينين والفم) --- */
.bot-face {
    position: absolute;
    inset: 8px 10px;
    border-radius: 15px;
    background: #06060a;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* --- العينان: بتتحرك بالماوس + بتطرف (الأنيميشن فوق الـ transform) --- */
.bot-eye {
    position: absolute;
    top: 14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8dc, #f6c344 55%, #c99a1e);
    /* الـ transform: بيشمل اتجاه الماوس (JS) + الرمشة (keyframes) */
    /* ال��تف。在这种: بيشمل اتجاه الماوس (JS) + الرمشة (keyframes) */
    transform: translate(calc(var(--eye-x, 0) * 3px), calc(var(--eye-y, 0) * 3px));
    animation: botBlink 4.8s ease-in-out infinite;
}

.bot-eye-left  { left: 13px; }
.bot-eye-right { right: 13px; }

/* --- الفم: خط ابتسامة بيترسم لما يبتسم --- */
.bot-mouth {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 22px;
    height: 10px;
    margin-left: -11px;
    border-bottom: 2px solid rgba(246, 195, 68, 0.85);
    border-radius: 0 0 20px 20px;
    opacity: 0.55;
    transition: opacity 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

/* ابتسامة كاملة لما الماوس يقرب */
.hero-bot.is-happy .bot-mouth {
    opacity: 1;
    height: 14px;
    border-color: #f6c344;
}

/* --- الجسم: صندوق + 3 لمبات --- */
.bot-body {
    position: absolute;
    top: 82px;
    left: 50%;
    width: 68px;
    height: 36px;
    margin-left: -34px;
    border-radius: 12px;
    background: linear-gradient(160deg, #2e2e36, #141418);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    animation: botBreathe 3.2s ease-in-out infinite;
}

.bot-chest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 100%;
    padding: 0 8px;
}

.bot-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a3a44;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.bot-light:nth-child(1) {
    background: #86efac;
    box-shadow: 0 0 6px rgba(134, 239, 172, 0.7);
}

.hero-bot.is-happy .bot-light {
    animation: botLightsOn 1.1s ease-in-out infinite;
}

.hero-bot.is-happy .bot-light:nth-child(2) { animation-delay: 0.15s; }
.hero-bot.is-happy .bot-light:nth-child(3) { animation-delay: 0.3s; }

/* --- إيدين --- */
.bot-arm {
    position: absolute;
    top: 86px;
    width: 8px;
    height: 32px;
    border-radius: 5px;
    background: linear-gradient(to bottom, #2a2a32, #16161a);
    border: 1px solid rgba(212, 175, 55, 0.22);
}

.bot-arm-left  { left: 20px; animation: botArmLeft 3.8s ease-in-out infinite; }
.bot-arm-right { right: 20px; animation: botArmRight 4.4s ease-in-out infinite; }

/* --- أرجل --- */
.bot-leg {
    position: absolute;
    top: 116px;
    width: 9px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(to bottom, #22222a, #101014);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.bot-leg-left  { left: 36px; }
.bot-leg-right { right: 36px; }

/* ============================================================================
   🤖 حركات إنسانية — بتخلي الروبوت يتنفس ويطرف ويروح وثابت
   ============================================================================
   كل حركة إلها توقيت مختلف عشان التوقيت يطلع طبيعي ومش مكرّر:

     botFloat      5.0s  → يطفو لفوق وأسفل (العمود الفقري للحركة كلها)
     botBreathe    3.2s  → يتمدّد ويقرب (زي شهيق وزفير)
     botHeadIdle   6.5s  → حركات صغيرة في الرأس وهو ساكت
     botBlink      4.8s  → رمشة عين (بتتقطع بشكل عشوائي في الجافاسكربت)
     botArmLeft    3.8s  → الإيد اليمين بترتاح
     botArmRight   4.4s  → الإيد اليسار بترتاح (أوقات مختلفة)
     botAntenna    5.5s  → الهوائي بيتمايل

   ⚠️ احترام prefers-reduced-motion موجود تحت — بيوقّف كل ده.
   ============================================================================ */

/* --- الطفو: لبّ الحركة، وبيتزامل مع إزاحة الماوس (--bot-lift) --- */
@keyframes botFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* --- التنفس: يتمدّد 2% وبيقرب 2% — زي الشهيق والزفير --- */
@keyframes botBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* --- الرأس وهو ساكت: حركة دقيقة جداً (زي غلوة خاطفة) --- */
@keyframes botHeadIdle {
    0%, 88%, 100% { transform: rotate(var(--tilt, 0deg)); }
    91%           { transform: rotate(calc(var(--tilt, 0deg) + 1.4deg)); }
    94%           { transform: rotate(calc(var(--tilt, 0deg) - 1.1deg)); }
}
/* --- الرمشة: العين بتقفل وتفتح بسرعة (لحظة قصيرة من الثواني) --- */
/* --- الرمشة: عين بتقفل وافتح بسرعة — seل 0.1s من الثوانيتموت --- */
@keyframes botBlink {
    0%, 96%, 100% { transform: translate(var(--eye-x, 0) * 3px, var(--eye-y, 0) * 3px) scaleY(1); }
    98%           { transform: translate(var(--eye-x, 0) * 3px, var(--eye-y, 0) * 3px) scaleY(0.08); }
}

/* --- الإيد: حركة راحة بسيطة ومختلفة لكل إيد --- */
@keyframes botArmLeft {
    0%, 100% { transform: rotate(6deg); }
    50%      { transform: rotate(10deg); }
}

@keyframes botArmRight {
    0%, 100% { transform: rotate(-6deg); }
    50%      { transform: rotate(-11deg); }
}

/* --- الهوائي: بيتمايل يمين وشمال ببطء --- */
@keyframes botAntenna {
    0%, 100% { transform: rotate(calc(var(--tilt, 0deg) * -0.4)); }
    50%      { transform: rotate(calc(var(--tilt, 0deg) * -0.4 + 3deg)); }
}

@keyframes botShadowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.35; transform: translateX(-50%) scale(0.85); }
}

@keyframes botTipBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes botLightsOn {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.35); filter: brightness(1.5); }
}

/* احترام إعداد «تقليل الحركة» — بنوقف كل حركات الروبوت */
@media (prefers-reduced-motion: reduce) {
    .hero-bot,
    .hero-bot::after,
    .hero-bot::before,
    .bot-antenna-tip,
    .bot-antenna,
    .bot-head,
    .bot-eye,
    .bot-body,
    .bot-arm-left,
    .bot-arm-right,
    .bot-light,
    .bot-bubble {
        animation: none;
    }

    /* العين بترجع لوضعها الأساسي (من غير رمشة) وتفضل بتتبع الماوس */
    .bot-eye {
        transform: translate(calc(var(--eye-x, 0) * 3px), calc(var(--eye-y, 0) * 3px));
    }

    /* الرأس بيفضل مائل حسب الماوس */
    .bot-head {
        transform: rotate(var(--tilt, 0deg));
    }

    /* الهوائي ما بيلفّش */
    .bot-antenna {
        transform: rotate(calc(var(--tilt, 0deg) * -0.4));
    }
}

/* ============================================================================
   🤖 الموبايل: الروبوت بيتحزّ جنب الصورة بدل ما يقف في النص
   ============================================================================ */
@media (max-width: 1024px) {
    .hero-bot {
        margin: 0 auto 12px;
        scale: 0.85;
    }
}

/* ============================================================================
   🤖 الوضع النهاري — ألوان الروبوت
   ============================================================================
   الروبوت بيفضل غامق في الوضعين (زي اللوحة بتاعت الـ QR) عشان
   يبقى واضح ومتناسق مع الهوية البصرية.
   ============================================================================ */
body.light-mode .hero-bot .bot-head {
    border-color: var(--lm-bronze);
}

body.light-mode .hero-bot .bot-antenna {
    background: linear-gradient(to bottom, var(--lm-bronze), var(--lm-bronze-soft));
}

/* ----------------------------------------------------------------------------
   4) الشهادات: مسافات الحواف والأسهم مضبوطة
   ---------------------------------------------------------------------------- */
/* كارت الشهادات: نفس حواف باقي الكروت بالظبط، ومحتواه ما يخرجش برة. */
.about-card.certificates-card {
    box-sizing: border-box;
    width: 100%;
}

/* على الشاشات الكبيرة: الكارت ياخد نفس حشو باقي الكروت */
@media (min-width: 1024px) {
    .about-card.certificates-card {
        padding-left: 28px;
        padding-right: 28px;
    }
}

/* ----------------------------------------------------------------------------
   6) الشريط العلوي (Header) — إصلاح الخروج عن الحافة و«أكل» الجنب
   ----------------------------------------------------------------------------
   المشكلة اللي كانت بتحصل بالظبط:

   القاعدة القديمة كانت كده:
       .header { width: min(1400px, calc(100% - 32px)); margin: 8px auto 8px !important; }

   الـ min() بتخلي العرض المستخدم رقم ثابت (1400px) لحظة ما الشاشة تبقى
   أوسع من ده. وبما إن الـ width بقى رقم ثابت مش نسبة، بقى في فرق بين
   العرض (1400px) والحاوية، والفرق ده بيتوزّع على هوامش auto.

   ولكن الهوامش الـ auto هنا **ما كانتش بتتحسب بالظبط** — النتيجة اللي
   كانت بتطلع في المتصفح:  margin: 8px -22px 8px 0px
   يعني هامش يمين **سالب 22 بكسل**!

   والهامش السالب معناه إن الصندوق بيمتد برة الحاوية:
       عرض الشريط الفعلي = 1400 + 22 + 22 = 1462px  ← أوسع من الشاشة (1440px)!
   وعند النزول (الكلاس .scrolled) كان بيوصل 1502px — أي أوسع بـ 62px.

   وده اللي كان بيعمل الحاجتين اللي شوفتهم:
     • «أكل» في الجنب     → الشريط بيمتد برة الشاشة فبيبان مقطوع على الجنب
     • زيادة فوق الحافة   → لما الهامش السالب ده يتطبق، الشريط بيلزق برة
                            الحافة العلوية، وبيغطي أول جزء من الصفحة،
                            فبيقطع إحساس اللى بيتصفح وبيمنع الوصول للعناصر اللي تحته

   الحل: نخلي العرض نسبة مئوية مضمونة (بدل min مع رقم ثابت)،
   ونشيل الهوامش السالبة خالص بـ max-width + auto الواسطة.
   ---------------------------------------------------------------------------- */

/* --- الشريط وانت فوق (كبسولة) --- */
.header {
    /* box-sizing عشان الـ padding والـ border ما يزودوش على العرض */
    box-sizing: border-box;

    /* العرض المضمون: أبدًا ما يزيد عن الحاوية ولا يقلّ عن الحافة */
    width: calc(100% - 32px);
    max-width: 1400px;

    /* هوامش موجبة فقط — مفيش أي سالب يخرج الصندوق برة الشاشة */
    margin-inline: auto;
    margin-block: 8px;

    /* الحافة العلوية: لازم نلغي أي top سالب أو سالب القيمة */
    top: 8px !important;
}

/* --- الشريط وانت نازل (ملزوق في الحافة) --- */
.header.scrolled {
    box-sizing: border-box;

    /* العرض الكامل بالظبط — من غير أي زيادة نص بكسل */
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    top: 0 !important;

    /* نضمن إن مفيش أي حاجة بتخرج برة الشريط */
    overflow: hidden;
}

/* الحاوية اللي جوه الشريط: تفضل جوه الحدود على أي عرض */
.header > * {
    min-width: 0;
    flex-shrink: 1;
}

/* اللوجو ما يتكسّرش */
.header .logo-container {
    flex-shrink: 0;
}

/* تأمين إضافي: الـ body نفسه ما يعملش تمرير أفقي بسبب أي هامش سالب */
body {
    overflow-x: clip;
}

/* ملاحظة مهمة: "سلوك التمرير" (scroll snapping / التمرير بالماوس)
   ما بيتأثرش بأي من ده — إحنا بس منعنا أي عنصر إنه يخرج عن الحاوية.
   لو حاسة إن التمرير تقيل في مكان معيّن، جرّب تحط
   overflow-x: hidden بدل clip (نفس التأثير بس أوفر للدعم في المتصفحات القديمة). */

/* على الموبايل: نفس المنطق بس بعرض أصغر من الحافة */
@media (max-width: 600px) {
    .header {
        width: calc(100% - 20px);
        max-width: 100%;
        margin-inline: auto;
        margin-block: 10px;
        top: 10px !important;
    }

    .header.scrolled {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        top: 0 !important;
    }
}

@media (max-width: 480px) {
    .header {
        width: calc(100% - 20px);
        max-width: 100%;
        margin-inline: auto;
        margin-block: 10px;
        top: 10px !important;
    }

    .header.scrolled {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        top: 0 !important;
    }
}

/* المسافة الأفقية اللي الأسهم بتقف فيها.
   ملاحظة: القاعدة الأصلية بـ 66px/54px لسه شغالة للأسهم،
   ودي بتخلي الحشو متناسب مع السهم على الشاشات الصغيرة
   عشان أول كارت ما يتقصش. */
@media (max-width: 499px) {
    .certificates-list {
        padding-left: 46px;
        padding-right: 46px;
        scroll-padding-left: 46px;
        scroll-padding-right: 46px;
    }
}

@media (max-width: 360px) {
    .certificates-list {
        padding-left: 42px;
        padding-right: 42px;
        scroll-padding-left: 42px;
        scroll-padding-right: 42px;
    }
}

/* ----------------------------------------------------------------------------
   5) لون زر المساعد العائم — ذهبي زي هوية الموقع
   (بدل السماوي اللي كان ناشز عن باقي الألوان)
   ---------------------------------------------------------------------------- */
.ai-fab {
    border-color: rgba(212, 175, 55, 0.55);
    background: linear-gradient(135deg, #f7d774 0%, #d4af37 55%, #bf8f28 100%);
    color: #0a090c;
    box-shadow: 0 12px 28px rgba(212, 175, 55, 0.32), 0 4px 12px rgba(0, 0, 0, 0.38);
}

.ai-fab:hover {
    box-shadow: 0 18px 34px rgba(212, 175, 55, 0.45), 0 6px 16px rgba(0, 0, 0, 0.42);
}

/* نقطة التنبيه تفضل خضرا (دلالة على «متاح») بس بحدود داكنة متناسقة */
.ai-fab-dot {
    border-color: #0a090c;
}

/* الوضع الأبيض: نفس الذهبي بس بظل أخف يناسب الخلفية الفاتحة */
body.light-mode .ai-fab {
    border-color: rgba(191, 143, 40, 0.5);
    box-shadow: 0 12px 28px rgba(191, 143, 40, 0.3), 0 4px 12px rgba(15, 23, 42, 0.14);
}

/* لون المساعد جوه اللوحة (الأفاتار + زر الإرسال) يبقى ذهبي هو كمان
   عشان يبقى متناسق مع الزر العائم */
.ai-avatar,
.ai-send-btn {
    background: linear-gradient(135deg, #f7d774 0%, #d4af37 55%, #bf8f28 100%);
    color: #0a090c;
}

.ai-avatar {
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.ai-send-btn:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.42);
}

.ai-input:focus {
    border-color: #e8c15a;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.ai-panel {
    border-color: rgba(212, 175, 55, 0.3);
}

.response-box {
    border-left-color: #d4af37;
}

body.light-mode .response-box {
    border-left-color: #bf8f28;
}/* ============================================================================
   الأقسام الجديدة: النبذة المهنية + الخبرات + المهارات + الدورات
   ----------------------------------------------------------------------------
   بصمة التصميم المستخدمة هنا هي نفس بصمة الموقع بالظبط:
     • نفس الذهبي (#d4af37 / #f7d774 / #e8c15a)
     • نفس خلفية الكروت الزجاجية (linear-gradient داكن + backdrop-filter)
     • نفس حدود الكروت rgba(212, 175, 55, 0.2) والزوايا 16px
     • نفس أنيميشن الظهور [data-reveal] (script.js قسم 15.0)

   كل الأقسام دي اتضافت ضمن نظام الحاوية الموحّد اللي فوق
   (--site-max / --site-pad-*) عشان الحواف تفضل على نفس الخط.
   ============================================================================ */

/* نضيف الأقسام الجديدة لنفس نظام الحاوية الموحّد */
.experience-section,
.skills-section,
.courses-section,
.summary-section {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .experience-section,
    .skills-section,
    .courses-section,
    .summary-section {
        padding-left: var(--site-pad-desktop);
        padding-right: var(--site-pad-desktop);
    }
}

@media (max-width: 1023px) {
    .experience-section,
    .skills-section,
    .courses-section,
    .summary-section {
        padding-left: var(--site-pad-fluid);
        padding-right: var(--site-pad-fluid);
    }
}

@media (max-width: 600px) {
    .experience-section,
    .skills-section,
    .courses-section,
    .summary-section {
        padding-left: var(--site-pad-min);
        padding-right: var(--site-pad-min);
    }
}

/* ----------------------------------------------------------------------------
   رأس القسم الموحّد (kicker + عنوان + سطر توضيحي)
   نفس شكل رأس قسم المشاريع عشان الإحساس يبقى واحد
   ---------------------------------------------------------------------------- */
.section-head {
    margin-bottom: 28px;
}

.section-kicker {
    margin: 0 0 8px;
    color: #e8c15a;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-lead {
    margin: 12px 0 0;
    max-width: 680px;
    color: #a9a49b;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================================================
   قسم النبذة المهنية (Professional Summary)
   ============================================================================ */
.summary-section {
    padding-top: 24px;
    padding-bottom: 8px;
}

.summary-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 28px 30px;
    margin-bottom: 0;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.92), rgba(10, 9, 12, 0.78));
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
}

/* قسم الخبرات: مسافة فوق وتحت عادية */
.experience-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

.summary-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
    color: #0a090c;
    font-size: 1.4rem;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.32);
}

.summary-body {
    flex: 1;
    min-width: 0;
}

.summary-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.summary-text {
    margin: 0 0 14px;
    color: #b9b4ab;
    font-size: 1rem;
    line-height: 1.75;
}

/* سطر الهدف: عليه خلفية ذهبية خفيفة عشان يلفت النظر */
.summary-goal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 16px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: 12px;
    color: #e8c15a;
    font-size: 0.92rem;
    line-height: 1.6;
}

.summary-goal i {
    flex: 0 0 auto;
}

/* ============================================================================
   الخط الزمني للخبرات (Experience Timeline)
   ----------------------------------------------------------------------------
   على الشاشات الكبيرة: خط رأسي على الجنب وكل خبرة كارت جواه.
   في العربي (RTL) الخط بيتقلب تلقائيًا للجنب التاني بفضل
   logical properties (border-inline-start / padding-inline-start).
   ============================================================================ */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.timeline-item {
    position: relative;
    /* بندي مساحة للخط والأيقونة على جنب */
    padding-inline-start: 52px;
    padding-bottom: 26px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* الخط الرأسي: بيربط كل النقط ببعض */
.timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 19px;
    top: 12px;
    bottom: -6px;
    width: 2px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.55), rgba(212, 175, 55, 0.08));
}

.timeline-item:last-child::before {
    display: none;
}

/* أيقونة كل خبرة (النقطة على الخط) */
.timeline-marker {
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10, 9, 12, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #e8c15a;
    font-size: 0.95rem;
    z-index: 1;
}

/* الخبرة الأحدث: النقطة تبقى ذهبية كاملة */
.timeline-item.is-latest .timeline-marker {
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
    color: #0a090c;
    border-color: rgba(212, 175, 55, 0.85);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}

.timeline-card {
    padding: 22px 24px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.45), rgba(10, 9, 12, 0.3));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.timeline-card:hover {
    border-color: rgba(212, 175, 55, 0.75);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.12);
}

.timeline-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.timeline-top h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}

/* شارة «الأحدث» */
.timeline-badge {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.42);
    color: #e8c15a;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.timeline-company {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #8f8a82;
    font-size: 0.86rem;
}

.timeline-company i {
    color: #d4af37;
    font-size: 0.78rem;
}

.timeline-text {
    margin: 0;
    color: #a9a49b;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ============================================================================
   قسم المهارات (Skills)
   ============================================================================ */
.skills-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* شبكة 4 مجموعات — بتتظبط تلقائيًا حسب عرض الشاشة */
.skills-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.skills-group {
    padding: 24px 22px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.45), rgba(10, 9, 12, 0.3));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.skills-group:hover {
    border-color: rgba(212, 175, 55, 0.75);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.12);
}

.skills-group-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.skills-group-head i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #e8c15a;
    font-size: 1rem;
}

.skills-group-head h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* كل مهارة في «حبة» صغيرة */
.skill-pill {
    padding: 7px 14px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 999px;
    color: #d8d3ca;
    font-size: 0.84rem;
    line-height: 1.4;
    transition: all 0.25s ease;
}

.skill-pill:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.6);
    color: #f7d774;
    transform: translateY(-2px);
}

/* ============================================================================
   قسم الدورات والدراسة (Courses & Education)
   ============================================================================ */
.courses-section {
    padding-top: 32px;
    padding-bottom: 32px;
}

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

.course-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.5), rgba(10, 9, 12, 0.34));
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.course-card:hover {
    border-color: rgba(212, 175, 55, 0.75);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.12);
}

.course-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #e8c15a;
    font-size: 1.15rem;
}

.course-card h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.08rem;
    line-height: 1.4;
}

.course-meta {
    margin: 0 0 12px;
    color: #e8c15a;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.course-text {
    flex: 1;
    margin: 0 0 16px;
    color: #a9a49b;
    font-size: 0.93rem;
    line-height: 1.7;
}

/* حالة الدورة (مكتملة / قيد التقدم) */
.course-status {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(134, 239, 172, 0.1);
    border: 1px solid rgba(134, 239, 172, 0.3);
    color: #86efac;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* حالة «قيد التقدم» بلون مختلف عشان تفرق عن المكتمل */
.course-status.is-progress {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
    color: #e8c15a;
}

/* ============================================================================
   الوضع الأبيض (Light Mode) للأقسام الجديدة
   ============================================================================ */
body.light-mode .summary-card,
body.light-mode .timeline-card,
body.light-mode .skills-group,
body.light-mode .course-card {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-mode .summary-title,
body.light-mode .timeline-top h3,
body.light-mode .skills-group-head h3,
body.light-mode .course-card h3 {
    color: #0f172a;
}

body.light-mode .summary-text,
body.light-mode .timeline-text,
body.light-mode .course-text,
body.light-mode .section-lead {
    color: #475569;
}

body.light-mode .timeline-company {
    color: #64748b;
}

body.light-mode .timeline-item::before {
    background: linear-gradient(180deg, rgba(191, 143, 40, 0.5), rgba(191, 143, 40, 0.06));
}

body.light-mode .timeline-marker {
    background: #ffffff;
    border-color: rgba(191, 143, 40, 0.5);
    color: #a97f1f;
}

body.light-mode .timeline-item.is-latest .timeline-marker {
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
    color: #0a090c;
}

body.light-mode .skill-pill {
    background: rgba(191, 143, 40, 0.08);
    border-color: rgba(191, 143, 40, 0.26);
    color: #334155;
}

body.light-mode .skill-pill:hover {
    background: rgba(191, 143, 40, 0.18);
    border-color: rgba(191, 143, 40, 0.6);
    color: #8a6510;
}

body.light-mode .summary-goal {
    background: rgba(191, 143, 40, 0.1);
    border-color: rgba(191, 143, 40, 0.3);
    color: #8a6510;
}

body.light-mode .timeline-badge {
    background: rgba(191, 143, 40, 0.12);
    border-color: rgba(191, 143, 40, 0.4);
    color: #8a6510;
}

body.light-mode .course-meta {
    color: #8a6510;
}

body.light-mode .course-status {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.3);
    color: #15803d;
}

body.light-mode .course-status.is-progress {
    background: rgba(191, 143, 40, 0.12);
    border-color: rgba(191, 143, 40, 0.4);
    color: #8a6510;
}

/* ============================================================================
   تجاوب الأقسام الجديدة (Responsive)
   ============================================================================ */
@media (max-width: 900px) {
    .skills-grid-4 {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}

@media (max-width: 768px) {
    .summary-card {
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
    }

    .summary-title {
        font-size: 1.2rem;
    }

    .courses-grid,
    .skills-grid-4 {
        grid-template-columns: 1fr;
    }

    .timeline-item {
        padding-inline-start: 46px;
    }

    .timeline-item::before {
        inset-inline-start: 17px;
    }

    .timeline-marker {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

@media (max-width: 600px) {
    .section-head {
        margin-bottom: 22px;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .section-lead {
        font-size: 0.9rem;
    }

    .summary-card {
        padding: 20px 16px;
    }

    .summary-section {
        padding-bottom: 0;
    }

    .summary-goal {
        display: flex;
        width: 100%;
        font-size: 0.87rem;
        box-sizing: border-box;
    }

    .timeline-card,
    .skills-group,
    .course-card {
        padding: 18px 16px;
    }

    .timeline-top h3 {
        font-size: 1.02rem;
    }

    .timeline-item {
        padding-inline-start: 42px;
    }

    .timeline-item::before {
        inset-inline-start: 15px;
    }

    .timeline-marker {
        width: 32px;
        height: 32px;
        font-size: 0.78rem;
    }

    .skill-pill {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

@media (max-width: 360px) {
    .timeline-item {
        padding-inline-start: 38px;
    }

    .timeline-item::before {
        inset-inline-start: 13px;
    }

    .timeline-marker {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .summary-goal {
        font-size: 0.82rem;
        padding: 9px 12px;
    }
}/* ============================================================================
   زر مواقع التواصل + نافذتها المنبثقة (Social Links Button & Popup)
   ----------------------------------------------------------------------------
   الزر: دايرة صغيرة مدوّرة جنب «تحميل السيرة الذاتية» في الهيرو.
         نفس ارتفاع باقي أزرار الـ CTA عشان يفضل على نفس السطر بشكل مرتب.
   النافذة: بوب-أب صغير في نص الشاشة فيه 4 كروت مواقع التواصل.
   ============================================================================ */

/* --- الزر الصغير المدوّر --- */
.btn-socials {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    color: #e8c15a;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn-socials:hover {
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
    border-color: rgba(212, 175, 55, 0.85);
    color: #0a090c;
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.38);
}

.btn-socials:active {
    transform: translateY(-1px) scale(0.96);
}

.btn-socials:focus-visible {
    outline: 2px solid #f7d774;
    outline-offset: 3px;
}

/* الأيقونة بتلف شوية عند الهوفر — لمسة حياة بسيطة */
.btn-socials i {
    transition: transform 0.25s ease;
}

.btn-socials:hover i {
    transform: scale(1.1);
}

/* ============================================================================
   نافذة مواقع التواصل
   ============================================================================ */
.socials-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 4, 6, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2200;
    /* الأنيميشن بسيط وسريع (0.22s) عشان الإحساس يبقى خفيف */
    animation: socialsFade 0.22s ease;
    box-sizing: border-box;
}

.socials-modal.hidden {
    display: none;
}

@keyframes socialsFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.socials-modal-content {
    position: relative;
    width: min(380px, 100%);
    padding: 26px 24px 24px;
    background: linear-gradient(145deg, rgba(20, 17, 15, 0.98), rgba(10, 9, 12, 0.94));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62);
    text-align: center;
    animation: socialsPop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}

/* نبضة ظهور سريعة — cubic-bezier بيرجّع شوية زيادة (bounce خفيف) */
@keyframes socialsPop {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* احترام إعداد «تقليل الحركة» */
@media (prefers-reduced-motion: reduce) {
    .socials-modal,
    .socials-modal-content {
        animation: none;
    }
}

.socials-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.22s ease;
}

.socials-close:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.5);
    color: #fca5a5;
    transform: rotate(90deg);
}

.socials-modal-content h3 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.socials-subtitle {
    margin: 0 0 20px;
    color: #a9a49b;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* --- شبكة كروت المواقع: 2 x 2 --- */
.socials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.social-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    color: #d8d3ca;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.22s ease, background 0.22s ease,
                border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.social-tile i {
    font-size: 1.5rem;
    transition: transform 0.22s ease;
}

.social-tile:hover {
    transform: translateY(-4px);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.6);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}

.social-tile:hover i {
    transform: scale(1.15);
}

/* لون كل منصة عند الهوفر (ألوانها الرسمية) */
.social-tile.github:hover   { border-color: #8b949e; box-shadow: 0 12px 26px rgba(139, 148, 158, 0.28); }
.social-tile.linkedin:hover { border-color: #0a66c2; box-shadow: 0 12px 26px rgba(10, 102, 194, 0.35); }
.social-tile.facebook:hover { border-color: #1877f2; box-shadow: 0 12px 26px rgba(24, 119, 242, 0.35); }
.social-tile.instagram:hover{ border-color: #e1306c; box-shadow: 0 12px 26px rgba(225, 48, 108, 0.35); }

/* ============================================================================
   الوضع الأبيض
   ============================================================================ */
body.light-mode .btn-socials {
    background: rgba(191, 143, 40, 0.1);
    border-color: rgba(191, 143, 40, 0.42);
    color: #8a6510;
}

body.light-mode .btn-socials:hover {
    color: #0a090c;
}

body.light-mode .socials-modal {
    background: rgba(15, 23, 42, 0.5);
}

body.light-mode .socials-modal-content {
    background: #ffffff;
    border-color: rgba(191, 143, 40, 0.32);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

body.light-mode .socials-modal-content h3 {
    color: #0f172a;
}

body.light-mode .socials-subtitle {
    color: #475569;
}

body.light-mode .socials-close {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
    color: #334155;
}

body.light-mode .social-tile {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.1);
    color: #334155;
}

body.light-mode .social-tile:hover {
    background: #ffffff;
    color: #0f172a;
}

/* ============================================================================
   التجاوب
   ============================================================================ */
@media (max-width: 600px) {
    /* على الموبايل الأزرار بتبقى عمودية بعرض كامل،
       فالزر المدوّر ده كمان ياخد عرض كامل عشان ما يبقاش شكله غريب */
    .btn-socials {
        width: 100%;
        height: 48px;
        border-radius: 12px;
    }

    .socials-modal-content {
        padding: 24px 18px 20px;
    }

    .social-tile {
        padding: 16px 8px;
    }

    .social-tile i {
        font-size: 1.35rem;
    }
}

@media (max-width: 340px) {
    .socials-grid {
        grid-template-columns: 1fr;
    }
}/* ============================================================================
   زر العودة لأول الصفحة (Back to Top)
   ----------------------------------------------------------------------------
   زر دائري ذهبي ثابت في الركن، بيفضل مخفي (opacity: 0) لحد ما الزائر ينزل
   مسافة معينة، وبعدها بيظهر بنعومة جوه كلاس .is-visible (بيتضاف من script.js).

   ملاحظة: الزرار بيتقلب للركن التاني تلقائيًا في الوضع العربي (RTL) لأننا
   بنستخدم خصائص منطقية (inset-inline-end).
   ============================================================================ */
.backToTopBtn {
    position: fixed;
    inset-inline-end: 26px;
    /* فوق الروبوت العائم (.bot-fab-dock: 14px + 164px ≈ 178px) + مسافة أمان */
    bottom: 196px;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;

    color: #f7d774;
    font-size: 1rem;
    cursor: pointer;

    background: linear-gradient(135deg, rgba(20, 17, 15, 0.94), rgba(10, 9, 12, 0.86));
    border: 1px solid rgba(212, 175, 55, 0.42);
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* مخفي ومزحلق لتحت لحد ما يظهر */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.92);
    transition: opacity 0.28s ease, transform 0.28s ease,
                visibility 0.28s ease, background 0.28s ease, color 0.28s ease;
}

/* بتتضاف من script.js لما الزائر ينزل */
.backToTopBtn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.backToTopBtn:hover {
    color: #0a090c;
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
    transform: translateY(-2px) scale(1.05);
}

.backToTopBtn:active {
    transform: translateY(0) scale(0.95);
}

.backToTopBtn:focus-visible {
    outline: 2px solid #f7d774;
    outline-offset: 3px;
}

/* في الوضع الأبيض نستخدم حدود وتوهج أهدى */
body.light-mode .backToTopBtn {
    color: #a97c17;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(191, 143, 40, 0.55);
    box-shadow: 0 12px 26px rgba(120, 96, 32, 0.22);
}

body.light-mode .backToTopBtn:hover {
    color: #0a090c;
    background: linear-gradient(135deg, #f7d774, #d4af37 55%, #bf8f28);
}

/* على الشاشات الصغيرة نصغّر الزرار شوية ونقرّبه من الحافة */
@media (max-width: 600px) {
    .backToTopBtn {
        inset-inline-end: 16px;
        bottom: 174px;
        width: 42px;
        height: 42px;
    }
}

/* احترام إعداد "تقليل الحركة" — منع الحركة مع الحفاظ على الوظيفة */
@media (prefers-reduced-motion: reduce) {
    .backToTopBtn {
        transform: none;
        transition: opacity 0.15s ease, visibility 0.15s ease;
    }

    .backToTopBtn.is-visible {
        transform: none;
    }
}
/* ============================================================================
   ✨ ثيم الوضع النهاري الجديد — "Porcelain & Bronze"
   ============================================================================
   الفكرة: بدل البيج المغسول، الصفحة النهارية بقت بورسلين فاتح (أبيض مائل
   للرمادي الدافئ) مع لمسة برونزية هادئة، ونص بنّي غامق واضح (تباين عالي).

   التركيب:
     • لوحة الألوان متعرّفة مرة واحدة كمتغيّرات CSS على body.light-mode،
       وكل عنصر في الموقع بياخد لونه منها — فالتعديل كله من مكان واحد.
     • ده آخر الملف، فأي قاعدة هنا بتغلب قواعد light-mode القديمة
       لأنها في نفس الخصوصية واسمها واحد.
     • ⚠️ الوضع الداكن (body من غير light-mode) مش متلمس نهائيًا.
     • ⚠️ المقاسات (padding/width/font) مش متغيّرة — ألوان فقط.
   ============================================================================ */

body.light-mode {
    /* ---- لوحة الألوان ---- */
    --lm-bg-a: #fdfbf6;          /* أفتح درجة في الخلفية */
    --lm-bg-b: #f4ede1;          /* درجة وسطى دافئة */
    --lm-bg-c: #efe6d6;          /* أغمق درجة — بنهاية الصفحة */

    --lm-ink: #241b10;           /* النص الأساسي (بني غامق واضح) */
    --lm-ink-soft: #57493a;      /* النصوص الثانوية */
    --lm-ink-mute: #6f6250;      /* النصوص tertiary / placeholder */

    --lm-bronze: #9c6f1c;        /* لون التمييز الأساسي (برونزي) */
    --lm-bronze-soft: #c39a4d;   /* درجة أفتح للعناصر الصغيرة */
    --lm-bronze-ink: #6d4d10;    /* لون النص فوق الأسطح الذهبية */

    --lm-surface: rgba(255, 253, 249, 0.86);
    --lm-surface-solid: #fffdf9;
    --lm-surface-tint: rgba(245, 238, 226, 0.78);

    --lm-border: rgba(120, 92, 32, 0.20);
    --lm-border-strong: rgba(120, 92, 32, 0.38);
    --lm-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.6);

    --lm-shadow: 0 14px 34px rgba(72, 56, 24, 0.10);
    --lm-shadow-soft: 0 6px 18px rgba(72, 56, 24, 0.07);
    --lm-shadow-gold: 0 12px 26px rgba(156, 111, 28, 0.20);

    /* ---- الخلفية: تدرّج بورسلين + شبكة خفيفة + هالات دافئة ---- */
    background:
        radial-gradient(58% 46% at 12% 6%, rgba(214, 176, 108, 0.20), transparent 62%),
        radial-gradient(50% 40% at 88% 12%, rgba(233, 214, 178, 0.30), transparent 60%),
        radial-gradient(64% 46% at 50% 102%, rgba(196, 168, 118, 0.16), transparent 66%),
        linear-gradient(168deg, var(--lm-bg-a) 0%, var(--lm-bg-b) 46%, var(--lm-bg-c) 100%),
        linear-gradient(rgba(120, 92, 32, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 92, 32, 0.04) 1px, transparent 1px);
    background-size: auto, auto, auto, 100% 100%, 40px 40px, 40px 40px;
    background-position: center, center, center, center, top left, top left;
    background-attachment: fixed;
    color: var(--lm-ink);
}

/* هالة الخلفية المتحركة (body::after) تبقى أخف في النهار */
body.light-mode::after {
    background:
        radial-gradient(60% 60% at 22% 18%, rgba(203, 168, 100, 0.14), transparent 62%),
        radial-gradient(50% 50% at 82% 26%, rgba(226, 205, 162, 0.16), transparent 60%),
        radial-gradient(48% 48% at 62% 88%, rgba(236, 221, 190, 0.14), transparent 62%);
}

/* خطوط الماسحة والـ cursor تاخد سعرات أفتح فوق الخلفية البيضاء */
body.light-mode .bg-scanlines {
    opacity: 0.32;
    background: repeating-linear-gradient(
        180deg,
        rgba(120, 92, 32, 0.035),
        rgba(120, 92, 32, 0.035) 1px,
        transparent 1px,
        transparent 28px
    );
}

body.light-mode .bg-grid-glow {
    background-image:
        linear-gradient(rgba(156, 111, 28, 0.30) 1px, transparent 1px),
        linear-gradient(90deg, rgba(156, 111, 28, 0.30) 1px, transparent 1px);
}

body.light-mode .cursor-ring {
    border-color: rgba(156, 111, 28, 0.55);
}

body.light-mode.is-hovering-target .cursor-ring {
    border-color: rgba(156, 111, 28, 0.85);
    background-color: rgba(196, 160, 92, 0.14);
}

body.light-mode .cursor-aura {
    background: radial-gradient(
        circle,
        rgba(206, 172, 106, 0.20) 0%,
        rgba(156, 111, 28, 0.10) 36%,
        rgba(156, 111, 28, 0.03) 60%,
        transparent 76%
    );
}

/* ----------------------------------------------------------------------------
   🧭 الشريط العلوي — زجاج بورسلين شفاف بحافة برونزية رفيعة
   ---------------------------------------------------------------------------- */
body.light-mode .header {
    background: rgba(255, 253, 249, 0.82);
    border: 1px solid var(--lm-border);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .header.scrolled {
    background: rgba(255, 253, 249, 0.92);
    border-color: var(--lm-border-strong);
    box-shadow: 0 10px 30px rgba(72, 56, 24, 0.13), var(--lm-hairline);
}

body.light-mode .logo-container img {
    border-color: var(--lm-bronze);
    box-shadow: 0 0 10px rgba(156, 111, 28, 0.30);
}

body.light-mode .logo-container .logo-text {
    color: var(--lm-ink);
    letter-spacing: 1px;
}

/* ----------------------------------------------------------------------------
   🔗 روابط التنقل — رمادي دافئ، والبرونزي لما تكون نشطة
   ---------------------------------------------------------------------------- */
body.light-mode .nav-links {
    background: rgba(255, 253, 249, 0.55);
    border: 1px solid var(--lm-border);
    border-radius: 18px;
    padding: 6px 10px;
    box-shadow: var(--lm-hairline);
}

body.light-mode .nav-links a {
    color: var(--lm-ink-soft);
    border-radius: 10px;
}

body.light-mode .nav-links a::after {
    background-color: var(--lm-bronze);
}

body.light-mode .nav-links a:hover {
    color: var(--lm-ink);
}

body.light-mode .nav-links a.active {
    color: var(--lm-bronze-ink);
    background: rgba(203, 168, 100, 0.16);
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-hairline);
}

body.light-mode .nav-links a:hover,
body.light-mode .settings-pill:hover,
body.light-mode .search-btn:hover,
body.light-mode .header-cta:hover {
    box-shadow: 0 0 0 2px rgba(156, 111, 28, 0.18), 0 8px 18px rgba(156, 111, 28, 0.14);
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   🔍 مربع البحث واللغة والإعدادات
   ---------------------------------------------------------------------------- */
body.light-mode .search-box {
    background: rgba(255, 255, 255, 0.70);
    border-color: var(--lm-border);
    box-shadow: var(--lm-hairline);
}

body.light-mode .search-box:focus-within {
    background: #fffdf9;
    border-color: var(--lm-bronze);
    box-shadow: 0 0 0 3px rgba(156, 111, 28, 0.16);
}

body.light-mode .search-input {
    color: var(--lm-ink);
}

body.light-mode .search-input::placeholder {
    color: var(--lm-ink-mute);
}

body.light-mode .search-btn {
    color: var(--lm-bronze);
    background: rgba(245, 238, 226, 0.7);
    border-radius: 12px;
}

body.light-mode .search-match {
    background: rgba(203, 168, 100, 0.30);
    box-shadow: inset 0 0 0 1px rgba(156, 111, 28, 0.45);
}

body.light-mode .settings-dropdown {
    background: rgba(255, 253, 249, 0.98);
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
}

body.light-mode .settings-pill {
    background: rgba(203, 168, 100, 0.14);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
    box-shadow: var(--lm-hairline);
}

body.light-mode .lang-switcher {
    background: rgba(245, 238, 226, 0.8);
    border-color: var(--lm-border);
    box-shadow: var(--lm-hairline);
}

body.light-mode .lang-btn {
    color: var(--lm-ink-soft);
}

body.light-mode .lang-btn:hover {
    color: var(--lm-ink);
}

body.light-mode .lang-btn.active {
    background: linear-gradient(135deg, #f0dcae, #c39a4d);
    color: #2b1f08;
    box-shadow: 0 4px 12px rgba(156, 111, 28, 0.28);
}

body.light-mode .settings-action-btn {
    background: rgba(245, 238, 226, 0.75);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .settings-action-btn.is-active {
    background: rgba(203, 168, 100, 0.18);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .header-cta {
    border-color: var(--lm-bronze);
    color: var(--lm-bronze-ink);
}

body.light-mode .header-cta:hover {
    background: linear-gradient(135deg, #e8cf98, #c39a4d);
    color: #2b1f08;
    box-shadow: 0 10px 22px rgba(156, 111, 28, 0.30);
}

/* ----------------------------------------------------------------------------
   🦸 الهيرو — نص واضح + كارت زجاجي دافئ
   ---------------------------------------------------------------------------- */
body.light-mode .main-title {
    color: var(--lm-ink);
}

body.light-mode .description {
    color: var(--lm-ink-soft);
}

body.light-mode .welcome-pill {
    background: rgba(255, 253, 249, 0.75);
    border-color: var(--lm-border-strong);
    color: var(--lm-ink);
    box-shadow: var(--lm-hairline);
}

body.light-mode .btn-primary {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

body.light-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--lm-border);
    color: var(--lm-ink);
    box-shadow: var(--lm-hairline);
}

body.light-mode .btn-secondary:hover {
    background: #fffdf9;
    border-color: var(--lm-border-strong);
}

body.light-mode .btn-socials {
    background: rgba(203, 168, 100, 0.16);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .btn-socials:hover {
    background: linear-gradient(135deg, #f0dcae, #c39a4d);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

body.light-mode .hero-visual-card {
    background: linear-gradient(150deg, rgba(255, 253, 249, 0.92), rgba(243, 234, 218, 0.86));
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
}

body.light-mode .badge-status {
    background: rgba(203, 168, 100, 0.14);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .skill-box {
    background: rgba(255, 255, 255, 0.66);
    border-color: var(--lm-border);
    box-shadow: var(--lm-hairline);
}

body.light-mode .skill-box i,
body.light-mode .laptop-icon,
body.light-mode .about-card .icon,
body.light-mode .certificate-icon {
    color: var(--lm-bronze);
}

body.light-mode .card-footer-motto,
body.light-mode .card-text {
    color: var(--lm-ink-soft);
}

body.light-mode .hero-visual-card h2 {
    color: var(--lm-ink);
}

/* ----------------------------------------------------------------------------
   📌 عني + سلايدر التقنيات + الشهادات
   ---------------------------------------------------------------------------- */
body.light-mode .section-title {
    color: var(--lm-ink);
}

body.light-mode .about-card {
    background: var(--lm-surface);
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .about-card::before,
body.light-mode .about-card.certificates-card::before {
    background: radial-gradient(circle at top right, rgba(203, 168, 100, 0.22), transparent 58%);
}

body.light-mode .about-card h3 {
    color: var(--lm-ink);
}

body.light-mode .about-card p {
    color: var(--lm-ink-soft);
}

body.light-mode .about-card:hover {
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow);
}

body.light-mode .about-card.certificates-card {
    background: linear-gradient(150deg, rgba(255, 253, 249, 0.96), rgba(243, 234, 218, 0.92));
}

body.light-mode .tech-card-slim {
    background: rgba(255, 253, 249, 0.82);
    border-color: var(--lm-border);
    box-shadow: var(--lm-hairline);
}

body.light-mode .tech-name {
    color: var(--lm-ink-soft);
}

body.light-mode .slider-btn {
    background: rgba(255, 253, 249, 0.92);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .scroll-btn {
    background: rgba(255, 253, 249, 0.94);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .scroll-btn:hover,
body.light-mode .project-nav-btn:hover {
    background: linear-gradient(135deg, #f4e6c4, #ddc188);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

/* الشهادات: بدل التدرّجات الذهبية الكثيفة → بطاقات بيضاء هادئة */
body.light-mode .certificate-item {
    background: var(--lm-surface);
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .certificate-item:nth-child(1),
body.light-mode .certificate-item:nth-child(2),
body.light-mode .certificate-item:nth-child(3) {
    background: var(--lm-surface);
}

body.light-mode .certificate-item:hover {
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow);
}

body.light-mode .certificate-thumb {
    background: rgba(245, 238, 226, 0.9);
    border-color: var(--lm-border);
}

body.light-mode .certificate-item.certificate-placeholder .certificate-thumb {
    background: rgba(245, 238, 226, 0.45);
    border-color: var(--lm-border-strong);
}

body.light-mode .certificate-text h4 {
    color: var(--lm-ink);
}

body.light-mode .certificate-meta,
body.light-mode .certificate-note {
    color: var(--lm-ink-mute);
}

body.light-mode .certificate-text span {
    background: var(--lm-surface-tint);
    border-color: var(--lm-border);
    color: var(--lm-ink-mute);
}

body.light-mode .certificate-number {
    background: linear-gradient(135deg, #f0dcae, #c39a4d);
    border-color: var(--lm-border-strong);
    color: #2b1f08;
}

body.light-mode .certificate-btn.view {
    background: rgba(203, 168, 100, 0.18);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .certificate-btn.download {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--lm-border);
    color: var(--lm-ink-soft);
}

body.light-mode .certificate-btn.view:hover {
    background: rgba(203, 168, 100, 0.3);
}

body.light-mode .certificate-btn.download:hover {
    background: rgba(203, 168, 100, 0.18);
    color: var(--lm-bronze-ink);
}

/* ----------------------------------------------------------------------------
   💼 النبذة + الخبرات + المهارات + الدورات
   ---------------------------------------------------------------------------- */
body.light-mode .summary-card,
body.light-mode .timeline-card,
body.light-mode .skills-group,
body.light-mode .course-card {
    background: var(--lm-surface);
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .summary-title,
body.light-mode .timeline-top h3,
body.light-mode .skills-group-head h3,
body.light-mode .course-card h3,
body.light-mode .project-info h3,
body.light-mode .footer-info h3 {
    color: var(--lm-ink);
}

body.light-mode .summary-text,
body.light-mode .timeline-text,
body.light-mode .course-text,
body.light-mode .section-lead,
body.light-mode .project-info p,
body.light-mode .about-card p {
    color: var(--lm-ink-soft);
}

body.light-mode .timeline-company {
    color: var(--lm-ink-mute);
}

body.light-mode .timeline-item::before {
    background: linear-gradient(180deg, rgba(156, 111, 28, 0.45), rgba(156, 111, 28, 0.04));
}

body.light-mode .timeline-marker {
    background: var(--lm-surface-solid);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .timeline-item.is-latest .timeline-marker {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 55%, #a97c26);
    color: #2b1f08;
    box-shadow: 0 6px 16px rgba(156, 111, 28, 0.28);
}

body.light-mode .timeline-badge,
body.light-mode .project-tag,
body.light-mode .summary-goal,
body.light-mode .course-meta {
    background: rgba(203, 168, 100, 0.16);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .skill-pill {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--lm-border);
    color: var(--lm-ink-soft);
}

body.light-mode .skill-pill:hover {
    background: rgba(203, 168, 100, 0.18);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .course-status {
    background: rgba(22, 163, 74, 0.10);
    border-color: rgba(22, 163, 74, 0.28);
    color: #15803d;
}

body.light-mode .course-status.is-progress {
    background: rgba(203, 168, 100, 0.16);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

/* ----------------------------------------------------------------------------
   🧩 المشروع
   ---------------------------------------------------------------------------- */
body.light-mode .project-card {
    background: var(--lm-surface);
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
}

body.light-mode .project-nav-btn {
    background: rgba(255, 253, 249, 0.95);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .project-btn.primary {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

body.light-mode .project-btn.secondary {
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .project-btn.change {
    background: rgba(203, 168, 100, 0.16);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .project-index {
    color: var(--lm-bronze-ink);
}

body.light-mode .project-tech li {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--lm-border);
    color: var(--lm-ink-soft);
}

body.light-mode .project-dot {
    background: rgba(156, 111, 28, 0.24);
}

body.light-mode .project-dot:hover {
    background: rgba(156, 111, 28, 0.45);
}

body.light-mode .project-dot[aria-current="true"] {
    background: linear-gradient(135deg, #c39a4d, #a97c26);
    box-shadow: 0 0 10px rgba(156, 111, 28, 0.35);
}

body.light-mode .project-card:focus-visible {
    outline-color: rgba(156, 111, 28, 0.7);
}

body.light-mode .preview-window {
    background: rgba(255, 253, 249, 0.94);
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .preview-sidebar {
    background: linear-gradient(180deg, rgba(224, 200, 152, 0.55), rgba(196, 168, 118, 0.45));
    border-color: var(--lm-border);
}

body.light-mode .preview-cards span {
    background: linear-gradient(135deg, rgba(240, 220, 174, 0.6), rgba(203, 168, 100, 0.45));
    border-color: var(--lm-border);
}

/* ----------------------------------------------------------------------------
   ✉️ التواصل
   ---------------------------------------------------------------------------- */
body.light-mode .contact-item {
    background: var(--lm-surface);
    border-color: var(--lm-border);
    color: var(--lm-ink);
    box-shadow: var(--lm-shadow-soft), var(--lm-hairline);
}

body.light-mode .contact-item:hover {
    background: linear-gradient(135deg, rgba(240, 220, 174, 0.5), rgba(203, 168, 100, 0.28));
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
    box-shadow: 0 0 0 2px rgba(156, 111, 28, 0.10), var(--lm-shadow-gold);
}

body.light-mode .form-group input,
body.light-mode .form-group textarea {
    background: rgba(255, 255, 255, 0.80);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
    color: var(--lm-ink-mute);
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
    border-color: var(--lm-bronze);
    box-shadow: 0 0 0 3px rgba(156, 111, 28, 0.16);
}

body.light-mode .btn-submit {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

/* ----------------------------------------------------------------------------
   🦶 الفوتر
   ---------------------------------------------------------------------------- */
body.light-mode .footer-section {
    background: linear-gradient(180deg, #f4ede1, #ebe0cd);
    border-top-color: var(--lm-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.light-mode .footer-social-section {
    background: linear-gradient(135deg, rgba(203, 168, 100, 0.16), rgba(240, 220, 174, 0.35));
    border-color: var(--lm-border);
}

body.light-mode .footer-social-title {
    color: var(--lm-ink);
}

body.light-mode .footer-social-subtitle,
body.light-mode .footer-rights,
body.light-mode .footer-signature,
body.light-mode .footer-quote,
body.light-mode .footer-bottom {
    color: var(--lm-ink-soft);
}

body.light-mode .footer-credo {
    color: var(--lm-bronze-ink);
}

body.light-mode .footer-socials .social-link {
    background: rgba(255, 253, 249, 0.9);
    border-color: var(--lm-border);
    color: var(--lm-ink);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .footer-socials .social-link i,
body.light-mode .footer-socials .social-link.github i {
    color: var(--lm-ink);
}

body.light-mode .footer-socials .social-link:hover {
    background: linear-gradient(135deg, #f0dcae, #c39a4d);
    border-color: var(--lm-border-strong);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

/* ----------------------------------------------------------------------------
   🪟 النوافذ المنبثقة (التواصل / مواقع التواصل / المساعد)
   ---------------------------------------------------------------------------- */
body.light-mode .contact-modal-content,
body.light-mode .socials-modal-content,
body.light-mode .ai-panel {
    background: var(--lm-surface-solid);
    border-color: var(--lm-border-strong);
    box-shadow: 0 30px 70px rgba(58, 44, 16, 0.22), var(--lm-hairline);
}

body.light-mode .contact-modal-content h3,
body.light-mode .socials-modal-content h3,
body.light-mode .ai-header-text h3,
body.light-mode .ai-close,
body.light-mode .contact-modal-close,
body.light-mode .socials-close {
    color: var(--lm-ink);
    background: rgba(245, 238, 226, 0.8);
    border-color: var(--lm-border);
}

body.light-mode .socials-subtitle,
body.light-mode .ai-header-text p {
    color: var(--lm-ink-soft);
}

body.light-mode .ai-send-btn {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

body.light-mode .contact-modal-item,
body.light-mode .social-tile {
    background: var(--lm-surface-tint);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .contact-modal-item i {
    color: var(--lm-bronze);
}

body.light-mode .contact-modal-item:hover,
body.light-mode .social-tile:hover {
    background: rgba(203, 168, 100, 0.18);
    border-color: var(--lm-border-strong);
    color: var(--lm-bronze-ink);
}

body.light-mode .ai-input {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--lm-border);
    color: var(--lm-ink);
}

body.light-mode .ai-input::placeholder {
    color: var(--lm-ink-mute);
}

body.light-mode .ai-input:focus {
    border-color: var(--lm-bronze);
    box-shadow: 0 0 0 3px rgba(156, 111, 28, 0.16);
}

body.light-mode .response-box {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--lm-border);
    border-left-color: var(--lm-bronze);
    color: var(--lm-ink-soft);
}

body.light-mode .ai-panel {
    border-color: var(--lm-border-strong);
}

body.light-mode .ai-fab,
body.light-mode .whatsapp-fab {
    box-shadow: 0 12px 26px rgba(72, 56, 24, 0.18);
}

/* ----------------------------------------------------------------------------
   ⬆️ زر العودة لأعلى
   ---------------------------------------------------------------------------- */
body.light-mode .backToTopBtn {
    color: var(--lm-bronze-ink);
    background: rgba(255, 253, 249, 0.92);
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .backToTopBtn:hover {
    color: #2b1f08;
    background: linear-gradient(135deg, #f0dcae, #c39a4d 60%, #a97c26);
    box-shadow: var(--lm-shadow-gold);
}

/* ----------------------------------------------------------------------------
   🖥 شاشة الاسم (Name Intro)
   ---------------------------------------------------------------------------- */
body.light-mode .name-intro {
    background: #fdfbf6;
    background-image:
        radial-gradient(circle at 50% 45%, rgba(203, 168, 100, 0.26), transparent 62%),
        linear-gradient(160deg, #fdfbf6, #f2ebdd 55%, #fdfbf6);
}

body.light-mode .name-intro-kicker {
    color: var(--lm-bronze-ink);
}

/* ============================================================================
   🛠️ استكمال ثيم النهاري — شريط التواصل + نموذج التواصل + الفوتر
   ============================================================================
   القسم ده بيكمّل اللي فات من الثيم الجديد (contact-strip / contact-container
   / social-link / footer-bottom) — كلها ألوان فقط، والمقاسات زي ما هي.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   📣 شريط التواصل السريع (الكارت الأفقي فوق النموذج)
   ---------------------------------------------------------------------------- */
body.light-mode .contact-strip {
    background: linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(240, 220, 174, 0.55));
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
}

body.light-mode .contact-strip-kicker {
    color: var(--lm-bronze-ink);
    letter-spacing: 0.14em;
}

body.light-mode .contact-strip h3 {
    color: var(--lm-ink);
}

body.light-mode .contact-strip-btn {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .contact-strip-btn:hover {
    background: linear-gradient(135deg, #f7e8c6, #d3aa62 60%, #b5852a);
    box-shadow: var(--lm-shadow-gold);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   ✍️ كارت نموذج التواصل
   ---------------------------------------------------------------------------- */
body.light-mode .contact-container {
    background: linear-gradient(155deg, rgba(255, 253, 249, 0.94), rgba(243, 234, 218, 0.88));
    border-color: var(--lm-border);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.light-mode .contact-header h2 {
    color: var(--lm-ink);
}

body.light-mode .contact-header p {
    color: var(--lm-ink-soft);
}

body.light-mode .form-group label {
    color: var(--lm-ink);
}

body.light-mode .form-group input,
body.light-mode .form-group textarea {
    background: rgba(255, 255, 255, 0.80);
    border-color: var(--lm-border);
    color: var(--lm-ink);
    box-shadow: var(--lm-hairline);
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus {
    background: #fffdf9;
    border-color: var(--lm-bronze);
    box-shadow: 0 0 0 3px rgba(156, 111, 28, 0.16);
}

body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
    color: var(--lm-ink-mute);
}

body.light-mode .btn-submit {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: var(--lm-shadow-gold);
}

body.light-mode .btn-submit:hover {
    opacity: 1;
    background: linear-gradient(135deg, #f7e8c6, #d3aa62 55%, #b5852a);
    box-shadow: 0 16px 32px rgba(156, 111, 28, 0.28);
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   🔗 أيقونات التواصل في الفوتر — كل موقع بلونه الأصلي بس أغمق،
   عشان يبان على الخلفية البيضاء (الألوان الفاتحة كانت بتضيع)
   ---------------------------------------------------------------------------- */
body.light-mode .footer-socials .social-link.linkedin i {
    color: #0a66c2;
}

body.light-mode .footer-socials .social-link.facebook i {
    color: #1877f2;
}

body.light-mode .footer-socials .social-link.instagram i {
    color: #c62a63;
}

body.light-mode .footer-socials .social-link.github i {
    color: var(--lm-ink);
}

/* ----------------------------------------------------------------------------
   🦶 آخر سطر الفوتر
   ---------------------------------------------------------------------------- */
body.light-mode .footer-bottom {
    border-top-color: var(--lm-border);
    color: var(--lm-ink-mute);
}

body.light-mode .footer-credo {
    color: var(--lm-bronze-ink);
    letter-spacing: 0.4px;
}

body.light-mode .footer-rights,
body.light-mode .footer-signature {
    color: var(--lm-ink-soft);
}

/* أيقونات التواصل في الفوتر (الإيميل / التليفون / واتساب) */
body.light-mode .contact-item i {
    color: var(--lm-bronze);
}

body.light-mode .contact-item.whatsapp i {
    color: #128c7e;
}

body.light-mode .footer-contact {
    color: var(--lm-ink-soft);
}

/* ============================================================================
   19) كارت رمز QR — التنسيقات
   ============================================================================
   الكارت جوه نفس نظام الحاوية الموحّد (--site-max / --site-pad-desktop)
   عشان يبقى على نفس خط باقي الأقسام.

   الألوان جاية كلها من متغيّرات الثيم:
     • الداكن  → ألوان زجاجية داكنة + إطار أبيض حوالين الكود
     • النهاري → قيم فاتحة من بلوك body.light-mode في آخر القسم
   ============================================================================ */

.qr-section {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-top: 28px;
}

@media (min-width: 1024px) {
    .qr-section {
        padding-left: var(--site-pad-desktop);
        padding-right: var(--site-pad-desktop);
    }
}

.qr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    /* حشو إضافي على الشمال: السهم + جملة «Scan the code» واقفين هناك */
    padding: 26px 30px 26px 108px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(20, 17, 15, 0.94), rgba(10, 9, 12, 0.86));
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.qr-copy {
    flex: 1;
    min-width: 0;
}

.qr-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: #e8c15a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.qr-kicker i {
    font-size: 0.95rem;
    line-height: 1;
}

.qr-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.qr-text {
    margin: 0;
    color: #a9a49b;
    font-size: 0.9rem;
    line-height: 1.65;
}

/* إطار الكود: بادding أبيض + حد رفيع عشان الكود يتقري من أي كاميرا */
.qr-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 14px;
    border-radius: 16px;
    background: #fffdf9;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.qr-code {
    line-height: 0;
    display: flex;
}

.qr-code img,
.qr-code canvas {
    display: block;
}

.qr-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #6b5a3c;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    max-width: none;
}

.qr-caption i {
    flex-shrink: 0;
    font-size: 0.7rem;
    opacity: 0.75;
}

.qr-frame {
    width: fit-content;
}

/* --- الموبايل: الكارت يبقى عمودي والكود في النص --- */
@media (max-width: 640px) {
    .qr-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
}

/* ============================================================================
   19.1) الوضع النهاري — ألوان الكارت
   ============================================================================ */
body.light-mode .qr-card {
    background: linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(240, 220, 174, 0.5));
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow), var(--lm-hairline);
}

body.light-mode .qr-kicker {
    color: var(--lm-bronze-ink);
    letter-spacing: 0.14em;
}

body.light-mode .qr-title {
    color: var(--lm-ink);
}

body.light-mode .qr-text {
    color: var(--lm-ink-soft);
}

body.light-mode .qr-frame {
    background: #fffdf9;
    border-color: var(--lm-border-strong);
    box-shadow: var(--lm-shadow-soft);
}

body.light-mode .qr-caption {
    color: var(--lm-bronze-ink);
}

body.light-mode .qr-kicker i {
    color: var(--lm-bronze);
}

/* ============================================================================
   19.2) كود QR — اللوحة المعدنية + روابط المحتوى
   ============================================================================
   البنية:
     .qr-frame      → الحاوية الخارجية (لوحة)
       .qr-plate    → اللوح نفسه (إطار معدني + محتوى)
         .qr-plate-head → الشريط العلوي: الحرف M + العنوان
         .qr-window  → النافذة البيضاء اللي جواها الكود
         .qr-caption → شريط اللينك تحت الكود
       .qr-scan      → سهم "امسح" (بره اللوح، على جنب)
   ============================================================================ */

/* --- اللوحة: إطار معدني داكن مقوّس + إضاءة ذهبية خفيفة --- */
.qr-frame {
    position: relative;
    width: fit-content;
    padding: 14px;
    border-radius: 26px;
    background: linear-gradient(150deg, #3a3a3f 0%, #16161a 42%, #0d0d10 100%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

/* لمعة ذهبية بتمرّ على اللوحة من أعلى اليمين */
.qr-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(246, 195, 68, 0.16), transparent 45%);
    pointer-events: none;
    z-index: 2;
}

/* --- اللوح الداخلي: مقعّر من كل الجهات (فتحات الكروت المعدنية) --- */
.qr-plate {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* --- الشريط العلوي: الحرف الذهبي + خط فاصل + عنوانين --- */
.qr-plate-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.qr-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    font-family: "Fira Code", monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b1f08;
    background: linear-gradient(145deg, #fbe6a8, #d4af37 55%, #a8801f);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

.qr-plate-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.qr-plate-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qr-plate-text strong {
    color: #e9e4d8;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
}

.qr-plate-text small {
    color: rgba(212, 175, 55, 0.75);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.2;
}

/* --- النافذة البيضاء اللي جواها الكود (لازم تفضل بيضا في الوضعين) --- */
.qr-window {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.35);
}

.qr-window .qr-code {
    line-height: 0;
    display: flex;
}

.qr-window .qr-code img,
.qr-window .qr-code canvas {
    display: block;
    width: 190px;
    height: 190px;
    image-rendering: pixelated;
}

/* --- شريط اللينك تحت الكود (لون غامق عشان يبان على الخلفية الغامقة) --- */
.qr-plate .qr-caption {
    color: rgba(233, 228, 216, 0.8);
    justify-content: center;
}

.qr-plate .qr-caption i {
    color: #d4af37;
    opacity: 1;
}

/* --- سهم "امسح" (بره اللوح على الشمال، وبيشاور ناحية ال QR اللي على يمينه) --- */
.qr-scan {
    position: absolute;
    top: 50%;
    /* المسافة من حافة اللوحة: السهم واقف بره ويوصل لـ qr-window */
    left: -86px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
    /* عرض ضيّق إن الجملة تفضل سطر واحد وتسع في المسافة الفاضية */
    width: 76px;
    color: #d4af37;
    font-family: "Fira Code", monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* السهم بينحني ناحية يمين — ناحية الـ QR مباشرة (من غير أي قلب) */
.qr-scan svg {
    width: 62px;
    height: 40px;
}

/* --- قائمة روابط المحتوى (جوه نص الكارت) --- */
.qr-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.qr-links li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    color: #d8d3c8;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.18);
    transition: all 0.25s ease;
}

.qr-links li:hover {
    color: #ffffff;
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-2px);
}

.qr-links li i {
    color: #d4af37;
    font-size: 0.8rem;
}

/* ============================================================================
   19.3) الوضع النهاري — ألوان اللوحة والروابط
   ============================================================================ */

body.light-mode .qr-frame {
    background: linear-gradient(150deg, #2c2c31 0%, #16161a 45%, #0d0d10 100%);
    border-color: var(--lm-bronze);
    box-shadow:
        0 18px 38px rgba(90, 62, 14, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   19.4) أزرار المشاركة + رسالة التأكيد
   ============================================================================ */

/* --- صف الأزرار (شارك + نسخ) --- */
.qr-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 0;
}

/* --- زر المشاركة الأساسي (متدرّج ذهبي) --- */
.qr-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: #2b1f08;
    background: linear-gradient(135deg, #f7d774, #d4af37 70%, #bf8f28);
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.32);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.qr-share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(212, 175, 55, 0.42);
    filter: brightness(1.06);
}

.qr-share-btn:active {
    transform: translateY(0);
}

.qr-share-btn:focus-visible {
    outline: 2px solid #f7d774;
    outline-offset: 3px;
}

/* --- زر نسخ اللينك (زجاجي بحد ذهبي) --- */
.qr-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: #e8c15a;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.32);
    cursor: pointer;
    transition: all 0.25s ease;
}

.qr-copy-btn:hover {
    color: #ffffff;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.55);
    transform: translateY(-2px);
}

.qr-copy-btn:focus-visible {
    outline: 2px solid #f7d774;
    outline-offset: 3px;
}

/* --- رسالة التأكيد (بتظهر تحت الأزرار ثانيتين) --- */
.qr-feedback {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    min-height: 20px;
    color: #86efac;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.qr-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================================
   19.5) الوضع النهاري — ألوان أزرار المشاركة
   ============================================================================ */

body.light-mode .qr-share-btn {
    background: linear-gradient(135deg, #f0dcae, #c39a4d 70%, #a97c26);
    color: #2b1f08;
    box-shadow: 0 10px 24px rgba(156, 111, 28, 0.28);
}

body.light-mode .qr-copy-btn {
    color: var(--lm-bronze-ink);
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--lm-border-strong);
}

body.light-mode .qr-copy-btn:hover {
    color: var(--lm-ink);
    background: #ffffff;
    border-color: var(--lm-bronze);
    box-shadow: 0 10px 20px rgba(156, 111, 28, 0.14);
}

body.light-mode .qr-feedback {
    color: #15803d;
}

body.light-mode .qr-frame {
    background: linear-gradient(150deg, #2c2c31 0%, #16161a 45%, #0d0d10 100%);
    border-color: var(--lm-bronze);
    box-shadow:
        0 18px 38px rgba(90, 62, 14, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.light-mode .qr-plate {
    background: #131317;
}

body.light-mode .qr-window {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.1),
        0 4px 14px rgba(0, 0, 0, 0.3);
}

body.light-mode .qr-links li {
    color: var(--lm-ink-soft);
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--lm-border-strong);
}

body.light-mode .qr-links li:hover {
    color: var(--lm-ink);
    background: #ffffff;
    border-color: var(--lm-bronze);
}

body.light-mode .qr-links li i {
    color: var(--lm-bronze-ink);
}

/* الموبايل: السهم بيرجع فوق / الكارت بيتّزن */
@media (max-width: 900px) {
    .qr-scan {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        width: auto;
        margin-top: 10px;
    }
}

/* ============================================================================
   26) قائمة الموبايل الجانبية (Mobile Drawer Navigation)
   ----------------------------------------------------------------------------
   على الشاشات الصغيرة (<= 900px) روابط التنقل + البحث + الإعدادات بتتحول
   لقائمة بتتفتح من الجنب بزر الهامبرجر، بدل ما الشريط يلف على أكتر من سطر
   وياخد نص الشاشة.

   الطريقة:
     • نفس الـ <nav> اللي في الديسكتوب بيتحرك برة الشاشة (transform)
       — مفيش نسخة تانية من الروابط، فمفيش أي تعارض في الترجمة أو التحديد.
     • header بيفضل فوق القائمة (z-index أعلى) فزر الهامبرجر دايماً متاح.
     • body.nav-open هي الحالة الوحيدة اللي بتفتح القائمة.
   ============================================================================ */

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.6);
    outline: none;
}

.nav-toggle-line {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #e8c15a;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

body.nav-open .nav-toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(4, 6, 10, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
}

body.nav-open {
    overflow: hidden;
}

/* الروبوت العائم بيتخبّى والقائمة مفتوحة عشان ما يغطّيش أزرارها */
body.nav-open .bot-fab-dock,
body.nav-open .hero-bot {
    visibility: hidden;
}

@media (max-width: 900px) {
    .header,
    .header.scrolled {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
        border-radius: 20px;
        /* القائمة الجانبية بتخرج من حدود الشريط — لازم ما تتقصّش */
        overflow: visible;
    }

    .header > .logo-container {
        position: relative;
        z-index: 1000;
        width: auto;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1000;
    }

    .nav-links {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        z-index: 900;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        width: min(86vw, 340px);
        height: 100dvh;
        padding: 96px 20px 28px;
        margin: 0;
        box-sizing: border-box;
        overflow-y: auto;
        background: rgba(9, 11, 17, 0.98);
        border-inline-end: 1px solid rgba(212, 175, 55, 0.22);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
        transform: translateX(-102%);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html[dir="rtl"] .nav-links {
        box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
        transform: translateX(102%);
    }

    html[dir="rtl"] body.nav-open .nav-links,
    body.nav-open .nav-links {
        transform: translateX(0);
    }

    .nav-links a {
        padding: 13px 14px;
        font-size: 1.02rem;
        border-radius: 12px;
    }

    .nav-links a::after {
        display: none;
    }

    .nav-links .search-box {
        width: 100%;
        margin-top: 14px;
    }

    .nav-links .search-input {
        width: 100%;
    }

    .nav-links .header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-top: auto;
        padding-top: 18px;
    }

    .nav-links .header-cta {
        justify-content: center;
        padding: 12px 18px;
        font-size: 0.95rem;
    }

    .nav-links .settings-pill {
        align-self: flex-start;
    }

    .nav-links .settings-dropdown {
        position: static;
        width: 100%;
        margin-top: 10px;
    }
}

body.light-mode .nav-toggle {
    background: rgba(203, 168, 100, 0.12);
    border-color: rgba(156, 111, 28, 0.4);
}

body.light-mode .nav-toggle-line {
    background: #8a5f14;
}

@media (max-width: 900px) {
    body.light-mode .nav-links {
        background: rgba(255, 253, 249, 0.99);
        border-inline-end-color: rgba(156, 111, 28, 0.3);
        box-shadow: 24px 0 60px rgba(120, 90, 20, 0.18);
    }

    html[dir="rtl"] body.light-mode .nav-links {
        box-shadow: -24px 0 60px rgba(120, 90, 20, 0.18);
    }
}

/* ============================================================================
   27) تلميع الهيرو (Hero polish)
   ----------------------------------------------------------------------------
   إضافات بسيطة فوق بنية الهيرو الموجودة:
     • صف إحصائيات سريعة (مشاريع / تقنيات / المكان) — أرقام حقيقية مش زينة.
     • إيقاع أوضح للنص: عنوان أهدى في التشكيل، وصف بعرض قراءة مريح.
   ============================================================================ */

.hero-text-content {
    max-width: 640px;
}

.main-title {
    letter-spacing: -0.015em;
}

.hero-text-content .description {
    margin-bottom: 0;
    max-width: 58ch;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 28px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 118px;
    padding: 12px 18px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-stat-value {
    color: #f7d774;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
}

.hero-stat-label {
    color: #a9a49b;
    font-size: 0.74rem;
    line-height: 1.3;
}

html[dir="ltr"] .hero-stat-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 992px) {
    .hero-stats {
        justify-content: center;
        margin: 22px 0 24px;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        gap: 8px;
        margin: 20px 0 22px;
    }

    .hero-stat {
        flex: 1 1 30%;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .hero-stat-value {
        font-size: 1rem;
    }

    .hero-stat-label {
        font-size: 0.68rem;
    }
}

body.light-mode .hero-stat {
    background: rgba(255, 253, 249, 0.82);
    border-color: rgba(156, 111, 28, 0.2);
    box-shadow: 0 10px 22px rgba(120, 90, 20, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .hero-stat-value {
    color: #8a5f14;
}

body.light-mode .hero-stat-label {
    color: #6b6250;
}

/* ============================================================================
   28) دراسة حالة مدار (Madar Case Study)
   ----------------------------------------------------------------------------
   بلوك مختصر تحت كارت المشاريع: المشكلة / اللي اتبنى / الدور، وفيه نفس
   التقنيات واللينك الحي بتاع مدار — عشان الزائر يفهم المشروع مش بس يشوفه.
   ============================================================================ */

.case-study {
    position: relative;
    margin-top: 30px;
    padding: 30px;
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    overflow: hidden;
}

.case-study::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}

.case-head {
    max-width: 660px;
}

.case-title {
    margin: 8px 0 10px;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.35;
}

.case-lead {
    margin: 0;
    color: #a9a49b;
    font-size: 0.95rem;
    line-height: 1.65;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.case-item {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.case-label {
    display: block;
    margin-bottom: 7px;
    color: #e8c15a;
    font-size: 0.74rem;
    font-weight: 700;
}

.case-item p {
    margin: 0;
    color: #b9b3a8;
    font-size: 0.9rem;
    line-height: 1.65;
}

.case-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-tags li {
    padding: 5px 11px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.06);
    color: #cfc8ba;
    font-size: 0.72rem;
}

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    color: #f7d774;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.case-link:hover {
    background: rgba(212, 175, 55, 0.14);
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.18);
    transform: translateY(-1px);
}

@media (max-width: 992px) {
    .case-grid {
        grid-template-columns: 1fr;
    }

    .case-study {
        padding: 22px;
    }
}

@media (max-width: 480px) {
    .case-study {
        padding: 18px;
        border-radius: 18px;
    }

    .case-foot {
        flex-direction: column;
        align-items: stretch;
    }

    .case-link {
        justify-content: center;
    }
}

body.light-mode .case-study {
    background: linear-gradient(160deg, rgba(255, 253, 249, 0.92), rgba(240, 220, 174, 0.28));
    border-color: rgba(156, 111, 28, 0.22);
    box-shadow: 0 18px 40px rgba(120, 90, 20, 0.08);
}

body.light-mode .case-title {
    color: #2b2417;
}

body.light-mode .case-lead {
    color: #5d5648;
}

body.light-mode .case-item {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(156, 111, 28, 0.16);
}

body.light-mode .case-label {
    color: #8a5f14;
}

body.light-mode .case-item p {
    color: #5d5648;
}

body.light-mode .case-tags li {
    background: rgba(203, 168, 100, 0.14);
    border-color: rgba(156, 111, 28, 0.28);
    color: #6b4f12;
}

body.light-mode .case-link {
    color: #8a5f14;
    border-color: rgba(156, 111, 28, 0.4);
}

body.light-mode .case-link:hover {
    background: rgba(203, 168, 100, 0.2);
}

/* ============================================================================
   29) شريط الأرقام (Numbers)
   ----------------------------------------------------------------------------
   عدادات حقيقية تحت الهيرو: زيارات، زوار، عملاء، مشاريع منشورة.
   الأرقام بتتحرك من الصفر عند ظهور الشريط (script.js).
   ============================================================================ */

.numbers-section {
    padding: 0 8%;
    max-width: 1400px;
    margin: 0 auto;
}

.numbers-panel {
    position: relative;
    padding: 26px 28px;
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
    overflow: hidden;
}

.numbers-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.numbers-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.numbers-title {
    margin-bottom: 0;
    font-size: 1.35rem;
}

.numbers-title::after {
    display: none;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.number-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.number-icon {
    color: #d4af37;
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.number-value {
    color: #f7d774;
    font-size: clamp(1.55rem, 2.6vw, 1.95rem);
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.number-label {
    color: #a9a49b;
    font-size: 0.76rem;
}

html[dir="ltr"] .number-label {
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.numbers-note {
    margin: 14px 0 0;
    color: #8f8a82;
    font-size: 0.72rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .numbers-section {
        padding: 0 20px;
    }
}

@media (max-width: 640px) {
    .numbers-panel {
        padding: 20px;
        border-radius: 18px;
    }

    .numbers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .number-value {
        font-size: 1.5rem;
    }
}

body.light-mode .numbers-panel {
    background: linear-gradient(160deg, rgba(255, 253, 249, 0.94), rgba(240, 220, 174, 0.26));
    border-color: rgba(156, 111, 28, 0.22);
    box-shadow: 0 16px 34px rgba(120, 90, 20, 0.08);
}

body.light-mode .number-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(156, 111, 28, 0.16);
}

body.light-mode .number-icon {
    color: #9c6f1c;
}

body.light-mode .number-value {
    color: #8a5f14;
}

body.light-mode .number-label {
    color: #5d5648;
}

body.light-mode .numbers-note {
    color: #6f6250;
}