/* =====================================================================
   عون الأصول — أنماط الصفحات العامة
   يُحمَّل بعد tokens.css و base.css.

   ⚠️ صفر قيمة لونية خام — كل لون var(--...) من tokens.css.
   ⚠️ صفر خاصية اتجاهية مادّية — الخصائص المنطقية حصراً.
   ⚠️ الحركة بـ transform و opacity فقط — لا layout ولا paint.
   ===================================================================== */

/* =====================================================================
   1) الترويسة
   ===================================================================== */
.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* الحد والظل يظهران عند التمرير فقط.
   السبب: الترويسة فوق الواجهة الرئيسية يجب أن تبدو جزءاً منها لا شريطاً
   مفروضاً عليها. الفصل يظهر حين يبدأ المحتوى بالمرور تحتها — أي حين
   يصير له معنى. */
.site-header.is-stuck {
    border-block-end-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.site-header > .container {
    min-block-size: var(--header-height);
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: nowrap;
}

/* ⚠️ لا `overflow: hidden` على هذه الحاوية — جُرِّب ورُفض.
   يمنع الفيضان فعلاً، لكنه **يقتطع حلقة التركيز** (`outline-offset: 2px`)
   لكل رابط وزر داخل الترويسة، فيفقد مستخدم لوحة المفاتيح موضعه.
   علاجٌ يُنتج عطلاً وصولياً أخطر مما عالجه.

   الإصلاح الصحيح بنيوي: `min-inline-size: 0` ليسمح بالانكماش، وإخفاء
   الزر تحت 40rem. والفيضان يُلتقط في **فحص المتصفح** لا يُخفى بالقصّ. */

/* ---------- الشعار ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    flex: none;
    min-inline-size: 0;
}

.brand-logo {
    block-size: 2.25rem;
    inline-size: auto;
    display: block;
    flex: none;
}

/* اسم المؤسسة نصاً بجانب العلامة.
   العلامة رمز مجرّد بلا اسم مكتوب داخلها، فالنص ليس تكراراً بل **إكمال**
   للهوية. ويتبع لون النص فيقرأ في الوضعين بلا ملف ثالث. */
.brand-name {
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    line-height: 1.2;
    white-space: nowrap;
}
@media (max-width: 26rem) {
    /* تحت 416px: العلامة وحدها. الاسم يزاحم مبدّل اللغة والثيم،
       والعلامة كافية للتعريف في مساحة ضيقة. */
    .brand-name { display: none; }
}

/* ================================================================
   تبديل نسخة الشعار — أربع قواعد لا اثنتان

   العلامة نسختان: جسم أسود للخلفية الفاتحة، وجسم أبيض للداكنة.
   ولأن الثيم يُحسم بآليتين (تفضيل النظام + اختيار صريح)، فكل نسخة
   تحتاج قاعدتين: واحدة للتلقائي وأخرى للصريح.

   ⚠️ الاكتفاء بـ`@media` وحدها كان سيُبقي الشعار الأسود على خلفية
   داكنة لمن **اختار** الوضع الداكن يدوياً بينما نظامه فاتح — فيختفي
   الشعار تماماً. عطل يظهر فقط عند استعمال المبدّل، أي بعد النشر.

   التبديل في CSS لا JS: لا يومض الشعار الخطأ لجزء من الثانية.
   ================================================================ */
.brand-logo--light { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .brand-logo--dark  { display: none; }
    :root:not([data-theme]) .brand-logo--light { display: block; }
}

:root[data-theme='dark'] .brand-logo--dark  { display: none; }
:root[data-theme='dark'] .brand-logo--light { display: block; }

/* الفاتح الصريح: يُعيد النسخة الداكنة حتى لو كان النظام داكناً */
:root[data-theme='light'] .brand-logo--dark  { display: block; }
:root[data-theme='light'] .brand-logo--light { display: none; }

/* حارس دفاعي: إن تعذّر تحميل ملف الشعار يظهر النص وحده.
   الفراغ في موضع الهوية أسوأ من نص بسيط. */
.brand.logo-missing .brand-logo { display: none; }
.brand.logo-missing .brand-name { display: inline; }

/* ---------- مبدّل الثيم ---------- */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    flex: none;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--color-brand-strong); border-color: var(--color-brand); }

.theme-toggle svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    /* grid-area واحدة للأيقونات الثلاث: تتكدّس فوق بعضها فلا يقفز
       عرض الزر عند التبديل بينها. */
    grid-area: 1 / 1;
}

/* ================================================================
   أيقونة المبدّل — منطقها في CSS بالكامل لا في JS

   مع دورة ثلاثية (تلقائي ← فاتح ← داكن) لم تعد الأيقونة قادرة على وصف
   **وجهة** الضغط — الوجهة تتغيّر بحسب الحالة. فصارت تصف **الحالة
   الراهنة**: شاشة سطح المكتب = «تابع النظام» · شمس = فاتح · قمر = داكن.
   وما يجعل الزر مفهوماً كزر هو `aria-label` و`title` («اضغط للتبديل»)
   لا الأيقونة وحدها.

   ⭐ ثلاث قواعد لا ست، لأن «تلقائي» ممثَّلة بـ**غياب** `data-theme`:
   فهي الحالة الافتراضية، والقاعدتان الأخريان تُلغيانها عند وجود السمة.
   ولا حاجة لـ`@media (prefers-color-scheme)` هنا إطلاقاً — الأيقونة
   تتبع الاختيار لا تفضيل النظام.

   والفائدة الحاسمة أن الأيقونة الصحيحة تُرسم في **أول إطار** — لو
   انتظرت السكربت لظهر زر فارغ عند كل تحميل.
   ================================================================ */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon   { display: none; }
.theme-toggle .icon-system { display: block; }   /* الافتراضي: تلقائي */

:root[data-theme='light'] .theme-toggle .icon-system { display: none; }
:root[data-theme='light'] .theme-toggle .icon-sun    { display: block; }

:root[data-theme='dark']  .theme-toggle .icon-system { display: none; }
:root[data-theme='dark']  .theme-toggle .icon-moon   { display: block; }

/* ---------- التنقّل ---------- */
.site-nav { display: none; gap: var(--space-6); }

@media (min-width: 56rem) {
    .site-nav { display: flex; }
}

.site-nav a {
    position: relative;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding-block: var(--space-2);
    transition: color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--color-text); }

/* خط سفلي ينمو من البداية المنطقية — ينعكس تلقائياً مع اتجاه اللغة */
.site-nav a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background: var(--color-brand);
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--duration-base) var(--ease-out);
}
.site-nav a:hover::after { transform: scaleX(1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    min-inline-size: 0;   /* يسمح بالانكماش داخل flex بدل الفيضان */
}

/* ⚠️ زر الترويسة يظهر من 40rem فقط — وهذا إصلاح عطل مقيس لا تفضيل.
   على 375px كان مجموع (الشعار + مبدّل اللغة + الزر) يتجاوز عرض الشاشة
   مع `flex-wrap: nowrap`، فينزلق العنصر خارج الإطار ويُنتج **تمريراً
   أفقياً للصفحة كلها** — وهو أسوأ عطل تخطيط على الجوال لأنه يجعل كل
   المحتوى يهتزّ جانبياً مع كل تمرير رأسي.

   وإخفاؤه بلا خسارة: نداء الإجراء نفسه ظاهر في الواجهة الأولى مباشرةً
   على الجوال، فالزر في الترويسة تكرار لا وظيفة مفقودة. */
.header-actions .btn { display: none; }

@media (min-width: 40rem) {
    .header-actions .btn { display: inline-flex; }
}

.lang-switch {
    /* inline-flex + min-block-size: يضمن 44px مساحة لمس حتى لو كان النص
       سطراً واحداً قصيراً. الحشو وحده أعطى 40px — أقل من الحد الأدنى،
       فتكثر الضغطات الخاطئة على الجوال. */
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-min);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.lang-switch:hover { color: var(--color-brand-strong); border-color: var(--color-brand); }

/* =====================================================================
   2) الأزرار
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
/* الارتداد 1px فقط: الحركة الكبيرة على زر يُضغط عشرات المرات تتحول
   من «استجابة» إلى إزعاج. */
.btn:active { transform: translateY(1px); }

/* brand-strong لا brand: نص أبيض فوق الأخضر الأصلي يعطي 4.12:1 وهو
   راسب لنص الزر. التدرّج الأقوى يعطي 5.65:1. */
.btn-primary { background: var(--color-brand-strong); color: var(--color-on-brand); }
.btn-primary:hover { background: var(--color-brand-hover); color: var(--color-on-brand); }

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-brand); color: var(--color-brand-strong); }

.btn-icon { inline-size: 1.1em; block-size: 1.1em; flex: none; }

/* =====================================================================
   3) بنية الأقسام
   ===================================================================== */
.section { padding-block: var(--space-16); }
.section-alt { background: var(--color-surface-raised); }

.section-head { margin-block-end: var(--space-12); max-inline-size: 46rem; }
.section-head h2 { font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl)); }
.section-head p { color: var(--color-text-muted); margin-block-start: var(--space-4); }

/* الشارة العلوية بنقطة — النقطة تعوّض عن أيقونة بلا طلب شبكة */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-strong);
    margin-block-end: var(--space-4);
    letter-spacing: 0.02em;
}
.eyebrow::before {
    content: '';
    inline-size: 0.4rem;
    block-size: 0.4rem;
    border-radius: var(--radius-full);
    background: var(--color-brand);
    flex: none;
}

/* =====================================================================
   4) الواجهة الرئيسية
   ===================================================================== */
.hero {
    position: relative;
    padding-block: var(--space-24) var(--space-16);
    overflow: hidden;
    isolation: isolate;   /* يحصر المزج داخل القسم فلا يتسرّب لما تحته */
}

/* توهّج قطري خفيف بلون الهوية — CSS خالص بلا طلب شبكة ولا صورة.
   الشفافية منخفضة عمداً: الخلفية تُحسّ ولا تُرى، والنص فوقها يحتفظ
   بتباينه المقيس كاملاً. */
.hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: -30%;
    inset-inline-end: -10%;
    inline-size: 45rem;
    block-size: 45rem;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--brand-green) 14%, transparent) 0%,
                transparent 65%);
    pointer-events: none;
}

/* ---------- تخطيط الواجهة: عمود واحد ثم عمودان ----------
   الجوال أولاً حرفياً: لا قاعدة شبكة في الحالة الافتراضية إطلاقاً. العناصر
   تتكدّس بالتدفّق الطبيعي، والصورة تلي النص لأنها **تليه في HTML** — لا
   `order` ولا `direction` معكوس. وهذا ما يجعل ترتيب القراءة في قارئ الشاشة
   مطابقاً للترتيب البصري في الحالتين معاً.

   ⚠️ ولهذا السبب لم يُستخدم `grid-column` لوضع النص «يميناً»: الصفحة `rtl`،
   والعمود الأول في الشبكة **هو** اليمين تلقائياً. تثبيته برقم كان سينقلب
   خطأً على `/en/` بلا أن يراه من يتصفّح بالعربية وحدها. */
.hero-inner { max-inline-size: 52rem; }

@media (min-width: 64rem) {
    .hero-inner {
        max-inline-size: none;
        display: grid;
        /* 1.05fr لا 1fr: عمود النص يحتاج فسحة أوسع قليلاً كي لا يتكسّر
           العنوان إلى أسطر يتيمة عند حدّ 64rem تحديداً. */
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }

    /* الحدّ يبقى على عمود النص لا على الحاوية — سطر النص الطويل يتعب
       العين بغضّ النظر عن اتّساع الشاشة. */
    .hero-copy { max-inline-size: 34rem; }
}

/* ---------- حاوية المشهد ----------
   نسبة الأبعاد مصرَّحة على الحاوية **و**أبعاد `width`/`height` على الصورة:
   الأولى تحجز المساحة إن غاب الملف، والثانية تحجزها قبل اكتمال التحميل.
   كلتاهما تمنع «قفزة التخطيط» (CLS) — وهي من عوامل ترتيب البحث المقيسة. */
.hero-figure {
    margin-block-start: var(--space-12);
    border-radius: var(--radius-lg);
    overflow: hidden;                       /* يقصّ الصورة على زوايا الحاوية */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    background: var(--color-brand-subtle);  /* ما يُرى ريثما تصل الصورة */
    /* النسبة الفعلية للصورة لا 4/3 التقريبية: أي فارق بينهما يعني أن
       `object-fit: cover` يقصّ من المشهد — وأول ما يُقصّ حوافه، حيث
       البطاقة التعريفية وحافة الجهاز. */
    aspect-ratio: 1400 / 1095;
}

/* <picture> عنصر سطري افتراضياً فيترك فجوة تحت الصورة داخل الحاوية. */
.hero-figure picture { display: contents; }

@media (min-width: 64rem) {
    .hero-figure { margin-block-start: 0; }
}

.hero-figure img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.hero h1 {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    max-inline-size: 18ch;
}

/* الكلمة المميّزة بلون الهوية — الأخضر هنا على حجم كبير فيكفيه 3:1 */
.hero h1 em { font-style: normal; color: var(--color-brand-strong); }

.hero-lead {
    font-size: clamp(var(--text-base), 2vw, var(--text-lg));
    color: var(--color-text-muted);
    margin-block: var(--space-6) var(--space-8);
    line-height: var(--leading-loose);
    max-inline-size: 42rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* شارة الترخيص داخل الواجهة — الإثبات قبل الطلب */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand-subtle);
    border: 1px solid color-mix(in srgb, var(--brand-green) 25%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-brand-strong);
    margin-block-end: var(--space-6);
}
.hero-badge svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }

/* =====================================================================
   5) شريط الأرقام
   ===================================================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-6);
    padding-block: var(--space-8);
    border-block: 1px solid var(--color-border);
}
.stat-value {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
    font-weight: var(--weight-bold);
    color: var(--color-brand-strong);
    line-height: 1.1;
}
.stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block-start: var(--space-2);
}

/* =====================================================================
   6) البطاقات
   ===================================================================== */
.grid-cards {
    display: grid;
    gap: var(--space-4);
    /* auto-fit + min(): يتكيّف بلا media query ولا ينكسر على 320px */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* شريط علوي ينمو عند التحويم — transform فقط، بلا إعادة تخطيط.
   الأصل مقياس صفري فلا يحجز مساحة ولا يُحدث قفزة عند الظهور. */
.card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--color-brand);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--duration-slow) var(--ease-out);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }

.card:hover, .card:focus-within {
    border-color: color-mix(in srgb, var(--brand-green) 40%, var(--color-border));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-brand-subtle);
    color: var(--color-brand-strong);
    margin-block-end: var(--space-4);
}
.card-icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

.card h3 { margin-block-end: var(--space-3); font-size: var(--text-lg); }
.card p  { color: var(--color-text-muted); font-size: var(--text-sm); }

.card ul {
    margin-block-start: var(--space-4);
    padding-inline-start: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.card li {
    position: relative;
    padding-inline-start: var(--space-5);
    margin-block-start: var(--space-2);
}
/* علامة القائمة بـCSS: تنعكس مع الاتجاه، ولا تُنسخ عند تحديد النص */
.card li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-radius: var(--radius-full);
    background: var(--color-brand);
}

/* =====================================================================
   7) الترخيص
   ===================================================================== */
.trust-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.trust-item {
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid var(--color-brand);
}
.trust-item dt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block-end: var(--space-2);
}
.trust-item dd {
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   8) نداء الإجراء
   ===================================================================== */
.cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-cta-surface);
    color: var(--color-on-cta);
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-6);
    text-align: center;
}
.cta::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: -50%;
    inset-inline-start: -10%;
    inline-size: 30rem;
    block-size: 30rem;
    background: radial-gradient(circle, rgb(255 255 255 / 0.10) 0%, transparent 60%);
}
.cta h2 { color: var(--color-on-cta); font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); }
.cta p {
    color: var(--color-on-cta);
    opacity: 0.92;
    margin: var(--space-4) auto var(--space-8);
    max-inline-size: 44ch;
}
.cta .btn { background: var(--brand-white); color: var(--color-cta-btn-text); }
.cta .btn:focus-visible { outline-color: var(--brand-white); }
.cta .btn:hover { background: var(--color-cta-btn-hover); }

/* =====================================================================
   9) التذييل
   ===================================================================== */
.site-footer {
    background: var(--brand-black);
    color: var(--brand-white);
    padding-block: var(--space-16) var(--space-8);
    margin-block-start: var(--space-24);
}
.site-footer a { color: var(--brand-white); opacity: 0.8; text-decoration: none; }
.site-footer a:hover { opacity: 1; }
.site-footer h3 { font-size: var(--text-base); margin-block-end: var(--space-4); }

.footer-logo { block-size: 3rem; inline-size: auto; margin-block-end: var(--space-4); }

/* بديل شعار التذييل — نفس منطق الترويسة.
   بلا هذا يعرض المتصفح نصّ `alt` خاماً بحجم النص العادي، فيبدو خطأً
   لا هوية. الاسم المنسَّق يقول «هذا مقصود». */
.footer-fallback {
    display: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    margin-block-end: var(--space-4);
}
.footer-brand.logo-missing .footer-logo   { display: none; }
.footer-brand.logo-missing .footer-fallback { display: block; }

.footer-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    margin-block-end: var(--space-12);
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-block-start: var(--space-3); }
.footer-grid p { opacity: 0.8; font-size: var(--text-sm); }

.footer-legal {
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    padding-block-start: var(--space-6);
    font-size: var(--text-sm);
    opacity: 0.7;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    justify-content: space-between;
}
.footer-legal p { max-inline-size: none; }

/* شارة الإصدار — تظهر في **كل** المقاسات بلا استثناء.
   `.footer-legal` حاوية flex تلتفّ، فتنزل الشارة سطراً مستقلاً على
   الجوال بدل أن تُقتطع. ولا قاعدة `display: none` عند أي حدّ:
   إخفاؤها على الجوال كان سيجعل أكثر الأجهزة استعمالاً هو الوحيد
   الذي لا يمكن التحقق من إصداره — وهو عكس الغرض.

   خافتة عمداً: معلومة تشخيصية تُطلب عند الحاجة ولا تزاحم المحتوى. */
.footer-version {
    font-variant-numeric: tabular-nums;   /* لا يقفز عرضها عند تغيّر الرقم */
    opacity: 0.75;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* =====================================================================
   10) الحركة — كشف عند التمرير

   ⚠️ قاعدة حاكمة: العناصر مرئية افتراضياً في CSS.
   الإخفاء لا يحدث إلا بعد أن يضيف السكربت `.js-motion` على <html> —
   أي بعد **تأكيد** عمل JS. بهذا: زاحف البحث ومن عطّل السكربت يريان
   المحتوى كاملاً، ولا يُخفى شيء ينتظر حدثاً قد لا يقع.

   بلا مكتبة خارجية: IntersectionObserver مدمج، و transform/opacity
   وحدهما لا يُحدثان إعادة تخطيط.
   ===================================================================== */
.js-motion .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
    /* will-change عند الحاجة فقط: تركه دائماً يحجز طبقة رسم لكل عنصر */
    will-change: opacity, transform;
}
.js-motion .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* التتابع: 60ms بين العنصر والذي يليه.
   أكبر منه يجعل آخر بطاقة تتأخر ثانيةً كاملة فيبدو الموقع بطيئاً. */
.js-motion .reveal[data-delay='1'] { transition-delay:  60ms; }
.js-motion .reveal[data-delay='2'] { transition-delay: 120ms; }
.js-motion .reveal[data-delay='3'] { transition-delay: 180ms; }
.js-motion .reveal[data-delay='4'] { transition-delay: 240ms; }
.js-motion .reveal[data-delay='5'] { transition-delay: 300ms; }
.js-motion .reveal[data-delay='6'] { transition-delay: 360ms; }

/* الحارس العام في base.css يُصفّر المدد، وهذا يُلغي الإزاحة أيضاً
   فلا يبقى عنصر عالقاً مزاحاً عند تعطيل الحركة. */
@media (prefers-reduced-motion: reduce) {
    .js-motion .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   قسم «من البلاغ إلى المعالجة» + رحلة الجهاز ثلاثية الأبعاد

   البنية زخرفية تُبنى بالكامل من tablet-flight.js — لا وجود لعناصر
   .tf-* في HTML، فمن يتصفح بلا JS لا يحمّل حتى صورها. القسم نفسه
   (#handoff) مكتمل بذاته: صورة وشارة ثابتتان.
   ===================================================================== */
.handoff-inner { max-inline-size: 52rem; }

@media (min-width: 64rem) {
    .handoff-inner {
        max-inline-size: none;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        align-items: center;
        gap: var(--space-12);
    }
    .handoff-copy { max-inline-size: 34rem; }
}

.handoff-copy h2 { margin-block: var(--space-3) var(--space-4); }
.handoff-copy p:not(.eyebrow) {
    color: var(--color-text-muted);
    line-height: var(--leading-loose);
}

.handoff-scene {
    position: relative;
    margin-block-start: var(--space-10);
    max-inline-size: 24rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    background: var(--color-brand-subtle);
    aspect-ratio: 760 / 973;
}
@media (min-width: 64rem) {
    .handoff-scene { margin-block-start: 0; justify-self: center; }
}
.handoff-scene picture { display: contents; }
.handoff-scene img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

/* شارة الاستلام: ظاهرة افتراضياً — بلا JS أو مع تقليل الحركة يكتمل
   المشهد ثابتاً. تحت وضع الرحلة تُخفى وتنبثق عند الهبوط. */
.handoff-chip {
    position: absolute;
    inset-block-end: var(--space-4);
    left: 50%;                       /* توسيط فيزيائي متماثل في الاتجاهين */
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-brand-strong);
    /* on-brand لا الأبيض الثابت: brand-strong يفتح في الداكن فيرسب
       الأبيض فوقه — الفخّ نفسه الذي أُصلح في زر CTA */
    color: var(--color-on-brand);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}
.tablet-flight-on .handoff-chip {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.7);
    /* منحنى مرتدّ: القيمة فوق 1 في المقبض الثاني هي «القفزة» */
    transition: transform 450ms cubic-bezier(0.2, 1.6, 0.35, 1),
                opacity 250ms var(--ease-out);
}
.tablet-flight-on #handoff.is-received .handoff-chip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- خشبة الرحلة (fixed فوق المحتوى، تحت الترويسة z:50) ---------- */
.tf-stage {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    perspective: 1600px;
}
.tf-move {
    position: absolute;
    inset-block-start: 0;
    left: 0;                          /* فيزيائي عمداً — انظر رأس tablet-flight.js */
    inline-size: 340px;
    block-size: 255px;
    will-change: transform, opacity;  /* عنصران دائما الحركة — الحجز مبرَّر */
}
.tf-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;     /* ⭐ هذا السطر هو «محرّك» التجسيم */
    will-change: transform;
}

.tf-face {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    backface-visibility: hidden;
    background: var(--brand-black);
    box-shadow: var(--shadow-lg);
}
.tf-front { transform: translateZ(9px); padding: 10px; }
.tf-front img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.tf-back {
    transform: rotateY(180deg) translateZ(9px);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,
                color-mix(in srgb, var(--brand-black) 82%, white) 0%,
                var(--brand-black) 55%);
}
.tf-back img { inline-size: 34%; opacity: 0.92; }
/* عدسة الكاميرا — التفصيلة التي تجعل الظهر ظهراً لا مستطيلاً داكناً */
.tf-back::after {
    content: '';
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
                color-mix(in srgb, var(--brand-black) 55%, white) 0%,
                var(--brand-black) 60%);
    border: 2px solid color-mix(in srgb, var(--brand-black) 70%, white);
}

/* أوجه السماكة الأربعة: صفائح بعرض 18px تدور حول محاور الحواف،
   فتمتد من z=-9 إلى z=+9 — سماكة الجهاز */
.tf-edge {
    position: absolute;
    background: color-mix(in srgb, var(--brand-black) 88%, white);
}
.tf-edge-top    { inset-inline: 0; block-size: 18px; inset-block-start: 0;
                  transform: rotateX(90deg);  transform-origin: top; }
.tf-edge-bottom { inset-inline: 0; block-size: 18px; inset-block-end: 0;
                  transform: rotateX(-90deg); transform-origin: bottom;
                  background: color-mix(in srgb, var(--brand-black) 96%, white); }
.tf-edge-start  { inset-block: 0; inline-size: 18px; left: 0;
                  transform: rotateY(-90deg); transform-origin: left; }
.tf-edge-end    { inset-block: 0; inline-size: 18px; right: 0;
                  transform: rotateY(90deg);  transform-origin: right; }