/* ═══════════════════════════════════════════════════════
 *  features-identity-verification.css — أُستخرِج آليًا من pages/features/identity-verification.php
 *  المقطع 1 من 1 · سطور 11–11 في الأصل.
 *  ⚠️ الترتيب بين المقاطع مقصود: بينها كتل <style> مشروطة
 *     باقية في الصفحة، والتتالي يعتمد على تسلسلها.
 *  ⚠️ نُقلت إلى لغة تصميم الرئيسية (٥ سبتمبر ٢٠٢٦): الرموز المحلّية صارت
 *     أسماءً بديلة لرموز wtq-v4-base.css، والرموز المتصادمة معه
 *     (--ink · --faint · --line) أُزيلت من الجذر المحلّي لتُورَث من الأساس.
 *     لا كحلي ولا تدرّج ولا ظلّ إلا لجسم الهاتف المحاكى ورقائقه العائمة.
 * ═══════════════════════════════════════════════════════ */
.idx{--pb:var(--blue);--pb2:var(--blue-700);--nv:var(--ink);--mut:var(--muted);--soft:var(--panel);--soft2:var(--blue-50);--ok:var(--green);--okbg:var(--green-50);color-scheme:light}
.idx{color:var(--ink);line-height:1.75;background:#fff;overflow-x:clip}
.idx .w{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.idx section{padding:96px 0;scroll-margin-top:96px;background:#fff}
/* تناوب الأسطح مُعلَن صراحةً لا موروثًا: هيرو أبيض ← أرقام panel ← لماذا أبيض ← كيف panel
   ← متى أبيض ← الدليل panel ← الأسئلة أبيض ← الختام panel. لا قسمين متتاليين بلون واحد. */
.idx .why,.idx .when{background:#fff}
/* رأس القسم بلغة الرئيسية: نقطة زرقاء ← eyebrow ← h2 ← lead.
   ⚠️ أيقونة Font Awesome داخل الـeyebrow تُحيَّد (لا تُحذف من الترميز): النقطة الزرقاء
      هي علامة الرئيسية، والاثنتان معًا حشو. العنصر <i> باقٍ في الصفحة. */
.idx .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;font-size:12.5px;margin:0 0 14px}
.idx .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:0 0 auto}
.idx .eyebrow i{display:none}
.idx .eyebrow b{color:var(--blue);font-weight:500}
/* ═ لغة الأيقونات — SVG خطّي كالرئيسية (٦ سبتمبر ٢٠٢٦) ═
   الرئيسية ترسم كل أيقوناتها بـ<svg> خطّي (stroke-width:1.8 · stroke-linecap:round)
   داخل بلاطة 40px، وكانت بلاطات هذه الصفحة تحمل محارف Font Awesome صلبة (fas) —
   وهي أوضح فارق بصري بقي بين لقطة الصفحة ولقطة «/».
   ⚠️ العلاج بالتحييد لا بالحذف: وسم <i class="fas …"> باقٍ في الترميز كما هو،
      وأُضيف <svg class="ico"> بداخله، وأُلغيَ رسم محرف Font Awesome بـcontent:none.
      المقاس 19px منقول من .wtq-v4 .itile .ico في home-v4.css.
   ⚠️ البلاطات الأربع وحدها: بقيّة رموز Font Awesome في الصفحة (سطر الثقة · الرقائق
      العائمة · مشاهد الهاتف المحاكى) تبقى كما هي — لا بلاطات أيقونات. */
.idx .ico{width:19px;height:19px;flex:0 0 auto;display:block}
.idx .fcard .ic i::before,.idx .tnode .tk i::before,.idx .wc .wi i::before,.idx .gcard h3 i::before,
.idx .trustline i::before,.idx .fchip i::before,.idx .num b.ic i::before,.idx .cta i::before{content:none}
.idx .fcard .ic i,.idx .tnode .tk i,.idx .wc .wi i,
.idx .trustline i,.idx .fchip i,.idx .num b.ic i,.idx .cta i{display:inline-flex;align-items:center;justify-content:center}
/* المقاسات تتبع محلّها: 19px في البلاطة · 14px في سطر الثقة والرقيقة · 28px محلّ الرقم
   · 15px في الزرّ (نفس .wtq-v4 .btn .ico في home-v4.css) */
.idx .trustline .ico,.idx .fchip .ico{width:14px;height:14px}
.idx .num b.ic .ico{width:28px;height:28px}
.idx .cta .ico{width:15px;height:15px}
/* ترويسة موحّدة لكل الأقسام — كانت أربع قواعد متفرّقة وسمة style في الترميز */
.idx .whead{text-align:center;max-width:720px;margin:0 auto 46px}
.idx .whead .lead{margin-inline:auto;max-width:58ch}
/* ⚠️ 48px حدّ مقيس لا مقدَّر: عمود الهيرو النصّي 532px عند 1240، وعند 54px انكسر
   «توقيع لا يقبل الإنكار:» على سطرين وصار العنوان أربعة أسطر. */
.idx 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}
.idx h1 .g,.idx h2 .g{color:var(--faint);font-weight:inherit}
/* السطر الثاني الخافت من العنوان الرئيسي كما في هيرو الرئيسية: كتلة بهامش .5em.
   ⚠️ الرقم مقيس بالبكسل لا مقدَّر (٦ سبتمبر ٢٠٢٦): عند 48px وسطر 1.28، كانت شدّة
   «مؤكَّدة» وفتحتها تتراكبان مع ذيل «ل» في «يقبل» بـ١٠ بكسلات حبر وفسحة −8px.
   والهامش .22em السابق لم يكفِ. المقياس عبر الهوامش: .37em ⇒ −1px · .44em ⇒ +2px
   · .5em ⇒ +5px بلا تراكب. و.5em يجعل المسافة بين السطرين 84.2px = 1.75 من حجم
   الخطّ، فيوافق قاعدة «لا أقلّ من 1.7 لعنوان عربي يُكسر على سطرين» في CLAUDE.md
   بينما يبقى 1.28 داخل السطر الواحد (استثناء الهيرو الواعي).
   و<br> الفاصل يُحيَّد بالعرض ويبقى في الترميز.
   ⚠️ h1 وحده: .g في العناوين h2 تقع وسط الجملة، وجعلها كتلةً يكسر السطر. */
.idx h1 br{display:none}
.idx h1 .g{display:block;margin-top:.5em}
.idx h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.7;margin:0 0 12px}
.idx .lead{font-size:clamp(13.5px,1.05vw,15.5px);color:var(--muted);font-weight:300;line-height:1.9;max-width:62ch}
.idx .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}
.idx .cta:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-1px)}
.idx .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}
.idx .cta2:hover{border-color:var(--blue);background:var(--blue-50)}
/* ═ كشف تدريجي ═ */
.idx .rv,.idx .rvL,.idx .rvR,.idx .rvS{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.idx .rv{transform:translateY(24px)}
.idx .rvL{transform:translateX(30px)}
.idx .rvR{transform:translateX(-30px)}
.idx .rvS{transform:scale(.93)}
.idx .rv.in,.idx .rvL.in,.idx .rvR.in,.idx .rvS.in{opacity:1;transform:none}

/* ═══════════ الهيرو ═══════════ */
/* ⚠️ main.css تعطي .hero أرضية كحلية متدرّجة ونصًّا أبيض وتوسيطًا وتوهّجًا في ::before —
   تُعلَن القيم هنا صراحةً كما في الرئيسية (بلا أولوية قسرية). */
.idx .hero{position:relative;padding:56px 0 80px;background:#fff;color:var(--ink);text-align:start;overflow:hidden}
.idx .hero::before{content:none}
/* الهالتان المتدرّجتان صُمّمتا لأرضية متدرّجة ملغاة — تبقيان في الترميز بلا رسم */
.idx .hero .aur{display:none}
.idx .hero .w{position:relative;display:grid;grid-template-columns:1fr 1.12fr;gap:40px;align-items:center}
.idx .hero .lead{max-width:520px;margin-bottom:28px}
.idx .hero .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.idx .trustline{display:flex;gap:20px;margin-top:28px;flex-wrap:wrap}
.idx .trustline span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:400;color:var(--muted)}
.idx .trustline i{color:var(--green);font-size:13px}
@keyframes idxFloat{50%{transform:translateY(-11px)}}

/* ═ منصّة الهاتف + الخطوات ═ */
.idx .pstage{display:flex;gap:16px;align-items:center}
.idx .psteps{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.idx .pstep{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;background:#fff;opacity:.5}
.idx .pstep .sn{width:26px;height:26px;flex:0 0 auto;border-radius:var(--r);background:var(--panel);color:var(--muted);font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center}
.idx .pstep b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.idx .pstep small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.7}
.idx .pstep.p1{animation:idxSt1 18s infinite}.idx .pstep.p1 .sn{animation:idxSn1 18s infinite}
.idx .pstep.p2{animation:idxSt2 18s infinite}.idx .pstep.p2 .sn{animation:idxSn2 18s infinite}
.idx .pstep.p3{animation:idxSt3 18s infinite}.idx .pstep.p3 .sn{animation:idxSn3 18s infinite}
.idx .pstep.p4{animation:idxSt4 18s infinite}.idx .pstep.p4 .sn{animation:idxSn4 18s infinite}
@keyframes idxSt1{0%,18%{opacity:1;border-color:var(--blue)}20%,100%{opacity:.5;border-color:var(--line)}}
@keyframes idxSn1{0%,18%{background:var(--blue);color:#fff}20%,100%{background:var(--panel);color:var(--muted)}}
@keyframes idxSt2{0%,18%{opacity:.5;border-color:var(--line)}21%,38%{opacity:1;border-color:var(--blue)}40%,100%{opacity:.5;border-color:var(--line)}}
@keyframes idxSn2{0%,18%{background:var(--panel);color:var(--muted)}21%,38%{background:var(--blue);color:#fff}40%,100%{background:var(--panel);color:var(--muted)}}
@keyframes idxSt3{0%,38%{opacity:.5;border-color:var(--line)}41%,78%{opacity:1;border-color:var(--blue)}80%,100%{opacity:.5;border-color:var(--line)}}
@keyframes idxSn3{0%,38%{background:var(--panel);color:var(--muted)}41%,78%{background:var(--blue);color:#fff}80%,100%{background:var(--panel);color:var(--muted)}}
@keyframes idxSt4{0%,78%{opacity:.5;border-color:var(--line)}81%,100%{opacity:1;border-color:var(--green)}}
@keyframes idxSn4{0%,78%{background:var(--panel);color:var(--muted)}81%,100%{background:var(--green);color:#fff}}
.idx .phonebox{position:relative;flex:0 0 auto}
/* جسم الهاتف المحاكى — الجسم الوحيد الذي يأخذ ظلّ .v4-win */
.idx .phone{position:relative;width:220px;height:452px;background:var(--ink);border-radius:var(--r);padding:8px;box-shadow:0 2px 6px rgba(11,11,11,.05),0 44px 84px -44px rgba(11,11,11,.45)}
/* الشقّ يُوسَّط بحدّين متقابلين لا بـleft:50% — كي لا ينحرف في النسخة المقلوبة */
.idx .phone .notch{position:absolute;top:9px;left:0;right:0;margin:0 auto;width:68px;height:15px;background:var(--ink);border-radius:999px;z-index:9}
.idx .phone .scr{position:relative;width:100%;height:100%;background:#fff;border-radius:var(--r);overflow:hidden}
.idx .scene{position:absolute;inset:0;display:flex;flex-direction:column;padding:30px 14px 12px;opacity:0;direction:ltr;text-align:center}
.idx .scene.s1{animation:idxScS1 18s infinite}
.idx .scene.s2{animation:idxScS2 18s infinite;text-align:start;padding-top:20px}
.idx .scene.s3{animation:idxScS3 18s infinite;background:#1C1C1E}
.idx .scene.s4{animation:idxScS4 18s infinite}
.idx .scene.s5{animation:idxScS5 18s infinite}
@keyframes idxScS1{0%{opacity:1}18%{opacity:1}21%{opacity:0;transform:translateX(-16px)}97%{opacity:0;transform:translateX(16px)}100%{opacity:1;transform:none}}
@keyframes idxScS2{0%,18%{opacity:0;transform:translateX(16px)}21%,38%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes idxScS3{0%,38%{opacity:0;transform:translateX(16px)}41%,58%{opacity:1;transform:none}61%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes idxScS4{0%,58%{opacity:0;transform:translateX(16px)}61%,78%{opacity:1;transform:none}81%,100%{opacity:0;transform:translateX(-16px)}}
@keyframes idxScS5{0%,78%{opacity:0;transform:translateX(16px)}81%,98%{opacity:1;transform:none}100%{opacity:0}}
.idx .dlogo{font-weight:500;color:var(--ink);font-size:16px;direction:rtl}
.idx .dlogo i{color:var(--blue);font-style:normal}
.idx .secby{margin-top:auto;font-size:10px;font-weight:400;color:var(--muted)}
.idx .secby b{color:var(--ink);font-weight:500;font-size:10.5px}
.idx .secby.dk{color:rgba(255,255,255,.6)}.idx .secby.dk b{color:#fff}
.idx .dbtn{background:var(--blue);color:#fff;border-radius:999px;padding:9px 0;font-size:11px;font-weight:500;width:100%;margin-top:10px;text-align:center}
/* مشهد ١ */
.idx .vtit{font-size:13.5px;font-weight:500;color:var(--ink);margin-top:10px;line-height:1.35}
.idx .vsub{font-size:10.5px;font-weight:400;color:var(--muted);margin-top:6px;line-height:1.6}
.idx .vmin{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 13px;margin:13px auto 0}
.idx .vmin i{color:var(--blue)}
.idx .vlist{margin-top:15px;display:flex;flex-direction:column;gap:9px;align-items:center}
.idx .vlist span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;color:var(--ink)}
.idx .vlist i{color:var(--blue);width:16px}
/* مشهد ٢ */
.idx .prog{height:3px;border-radius:3px;background:var(--line);margin-bottom:13px;overflow:hidden}
.idx .prog i{display:block;height:100%;width:28%;background:var(--blue);border-radius:3px}
.idx .t2{font-size:12px;font-weight:500;color:var(--ink);line-height:1.35}
.idx .st2{font-size:10px;font-weight:400;color:var(--muted);margin-top:4px;line-height:1.5}
/* التتبّع الموجب على لاتيني صغير معزول فقط (COUNTRY OF DOCUMENT) */
.idx .lbl{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.5px;margin:11px 0 4px}
.idx .fld{display:flex;align-items:center;gap:7px;background:var(--panel);border-radius:var(--r);padding:7px 11px;font-size:10.5px;font-weight:500;color:var(--ink)}
.idx .fld i{color:var(--muted);font-size:10px}
.idx .opt{display:flex;align-items:center;gap:8px;background:var(--panel);border-radius:var(--r);padding:6px 11px;font-size:10px;font-weight:500;color:var(--ink);margin-bottom:6px;border:1px solid transparent}
.idx .opt>i{color:var(--blue);font-size:11px;width:15px}
.idx .opt .rad{margin-inline-start:auto;width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;flex:0 0 auto}
.idx .opt.sel{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* قرص الاختيار: ملء أزرق بحلقة بيضاء داخلية بدل التدرّج الشعاعي */
.idx .opt.sel .rad{border-color:var(--blue);background:var(--blue);box-shadow:inset 0 0 0 2.5px #fff}
/* العلم المصري بالـCSS — الشريطان الأحمر والأسود بظلّين داخليين بدل التدرّج */
.idx .egf{display:inline-block;width:18px;height:12px;border-radius:2px;position:relative;flex:0 0 auto;background:#fff;box-shadow:inset 0 4px 0 #CE1126,inset 0 -4px 0 #000,0 0 0 1px rgba(0,0,0,.1)}
.idx .egf::after{content:'';position:absolute;top:5px;left:7px;width:4px;height:2px;background:#C09300;border-radius:1px}
/* مشهد ٣ */
.idx .s3{text-align:center}
.idx .camt{font-size:11px;font-weight:500;color:rgba(255,255,255,.75);margin-top:6px}
.idx .pillid{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 13px;font-size:10.5px;font-weight:500;color:var(--ink);margin:9px auto 0}
.idx .tips{margin-top:10px;display:flex;flex-direction:column;gap:5px;align-items:center}
.idx .tips span{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:400;color:rgba(255,255,255,.7)}
.idx .tips i{color:rgba(255,255,255,.9);width:12px}
.idx .tips.lt span{color:var(--muted)}.idx .tips.lt i{color:var(--blue)}
.idx .idcard{position:relative;margin:12px auto 0;width:158px;height:96px;border-radius:var(--r);border:3px solid #fff;overflow:hidden;background:var(--panel)}
.idx .idcard .chip2{position:absolute;top:13px;left:13px;width:24px;height:17px;border-radius:3px;background:#d4af37;opacity:.85}
.idx .idcard .pht{position:absolute;bottom:9px;left:11px;width:29px;height:34px;border-radius:var(--r);background:var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px}
.idx .idcard .cln{position:absolute;top:11px;right:11px;left:56px;height:4px;border-radius:3px;background:var(--line-2);opacity:.9}
.idx .idcard .cln.l2{top:23px;left:68px}.idx .idcard .cln.l3{top:35px;left:60px}
.idx .scanln{position:absolute;right:0;left:0;height:2px;background:var(--blue);opacity:.7;box-shadow:0 0 10px 3px rgba(37,99,235,.35);animation:idxScan 2.4s ease-in-out infinite}
@keyframes idxScan{0%,100%{top:-12px}50%{top:80px}}
.idx .shoot{width:36px;height:36px;border-radius:50%;border:3px solid #fff;margin:12px auto 0}
/* مشهد ٤ */
.idx .prepwrap{margin:14px auto 0;display:flex;align-items:center;justify-content:center}
.idx .facefr{position:relative;width:112px;height:132px;border-radius:50%;background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:40px;animation:idxFace 1.8s infinite}
.idx .fbr{position:absolute;width:20px;height:20px;border:2.5px solid var(--blue)}
.idx .fbr.tl{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:var(--r) 0 0 0}
.idx .fbr.tr{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 var(--r) 0 0}
.idx .fbr.bl{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 var(--r)}
.idx .fbr.br{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 var(--r) 0}
@keyframes idxFace{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.32)}55%{box-shadow:0 0 0 13px rgba(37,99,235,0)}}
/* مشهد ٥ */
.idx .okc{width:64px;height:64px;border-radius:50%;background:var(--green-50);border:3px solid var(--green);display:flex;align-items:center;justify-content:center;margin:52px auto 0;color:var(--green);font-size:24px;animation:idxOk 18s infinite}
@keyframes idxOk{0%,79%{transform:scale(0);opacity:0}85%{transform:scale(1.16);opacity:1}90%,100%{transform:scale(1);opacity:1}}
.idx .okt{font-size:13.5px;font-weight:500;color:var(--ink);margin-top:14px}
.idx .oks{font-size:10.5px;font-weight:400;color:var(--muted);margin-top:6px}
/* نقاط التقدم */
.idx .pdots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.idx .pdots i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.idx .pdots .d1{animation:idxDt1 18s infinite}.idx .pdots .d2{animation:idxDt2 18s infinite}
.idx .pdots .d3{animation:idxDt3 18s infinite}.idx .pdots .d4{animation:idxDt4 18s infinite}.idx .pdots .d5{animation:idxDt5 18s infinite}
@keyframes idxDt1{0%,18%{background:var(--blue);transform:scale(1.3)}20%,100%{background:var(--line-2);transform:none}}
@keyframes idxDt2{0%,18%{background:var(--line-2)}21%,38%{background:var(--blue);transform:scale(1.3)}40%,100%{background:var(--line-2);transform:none}}
@keyframes idxDt3{0%,38%{background:var(--line-2)}41%,58%{background:var(--blue);transform:scale(1.3)}61%,100%{background:var(--line-2);transform:none}}
@keyframes idxDt4{0%,58%{background:var(--line-2)}61%,78%{background:var(--blue);transform:scale(1.3)}81%,100%{background:var(--line-2);transform:none}}
@keyframes idxDt5{0%,78%{background:var(--line-2)}81%,98%{background:var(--blue);transform:scale(1.3)}100%{background:var(--line-2)}}
/* رقائق عائمة — طافية فوق الجسم المحاكى فتأخذ ظلًّا محايدًا طويلًا بانتشار سالب */
.idx .fchip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--ink);box-shadow:0 14px 30px -18px rgba(11,11,11,.35);z-index:4;white-space:nowrap;animation:idxFloat 4.6s ease-in-out infinite}
.idx .fchip i{color:var(--blue);font-size:12px}
.idx .fc1{top:14px;left:-34px}
.idx .fc2{top:46%;left:-52px;animation-delay:1.5s}
.idx .fc3{bottom:26px;left:-30px;animation-delay:2.9s}
/* تحت 1300px تلتصق الحاوية بحافة الشاشة (الهاتف عند 28px) فيقصّ overflow الهيرو ما يبرز من الرقائق — تُقرَّب من جسم الهاتف هنا فقط */
@media(max-width:1300px){.idx .fc1{left:-10px}.idx .fc2{left:-22px}.idx .fc3{left:-8px}}
/* تشغيل الأنيميشن عند الظهور فقط (تفادي تجمّد الخلفية) */
.idx .phonecol .scene,.idx .phonecol .pstep,.idx .phonecol .pstep .sn,.idx .phonecol .pdots i,.idx .phonecol .okc,.idx .phonecol .scanln,.idx .phonecol .facefr{animation-play-state:paused}
.idx .phonecol.in .scene,.idx .phonecol.in .pstep,.idx .phonecol.in .pstep .sn,.idx .phonecol.in .pdots i,.idx .phonecol.in .okc,.idx .phonecol.in .scanln,.idx .phonecol.in .facefr{animation-play-state:running}

/* ═══════════ صفّ الإحصاءات — سطح بديل، وأربع بلاطات بيضاء بحدّ رفيع (كـ.ft-tiles في الرئيسية)
   كان: أربعة أرقام سائبة على شريط 40px بلا حاوية. صار: مكوّن «صفّ إحصاءات» من الكتالوج.
   ⚠️ الحاوية صارت <section> لا <div> (٦ سبتمبر ٢٠٢٦) كي تسري عليها قاعدة .idx section،
      وحشوها 96px كبقيّة الأقسام لا 64px. يبقى القسم بلا رأس (eyebrow/h2/lead) لأن
      نصّه غير موجود في الصفحة ولا يجوز اختراعه — مُدرَج في needsOwner. */
.idx .nums{background:var(--panel);padding:96px 0}
.idx .nums .w{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:start}
.idx .num{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
/* الرقم يميّزه الحجم لا الوزن */
.idx .num b{display:block;font-size:34px;font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1.2;min-height:42px;font-variant-numeric:tabular-nums}
.idx .num b em{font-style:normal;color:var(--ink)}
.idx .num b.ic{color:var(--blue);font-size:28px}
.idx .num b.txt{color:var(--ink)}
.idx .num span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.8}

/* ═══════════ لماذا الحُجّية الأعلى ═══════════ */
/* القسم صار: رأس قسم ← كتلة مقسومة (بيان + مقياس) ← شبكة بطاقات.
   كانت فقرة موسَّطة عرضها 840px بلا بناء، ثم بطاقة مقياس معلّقة وحدها. */
.idx .whycmp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-bottom:56px}
/* «بيان» من الكتالوج: محاذاة البداية · 16px · وزن 300 · ارتفاع 1.9 · علامة زرقاء 2px واحدة */
.idx .why .wpara{margin:0;text-align:start;font-size:16px;font-weight:300;color:var(--muted);line-height:1.9;
  padding-inline-start:20px;border-inline-start:2px solid var(--blue);max-width:52ch}
/* التمييز اللوني لكلمات متفرّقة داخل البيان مُحيَّد — الوسم <b> باقٍ في الترميز */
.idx .why .wpara b{color:inherit;font-weight:inherit}
/* مقياس الحُجّية — بطاقة بيضاء بحدّ رفيع بلا ظلّ */
.idx .hjm{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;display:flex;flex-direction:column;gap:18px}
.idx .hjmrow{display:grid;grid-template-columns:1fr 96px;gap:6px 12px;align-items:center}
.idx .hjmrow>span{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.7}
.idx .hjt{grid-column:1 / -1;grid-row:2;height:8px;border-radius:999px;background:var(--panel);overflow:hidden}
.idx .hjt i{display:block;height:100%;border-radius:999px;width:0;transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.idx .hjm.in .b1{width:45%;background:#9DB6F3}
.idx .hjm.in .b2{width:90%;background:var(--blue)}
.idx .hjm.in .b3{width:100%;background:var(--ink)}
.idx .hjmrow em{font-style:normal;font-size:12px;font-weight:500;color:var(--muted);text-align:end}
.idx .hjmrow em.hi{color:var(--blue)}.idx .hjmrow em.hn{color:var(--ink)}
/* شبكة بطاقات — مقاس الكتالوج: بلاطة 40px ← عنوان 15.5px/500 ← متن 13px/300 */
.idx .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.idx .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;transition:border-color .25s}
.idx .fcard:hover{border-color:#C7D7FB}
.idx .fcard .ic{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:14px}
.idx .fcard h3{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin:0 0 8px}
.idx .fcard p{font-size:13px;font-weight:300;color:var(--muted);margin:0;line-height:1.85}

/* ═══════════ كيف تعمل — خطوات مرقّمة (مكوّن الكتالوج) ═══════════
   كانت: أيقونات 58px موسَّطة بلا حاوية، ورقم في دائرة 50% معلّق فوقها، وخطّ رابط 3px أزرق سميك.
   صارت: بطاقات بيضاء بمحاذاة البداية، الرقم مربّع 26px بنصف القطر الموحّد على حافّة البطاقة،
   والرابط خيط 1px من var(--line) يظهر في الفجوات وحدها كخطّ رحلة الرئيسية. */
.idx .how{background:var(--panel)}
.idx .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:13px}
.idx .tconn{position:absolute;top:13px;right:10%;left:10%;height:1px;background:var(--line-2);overflow:hidden}
.idx .tconn i{display:block;height:100%;width:0;background:var(--blue);transition:width 1.6s ease}
.idx .timeline.in .tconn i{width:100%}
.idx .tnode{position:relative;text-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 20px 20px;transition:border-color .25s}
.idx .tnode:hover{border-color:#C7D7FB}
.idx .tnode .tk{width:40px;height:40px;border-radius:var(--r);background:var(--blue-50);border:0;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px;margin:0 0 14px;position:relative;z-index:2}
.idx .tnode .tn{position:absolute;top:0;inset-inline-start:20px;transform:translateY(-50%);width:26px;height:26px;border-radius:var(--r);background:var(--blue);color:#fff;font-size:12.5px;font-weight:500;display:flex;align-items:center;justify-content:center;z-index:3;font-variant-numeric:tabular-nums}
.idx .tnode h3{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin:0 0 8px}
.idx .tnode p{font-size:13px;font-weight:300;color:var(--muted);margin:0;line-height:1.85}

/* ═══════════ متى تستخدمها — شبكة بطاقات (بلاطة + عنوان + متن) ═══════════ */
.idx .wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.idx .wc{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .25s}
.idx .wc:hover{border-color:#C7D7FB}
.idx .wc .wi{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px}
.idx .wc h3{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin:0 0 8px}
.idx .wc p{font-size:13px;font-weight:300;color:var(--muted);margin:0;line-height:1.85}

/* ═══════════ الدليل السريع ═══════════
   كان: بطاقة واحدة تحمل أربع فقرات طويلة متتالية — «جدار نصّ» بأربع علامات جانبية.
   صار: شبكة أربع بطاقات، كلٌّ ببلاطة أيقونتها وعنوانها ومتنها. لا كلمة تغيّرت. */
.idx .guide{background:var(--panel)}
.idx .gcard{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:transparent;border:0;padding:0}
.idx .gcard .gq{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 22px;margin:0;transition:border-color .25s}
.idx .gcard .gq:hover{border-color:#C7D7FB}
/* العلامة الجانبية الزرقاء مُحيَّدة — الحدّ الرفيع صار هو العمق (لا خطّ داخل بطاقة) */
.idx .gcard .gq::before{content:none}
.idx .gcard h3{font-size:15.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;line-height:1.7;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.idx .gcard h3 i{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.idx .gcard p{margin:0;font-size:13px;font-weight:300;color:var(--muted);line-height:1.95}

/* ═══════════ الأسئلة ═══════════ */
.idx .faq{max-width:840px;margin:0 auto}
.idx .qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.idx .qa .qh{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);line-height:1.7}
.idx .qa .qh .x{width:28px;height:28px;flex:0 0 auto;border-radius:var(--r);background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;transition:.3s}
.idx .qa .qb{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 18px}
/* المقاس واللون منقولان حرفيًّا من أكورديون الرئيسية:
   home-v4.css ‏.wtq-v4 .fq details p{font-size:13.5px} و.fq details[open]{border-color:#C7D7FB} */
.idx .qa .qb p{font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.95;margin:0 0 18px}
.idx .qa.open{border-color:#C7D7FB;box-shadow:0 20px 40px -32px rgba(37,99,235,.4)}
.idx .qa.open .qh .x{transform:rotate(45deg);background:var(--blue);color:#fff}
.idx .qa.open .qb{max-height:320px}

/* ═══════════ CTA النهائي — سطح بديل لا شريط أزرق (لا قسم ملوّن أو داكن) ═══════════ */
.idx .fin{position:relative;overflow:hidden;background:var(--panel)}
.idx .fin .band{position:relative;background:transparent;border-radius:0;padding:0;text-align:center;color:var(--ink)}
/* الهالة المتدرّجة صُمّمت للشريط الأزرق الملغى — تبقى في الترميز بلا رسم */
.idx .fin .band .bblob{display:none}
.idx .fin .band h2{color:var(--ink);margin:0 0 14px;position:relative;font-size:clamp(30px,3.8vw,50px)}
.idx .fin .band p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);font-weight:300;line-height:1.9;margin:0 auto 30px;max-width:56ch;position:relative}
.idx .fin .band .cta{position:relative}

@media(max-width:1000px){
  .idx .whycmp{grid-template-columns:1fr;gap:28px;margin-bottom:44px}
  .idx .why .wpara{max-width:none}
  .idx .gcard{grid-template-columns:1fr}
}
@media(max-width:960px){
  .idx section{padding:64px 0}
  .idx .w{padding:0 20px}
  .idx .nums{padding:64px 0}
  .idx .hero{padding:40px 0 64px}
  .idx .hero .w{grid-template-columns:1fr;gap:40px}
  .idx .whead{margin-bottom:36px}
  .idx .nums .w{grid-template-columns:1fr 1fr}
  .idx .grid3{grid-template-columns:1fr}
  .idx .timeline{grid-template-columns:1fr 1fr;gap:30px 18px}
  .idx .tconn{display:none}
  .idx .wgrid{grid-template-columns:1fr}
  .idx .fchip{display:none}
}
@media(max-width:560px){
  .idx .pstage{flex-direction:column}
  .idx .psteps{width:100%}
  .idx .nums .w{grid-template-columns:1fr}
  .idx .timeline{grid-template-columns:1fr}
  .idx .gcard .gq{padding:22px 20px 20px}
  .idx .hjm{padding:22px 20px}
  .idx .why .wpara{padding-inline-start:16px}
  /* الهاتف: الزرّان يلتفّان بعرض كامل */
  .idx .hero .btns > a{flex:1;min-width:210px}
}
@media (prefers-reduced-motion:reduce){
  .idx .rv,.idx .rvL,.idx .rvR,.idx .rvS{opacity:1;transform:none;transition:none}
  .idx .fchip,.idx .facefr,.idx .scanln{animation:none}
}