/* ══════════════════════════════════════════════════════════════════════════
   RADDAN · نظام التصميم المشترك
   ─────────────────────────────────────────────────────────────────────────
   الهدف: هوية واحدة بالظبط في الصفحات التلاتة (marketing / login / dashboard)
   بدل ما كل صفحة تحط توكناتها لوحدها والصفحات تختلف في اللون والمقاس.

   طريقة الاستخدام:
     1) حط <link rel="stylesheet" href="/assets/raddan-brand.css"> في <head>
        قبل أي <style> داخلي (عشان التوكنات تتقرأ صح).
     2) استخدم أسماء الكلاسات الجاهزة (rd-*) في الـ markup.
     3) لو محتاج تكسر حاجة، استخدم --rd-* مش تكتب hex.

   ⚠ القاعدة الأهم في الملف ده:
     حروف العربية متصلة، فـ letter-spacing بيفصلها وبيكسر العنوان.
     ممنوع أي letter-spacing على نص عربي — واللي كان موجود في marketing.html
     على h1 (-2px) وعلى brand small (2px) وعلى kicker (1px) كان أكبر سبب
     إن العناوين شكلها مكسور.
     الاستثناء الوحيد: نص لاتيني أو رقم مع dir="ltr".
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════ 1) التوكنات ══════════════════════════ */
:root {
    /* ── الحبر (النصوص) ── */
    --rd-navy:    #0b1d3a;   /* لون العلامة الغامق */
    --rd-navy-2:  #102a50;
    --rd-ink:     #07152f;   /* نص أساسي  ≈ 15:1 على الورق */
    --rd-ink-2:   #4f5c76;   /* نص ثانوي  ≈  6.4:1 على الورق */
    --rd-ink-3:   #5b6982;   /* نص ثالث    ≈  5.3:1 على الورق */
    /* ⚠ الأرقام دي مش تجميلية: الألوان الزخرفية في .rd-bg بتغسل الخلفية،
       والقاعدة: نص ثانوي (L≈.106) على أسوأ هالة (L≈.83) = 5.5:1 ✓
       ونص ثالث (L≈.140) على نفس الهالة = 5.1:1 ✓
       لو زوّدت شفافية أي هالة، لازم تعتمق التوكنين دول في نفس الوقت. */

    /* ── الأسطح ── */
    --rd-paper:   #f7faff;
    --rd-paper-2: #eef5ff;
    --rd-white:   #ffffff;
    --rd-line:    #dfe7f2;
    --rd-line-2:  #cbdaf0;
    --rd-sunken:  #eef4fd;

    /* ── الهوية ── */
    --rd-brand:     #1a5fd6;
    --rd-brand-2:   #2677ff;
    --rd-brand-ink: #14499f;
    --rd-violet:    #5b3fd6;
    --rd-violet-2:  #7557ff;
    --rd-cyan:      #37d6ff;
    --rd-gold:      #ffbd66;
    --rd-green:     #16a34a;
    --rd-green-ink: #15803d;

    /* ── دلالات ── */
    --rd-ok:   #15803d;  --rd-ok-bg:   rgba(22,163,74,.10);
    --rd-warn: #92400e;  --rd-warn-bg: rgba(245,158,11,.12);
    --rd-bad:  #991b1b;  --rd-bad-bg:  rgba(239,68,68,.10);

    /* ── أسطح زجاجية ── */
    --rd-surface:   rgba(255,255,255,.72);
    --rd-surface-2: rgba(255,255,255,.90);
    --rd-border:    rgba(203,218,239,.82);
    /* حلقة التركيز: لون صلب مش شفاف.
       كانت rgba(38,119,255,.20) ⇒ فوق الأبيض بتطلع rgb(211,232,255) = 1.2:1،
       يعني مؤشر التركيز عمليًا غير مرئي. الحد المطلوب 3:1.
       --rd-brand (#1a5fd6) على الأبيض = 5.75:1 ⇒ مريح. */
    --rd-ring:      var(--rd-brand);
    /* هالة ناعمة *تحتي* الـ outline — تجميل بس، مش هي المؤشر */
    --rd-ring-halo: rgba(26,95,214,.16);

    /* ── تدرّجات ── */
    --rd-grad-brand:   linear-gradient(135deg, var(--rd-brand), var(--rd-violet));
    --rd-grad-brand-2: linear-gradient(135deg, #14499f, #4a30b8);
    --rd-grad-text:    linear-gradient(120deg, var(--rd-brand-2), var(--rd-violet-2));
    /* نسخة فاتحة للاستخدام على الأسطح الغامقة (شريط الأرقام، CTA).
       ⚠ تدرّج الهوية نفسه (أزرق→بنفسجي) على بنية غامقة بيوصل 1.5:1
       — يعني الأرقام بتبقى غير مرئية. لا تستخدمه على غامق أبدًا. */
    --rd-grad-text-onDark: linear-gradient(120deg, #ffffff, #c9dcff);
    --rd-grad-dark:    linear-gradient(125deg, var(--rd-navy), #173c82 55%, #5b43c9);

    /* ── ظلال ── */
    --rd-sh-1: 0 1px 2px rgba(16,43,77,.05), 0 2px 6px rgba(16,43,77,.05);
    --rd-sh-2: 0 2px 6px rgba(16,43,77,.06), 0 10px 24px -10px rgba(16,43,77,.16);
    --rd-sh-3: 0 4px 10px rgba(16,43,77,.07), 0 26px 58px -20px rgba(21,55,120,.30);
    --rd-sh-brand: 0 10px 30px -8px rgba(38,119,255,.34);

    /* ── أبعاد ── */
    --rd-r-xs:   8px;
    --rd-r-sm:  12px;
    --rd-r-md:  16px;
    --rd-r-lg:  22px;
    --rd-r-xl:  30px;
    --rd-r-pill: 999px;

    /* ── حركة ── */
    --rd-ease:      cubic-bezier(.22,.61,.36,1);
    --rd-ease-out:  cubic-bezier(.16,1,.3,1);
    --rd-fast: .16s;
    --rd-med:  .28s;
    --rd-slow: .55s;

    /* ── طباعة (سلّم سائل — بيشتغل من 360px لحد 1600px) ── */
    --rd-font: "Segoe UI Variable Display", "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Naskh Arabic", Arial, sans-serif;
    --rd-fs-display: clamp(33px, 5.0vw, 58px);
    --rd-fs-h2:      clamp(25px, 3.3vw, 39px);
    --rd-fs-h3:      clamp(17px, 1.4vw, 20px);
    --rd-fs-lead:    clamp(15.5px, 1.1vw, 17.5px);
    --rd-fs-body:    15.5px;
    --rd-fs-sm:      14px;
    --rd-fs-xs:      12.5px;
    --rd-ls:         0;   /* التذكير: صفر على كل نص عربي */
}

/* ══════════════════════════ 2) الأساسيات ══════════════════════════ */
html { -webkit-text-size-adjust: 100%; }

body.rd-body {
    font-family: var(--rd-font);
    font-size: var(--rd-fs-body);
    line-height: 1.75;
    color: var(--rd-ink);
    background: var(--rd-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* عناوين عربية: صفر تباعد حروف + خط ثقيل — الشكل الصح للعربي */
body.rd-body h1,
body.rd-body h2,
body.rd-body h3,
body.rd-body h4 {
    letter-spacing: var(--rd-ls);
    line-height: 1.28;
    font-weight: 800;
    text-wrap: balance;
}

body.rd-body p { text-wrap: pretty; }

/* حلقة تركيز واحدة في كل المشروع — أساس الوصول قبل أي لمسة بصرية */
body.rd-body :focus-visible {
    outline: 3px solid var(--rd-ring);
    outline-offset: 3px;
    border-radius: 6px;
}

/* تمييز التحديد بنفس الهوية */
body.rd-body ::selection {
    background: rgba(38,119,255,.20);
    color: var(--rd-ink);
}

/* ══════════════════════════ 3) الخلفية (شبه شفافة) ══════════════════════════
   بدل مسطّح: 3 هالات كبيرة + شبكة خفيفة. بتدي عمق من غير زحمة. */
.rd-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.rd-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    /* الشفافية مقصودة ضعيفة: النص فوق الخلفية مباشرة، فأي تعتيم بيأكل تباينه.
       أسوأ هالة هنا (البنفسجية 10%) = L .834 مقابل نص ثال L .140 ⇒ 5.1:1 */
    background:
        radial-gradient(46% 38% at 12% 8%,  rgba(55,214,255,.14), transparent 62%),
        radial-gradient(42% 36% at 88% 14%, rgba(117,87,255,.10), transparent 64%),
        radial-gradient(52% 42% at 72% 92%, rgba(38,119,255,.09), transparent 66%),
        radial-gradient(38% 32% at 20% 86%, rgba(255,189,102,.07), transparent 68%);
    filter: blur(12px);
}
/* شبكة نقط خفيفة جداً — بتدي إحساس «منتج» من غير ضوضاء */
.rd-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(27,62,120,.07) 1px, transparent 0);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 78%);
}
body.rd-body > *:not(.rd-bg) { position: relative; z-index: 1; }

/* ══════════════════════════ 4) الأسطح ══════════════════════════ */

/* زجاج داكن الاستخدام — للهيدر والـ CTA */
.rd-glass {
    background: var(--rd-surface-2);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
            backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--rd-border);
    box-shadow: var(--rd-sh-2), inset 0 1px 0 rgba(255,255,255,.9);
}

/* بطاقة بيضا + لمعة علوية + ظل ناعم */
.rd-card {
    position: relative;
    background: var(--rd-white);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-r-lg);
    box-shadow: var(--rd-sh-1);
    transition:
        transform var(--rd-med) var(--rd-ease),
        box-shadow var(--rd-med) var(--rd-ease),
        border-color var(--rd-med) var(--rd-ease);
    overflow: hidden;
    isolation: isolate;
}
.rd-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--rd-sh-3);
    border-color: var(--rd-line-2);
}
/* لمعة بتفرّج على الكارت — بتتبع المؤشر (JS بيحط --mx/--my) */
.rd-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--rd-med) var(--rd-ease);
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 0%),
        rgba(38,119,255,.11), transparent 62%);
}
.rd-spot:hover::after { opacity: 1; }
/* لمعة داخلية أعلى الكارت دايمًا */
.rd-card::before {
    content: "";
    position: absolute;
    inset-inline: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
    pointer-events: none;
    z-index: 2;
}

/* شريحة أيقونة بتدرّج الهوية بدل الإيموجي */
/* شريحة أيقونة بتدرّج الهوية بدل الإيموجي.
   ⚠ التدرّجات الفاتحة (سماوي/كهرماني) بتطلب أيقونة غامقة:
     أبيض على #37d6ff = 1.72:1 · أبيض على #f59e0b = 2.18:1 (بيضيّعوا)
     غامق على نفس السطح = 9.8:1 · 7.7:1
   فالسماوي والكهرماني بيكملوا بأيقونة غامقة، وال الأساسية بيضا. */
.rd-ic {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--rd-r-md);
    color: var(--rd-white);
    background: var(--rd-grad-brand);
    box-shadow: var(--rd-sh-brand), inset 0 1px 0 rgba(255,255,255,.34);
    font-size: 21px;
    line-height: 1;
}
.rd-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rd-ic--alt { background: linear-gradient(135deg, #7557ff, #37d6ff); color: var(--rd-navy); box-shadow: 0 10px 30px -8px rgba(117,87,255,.36), inset 0 1px 0 rgba(255,255,255,.34); }
.rd-ic--warm { background: linear-gradient(135deg, #f59e0b, #ff7a45); color: var(--rd-navy); box-shadow: 0 10px 30px -8px rgba(245,158,11,.34), inset 0 1px 0 rgba(255,255,255,.34); }

/* شريحة صغيرة (eyebrow / kicker) */
.rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--rd-r-pill);
    font-size: var(--rd-fs-xs);
    font-weight: 800;
    letter-spacing: var(--rd-ls);
    color: var(--rd-brand-ink);
    background: rgba(26,95,214,.09);
    border: 1px solid rgba(26,95,214,.20);
}
.rd-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 0 4px rgba(22,163,74,.14); }
.rd-chip--dark { color: #eaf2ff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }

/* نص متدرّج — للكلمات المميزة في العناوين */
.rd-grad-text {
    background: var(--rd-grad-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* فfallback لو المتصفح مش داعم background-clip:text */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .rd-grad-text { color: var(--rd-brand); -webkit-text-fill-color: currentColor; }
}
/* التدرّج بيتحرك ببطء — بيدي إحساس حي من غير ما يبقى مستفز */
@keyframes rd-grad { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* عنوان بظل ناعم واحد بدل_stack ظلال_ قديم */
.rd-head {
    font-size: var(--rd-fs-h2);
    font-weight: 800;
    line-height: 1.2;
    margin: 12px 0 14px;
    text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 6px 16px rgba(21,55,120,.10);
}

/* ══════════════════════════ 5) الأزرار ══════════════════════════ */
.rd-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--rd-r-sm);
    font-family: inherit;
    font-size: var(--rd-fs-sm);
    font-weight: 800;
    letter-spacing: var(--rd-ls);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--rd-fast) var(--rd-ease),
        box-shadow var(--rd-med) var(--rd-ease),
        background var(--rd-fast) var(--rd-ease),
        border-color var(--rd-fast) var(--rd-ease),
        color var(--rd-fast) var(--rd-ease);
}
.rd-btn:active { transform: translateY(1px) scale(.995); }

/* اللمعة اللي بتمرّ على الزر عند المرور */
.rd-btn .rd-sheen {
    position: absolute;
    inset: -60% -20%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(72deg, transparent 34%, rgba(255,255,255,.42) 50%, transparent 66%);
    transform: translateX(-130%);
    transition: transform .72s var(--rd-ease-out);
}
.rd-btn:hover .rd-sheen { transform: translateX(130%); }

.rd-btn--primary {
    color: var(--rd-white);
    background: var(--rd-grad-brand);
    box-shadow: var(--rd-sh-brand);
}
.rd-btn--primary:hover {
    background: var(--rd-grad-brand-2);
    box-shadow: 0 16px 38px -10px rgba(38,119,255,.46);
    transform: translateY(-1px);
}
.rd-btn--light {
    color: var(--rd-ink);
    background: var(--rd-white);
    border-color: var(--rd-line);
    box-shadow: var(--rd-sh-1);
}
.rd-btn--light:hover {
    color: var(--rd-brand-ink);
    border-color: var(--rd-brand-2);
    box-shadow: var(--rd-sh-2);
    transform: translateY(-1px);
}
/* على خلفية داكنة (الـ CTA) */
.rd-btn--onDark {
    color: var(--rd-brand-ink);
    background: var(--rd-white);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.42);
}
.rd-btn--onDark:hover { background: #f2f7ff; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); transform: translateY(-1px); }

.rd-btn--ghost {
    color: var(--rd-ink);
    background: transparent;
    border-color: var(--rd-line-2);
}
.rd-btn--ghost:hover { background: rgba(38,119,255,.07); border-color: var(--rd-brand-2); color: var(--rd-brand-ink); }

/* ══════════════════════════ 6) كشف تدريجي عند التمرير ══════════════════════════
   الافتراضي ظاهر عادي: لو الـ JS وقف أو وفشل، النصوص تفضل باينة أصلًا.
   raddan-fx.js بيضيف صنف rd-js على <html> (نفس مهمة تشغيله) ويكشف العناصر
   الظاهرة فورًا — فالحالة المخفية عمرها ما تفضل ثابتة على النص. */
.rd-reveal { opacity: 1; }
html.rd-js .rd-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--rd-slow) var(--rd-ease-out),
        transform var(--rd-slow) var(--rd-ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
html.rd-js .rd-reveal.rd-in { opacity: 1; transform: none; }

.rd-rise { animation: rd-rise var(--rd-slow) var(--rd-ease-out) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes rd-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* بعد ما الأنيميشن يخلص أصلًا (بيشيله raddan-fx.js بعد 2.5 ثانية): نشيله
   نهائيًا عشان أي إطار متأخر أو متجمّد يفضل ظاهر — في المتصفحات العادية
   الأنيميشن خلص من زمان فالتشيل ده ما يغيّرش حاجة بصريًا. */
html.rd-settled .rd-rise { animation: none; }

.rd-float { animation: rd-float 7s ease-in-out infinite; }
@keyframes rd-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* نبضة خفيفة على نقطة الحالة */
.rd-pulse { animation: rd-pulse 2.4s var(--rd-ease) infinite; }
@keyframes rd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.34); }
    50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

/* خط فاصل متدرّج بدل line رمادي */
.rd-rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: linear-gradient(90deg, transparent, var(--rd-line-2) 22%, var(--rd-line-2) 78%, transparent);
}

/* ══════════════════════════ 7) الهيدر اللاصق ══════════════════════════
   شفاف فوق، زجاج بعد ما يعدّي. JS بيحط .rd-stuck. */
.rd-nav { transition: background var(--rd-med) var(--rd-ease), box-shadow var(--rd-med) var(--rd-ease), border-color var(--rd-med) var(--rd-ease); }
.rd-nav.rd-stuck {
    background: rgba(247,250,255,.86);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 10px 30px -18px rgba(16,43,77,.42), inset 0 -1px 0 var(--rd-line);
}

/* ══════════════════════════ 8) تفضيل تقليل الحركة ══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body.rd-body *,
    body.rd-body *::before,
    body.rd-body *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    /* عناصر الكشف تفضل ظاهرة — الحركة بس هي اللي اتشالت */
    body.rd-body .rd-reveal { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════ 9) استجابة ══════════════════════════ */
@media (max-width: 720px) {
    :root {
        --rd-fs-display: clamp(30px, 8.4vw, 40px);
        --rd-fs-h2: clamp(23px, 6.4vw, 30px);
        --rd-fs-body: 15px;
    }
    .rd-card:hover { transform: none; }
    .rd-btn { padding: 12px 18px; }
}