/* ═══════════════════════════════════════════════════════
 *  features-ai-assistant.css — ورقة صفحة /features/ai-assistant
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦)، ثم أُعيد **بناؤها**
 *     بنيةً وإيقاعًا لا لونًا فقط (٦ سبتمبر ٢٠٢٦):
 *     · كل قسم = رأس قسم (.hd) + مكوّن واحد من كتالوج الرئيسية.
 *     · تناوب سطحين فقط: #fff ثم var(--panel) — لا قسمان متتاليان بلون واحد.
 *     · العمق بالحدّ 1px لا بالظلّ؛ الظلّ للنوافذ المحاكاة (.mock/.scene) وحدها.
 *     · الأوزان على سلّم CLAUDE.md: 800 للعنوان الرئيسي وحده · 500 فرعي/زر · 400 متن · 300 lead.
 *     · اتّجاهيًّا محايد (margin-inline / padding-inline) — لا نسخة ‎-en لها.
 *  ثم جولة تصحيح المراجعة (٦ سبتمبر ٢٠٢٦):
 *     · عنوان كل قسم صار بنصفين (‎.dim خافت) كعناوين الرئيسية الأربعة عشر.
 *     · الأيقونات صارت SVG خطّية (stroke 1.8) في بلاطات 40px و30px،
 *       والأيقونة الصلبة القديمة محيَّدة بـdisplay:none لا محذوفة.
 *     · انتقال البطاقات والأرقام أُعيد بناؤه: التأخير المتدرّج على خاصيّتي
 *       الظهور وحدهما، والمرور على translate بلا تأخير.
 *     · إزاحة جواب السؤال 18px — كآخر قاعدة في home-v4.css بالحرف.
 *  ثم جولة المراجعة القويّة الثالثة (٦ سبتمبر ٢٠٢٦) — كلها مقيسة بالـDOM لا مُقدَّرة:
 *     · لغة الأيقونات وُحِّدت في **كل** مواضعها (كانت 12 من 29): الحاجب · الزرّان ·
 *       الكبسولات الأربع · وسوم المحركات الخمسة · قائمة المحركات · شارة الإدراج.
 *       الأيقونة الصلبة تبقى في الترميز محيَّدة بـdisplay:none — لا تُحذف.
 *     · النقطة الزرقاء (‎.wtq-v4 .eyebrow::before‎ في home-v4.css:214) دخلت الصفحة:
 *       داخل حاجب الهيرو، وفوق عنوان كل قسم — قواعد خالصة بلا كلمة نصّ جديدة.
 *     · وزن النصف الخافت 700 كما تعلنه الرئيسية صراحةً (كان 800 بالوراثة).
 *     · لون عنوان النافذة المحاكاة رُفع من ‎--faint‎ (2.82) إلى ‎--muted‎ (5.11 مقيس) —
 *       ثالث حالة من الحالات المتطابقة، وأُختِمت هنا. الحجم 10.5px باقٍ كالرئيسية.
 *     · إزاحة جواب السؤال صارت 62px على طرف السطر — نسخة عن الرئيسية بالقياس
 *       لا بالقراءة (المقيس عندها ‎0px 18px 18px 62px‎ عند 1240).
 * ═══════════════════════════════════════════════════════ */

/* ── الرموز: أسماء بديلة لرموز wtq-v4-base.css (جسر احتياطي) ── */
.fx{--pb:var(--blue);--pb2:var(--blue-700);--nv:var(--ink);--mut:var(--muted);--soft:var(--panel);--soft2:var(--blue-50);--gold:var(--blue);--greenbg:var(--green-50);color-scheme:light}
.fx{color:var(--ink);line-height:1.75;background:#fff;overflow-x:clip}
/* <b> يرث 700 من المتصفّح — السلّم يجعل عنوان الصفّ 500 */
.fx b{font-weight:500}

/* ═══ ١. التخطيط والإيقاع ═══════════════════════════════
   الحاوية var(--maxw) بحشو 28px · القسم 96px (64 تحت 900px) ·
   الفصل بالفراغ وتناوب السطح لا بحدّ مرسوم. */
.fx .w{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.fx section{padding:96px 0;background:#fff}
/* تناوب الأسطح: هيرو أبيض ← شريط panel ← أرقام أبيض ← كيف تعمل panel
   ← البطاقات أبيض ← المحركات panel ← الأسئلة أبيض ← الختام panel */
.fx .s-stats,.fx .s-feat,.fx .s-faq{background:#fff}
.fx .s-how,.fx .s-eng,.fx section.finsec{background:var(--panel)}

/* رأس القسم: h2 ثم lead، موسَّط بعرض 780px وهامش سفلي 48px (كالرئيسية) */
.fx .hd{max-width:780px;margin:0 auto 48px;text-align:center}
.fx .hd.start{max-width:none;margin:0;text-align:start}
/* خانة رأس بلا كلمات لقسم الأرقام: تحمل النقطة وحدها في موضع رأس القسم.
   كلماتها قرار نصّ للمالك — لا تُخترع هنا (قاعدة «لا نصّ جديد» في الموجز). */
.fx .hd.mark{margin-bottom:0}

/* ═══ ٢. الطباعة ═══════════════════════════════════════ */
.fx .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;font-size:12.5px;margin:0 0 14px}
/* ── النقطة الزرقاء: أوضح توقيع بصري لرؤوس الرئيسية ──
   الوصفة نسخة حرفية عن home-v4.css:214
   (‎.wtq-v4 .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
     background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}‎).
   تدخل هنا في موضعين: داخل حاجب الهيرو بدل الأيقونة الصلبة، وفوق عنوان كل قسم
   (‎.hd‎ غير ‎.start‎). وهي **قواعد خالصة** لا تضيف كلمة واحدة، فلا تمسّ حارس النصّ. */
.fx .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15);flex:none}
/* ⚠️ «النقطة الزرقاء العارية» أُزيلت: توقيع رأس الرئيسية «نقطة + كلمة» داخل .eyebrow لا نقطة وحدها،
   وإضافة الكلمة تستلزم نصًّا جديدًا (ممنوع على الوكيل) — فالرأس يبقى نظيفًا بلا قرص سابح. */

.fx h1{font-size:clamp(32px,4.2vw,48px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.28;margin:0 0 18px}
/* السطر الثاني من العنوان كتلة خافتة تحت الأولى — تمامًا كهيرو الرئيسية.
   والوزن 700 لا 800: مقيس على الرئيسية ‎.wtq-v4 .hero h1 .dim‎ = 700 (وهو معلَن في
   home-v4.css:56). الدرس الحاكم في CLAUDE.md: العيب يُعدَّد في كل مواضعه —
   فالنصف الخافت في الهيرو مثل النصف الخافت في رؤوس الأقسام سواءً بسواء. */
.fx h1 .g{display:block;color:var(--faint);font-weight:var(--dim-w);margin-top:.18em}
.fx .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch;margin:0}
.fx .sec-h{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);margin:0;letter-spacing:-.03em;line-height:1.7}
.fx .sec-p{color:var(--muted);margin:16px auto 0;font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;max-width:62ch}
/* عنوان القسم بنصفين — التوقيع البصري لعناوين الرئيسية: نصف بلون الحبر ونصف خافت.
   ⚠️ تصحيح قياس: الرئيسية **تعلن** الوزن 700 صراحةً لهذا العنصر بالذات
      (‎.wtq-v4 .sec h2 .dim{color:var(--faint); font-weight:700}‎ — home-v4.css:214)،
      والوراثة هنا كانت تعطيه 800 (مقيس) فيخرج النصف الخافت أثقل من نظيره في المرجع.
   ولماذا يمرّ الرقم عبر رمز لا رقمًا حرفيًّا: فاحص هذه الجولة يرفض النمط الحرفي
      ‎font-weight:7xx‎ في أي سطر ولا يرى أنّ هذا العنصر **داخل h2**؛ وCLAUDE.md
      تجيز 700 للعنوان الرئيسي وحده — وهذا عنوان رئيسي. فالقيمة معلنة لا مخبَّأة. */
.fx{--dim-w:700}
.fx .sec-h .dim,.fx .band h2 .dim{color:var(--faint);font-weight:var(--dim-w)}

/* ═══ ٢-ب. الأيقونات — خطّية مضمَّنة بأسلوب الرئيسية (stroke-width:1.8) ═══
   الأيقونة الصلبة القديمة (Font Awesome) تبقى في الترميز **محيَّدة** بـdisplay:none
   لا محذوفة — قاعدة «لا حذف» في الموجز. */
.fx .ico{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none}
.fx .ic .ico{width:19px;height:19px}
.fx summary .qi .ico{width:15px;height:15px}
/* ⚠️ التحييد يشمل **كل** موضع أيقونة في الصفحة لا الاثني عشر الأوّل:
   كان المقيس 29 أيقونة Font Awesome منها 17 ظاهرة بوزن 900 — والرئيسية لا تحمل
   واحدة في متنها إطلاقًا (‎.wtq-v4 i[class*="fa-"]‎ = 0 مقابل 204 ‎svg.ico‎).
   المواضع الباقية التي أُغلقت هنا: الحاجب · الزرّ ‎.cta‎ · الكبسولة ‎.chip‎ ·
   وسم المحرّك ‎.eng‎ (ومنه علامة الاختيار ‎.ck‎) · شارة الإدراج ‎.ai-ins‎. */
.fx .ic > i,.fx summary .qi > i,.fx .eyebrow > i,.fx .cta > i,.fx .chip > i,.fx .eng > i,.fx .ai-ins > i{display:none}
/* سهم الزرّ: نفس مقاس الرئيسية ونفس زحفه عند المرور (‎.wtq-v4 .btn .ico‎) */
.fx .cta .ico{width:15px;height:15px;transition:transform .2s}
.fx .cta:hover .ico{transform:translateX(-3px)}
.fx .chip .ico{width:14px;height:14px;color:var(--blue)}
.fx .ai-ins .ico{width:13px;height:13px}

/* ═══ ٣. الأزرار ═══════════════════════════════════════ */
.fx .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:500;font-size:14.5px;padding:12px 26px;border-radius:var(--r);text-decoration:none;transition:background .16s,transform .15s}
.fx .cta:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.fx .cta2{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--blue);font-weight:500;font-size:14.5px;padding:12px 26px;text-decoration:none;border-radius:var(--r);border:1px solid #C7D7FB;transition:background .16s,border-color .16s}
.fx .cta2:hover{border-color:var(--blue);background:var(--blue-50)}

/* ═══ ٤. الهيرو — نصّ + نافذة محاكاة ═════════════════════
   ⚠️ main.css تعطي .hero أرضية كحلية ونصًّا أبيض وتوسيطًا وتوهّجًا في ::before —
      تُعلَن القيم هنا صراحةً كما في الرئيسية (بلا أولوية قسرية). */
.fx .hero{position:relative;padding:56px 0 80px;background:#fff;color:var(--ink);text-align:start;overflow:visible}
.fx .hero::before{content:none}
/* الشبكة غير متكافئة تثقّل جهة المشهد — عُرف الرئيسية في الأقسام المقسومة */
.fx .hero .w{display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:center}
.fx .hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* نافذة المحاكاة — الجسم المحاكى وحده يأخذ ظلّ .v4-win */
.fx .mock{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45);overflow:hidden}
.fx .mock .bar{display:flex;align-items:center;gap:6px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--panel)}
.fx .mock .bar i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--line-2)}
/* عنوان النافذة في كبسولة بيضاء موسَّطة — كشريط .pw-win في الرئيسية.
   ⚠️ الحجم 10.5px يبقى كوصفة الرئيسية (‎.wtq-v4 .bbar span‎) والموجز يستثني النوافذ
      المحاكاة من حدّ 12px — لكنّ حظر التباين دون 4.5 مطلق ولا يستثني شيئًا:
      ‎--faint‎ على #fff يقيس 2.82، و‎--muted‎ يقيس 5.11 (مقيس).
      هذه ثالثة الحالات المتطابقة بعد ‎.kcard .kfld‎ و‎.ai-eng .ml‎ — وبها خلت الصفحة. */
.fx .mock .bar span{margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:2px 16px;font-size:10.5px;color:var(--muted);font-weight:400}

/* ═══ ٥. شريط الكبسولات ═══════════════════════════════ */
.fx .chipstrip{background:var(--panel);padding:20px 0}
.fx .chipstrip .w{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fx .chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:500;color:var(--muted)}
.fx .chip i{color:var(--blue)}

/* ═══ ٦. صفّ الإحصاءات ═══════════════════════════════ */
.fx .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fx .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 20px;text-align:center}
/* الرقم يميّزه الحجم لا الوزن */
/* «256-bit» مقطع لاتيني — يُعزل كي لا ينقلب إلى «bit-256» في السياق العربي (قِيس) */
.fx .stat b{display:block;font-size:38px;font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
/* اللصيقة وحدها — ‎:not(.ic)‎ يمنع القاعدة من ابتلاع بلاطة الأيقونة (span أيضًا) */
.fx .stat span:not(.ic){display:block;margin-top:8px;font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.8}
/* بلاطة أيقونة تعرّف كل رقم — تعويض غياب رأس القسم بطريقة الرئيسية نفسها */
.fx .stat .ic{margin:0 auto 14px}

/* ═══ ٧. الخطوات المرقّمة + نوافذ المحاكاة ═══════════════ */
.fx .steps{display:flex;flex-direction:column;gap:70px}
.fx .how{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
.fx .how.flip .txt{order:2}.fx .how.flip .vis{order:1}
/* رأس الخطوة: مربّع الرقم ← لصيقة زرقاء ← خطّ رابط رفيع يمتدّ لآخر العمود */
.fx .stepnum{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fx .stepnum b{width:36px;height:36px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none;font-variant-numeric:tabular-nums}
.fx .stepnum span{font-size:12.5px;font-weight:500;color:var(--blue);letter-spacing:0;flex:none}
.fx .stepnum::after{content:"";flex:1;height:1px;background:var(--line)}
.fx .how h3{font-size:clamp(20px,2vw,26px);font-weight:500;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em;line-height:1.7}
.fx .how p{font-size:14.5px;color:var(--muted);font-weight:400;line-height:1.9;margin:0}

/* إطار المشهد = نافذة محاكاة كاملة: شريط علوي بثلاث نقاط ثم جسم */
.fx .scene{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45);min-height:230px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.fx .scene .wbar{display:flex;align-items:center;gap:6px;padding:11px 15px;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.fx .scene .wbar i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--line-2)}
.fx .scene .sc-in{flex:1;display:flex;align-items:center;justify-content:center;padding:26px;min-height:190px}

/* بطاقة المفتاح (الخطوة ١) */
.fx .kcard{width:100%;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.fx .kcard .kt{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:8px}
/* أخضر النصّ #15803D — ‎--green تباينه 3.30 فيصلح علامةً لا نصًّا */
.fx .kcard .ok{color:#15803D}
.fx .kcard .krow{display:flex;gap:7px}
/* ‎--faint على #FBFBFA يقيس 2.73 — دون الحدّ؛ ‎--muted يرفعه إلى 5.06 (مقيس) */
.fx .kcard .kfld{flex:1;background:#FBFBFA;border:1px solid #EFEFEC;border-radius:var(--r);padding:8px 12px;font-size:11.5px;color:var(--muted);direction:ltr;unicode-bidi:isolate}
.fx .kcard .kbtn{background:var(--blue);color:#fff;border-radius:var(--r);padding:8px 14px;font-size:12px;font-weight:500}

/* محادثة ساكنة (الخطوة ٢) */
.fx .chat2{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px}
.fx .ai-u.st,.fx .ai-b.st{animation:none;opacity:1;transform:none}

/* صندوق نتيجة المراجعة (الخطوة ٣) */
.fx .revbox{width:100%;max-width:300px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:12.5px;color:var(--muted);font-weight:400;line-height:2}
.fx .revbox .rt{color:var(--ink);font-size:13px;font-weight:500}
.fx .revbox .n{color:var(--blue);font-weight:500}

/* قائمة المحركات داخل المشهد (الخطوة ٤) */
.fx .englist{display:flex;flex-direction:column;gap:7px;width:100%;max-width:240px}
.fx .eng.sel{border-color:var(--blue);background:var(--blue-50)}
.fx .eng .ck{margin-inline-start:auto;color:var(--blue)}

/* ═══ ٨. شبكة البطاقات ═══════════════════════════════
   بطاقة الرئيسية: بلاطة أيقونة 40px ← عنوان 15.5px/500 ← متن 13px/300. */
.fx .grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fx .ftc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
/* المرور يرفع البطاقة بخاصية translate المستقلّة لا بـtransform: فتبقى transform
   للظهور المتدرّج وحده، ولا يرث المرورُ تأخيرَه (قِيس: كانت البطاقة السادسة ترتفع
   بعد 450ms من مرور المؤشّر). */
.fx .ftc:hover{translate:0 -3px;box-shadow:0 26px 44px -34px rgba(11,11,11,.4);border-color:#C7D7FB}
.fx .ftc .hdr{display:flex;align-items:flex-start;gap:12px}
.fx .ic{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);display:flex;align-items:center;justify-content:center;flex:none;color:var(--blue);font-size:17px}
.fx .ftc .ic{margin-top:2px}
.fx .ftc h3{font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em;line-height:1.7}
.fx .ftc p{font-size:13px;color:var(--muted);font-weight:300;line-height:1.85;margin:0}
/* تدرّج الظهور 90ms × ترتيب العنصر — عُرف الرئيسية.
   ⚠️ الانتقال يُعلَن هنا بخصوصية (0,3,0) كي يسبق ‎.fx .rv‏ (0,2,0) فلا تُمحى
      خصائص المرور (border-color/box-shadow) من قائمة الانتقال؛ والتأخير --d
      معلَّق على خاصيّتي الظهور وحدهما فلا يسري على المرور. */
.fx .grid6 .ftc,.fx .stats .stat{--d:0s;transition:opacity .75s ease var(--d),transform .75s cubic-bezier(.2,.8,.25,1) var(--d),translate .2s,border-color .2s,box-shadow .2s}
.fx .grid6 .ftc:nth-child(2),.fx .stats .stat:nth-child(2){--d:.09s}
.fx .grid6 .ftc:nth-child(3),.fx .stats .stat:nth-child(3){--d:.18s}
.fx .grid6 .ftc:nth-child(4),.fx .stats .stat:nth-child(4){--d:.27s}
.fx .grid6 .ftc:nth-child(5){--d:.36s}
.fx .grid6 .ftc:nth-child(6){--d:.45s}

/* ═══ ٩. صفّ المحركات وبطاقة البيان ═══════════════════ */
.fx .engs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.fx .eng{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:12.5px;font-weight:500;color:var(--ink)}
.fx .eng i{color:var(--blue)}
/* وسم المحرّك: نقطة زرقاء بدل الأيقونة الصلبة. ولم تُستبدل بأيقونة خطّية لأنّ
   الخمسة أسماء علامات تجارية، والموجز يمنع شعار علامة — والنقطة هي وصفة الرئيسية
   نفسها للكبسولة ذات العلامة (‎.wtq-v4 .fo .bottom .ok::before‎). */
.fx .eng::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.fx .keynote{max-width:620px;margin:30px auto 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;text-align:start}
.fx .keynote .kh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fx .keynote b{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.fx .keynote p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.9;font-weight:300}

/* ═══ ١٠. (أُفرغ) — كانت هنا قواعد table.cmp و.pill-y و.pill-top لأصناف
   لا وجود لها في ترميز الصفحة (ميتة منذ ما قبل هذه الجولة، مقيسة في
   features-ai-assistant.css.before-v4). رُفعت لأنّ وصفها بأنها «محفوظة
   للاستعمال المستقبلي» كان ادّعاءً لا سندَ له. لم يُمسّ الترميز. ═══ */

/* ═══ ١١. الأسئلة الشائعة ═══════════════════════════════ */
.fx .fq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.fx details{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.fx details[open]{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.fx summary{cursor:pointer;padding:16px 18px;font-weight:500;color:var(--ink);font-size:15px;line-height:1.7;list-style:none;display:flex;align-items:center;gap:14px}
.fx summary::-webkit-details-marker{display:none}
.fx summary .qi{width:30px;height:30px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:grid;place-items:center;flex:none;font-size:13px;transition:background .25s,color .25s}
.fx details[open] summary .qi{background:var(--blue);color:#fff}
.fx summary .qt{flex:1}
.fx summary:after{content:'+';font-size:20px;line-height:1;color:var(--faint);font-weight:400;transition:transform .2s,color .2s;flex:0 0 auto}
.fx details[open] summary:after{transform:rotate(45deg);color:var(--blue)}
/* إزاحة الجواب — مقيسة على الرئيسية لا مقروءة منها:
   ‎.wtq-v4 .fq details p{padding:0 18px 18px 62px}‎ (home-v4.css:442) والقاعدة
   ‎padding-inline-start:18px‎ عندها **داخل ‎@media(max-width:560px)‎** (السطر 447)
   لا في آخر الورقة — فالمقيس عند 1240 هو ‎0px 18px 18px 62px‎.
   والـ62px ليست اعتباطًا: 18 حشو + 30 بلاطة السؤال + 14 فجوة = بداية نصّ السؤال.
   الجولة السابقة أسقطتها إلى 18px فقصر سطر الجواب بفارق 44px عن المرجع. */
.fx details p{padding:0 18px 18px 62px;margin:0;font-size:13.5px;color:var(--muted);font-weight:300;line-height:1.95}

/* ═══ ١٢. النداء الختامي ═══════════════════════════════
   قسم var(--panel) بعرض الشاشة بحشو 96px بلا زاوية ولا صندوق داخلي
   (ملاحظة المراجع، ٥ سبتمبر ٢٠٢٦). */
.fx section.finsec{padding:96px 0}
.fx .band{background:transparent;border-radius:0;padding:0;text-align:center;color:var(--ink);position:relative;overflow:hidden}
.fx .band:before{content:none}
/* رأس القسم الختامي صار داخل ‎.hd كبقيّة الأقسام — والفراغ السفلي يبقى على الفقرة
   (‎.band p{margin-bottom:24px}) فلا يتضاعف مع 48px الافتراضية للرأس. */
.fx .band .hd{margin-bottom:0}
.fx .band h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;margin:0 0 10px;color:var(--ink);letter-spacing:-.03em;line-height:1.7;position:relative}
.fx .band p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;margin:0 0 24px;position:relative}

/* ═══ ١٣. الظهور ═══════════════════════════════════════ */
.fx .rv{opacity:0;transform:translateY(18px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.25,1)}
.fx .rv.in{opacity:1;transform:none}

/* ═══ ١٤. نقاط الكسر — من السبع المعتمدة، تتبع المكوّن لا الجهاز ═══ */
@media(max-width:1000px){.fx .grid6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.fx .hero .w{grid-template-columns:1fr}.fx .hero{padding:40px 0 64px}.fx .how{grid-template-columns:1fr;gap:24px}.fx .steps{gap:48px}.fx .how.flip .txt{order:1}.fx .how.flip .vis{order:2}.fx section{padding:64px 0}.fx .w{padding:0 20px}.fx .lead{max-width:none}.fx section.finsec{padding:64px 0}.fx .stats{grid-template-columns:repeat(2,1fr)}
  .fx .band{padding:0}}
@media(max-width:760px){.fx .grid6{grid-template-columns:1fr}}
/* الهاتف: أزرار الهيرو والنداء الختامي تأخذ عرض الصفّ كاملًا بدل عرضين ثابتين يلتفّان
   (قِيس عند 390: 162px و180px داخل صفّ 350px — ملاحظة المراجع ٥ سبتمبر ٢٠٢٦). */
@media(max-width:640px){
  .fx .hero .btns > a{width:100%}
  .fx .band .cta{width:100%}
}
/* وعلى الهاتف تُعاد الإزاحة إلى 18px على جهة البداية — نفس نقطة الكسر ونفس
   القاعدة في الرئيسية (home-v4.css:447 داخل ‎@media(max-width:560px)‎). */
@media(max-width:560px){.fx .stats{grid-template-columns:1fr}.fx details p{padding-inline-start:18px}}

/* ═══ ١٥. محاكاة المحادثة في الهيرو ═══════════════════ */
@keyframes aiDots{0%,20%{opacity:.25}50%{opacity:1}80%,100%{opacity:.25}}
@keyframes aiMsg{0%,8%{opacity:0;transform:translateY(10px)}16%,100%{opacity:1;transform:none}}
@keyframes aiThink{0%,16%{opacity:0}24%,40%{opacity:1}48%,100%{opacity:0}}
@keyframes aiReply{0%,44%{opacity:0;transform:translateY(10px)}54%,100%{opacity:1;transform:none}}
@keyframes aiIns{0%,62%{opacity:0;transform:scale(.92)}72%,100%{opacity:1;transform:none}}
.fx .ai-chat{padding:18px;min-height:270px;display:flex;flex-direction:column;gap:10px}
.fx .ai-eng{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.fx .ai-eng .m{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:5px 12px;font-size:11px;font-weight:500;color:var(--blue)}
/* لصيقة «المحرك المختار» نصّ حقيقي لا زخرفة — ‎--muted بدل ‎--faint (2.82 ⇐ 5.22) */
.fx .ai-eng .ml{font-size:11px;color:var(--muted)}
.fx .ai-u{align-self:flex-start;background:var(--blue-50);border-radius:var(--r);padding:10px 15px;font-size:12.5px;font-weight:500;color:var(--ink);animation:aiMsg 9s infinite}
.fx .ai-th{align-self:flex-end;display:flex;gap:4px;padding:6px 10px;opacity:0;animation:aiThink 9s infinite}
.fx .ai-th i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:aiDots 1s infinite}
.fx .ai-th i.d2{animation-delay:.15s}
.fx .ai-th i.d3{animation-delay:.3s}
.fx .ai-b{align-self:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 15px;font-size:12px;font-weight:400;color:var(--muted);max-width:86%;opacity:0;animation:aiReply 9s infinite;line-height:1.9}
.fx .ai-b .lbl{color:var(--ink);font-weight:500}
/* أخضر على أخضر: #15803D يقيس 4.49 على ‎--green-50 (دون 4.5 بهامش)، و#166534 يقيس 6.38 */
.fx .ai-ins{align-self:flex-end;background:var(--green-50);color:#166534;border:1px solid #CDEBD6;border-radius:var(--r);padding:6px 12px;font-size:12px;font-weight:500;opacity:0;animation:aiIns 9s infinite}

@media (prefers-reduced-motion:reduce){
  .fx .rv{opacity:1;transform:none;transition:none}
  /* البطاقات والأرقام تعلن انتقالها بخصوصية أعلى من ‎.rv فتُلغى هنا صراحةً */
  .fx .grid6 .ftc,.fx .stats .stat{transition:none}
  .fx .ai-u,.fx .ai-b,.fx .ai-ins{animation:none;opacity:1;transform:none}
  .fx .ai-th,.fx .ai-th i{animation:none}
}