/* ============================================================
   BRAIN SKILL — STUDIO
   طبقة الاتجاه الفنّي للواجهة العامة.

   تُحمَّل فوق brainskill.css ولا تستبدله: نظام التصميم الأساسي يبقى
   كما هو لأن لوحة التحكم وصفحات المصادقة تعتمد عليه. كل ما هنا
   بادئته ‎.st-‎ فلا يتسرّب إلى أي شاشة إدارية.

   اللغة البصرية مشتقّة من مربّعات شعار Brain Skill: وحدات مربّعة
   منحنية الزوايا، خطوط ضوئية، وشبكة رقمية خافتة على كحليّ عميق.

   ما يخصّ الصفحة الرئيسية وحدها (المسرح، عرض المنتجات، البيان،
   القدرات) يعيش في ‎home.css‎ ولا تحمّله بقيّة الصفحات.
   ============================================================ */

:root {
    /* عمق المسرح: من الأسود إلى الكحلي إلى الأزرق الكهربائي */
    --st-void: #02060F;
    --st-deep: #04102E;
    --st-panel: #071A3D;
    --st-line: rgba(120, 180, 255, .14);
    --st-line-soft: rgba(120, 180, 255, .07);

    --st-electric: #1685DA;
    --st-cyan: #4FC3F7;
    --st-glow: rgba(23, 162, 232, .55);

    --st-ink: #FFFFFF;
    --st-ink-70: rgba(226, 240, 255, .72);
    --st-ink-45: rgba(200, 224, 255, .46);

    /* عرض المسرح — أوسع من حاوية الموقع الافتراضية لإحساس سينمائي */
    --st-max: 1680px;
    --st-gutter: clamp(1.25rem, 4vw, 4.5rem);

    --st-nav-h: 76px;

    /* منحنى حركة واحد لكل الانتقالات */
    --st-ease: cubic-bezier(.22, .68, .28, 1);
}

/* ---------- 1. الأساسيات ---------- */
.st-shell {
    background: var(--st-void);
    color: var(--st-ink);
    overflow-x: clip;
}

.st-wrap {
    width: 100%;
    max-width: var(--st-max);
    margin-inline: auto;
    padding-inline: var(--st-gutter);
}

/* الأرقام والأسماء اللاتينية تُقرأ من اليسار دائماً حتى داخل صفحة عربية. */
.st-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* خطّ العرض: Cairo بأثقل وزن متاح — بلا خطوط خارجية.
   الإعداد الافتراضي للعربية: بلا تتبّع سالب (يخنق الحرف)، وبارتفاع سطر
   أوسع يتّسع للتشكيل والنزلات. التضييق اللاتيني يُضاف عند ‎.st-ltr‎ وحده. */
.st-display {
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: 0;
    text-wrap: balance;
}

.st-display.st-ltr {
    line-height: .92;
    letter-spacing: -.035em;
}

/* تنبيه: ‎letter-spacing‎ يفكّ اتصال الحرف العربي، و‎uppercase‎ لا معنى له فيه.
   كلاهما مقصور على النصّ اللاتيني. */
.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: clamp(.72rem, 1.15vw, .84rem);
    font-weight: 700;
    color: var(--st-cyan);
}

.st-eyebrow.st-ltr {
    font-size: clamp(.68rem, 1.1vw, .78rem);
    letter-spacing: .22em;
    text-transform: uppercase;
}

.st-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-cyan));
}

/* ---------- 2. الوحدات المربّعة (لغة الشعار) ---------- */
.st-modules {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.st-module {
    position: absolute;
    border-radius: 26%;
    border: 1px solid rgba(140, 200, 255, .18);
    background: linear-gradient(140deg, rgba(120, 190, 255, .10), rgba(120, 190, 255, 0) 62%);
    will-change: transform;
    animation: st-drift 18s var(--st-ease) infinite alternate;
}

.st-module--lit {
    border-color: rgba(79, 195, 247, .42);
    background: linear-gradient(140deg, rgba(79, 195, 247, .30), rgba(23, 162, 232, .06) 65%);
    box-shadow: 0 0 40px rgba(23, 162, 232, .22);
}

@keyframes st-drift {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(0, -22px, 0) rotate(3deg); }
}

/* شبكة رقمية خافتة — تُرسم بتدرّجين لا بصورة */
.st-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--st-line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--st-line-soft) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
}

/* ---------- 3. شريط التنقّل ---------- */
.st-nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(2, 6, 15, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--st-line);
    transition: background 400ms var(--st-ease), border-color 400ms var(--st-ease);
    /* بلا هذا، الشريط يبقى ملتصقاً بأعلى نافذة العرض الفعلية (top:0) — وهذا
       صحيح داخل تبويب متصفّح عادي (شريط عنوان Safari يحجز تلك المساحة أصلاً
       فتكون env(safe-area-inset-top) صفراً هناك)، لكن بعد أن أصبح تثبيت
       الموقع كتطبيق مستقلّ حقيقياً (وسوم apple-mobile-web-app-* الجديدة) لم
       يعد هناك شريط عنوان يحجب منطقة النظام (الساعة/الشبكة/البطارية على
       آيفون)، فيرتسم الشريط تحتها مباشرة ويصبح زرّ القائمة والشعار غير
       قابلَين للضغط. هذا padding-top يُضاف فوق ارتفاع الشريط لا بدلاً منه،
       ولا أثر له إطلاقاً حين تكون قيمة env() صفراً (كل الحالات غير المثبَّتة). */
    padding-top: env(safe-area-inset-top);
}

/* فوق البطل يبدأ شفّافاً ثم يصلب مع التمرير. */
.st-nav[data-nav-overlay]:not(.is-stuck) {
    background: transparent;
    border-bottom-color: transparent;
}

.st-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--st-nav-h);
}

.st-nav__links {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.st-nav__links a {
    position: relative;
    padding: .55rem .95rem;
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--st-ink-70);
    transition: color 250ms var(--st-ease);
}

.st-nav__links a:hover { color: var(--st-ink); }

/* خطّ ضوئي تحت العنصر النشط بدل الخلفية الممتلئة */
.st-nav__links a.active { color: var(--st-ink); }

.st-nav__links a.active::after {
    content: '';
    position: absolute;
    inset-inline: .95rem;
    bottom: .2rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--st-electric), var(--st-cyan));
}

.st-nav__side {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* روابط الحساب تأتي من شراكة ‎_LoginPartial‎ بلا أصناف خاصة بها،
   فتُنسَّق هنا لتندمج في الشريط بدل أن تظهر نصّاً عارياً يتسرّب من الحافة. */
.st-nav__side > a:not(.st-cta):not(.st-ghost),
.st-menu__foot > a:not(.st-cta):not(.st-ghost) {
    padding: .55rem .9rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--st-ink-70);
    white-space: nowrap;
    transition: color 250ms var(--st-ease);
}

.st-nav__side > a:not(.st-cta):not(.st-ghost):hover,
.st-menu__foot > a:not(.st-cta):not(.st-ghost):hover { color: var(--st-ink); }

/* زرّ الخروج داخل نموذج ‎POST‎ — يأخذ شكل الزرّ الشبحي. */
.st-nav__side .site-nav__form,
.st-menu__foot .site-nav__form { display: inline-flex; margin: 0; }

.st-nav__side .site-nav__form .btn,
.st-menu__foot .site-nav__form .btn {
    padding: .55rem 1.1rem;
    border-radius: 999px;
    font-size: .86rem;
    color: var(--st-ink-70);
    background: transparent;
    border: 1px solid var(--st-line);
    box-shadow: none;
}

.st-nav__side .site-nav__form .btn:hover,
.st-menu__foot .site-nav__form .btn:hover {
    color: var(--st-ink);
    border-color: rgba(79, 195, 247, .5);
    background: transparent;
}

.st-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    /* ضروري: عناصر ‎<button>‎ لا ترث الخطّ من الصفحة كما ترثه الروابط،
       فتظهر بخطّ النظام بدل Cairo متى استُخدم الصنف على زرّ لا على رابط. */
    font-family: inherit;
    font-size: .88rem;
    font-weight: 700;
    color: var(--st-void);
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    box-shadow: 0 6px 22px rgba(23, 162, 232, .32);
    transition: transform 250ms var(--st-ease), box-shadow 250ms var(--st-ease);
}

.st-cta:hover {
    color: var(--st-void);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(23, 162, 232, .45);
}

.st-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    color: var(--st-ink-70);
    border: 1px solid var(--st-line);
    transition: color 250ms var(--st-ease), border-color 250ms var(--st-ease);
}

.st-ghost:hover { color: var(--st-ink); border-color: rgba(79, 195, 247, .5); }

/* المقاس الكبير — أزرار الدعوة الرئيسية في المسرح وأقسام التواصل */
.st-cta--lg,
.st-ghost--lg { padding: .95rem 2rem; font-size: .98rem; }

/* زرّ القائمة على الجوّال */
.st-burger {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    font-family: inherit;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    background: transparent;
    color: var(--st-ink);
    cursor: pointer;
}

/* ---------- 4. قائمة الجوّال ---------- */
.st-menu {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    grid-template-rows: var(--st-nav-h) 1fr;
    background: rgba(2, 6, 15, .97);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms var(--st-ease), visibility 320ms var(--st-ease);
}

.st-menu.is-open { opacity: 1; visibility: visible; }

.st-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--st-gutter);
}

.st-menu__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    padding: 0 var(--st-gutter) calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.st-menu__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--st-line-soft);
    font-size: clamp(1.8rem, 8.4vw, 2.7rem);
    font-weight: 800;
    /* عربي: بلا تتبّع سالب */
    letter-spacing: 0;
    line-height: 1.35;
    color: var(--st-ink);
    /* كل رابط يدخل متأخّراً عن سابقه */
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 420ms var(--st-ease), transform 420ms var(--st-ease);
    transition-delay: calc(var(--i, 0) * 55ms);
}

.st-menu.is-open .st-menu__link { opacity: 1; transform: none; }

.st-menu__link small {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--st-cyan);
}

.st-menu__foot { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- 5. رقائق البيانات المشتركة ---------- */
/* تُستعمل في رأس صفحة تفاصيل التطبيق وفي الصفحة الرئيسية معاً. */
.st-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem;
}

.st-chip {
    padding: .32rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    font-size: .76rem;
    font-weight: 600;
    color: var(--st-ink-70);
}

/* ---------- 6. دعوة التواصل ---------- */
.st-contact {
    position: relative;
    isolation: isolate;
    border-top: 1px solid var(--st-line);
    padding-block: clamp(3rem, 5vw, 4rem);
    background: linear-gradient(180deg, var(--st-void), var(--st-deep));
    overflow: hidden;
}

.st-contact__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.st-contact__title {
    margin: .8rem 0 0;
    font-size: clamp(1.9rem, 5vw, 3.6rem);
    color: var(--st-ink);
}

.st-contact__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- 7. التذييل ---------- */
.st-footer {
    background: var(--st-void);
    border-top: 1px solid var(--st-line);
    padding-block: clamp(3rem, 7vw, 4.5rem) 0;
}

.st-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: 3rem;
}

.st-footer h3 {
    margin: 0 0 1.1rem;
    font-size: .86rem;
    font-weight: 700;
    color: var(--st-cyan);
}

.st-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.st-footer__list a,
.st-footer__list span { color: var(--st-ink-70); font-size: .94rem; }
.st-footer__list a:hover { color: var(--st-ink); }

.st-footer__about { max-width: 40ch; color: var(--st-ink-70); line-height: 1.8; margin: 1rem 0 0; }

/* روابط التواصل الاجتماعي — لا تظهر إلا إذا ضُبطت من لوحة التحكم. */
.st-social {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.st-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--st-line);
    color: var(--st-ink-70);
    transition: color 250ms var(--st-ease), border-color 250ms var(--st-ease),
                background 250ms var(--st-ease);
}

.st-social a:hover {
    color: var(--st-void);
    border-color: transparent;
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
}

.st-footer__bar {
    border-top: 1px solid var(--st-line-soft);
    padding-block: 1.4rem calc(1.4rem + env(safe-area-inset-bottom));
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    justify-content: space-between;
    font-size: .84rem;
    color: var(--st-ink-45);
}

/* ============================================================
   8. الصفحات الداخلية
   بدل إعادة كتابة ترميز كل صفحة، تُلبَس مكوّنات نظام التصميم الأصلية
   ثوب الاستوديو حين تكون داخل ‎.st-shell‎ وحدها. لوحة التحكم لا تحمل
   هذا الصنف أبداً، فلا يصلها شيء من هنا.
   ============================================================ */

/* ---- شريط رأس الصفحة ---- */
.st-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.2rem, 8vw, 5.5rem) clamp(2.4rem, 6vw, 4rem);
    background:
        radial-gradient(ellipse 72% 62% at 50% 0%, rgba(11, 58, 143, .5), transparent 70%),
        linear-gradient(180deg, var(--st-deep), var(--st-void));
    border-bottom: 1px solid var(--st-line);
}

.st-banner__inner { position: relative; z-index: 2; }

.st-banner__title {
    margin: .7rem 0 0;
    font-size: clamp(1.85rem, 5.2vw, 3.6rem);
    color: var(--st-ink);
}

.st-banner__sub {
    margin: .9rem 0 0;
    max-width: 62ch;
    line-height: 1.8;
    color: var(--st-ink-70);
}

/* مسار التصفّح */
.st-crumbs { font-size: .88rem; color: var(--st-ink-45); margin-bottom: .9rem; }
.st-crumbs a { color: var(--st-ink-70); }
.st-crumbs a:hover { color: var(--st-cyan); }

/* ---- الأسطح والنصوص ---- */
.st-shell .section { position: relative; }

.st-shell h1,
.st-shell h2,
.st-shell h3,
.st-shell h4 { color: var(--st-ink); }

.st-shell p,
.st-shell li { color: var(--st-ink-70); }

.st-shell .text-muted { color: var(--st-ink-45); }

.st-shell .section-head__kicker { color: var(--st-cyan); }

.st-shell .section-head p { color: var(--st-ink-70); }

.st-shell strong { color: var(--st-ink); }

/* ---- البطاقات ---- */
.st-shell .card {
    background: linear-gradient(160deg, var(--st-panel), rgba(4, 16, 46, .6));
    border: 1px solid var(--st-line);
    border-radius: 22px;
    box-shadow: none;
    transition: border-color 300ms var(--st-ease), transform 300ms var(--st-ease);
}

.st-shell .card:hover { border-color: rgba(79, 195, 247, .38); }

.st-shell .card__header,
.st-shell .card__footer { border-color: var(--st-line-soft); }

/* ---- الحقول ---- */
.st-shell .form-control,
.st-shell .form-select,
.st-shell textarea.form-control {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--st-line);
    color: var(--st-ink);
    border-radius: 14px;
}

.st-shell .form-control::placeholder { color: var(--st-ink-45); }

.st-shell .form-control:focus,
.st-shell .form-select:focus {
    border-color: rgba(79, 195, 247, .6);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 4px rgba(23, 162, 232, .14);
}

.st-shell .form-label { color: var(--st-ink); }
.st-shell .form-hint { color: var(--st-ink-45); }

/* ---- الأزرار: تأخذ لغة الاستوديو ---- */
.st-shell .btn-primary,
.st-shell .btn-accent {
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    color: var(--st-void);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(23, 162, 232, .3);
}

.st-shell .btn-primary:hover,
.st-shell .btn-accent:hover { color: var(--st-void); transform: translateY(-2px); }

.st-shell .btn-ghost,
.st-shell .btn-outline,
.st-shell .btn-glass {
    background: transparent;
    color: var(--st-ink-70);
    border: 1px solid var(--st-line);
    border-radius: 999px;
}

.st-shell .btn-ghost:hover,
.st-shell .btn-outline:hover,
.st-shell .btn-glass:hover {
    color: var(--st-ink);
    border-color: rgba(79, 195, 247, .5);
    background: transparent;
}

/* ---- رقائق التصنيف وشريط الأدوات ---- */
.st-shell .chip {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--st-line);
    color: var(--st-ink-70);
    border-radius: 999px;
}

.st-shell .chip:hover { color: var(--st-ink); border-color: rgba(79, 195, 247, .45); }

.st-shell .chip.is-active {
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    border-color: transparent;
    color: var(--st-void);
}

/* ---- الحالة الفارغة ---- */
.st-shell .empty-state {
    background: linear-gradient(160deg, var(--st-panel), rgba(4, 16, 46, .5));
    border: 1px dashed var(--st-line);
    border-radius: 26px;
    color: var(--st-ink-70);
}

.st-shell .empty-state__icon {
    background: rgba(23, 162, 232, .16);
    color: var(--st-cyan);
}

/* ---- الخطّ الزمني ---- */
.st-shell .timeline { border-color: var(--st-line-soft); }
.st-shell .timeline::before { background: var(--st-line); }
.st-shell .timeline__item::before { background: var(--st-void); }
.st-shell .timeline__version { color: var(--st-ink); }

.st-shell .badge--gray {
    background: rgba(255, 255, 255, .07);
    color: var(--st-ink-70);
}

/* ---- إطار التجربة المباشرة ---- */
.st-shell .demo-shell {
    background: var(--st-panel);
    border: 1px solid var(--st-line);
    border-radius: 22px;
    overflow: hidden;
}

.st-shell .demo-shell__bar { background: rgba(255, 255, 255, .05); border-color: var(--st-line-soft); }

/* ---- التنبيهات ---- */
/* النوع وحده كان يُميَّز بلون الحافّة، بينما الخلفية والنصّ يبقيان بنفس
   لون الفقرات العادية — فيبدو خطأ حرج (رمز دعوة خاطئ، حظر مؤقّت) مجرّد
   ملاحظة عابرة يسهل تفويتها. كل نوع الآن له خلفية ونصّ ملوَّنان بالفعل،
   لا الحافّة فقط. */
.st-shell .alert {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--st-line);
    color: var(--st-ink-70);
    border-radius: 16px;
}

.st-shell .alert--info    { background: rgba(23, 162, 232, .13);  border-color: rgba(23, 162, 232, .45);  color: #93D9FB; }
.st-shell .alert--success { background: rgba(22, 163, 74, .13);   border-color: rgba(22, 163, 74, .45);   color: #86EFAC; }
.st-shell .alert--warning { background: rgba(217, 119, 6, .14);   border-color: rgba(217, 119, 6, .5);    color: #FCD34D; }
.st-shell .alert--danger  { background: rgba(220, 38, 38, .14);   border-color: rgba(220, 38, 38, .5);    color: #FCA5A5; }

/* ---- بطاقة التطبيق على السطح الداكن ---- */
.st-shell .app-card {
    background: linear-gradient(160deg, var(--st-panel), rgba(4, 16, 46, .72));
    border: 1px solid var(--st-line);
    box-shadow: none;
}

.st-shell .app-card:hover {
    border-color: rgba(79, 195, 247, .42);
    box-shadow: 0 24px 60px rgba(2, 6, 15, .7);
}

.st-shell .app-card__title { color: var(--st-ink); }
.st-shell .app-card__desc { color: var(--st-ink-70); }
.st-shell .app-card__spec-val { color: var(--st-ink-70); }
.st-shell .app-card__spec-key { color: var(--st-cyan); }
.st-shell .app-card__spec-sep { background: var(--st-line); }

/* ---- شريط أسود قديم داخل الاستوديو: يذوب في الخلفية ---- */
.st-shell .bs-band-black {
    background: linear-gradient(180deg, var(--st-void), var(--st-deep));
    border-block: 1px solid var(--st-line);
}

/* ============================================================
   8-ب. شاشات المصادقة وصفحة «غير متصل»
   هذه صفحات يراها العموم — لا تخصّ لوحة التحكم — فتأخذ لغة الاستوديو.
   الترميز يبقى كما هو والنماذج لا تُمسّ؛ الثوب وحده يتغيّر.
   ============================================================ */

.st-shell .auth-shell { background: var(--st-void); }

/* لوحة الهوية الجانبية */
.st-shell .auth-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 30% 10%, rgba(11, 58, 143, .55), transparent 70%),
        linear-gradient(160deg, var(--st-deep), var(--st-void));
    border-inline-end: 1px solid var(--st-line);
}

/* الاستثناء ضروري: القاعدة على ‎> *‎ كانت تفرض ‎position: relative‎ على
   طبقتَي الشبكة والمكعّبات أيضاً، فتُلغي ‎absolute‎ عنهما وتنهار الطبقتان
   إلى كتلة بلا ارتفاع — فتختفي المكعّبات تماماً. */
.st-shell .auth-brand > :not(.st-grid):not(.st-modules) {
    position: relative;
    z-index: 2;
}

.st-shell .auth-brand__content h2 {
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--st-ink);
}

.st-shell .auth-brand__content p { color: var(--st-ink-70); line-height: 1.85; }

.st-shell .auth-brand__contact { color: var(--st-ink-45); border-top: 1px solid var(--st-line-soft); }
.st-shell .auth-brand__contact span { color: var(--st-ink-45); }

/* لوحة النموذج */
.st-shell .auth-panel {
    background: var(--st-void);
    position: relative;
    isolation: isolate;
}

/* في التصميم الأصلي لم تكن ‎.auth-card‎ بطاقة أصلاً — كانت مجرّد غلاف يحدّد
   العرض، واللوحة البيضاء خلفها هي السطح. لمّا صارت لوحاً داكناً مرئياً لزمها
   حشو داخلي، وإلّا التصق المحتوى بحوافّها وبدا غير مرتّب. */
.st-shell .auth-card {
    position: relative;
    z-index: 2;
    max-width: 452px;
    padding: clamp(1.7rem, 3.5vw, 2.5rem);
    background: linear-gradient(160deg, var(--st-panel), rgba(4, 16, 46, .72));
    border: 1px solid var(--st-line);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(2, 6, 15, .6);
}

.st-shell .auth-card h1,
.st-shell .auth-card h2 {
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--st-ink);
}

.st-shell .auth-card p,
.st-shell .auth-card label { color: var(--st-ink-70); }

/* السطر التعريفي تحت العنوان مباشرة، ثم مسافة واحدة قبل النموذج. */
.st-shell .auth-card > p:first-of-type { margin: .5rem 0 0; font-size: .94rem; }
.st-shell .auth-card form { margin-top: 1.6rem; }

/* إيقاع موحّد بين الحقول */
.st-shell .auth-card .form-group { margin-bottom: 1.1rem; }
.st-shell .auth-card .form-label { display: block; margin-bottom: .45rem; font-weight: 600; }
.st-shell .auth-card .form-control { padding: .8rem 1rem; }

/* مربّع «أبقني مسجّلاً»: العنصر ولصيقته على سطر واحد متّزن */
.st-shell .auth-card .form-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.5rem;
}

.st-shell .auth-card .form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--st-electric);
}

.st-shell .auth-card .btn-block { width: 100%; }

/* الملاحظة والرابط أسفل البطاقة يُفصلان بخطّ رفيع لا بفراغ فقط */
.st-shell .auth-card .alert {
    margin-top: 1.5rem;
    font-size: .9rem;
    line-height: 1.75;
}

.st-shell .auth-card > p:last-child {
    margin: 1.3rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--st-line-soft);
    text-align: center;
    font-size: .88rem;
}

.st-shell .auth-card a { color: var(--st-cyan); }
.st-shell .auth-card a:hover { color: var(--st-ink); }

/* الروابط النصّية والفواصل داخل بطاقة المصادقة */
.st-shell .auth-card hr { border-color: var(--st-line-soft); }

/* رسائل التحقّق تبقى محمرّة لكن على سطح داكن */
.st-shell .field-validation-error,
.st-shell .validation-summary-errors { color: #FF8A8A; }

/* ---- صفحة «غير متصل» ---- */
.st-offline {
    position: relative;
    isolation: isolate;
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 50% 12%, rgba(11, 58, 143, .5), transparent 70%),
        linear-gradient(180deg, var(--st-deep), var(--st-void));
}

.st-offline__inner { position: relative; z-index: 2; max-width: 52ch; text-align: center; }

.st-offline__title {
    margin: 1.3rem 0 0;
    font-size: clamp(1.7rem, 5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--st-ink);
}

.st-offline__body { margin: 1rem 0 1.8rem; line-height: 1.85; color: var(--st-ink-70); }

/* ---------- 9. الظهور عند التمرير ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 750ms var(--st-ease), transform 750ms var(--st-ease);
    transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 10. التجاوب ---------- */
@media (max-width: 1100px) {
    .st-contact__grid { grid-template-columns: 1fr; }
    .st-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .st-nav__links { display: none; }
    /* روابط الحساب وزرّ الدعوة تعيش في قائمة الجوّال، فتُخفى من الشريط. */
    .st-nav__side > a,
    .st-nav__side .site-nav__form { display: none; }
    .st-burger { display: grid; }
}

@media (max-width: 640px) {
    /* بطاقة الشعار/الوصف (أول عنصر) تبقى سطراً كاملاً بمفردها، والأعمدة
       الثلاثة الباقية (روابط سريعة، منتجاتنا، تواصل معنا) تصطفّ جنباً إلى
       جنب في صفّ واحد تحتها بدل تكديسها الأربعة عمودياً كاملة — "روابط
       سريعة" بجانب "منتجاتنا"، و"منتجاتنا" بجانب "تواصل معنا" مباشرة. القوائم
       داخل كل عمود ضيّق تبقى رأسية كما هي (لا معنى للالتفاف الأفقي في عمود
       بهذا الضيق).*/
    .st-footer__grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1rem;
    }

    .st-footer__grid > div:first-child {
        grid-column: 1 / -1;
    }

    .st-footer__list { font-size: .9em; }

    .st-contact__actions .st-cta,
    .st-contact__actions .st-ghost { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 11. الدردشة الآلية ---------- */
/* عنصر عائم مستقلّ الهوية البصرية عن سطح الصفحة (فاتح أو داكن/‎st-shell‎)،
   فيبقى متّسقاً بنفس ألوان العلامة التجارية في كل صفحات الموقع العام. */
.st-chat {
    position: fixed;
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    inset-inline-end: 1.25rem;
    z-index: 200;
}

.st-chat__fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--st-void);
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    box-shadow: 0 10px 30px rgba(23, 162, 232, .42);
    transition: transform 250ms var(--st-ease), box-shadow 250ms var(--st-ease);
}

.st-chat__fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(23, 162, 232, .5); }

.st-chat__fab-icon { position: absolute; transition: opacity 200ms var(--st-ease), transform 200ms var(--st-ease); }
.st-chat__fab-icon--close { opacity: 0; transform: scale(.6); }
.st-chat.is-open .st-chat__fab-icon--chat { opacity: 0; transform: scale(.6); }
.st-chat.is-open .st-chat__fab-icon--close { opacity: 1; transform: scale(1); }

.st-chat__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: calc(100% + .9rem);
    width: min(380px, calc(100vw - 2.5rem));
    max-height: min(640px, calc(100vh - 7rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--st-line);
    background: linear-gradient(165deg, var(--st-panel), var(--st-deep) 85%);
    box-shadow: 0 30px 80px rgba(2, 6, 15, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.97);
    transform-origin: bottom left;
    transition: opacity 260ms var(--st-ease), transform 260ms var(--st-ease), visibility 260ms var(--st-ease);
}

.st-chat__panel.is-open { opacity: 1; visibility: visible; transform: none; }

.st-chat__head {
    position: relative;
    flex: none;
    padding: 1.6rem 1.4rem 1.2rem;
    text-align: center;
    border-bottom: 1px solid var(--st-line-soft);
    background: radial-gradient(ellipse 100% 100% at 50% -10%, rgba(23, 162, 232, .22), transparent 65%);
}

.st-chat__close {
    position: absolute;
    inset-block-start: .8rem;
    inset-inline-start: .8rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--st-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--st-ink-70);
    cursor: pointer;
    transition: color 200ms var(--st-ease), border-color 200ms var(--st-ease);
}

.st-chat__close:hover { color: var(--st-ink); border-color: rgba(79, 195, 247, .5); }

.st-chat__logo {
    display: block;
    margin: 0 auto .6rem;
    border-radius: 14px;
}

.st-chat__welcome { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--st-ink); }
.st-chat__question { margin: .25rem 0 0; font-size: .88rem; color: var(--st-ink-70); }

.st-chat__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom));
    gap: .8rem;
}

.st-chat__loading { display: flex; justify-content: center; gap: .3rem; padding: 1.5rem 0; }
.st-chat__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--st-cyan);
    animation: st-chat-bounce 1.1s ease-in-out infinite;
}
.st-chat__dot:nth-child(2) { animation-delay: .15s; }
.st-chat__dot:nth-child(3) { animation-delay: .3s; }

@keyframes st-chat-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* ---- نموذج تعريف الزائر (أول فتح فقط) ---- */
.st-chat__intake { display: flex; flex-direction: column; gap: .9rem; }
.st-chat__intake-note { margin: 0; font-size: .84rem; line-height: 1.7; color: var(--st-ink-70); }

.st-chat__field { display: flex; flex-direction: column; gap: .35rem; }
.st-chat__field label { font-size: .82rem; font-weight: 600; color: var(--st-ink-70); }
.st-chat__field input {
    padding: .65rem .9rem;
    border-radius: 12px;
    border: 1px solid var(--st-line);
    background: rgba(255, 255, 255, .04);
    color: var(--st-ink);
    font: inherit;
}
.st-chat__field input::placeholder { color: var(--st-ink-45); }
.st-chat__field input:focus {
    outline: none;
    border-color: rgba(79, 195, 247, .6);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 4px rgba(23, 162, 232, .14);
}

.st-chat__submit { border: none; cursor: pointer; width: 100%; justify-content: center; }

.st-chat__error {
    margin: 0;
    padding: .6rem .8rem;
    border-radius: 10px;
    background: rgba(255, 90, 90, .12);
    border: 1px solid rgba(255, 90, 90, .3);
    color: #FF8A8A;
    font-size: .82rem;
}

/* ---- المحادثة ---- */
.st-chat__thread {
    flex: 1;
    min-height: 120px;
    max-height: 340px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-inline-end: .2rem;
}

.st-chat__msg { display: flex; max-width: 84%; }
.st-chat__msg-text {
    margin: 0;
    padding: .55rem .85rem;
    border-radius: 14px;
    font-size: .88rem;
    line-height: 1.65;
    direction: rtl;
    unicode-bidi: plaintext;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Visitor-facing Arabic is RTL, but phone numbers, email, URLs, domains and
   version tokens must retain their logical LTR order. The widget creates these
   elements with textContent, so isolation never requires unsafe HTML. */
.st-chat__msg-text .st-chat__bidi {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    white-space: nowrap;
}
.st-chat__msg-text .st-chat__link-label { direction: auto; }
.st-chat__msg-text a.st-chat__bidi { color: var(--st-cyan); text-decoration: underline; text-underline-offset: 2px; }
.st-chat__msg-text a.st-chat__bidi:hover { color: var(--st-ink); }

.st-chat__msg--visitor { align-self: flex-end; }
.st-chat__msg--visitor .st-chat__msg-text {
    color: var(--st-void);
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    border-end-end-radius: 4px;
}

.st-chat__msg--bot { align-self: flex-start; }
.st-chat__msg--bot .st-chat__msg-text {
    color: var(--st-ink);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--st-line-soft);
    border-end-start-radius: 4px;
}

.st-chat__msg--thinking .st-chat__msg-text::after {
    content: '  • • •';
    display: inline-block;
    letter-spacing: .16em;
    animation: st-chat-thinking 1.2s ease-in-out infinite;
}

@keyframes st-chat-thinking {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    .st-chat__msg--thinking .st-chat__msg-text::after { animation: none; opacity: .8; }
}

.st-chat__suggestions:not([hidden]) { display: flex; flex-wrap: wrap; gap: .45rem; }
.st-chat__chip {
    padding: .4rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    background: rgba(255, 255, 255, .04);
    color: var(--st-ink-70);
    font-size: .78rem;
    cursor: pointer;
    transition: color 200ms var(--st-ease), border-color 200ms var(--st-ease);
}
.st-chat__chip:hover { color: var(--st-ink); border-color: rgba(79, 195, 247, .5); }

.st-chat__composer {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .3rem .3rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    background: rgba(255, 255, 255, .04);
}

.st-chat__composer input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--st-ink);
    font: inherit;
    padding: .5rem 0;
}
.st-chat__composer input::placeholder { color: var(--st-ink-45); }
.st-chat__composer input:focus { outline: none; }

.st-chat__send {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    color: var(--st-void);
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    cursor: pointer;
    transition: transform 200ms var(--st-ease), opacity 200ms var(--st-ease);
}
.st-chat__send:hover { transform: scale(1.06); }
.st-chat__send:disabled,
.st-chat__composer input:disabled { opacity: .5; cursor: default; }

.st-chat__hint {
    flex: none;
    margin: 0;
    font-size: .74rem;
    text-align: center;
    color: var(--st-ink-45);
}
.st-chat__hint a { color: var(--st-cyan); }
.st-chat__hint a:hover { color: var(--st-ink); }

@media (max-width: 480px) {
    .st-chat { inset-inline-end: 1rem; inset-block-end: max(1rem, env(safe-area-inset-bottom)); }
    .st-chat__panel {
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 6.5rem);
    }
}

/* ---------- 12.5 أيقونة مكعّبات متحرّكة باستمرار (صفحة /Faq) ----------
   .app-card__cube الأصلية لا تتحرّك إلا عند :hover على والدها .app-card —
   بلا فائدة هنا لأن الأيقونة ثابتة (بلا تفاعل مؤشر). هذه القاعدة تمنحها
   حركة انسيابية دائمة بنفس روح .st-module في الهيرو، بالانطلاق من موضع كل
   مكعّب الأصلي نفسه (لا تغيير في التخطيط القطري) والتذبذب حوله بخفّة. */
.faq-app-icon .app-card__cube:nth-child(1) { animation: faq-icon-drift-1 5s ease-in-out infinite alternate; }
.faq-app-icon .app-card__cube:nth-child(2) { animation: faq-icon-drift-2 5s ease-in-out infinite alternate; animation-delay: .4s; }
.faq-app-icon .app-card__cube:nth-child(3) { animation: faq-icon-drift-3 5s ease-in-out infinite alternate; animation-delay: .8s; }
.faq-app-icon .app-card__cube:nth-child(4) { animation: faq-icon-drift-4 5s ease-in-out infinite alternate; animation-delay: 1.2s; }
.faq-app-icon .app-card__cube:nth-child(5) { animation: faq-icon-drift-5 5s ease-in-out infinite alternate; animation-delay: 1.6s; }

@keyframes faq-icon-drift-1 { from { transform: translate(-190%, -170%); } to { transform: translate(-197%, -177%); } }
@keyframes faq-icon-drift-2 { from { transform: translate(-120%, -100%); } to { transform: translate(-127%, -107%); } }
@keyframes faq-icon-drift-3 { from { transform: translate(-50%, -30%); }   to { transform: translate(-57%, -37%); } }
@keyframes faq-icon-drift-4 { from { transform: translate(20%, 40%); }     to { transform: translate(13%, 33%); } }
@keyframes faq-icon-drift-5 { from { transform: translate(90%, 110%); }    to { transform: translate(83%, 103%); } }

/* ---------- 13. مركز مساعدة الأسئلة الشائعة (/Faq) ----------
   قائمة جانبية بالتطبيقات + لوحة تفاصيل واحدة تعرض القسم المختار فقط —
   كل الأقسام موجودة في DOM دائماً (لا فرق عن السلوك السابق) وJS فقط يُخفي
   غير النشط عبر خاصية hidden، فيبقى المحتوى مطابقاً لبيانات FAQPage JSON-LD
   بصرف النظر عن القسم الظاهر، ويبقى الموقع مستخدَماً بالكامل بلا جافاسكربت
   (كل الأقسام تظهر مكدَّسة تباعاً كما كانت). */
.faq-kb { display: grid; grid-template-columns: 260px 1fr; gap: 1.75rem; align-items: start; min-width: 0; }

/* min-width: 0 على عناصر الشبكة/المرن أدناه ضروري — بلا هذا، تفرض المحتويات
   الطويلة (سلسلة الأسئلة، شريط الرقائق) عرضها الجوهري على أسلافها فيتّسع
   الجسم بأكمله أفقياً بدل أن يبقى المحتوى الزائد محصوراً داخل تمريره
   الخاص (overflow-x على faq-kb__nav تحديداً). */
.faq-kb__side { position: sticky; top: calc(var(--st-nav-h) + 1rem); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.faq-kb__main { min-width: 0; }

.faq-kb__nav { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.faq-kb__group {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .65rem .85rem; border-radius: 14px; border: 1px solid transparent;
    background: transparent; color: var(--st-ink-70); font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer; text-align: start;
    transition: background 220ms var(--st-ease), color 220ms var(--st-ease), border-color 220ms var(--st-ease);
}

.faq-kb__group:hover { background: var(--st-line-soft); color: var(--st-ink); }

.faq-kb__group.is-active {
    background: rgba(79, 195, 247, .12);
    border-color: rgba(79, 195, 247, .35);
    color: var(--st-ink);
}

.faq-kb__group-icon { width: 28px; height: 28px; flex: none; border-radius: 9px; }
.faq-kb__panel-icon { width: 52px; height: 52px; flex: none; border-radius: 14px; }

.faq-kb__group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.faq-kb__group-count {
    margin-inline-start: auto; flex: none; font-size: .72rem; font-weight: 700;
    color: var(--st-ink-45); background: rgba(255, 255, 255, .06);
    border-radius: 999px; padding: .1rem .5rem;
}

.faq-kb__group.is-active .faq-kb__group-count { color: var(--st-cyan); }

.faq-kb__panel-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }

.faq-kb__empty { color: var(--st-ink-45); font-size: .88rem; padding: .5rem 0 0; }

/* ---------- قائمة أسئلة بفواصل لا بطاقات مربَّعة — تطابق التصميم المعتمد
   فعلياً في المعاينة التفاعلية (kb-item)، بدل .card السابقة. ---------- */
.faq-kb__item { border-bottom: 1px solid var(--st-line-soft); padding: 1rem 0; }
.faq-kb__item:last-child { border-bottom: none; }

.faq-kb__item summary {
    cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    color: var(--st-ink);
}

.faq-kb__item summary::-webkit-details-marker { display: none; }
.faq-kb__item summary::after { content: '+'; color: var(--st-cyan); font-size: 1.1rem; flex: none; }
.faq-kb__item[open] summary::after { content: '\2212'; }

.faq-kb__item p { color: var(--st-ink-45); font-size: .85rem; line-height: 1.85; margin: .7rem 0 0; }

@media (max-width: 860px) {
    .faq-kb { grid-template-columns: 1fr; }
    .faq-kb__side { position: static; }
    /* التفاف بدل تمرير أفقي — يتفادى بدء موضع التمرير من نهاية غير بديهية
       في سياق RTL، ويُظهر كل الأقسام دفعة واحدة بلا حاجة لسحب جانبي مخفي. */
    .faq-kb__nav { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
    .faq-kb__group { flex: none; width: auto; }
    .faq-kb__group-label { max-width: 140px; }
}

@media (max-width: 560px) {
    .faq-kb__group-label { max-width: 100px; }
    .faq-kb__group { padding: .55rem .7rem; font-size: .82rem; }
    .faq-kb__panel-icon { width: 40px; height: 40px; }
    .faq-kb__item summary { font-size: .88rem; gap: .6rem; }
}

/* ---------- 13.5 نقاط سيان نابضة (بنفس روح .st-node في هيرو الصفحة
   الرئيسية، المُعرَّفة في home.css غير المُحمَّل هنا) — عدد أكبر ومبعثَر
   عبر خلفية القسم كاملة بدل ثلاث نقاط فقط حول صورة واحدة. ---------- */
.faq-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.faq-node {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--st-cyan);
    box-shadow: 0 0 14px 4px rgba(79, 195, 247, .5);
    animation: faq-node-pulse 3.6s cubic-bezier(.45, .05, .55, .95) infinite;
}

@keyframes faq-node-pulse {
    0%, 100% { opacity: .28; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .faq-node { animation: none; opacity: .7; }
}

/* ---------- 14. نافذة تقييم رضا الزوّار (منبثقة عامة على الموقع) ---------- */
/* عنصر ثابت الموضع يُدرَج مرّة واحدة عبر ‎_Layout.cshtml‎، ‎testimonial-modal.js‎
   يتحكّم بظهورها (تأخير زمني/تفاعل) وبإرسال النموذج — نفس منهجية الدردشة
   الآلية أعلاه (ترميز ثابت هنا، منطق في JS منفصل). */
.st-tmodal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(2, 6, 15, .6);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--st-ease), visibility 260ms var(--st-ease);
}

.st-tmodal__backdrop.is-open { opacity: 1; visibility: visible; }

.st-tmodal {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: min(600px, calc(100vh - 2.5rem));
    overflow-y: auto;
    border-radius: 22px;
    border: 1px solid var(--st-line);
    background: linear-gradient(165deg, var(--st-panel), var(--st-deep) 85%);
    box-shadow: 0 30px 80px rgba(2, 6, 15, .55);
    padding: 1.6rem 1.4rem;
    transform: translateY(14px) scale(.97);
    transition: transform 260ms var(--st-ease);
}

.st-tmodal__backdrop.is-open .st-tmodal { transform: none; }

.st-tmodal__close {
    position: absolute;
    inset-block-start: .8rem;
    inset-inline-start: .8rem;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--st-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    color: var(--st-ink-70);
    cursor: pointer;
    transition: color 200ms var(--st-ease), border-color 200ms var(--st-ease);
}

.st-tmodal__close:hover { color: var(--st-ink); border-color: rgba(79, 195, 247, .5); }

.st-tmodal__head { text-align: center; margin-bottom: 1rem; }
.st-tmodal__title { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 800; color: var(--st-ink); }
.st-tmodal__sub { margin: 0; font-size: .85rem; color: var(--st-ink-70); }

.st-tmodal__stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: .25rem;
    margin: 1rem 0;
}

.st-tmodal__stars input { position: absolute; opacity: 0; width: 0; height: 0; }

.st-tmodal__stars label {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--st-line);
    cursor: pointer;
    transition: color 150ms var(--st-ease);
}

.st-tmodal__stars input:checked ~ label,
.st-tmodal__stars label:hover,
.st-tmodal__stars label:hover ~ label { color: #f5b301; }

.st-tmodal textarea {
    width: 100%;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    padding: .7rem .9rem;
    font-family: inherit;
    font-size: .9rem;
    color: var(--st-ink);
    background: rgba(255, 255, 255, .03);
    resize: vertical;
    min-height: 72px;
}

.st-tmodal textarea:focus { outline: 2px solid var(--st-cyan); outline-offset: 1px; }

.st-tmodal__submit {
    width: 100%;
    margin-top: .9rem;
    padding: .75rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--st-cyan), var(--st-electric));
    color: var(--st-void);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
}

.st-tmodal__reviews { display: none; flex-direction: column; gap: .7rem; margin-top: .8rem; max-height: 220px; overflow-y: auto; }
.st-tmodal__reviews.has-items { display: flex; }
.st-tmodal__review { border-top: 1px solid var(--st-line-soft); padding-top: .6rem; font-size: .85rem; }
.st-tmodal__review-stars { color: #f5b301; letter-spacing: 1px; }
.st-tmodal__review-text { margin: .2rem 0 0; color: var(--st-ink-70); }
.st-tmodal__review-name { color: var(--st-ink); font-weight: 700; }

.st-tmodal__thanks { text-align: center; padding: .5rem 0; display: none; }
.st-tmodal__thanks.is-visible { display: block; }
.st-tmodal__thanks-check {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(26, 138, 94, .15); color: #3ddc97;
    display: grid; place-items: center; margin: 0 auto .7rem; font-size: 1.5rem;
}

/* ---------- 12. تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    .st-module { animation: none; }
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .st-menu__link { transition: none; }
    .st-chat__panel { transition: none; }
    .st-chat__dot { animation: none; }
    .faq-app-icon .app-card__cube { animation: none; }
    .st-tmodal__backdrop, .st-tmodal { transition: none; }
}