/* =========================================================================
   أقسام الصفحات الديناميكية - CMS page sections
   ========================================================================= */

.pg-sec{padding-block:88px;}

/* الطيّ يصحّ فقط بين قسمين عاديّين - أي بين خلفيتين متطابقتين. القاعدة
   القديمة كانت تُصفّر الهامش العلوي لأي قسم عادٍ مهما كان ما قبله، فيلتصق
   عنوان «أسئلة متكررة» بحافة الشريط الملوّن فوقه مباشرة. */
.pg-sec.pg-normal + .pg-sec.pg-normal{padding-block-start:0;}

/* الأغلفة - لون رملي واحد لكل الأقسام الفاتحة.
   كانت كل لهجة تعطي مسحة مختلفة، فإذا تجاور شريطان بدا الحدّ بينهما
   لطخة لا فاصلًا مقصودًا. */
.pg-soft{background:var(--sand-2);}
.pg-sec.accent-violet.pg-soft,
.pg-sec.accent-amber.pg-soft,
.pg-sec.accent-coral.pg-soft{background:var(--sand-2);}

/* شريطان رمليان متتاليان يفصلهما خيط، وإلا قُرئا كتلة واحدة مرتبكة */
.pg-soft + .pg-soft{border-block-start:1px solid var(--line);}

/* الشريط الداكن يلامس ما قبله وما بعده بلا فاصل - وهو المقصود:
   داكن ثمّ فاتح ثمّ داكن. */
.pg-dark + .pg-sec.pg-normal,
.pg-sys + .pg-sec.pg-normal{padding-block-start:88px;}

.pg-dark{background:var(--ink);color:var(--paper);}
.pg-dark h2{color:#fff;}
.pg-dark p{color:rgba(242,239,233,.68);}

.pg-head{margin-block-end:36px;}
.pg-head h2{font-size:29px;max-width:22ch;}
html[dir="rtl"] .pg-head h2{max-width:26ch;}

.pg-lead{font-size:16px;color:var(--muted);max-width:62ch;margin-block-end:36px;line-height:1.8;}

/* ---------- نص ---------- */
.pg-rich{max-width:70ch;}
.pg-rich p{font-size:16px;line-height:1.95;color:rgba(14,15,16,.8);margin-block-end:1.3em;}
.pg-dark .pg-rich p{color:rgba(242,239,233,.72);}

.pg-figure{margin:36px 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);}
.pg-figure img{width:100%;display:block;}

/* ---------- وسيط الهيرو ---------- */
.pg-hero{
  margin:0 0 8px;aspect-ratio:21/9;overflow:hidden;
  background:var(--graphite);
}
.pg-hero img,.pg-hero video{
  inline-size:100%;block-size:100%;object-fit:cover;display:block;
}
@media(max-width:760px){ .pg-hero{aspect-ratio:16/9;} }

/* ---------- بطاقات المزايا ---------- */
.pg-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media(max-width:900px){ .pg-cards{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .pg-cards{grid-template-columns:1fr;} }

.pg-card{
  position:relative;background:var(--card);
  padding:28px 24px 26px;border-radius:0;
  transition:background .22s ease;
}
.pg-card:hover{background:var(--sand-2);}

/* مربّع الأيقونة: عظمي بحدّ - الدليل يمنع الخلفيات الملوّنة الباهتة */
.pg-card-ico{
  display:flex;align-items:center;justify-content:center;
  inline-size:46px;block-size:46px;margin-block-end:18px;
  border:1px solid var(--line);color:var(--signal);
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.pg-card-ico svg{inline-size:24px;block-size:24px;display:block;}
.pg-card:hover .pg-card-ico{background:var(--graphite);color:var(--bone);border-color:var(--graphite);}
/* الرسم يكتمل فورًا هنا: البطاقات ساكنة لا تُخطّ عند الظهور */
/* ---------------------------------------------------------------------
   أيقونات بطاقات المزايا - فصل 32 من الدليل «نظام الرسوم».
   سِجلّ الخط: خطّ مفرد السماكة بلا تعبئة، أطراف مربّعة، وقطع عند
   0° و32° و90° فقط. وترسم نفسها عند ظهور البطاقة بدل أن تقفز جاهزة.
   كانت هذه القاعدة تُلغي الرسم فتظهر الأيقونة جامدة.
   ------------------------------------------------------------------ */
html:not(.js) .pg-card-ico .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;}

html.js .pg-card-ico .svc-ico path{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
/* الأجزاء الثلاثة تُرسم بالتتابع: الهيكل ثم التفصيل ثم الجزء الحيّ */
html.js .pg-card.is-in .pg-card-ico .svc-ico .i-a{animation:svDraw 620ms cubic-bezier(.2,.8,.2,1) forwards;}
html.js .pg-card.is-in .pg-card-ico .svc-ico .i-b{animation:svDraw 620ms cubic-bezier(.2,.8,.2,1) 140ms forwards;}
html.js .pg-card.is-in .pg-card-ico .svc-ico .i-c{animation:svDraw 620ms cubic-bezier(.2,.8,.2,1) 280ms forwards;}

/* البطاقة نفسها تصل على المحور 32° بتتابع 60 مللي */
html.js .pg-cards .pg-card{
  opacity:0;
  transform:translate(var(--pc-x,-26px),16px);
  transition:opacity 420ms cubic-bezier(.2,.8,.2,1),
             transform 420ms cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 60ms);
}
html[dir="rtl"].js .pg-cards .pg-card{--pc-x:26px;}
html.js .pg-cards .pg-card.is-in{opacity:1;transform:none;}

/* المربّع يمتلئ عند المرور - عنصر واحد يتحرّك */
.pg-card-ico{transition:background 180ms cubic-bezier(.2,.8,.2,1),
                        color 180ms cubic-bezier(.2,.8,.2,1),
                        border-color 180ms cubic-bezier(.2,.8,.2,1);}

@media(prefers-reduced-motion:reduce){
  html.js .pg-card-ico .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;}
  html.js .pg-card.is-in .pg-card-ico .svc-ico path{animation:none;}
  html.js .pg-cards .pg-card{opacity:1;transform:none;transition:none;}
}

.pg-card-num{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  display:block;margin-block-end:16px;letter-spacing:.08em;
}
.pg-card h3{font-size:16px;margin-block-end:9px;color:var(--ink);}
.pg-card p{font-size:13.5px;line-height:1.75;color:var(--muted);margin:0;}

/* ---------- نقاط ---------- */
.pg-checks{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;max-width:900px;
}
.pg-checks li{font-size:14.5px;}
.pg-dark .pg-checks li{color:rgba(242,239,233,.85);}
.pg-dark .pg-checks li::before{background:rgba(27,52,245,.25);color:var(--green-light);}

/* ---------- أرقام ---------- */
.pg-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;
}
.pg-soft .pg-stats{background:rgba(14,15,16,.10);border-color:transparent;}
.pg-stat{background:#fff;padding:30px 24px;}
.pg-soft .pg-stat{background:rgba(255,255,255,.75);}
.pg-stat b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:30px;line-height:1.1;margin-block-end:8px;
}
.accent-violet .pg-stat b{color:var(--violet);}
.accent-amber  .pg-stat b{color:var(--amber-deep);}
.accent-coral  .pg-stat b{color:var(--coral-deep);}
.accent-green  .pg-stat b{color:var(--green-dark);}
.pg-stat span{font-size:13px;color:var(--muted);line-height:1.55;display:block;}

/* ---------- مراحل العمل ---------- */
.pg-steps{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media(max-width:1100px){ .pg-steps{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:760px){  .pg-steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:480px){  .pg-steps{grid-template-columns:1fr;} }

.pg-steps li{
  background:var(--card);padding:26px 20px 24px;
  display:flex;flex-direction:column;gap:10px;
}
/* رقم مصمت لا مفرّغ: النصّ الشفّاف بحدّ خارجي لا يُقاس تباينه */
.pg-step-n{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,2.6vw,36px);line-height:1;
  color:var(--signal);letter-spacing:-.02em;
  margin-block-end:6px;
}
.pg-steps strong{display:block;font-family:var(--font-display);font-size:15px;color:var(--ink);}
.pg-step-t{font-size:13px;color:var(--muted);line-height:1.75;}

/* ---------- أسئلة شائعة ---------- */
.pg-faq{max-width:860px;border-block-start:1px solid var(--line);}
.pg-faq details{border-block-end:1px solid var(--line);}
.pg-faq summary{
  cursor:pointer;list-style:none;
  padding-block:20px;padding-inline-end:36px;
  font-family:var(--font-display);font-weight:700;font-size:16px;
  position:relative;
}
.pg-faq summary::-webkit-details-marker{display:none;}
.pg-faq summary::after{
  content:"+";position:absolute;inset-inline-end:0;inset-block-start:18px;
  font-size:22px;font-weight:400;color:var(--green-dark);
  transition:transform .25s;
}
.pg-faq details[open] summary::after{transform:rotate(45deg);}
.pg-faq p{
  margin:0;padding-block-end:22px;padding-inline-end:36px;
  font-size:14.5px;line-height:1.85;color:var(--muted);
}

/* ---------- معرض ---------- */
.pg-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pg-gallery figure{margin:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);background:#fff;}
.pg-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.pg-gallery figcaption{padding:12px 14px;font-size:12.5px;color:var(--muted);}

/* ---------- شريط الدعوة ---------- */
/* جرافيت مصمت لا متدرّج، والزرّ عظمي - فلا يُصرف الأزرق هنا */
.pg-cta{
  padding-block:60px;
  background:var(--graphite);color:var(--bone);
}
.pg-cta.accent-violet,
.pg-cta.accent-green,
.pg-cta.accent-amber,
.pg-cta.accent-coral{background:var(--graphite);}
.cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.pg-cta h2{color:var(--bone);font-size:clamp(22px,2.2vw,28px);margin-block-end:10px;max-width:24ch;}
.pg-cta p{color:var(--on-dark);font-size:15px;line-height:1.75;max-width:56ch;margin:0;}

.cta-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--bone);color:var(--graphite);border:1px solid var(--bone);
  border-radius:0;font-weight:700;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.cta-btn:hover{background:var(--signal);color:var(--bone);border-color:var(--signal);}
.cta-arrow{inline-size:18px;block-size:18px;flex-shrink:0;}
html[dir="rtl"] .cta-arrow{transform:scaleX(-1);}
.btn-lg{padding:17px 32px;font-size:15px;}

/* ---------- الاستجابة ---------- */
@media(max-width:900px){
  .pg-sec{padding-block:60px;}
  .pg-dark + .pg-sec.pg-normal,
  .pg-sys + .pg-sec.pg-normal{padding-block-start:60px;}
  .pg-head h2{font-size:23px;}
  .pg-checks{grid-template-columns:1fr;gap:14px;}
  .pg-stats{grid-template-columns:repeat(2,1fr);}
  .pg-stat b{font-size:24px;}
  .pg-gallery{grid-template-columns:repeat(2,1fr);}
  .cta-inner{flex-direction:column;align-items:stretch;}
  .pg-cta h2{font-size:22px;max-width:100%;}
  .btn-lg{text-align:center;}
}
@media(max-width:560px){
  .pg-stats{grid-template-columns:1fr;}
  .pg-gallery{grid-template-columns:1fr;}
}

/* =========================================================================
   قسم المشهد ثلاثي الأبعاد - يتتبّع المؤشر
   ========================================================================= */
.pg-scene{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding-block:64px;
  overflow:hidden;
}
.pg-scene::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 70% at 72% 30%, rgba(27,52,245,.20), transparent 68%),
    radial-gradient(46% 56% at 22% 74%, rgba(27,52,245,.18), transparent 70%);
  pointer-events:none;
}
html[dir="rtl"] .pg-scene::before{
  background:
    radial-gradient(60% 70% at 28% 30%, rgba(27,52,245,.20), transparent 68%),
    radial-gradient(46% 56% at 78% 74%, rgba(27,52,245,.18), transparent 70%);
}

.scene-inner{
  position:relative;
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:52px;
  align-items:center;
}

.scene-copy h2{color:#fff;font-size:27px;margin-block-end:14px;max-width:20ch;}
.scene-copy p{color:rgba(242,239,233,.66);font-size:15px;line-height:1.8;max-width:46ch;}

/* مواصفات مختصرة تحت النص */
.scene-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:26px 0 0;
  background:rgba(242,239,233,.14);border:1px solid rgba(242,239,233,.14);border-radius:0;overflow:hidden;}
.scene-specs > div{background:var(--ink);padding:14px 16px;}
.scene-specs dt{
  font-family:var(--font-display);font-weight:800;font-size:19px;
  color:#fff;margin:0 0 4px;direction:ltr;
}
html[dir="rtl"] .scene-specs dt{text-align:start;}
.scene-specs dd{margin:0;font-size:12.5px;color:rgba(242,239,233,.55);line-height:1.5;}

/* اللوحة: سلايدر صور المشهد بانتقال الكنس المائل 32° */
.scn{
  position:relative;
  aspect-ratio:1000/600;
  border:1px solid rgba(242,239,233,.16);
  background:#101315;
  overflow:hidden;
  outline:none;
}
.scn:focus-visible{outline:2px solid var(--plane);outline-offset:3px;}
.scn-track{position:absolute;inset:0;}
.scn-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .25s ease;}
.scn-slide.is-on{opacity:1;}
.scn-slide img{width:100%;height:100%;object-fit:cover;display:block;}

/* تنفس بطيء للشريحة الظاهرة، باتجاه يتناوب بين الشرائح */
html.js .scn-slide.is-on img{animation:scnBreathA 9s ease-out forwards;}
html.js .scn-slide:nth-child(even).is-on img{animation-name:scnBreathB;}
@keyframes scnBreathA{from{transform:scale(1.07) translateX(1.4%);}to{transform:scale(1) translateX(0);}}
@keyframes scnBreathB{from{transform:scale(1.07) translateX(-1.4%);}to{transform:scale(1) translateX(0);}}

/* لوح الكنس المائل - جرافيت بحافة محيطية، بزاوية الهوية 32° */
.scn-shear{
  position:absolute;inset:-3% -32%;z-index:3;pointer-events:none;
  transform:translateX(-140%) skewX(-32deg);
  background:var(--graphite);
}
.scn-shear i{
  position:absolute;inset-block:0;inset-inline-end:0;inline-size:4px;
  background:var(--plane);
}
.scn.sweep-fwd  .scn-shear{animation:scnSweepF .68s cubic-bezier(.2,.8,.2,1) forwards;}
.scn.sweep-back .scn-shear{animation:scnSweepB .68s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes scnSweepF{from{transform:translateX(-140%) skewX(-32deg);}to{transform:translateX(140%) skewX(-32deg);}}
@keyframes scnSweepB{from{transform:translateX(140%) skewX(-32deg);}to{transform:translateX(-140%) skewX(-32deg);}}

/* أدوات التنقل */
.scn-hud{
  position:absolute;z-index:4;inset-block-end:14px;inset-inline-end:14px;
  display:flex;align-items:center;gap:8px;
}
.scn-btn{
  inline-size:34px;block-size:34px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(14,15,16,.82);color:var(--bone);
  border:1px solid rgba(242,239,233,.28);border-radius:0;cursor:pointer;padding:0;
  transition:background .18s ease,border-color .18s ease;
}
.scn-btn:hover{background:var(--signal);border-color:var(--signal);}
.scn-btn:focus-visible{outline:2px solid var(--plane);outline-offset:2px;}
.scn-btn svg{inline-size:16px;block-size:16px;}
html[dir="rtl"] .scn-btn svg{transform:scaleX(-1);}
.scn-count{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:rgba(242,239,233,.9);background:rgba(14,15,16,.82);
  border:1px solid rgba(242,239,233,.28);
  block-size:34px;display:inline-flex;align-items:center;padding-inline:11px;gap:5px;
}
.scn-count i{font-style:normal;color:rgba(242,239,233,.5);}

.scn-dots{
  position:absolute;z-index:4;inset-block-end:14px;inset-inline-start:14px;
  display:flex;gap:7px;
}
.scn-dots button{
  inline-size:22px;block-size:4px;padding:0;border:0;border-radius:0;cursor:pointer;
  background:rgba(242,239,233,.32);
  transition:background .18s ease;
}
.scn-dots button:hover{background:rgba(242,239,233,.62);}
.scn-dots button.is-on{background:var(--plane);}
.scn-dots button:focus-visible{outline:2px solid var(--plane);outline-offset:2px;}

/* شارة التوصيف */
.scn-cap{
  position:absolute;z-index:4;inset-block-start:14px;inset-inline-start:14px;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;
  color:rgba(242,239,233,.9);
  background:rgba(14,15,16,.82);border:1px solid rgba(242,239,233,.2);
  padding:8px 12px;
}
html[dir="rtl"] .scn-cap{font-size:12px;letter-spacing:0;}
.scn-cap i{inline-size:6px;block-size:6px;background:var(--alert);flex-shrink:0;}

@media(max-width:600px){
  .scn{aspect-ratio:4/3;}
  .scn-cap{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html.js .scn-slide.is-on img{animation:none;}
  .scn-shear{display:none;}
  .scn-slide{transition:none;}
}


@media(max-width:1000px){
  .scene-inner{grid-template-columns:1fr;gap:32px;}
  .scene-copy h2{max-width:100%;}
  .scene-copy p{max-width:100%;}
}
@media(max-width:600px){
  .pg-scene{padding-block:44px;}
  .scene-copy h2{font-size:22px;}
  .scene-specs{grid-template-columns:1fr;}
}


/* =========================================================================
   صفحة الخدمات
   ========================================================================= */

/* ---- ما يميّزنا: أربع كتل بفواصل شعرية ---- */
.svw{
  list-style:none;margin:0 0 8px;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svw li{background:var(--card);padding:24px 22px;}
.svw-ico{display:block;inline-size:28px;color:var(--signal);margin-block-end:14px;}
.svw-ico svg{inline-size:100%;block-size:auto;display:block;}
/* البطاقات ساكنة، فالأيقونة تكتمل فورًا بلا حركة رسم */
.svw-ico .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;}
.svw h3{font-size:15px;margin:0 0 7px;color:var(--ink);}
.svw p{font-size:13px;line-height:1.7;color:var(--muted);margin:0;}
@media(max-width:900px){ .svw{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .svw{grid-template-columns:1fr;} }

/* ---- أزرار التصفية ---- */
.svf{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:26px;}
.svf button{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  padding:9px 16px;font-size:13px;font-weight:500;cursor:pointer;border-radius:0;
  font-family:inherit;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.svf button:hover{color:var(--ink);border-color:var(--ink);}
.svf button.on{background:var(--graphite);color:var(--bone);border-color:var(--graphite);}
/* الشفافية 0.7 تهبط بالعدّاد إلى 3.94 وترسب؛ الخطّ المونو الصغير
   يكفي لجعله ثانويًا بلا إضعاف تباينه. */
.svf button .n{font-family:var(--font-mono);font-size:10.5px;}
.svf button:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

/* ---- بطاقات الخدمات: ألواح جرافيت على صفحة عظمية ---- */
.svl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:1040px){ .svl{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){  .svl{grid-template-columns:1fr;} }

.svc-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--graphite);border:1px solid #22252A;border-radius:0;
  padding:26px 24px 22px;text-decoration:none;overflow:hidden;
  transition:border-color 260ms cubic-bezier(.2,.8,.2,1),
             background 260ms cubic-bezier(.2,.8,.2,1),
             transform 120ms ease;
}
.svc-card[hidden]{display:none;}
.svc-card:hover{background:#15171C;}
.svc-card:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
/* الضغط يستجيب فورًا - لا ننتظر إفلات الإصبع */
.svc-card:active{transform:translateY(1px);}

/* شريط لوني علوي يمتدّ عند التحويم - إشارة الاستجابة الأولى */
.svc-bar{
  position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 300ms cubic-bezier(.2,.8,.2,1);
}
html[dir="rtl"] .svc-bar{transform-origin:right;}
.svc-card:hover .svc-bar,.svc-card:focus-visible .svc-bar{transform:scaleX(1);}

.svc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-block-end:20px;}
.svc-n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:#8A8D96;padding-block-start:6px;
}

/* لوح الأيقونة: مربّع مصمت بلون الخدمة */
.svc-plate{
  display:flex;align-items:center;justify-content:center;
  inline-size:52px;block-size:52px;flex-shrink:0;
  transition:transform 320ms cubic-bezier(.2,.8,.2,1);
}
.svc-plate .svc-ico{inline-size:26px;block-size:26px;display:block;}
.svc-plate .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;}
.svc-plate .svc-ico-file{aspect-ratio:1/1;object-fit:contain;}
/* اللوح يتقدّم على محور الهوية 32 درجة عند التحويم */
.svc-card:hover .svc-plate{transform:translate(6px,-4px);}
html[dir="rtl"] .svc-card:hover .svc-plate{transform:translate(-6px,-4px);}

/* توزيع الألوان: الأيقونة تأخذ نقيض لوحها */
.svc-plane  .svc-plate{background:var(--plane);  color:var(--graphite);}
.svc-signal .svc-plate{background:var(--signal); color:var(--bone);}
.svc-orange .svc-plate{background:var(--alert);  color:var(--graphite);}
.svc-bone   .svc-plate{background:var(--bone);   color:var(--graphite);}

.svc-plane  .svc-bar{background:var(--plane);}
.svc-signal .svc-bar{background:var(--signal);}
.svc-orange .svc-bar{background:var(--alert);}
.svc-bone   .svc-bar{background:var(--bone);}

.svc-plane:hover  {border-color:var(--plane);}
.svc-signal:hover {border-color:var(--signal);}
.svc-orange:hover {border-color:var(--alert);}
.svc-bone:hover   {border-color:var(--bone);}

.svc-t{font-size:19px;line-height:1.35;margin:0 0 9px;color:var(--bone);letter-spacing:-.01em;}
.svc-tag{font-size:13.5px;line-height:1.7;color:var(--on-dark);margin:0 0 18px;}

.svc-inc{
  list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:7px;
  padding-block-start:16px;border-block-start:1px solid #22252A;
}
.svc-inc li{
  font-size:12.5px;line-height:1.6;color:#A8ABB4;
  padding-inline-start:14px;position:relative;
}
.svc-inc li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:7px;block-size:1px;
}
.svc-plane  .svc-inc li::before{background:var(--plane);}
.svc-signal .svc-inc li::before{background:var(--plane);}
.svc-orange .svc-inc li::before{background:var(--alert);}
.svc-bone   .svc-inc li::before{background:var(--bone);}

.svc-go{
  display:inline-flex;align-items:center;gap:9px;margin-block-start:auto;
  font-size:12.5px;font-weight:600;color:var(--bone);
}
.svc-go svg{
  inline-size:16px;block-size:16px;flex-shrink:0;
  transition:transform 300ms cubic-bezier(.2,.8,.2,1);
}
html[dir="rtl"] .svc-go svg{transform:scaleX(-1);}
html[dir="ltr"] .svc-card:hover .svc-go svg{transform:translateX(5px);}
html[dir="rtl"] .svc-card:hover .svc-go svg{transform:scaleX(-1) translateX(5px);}

.svl-empty{color:var(--muted);font-size:14px;padding-block:30px;}

@media (prefers-reduced-motion: reduce){
  .svc-card,.svc-bar,.svc-plate,.svc-go svg{transition:none;}
  .svc-card:hover .svc-plate{transform:none;}
  .svc-bar{transform:scaleX(1);}
  html[dir="ltr"] .svc-card:hover .svc-go svg{transform:none;}
  html[dir="rtl"] .svc-card:hover .svc-go svg{transform:scaleX(-1);}
}

/* ---- أربع خطوات لطلب الجناح ---- */
.svs{
  position:relative;overflow:hidden;
  background:var(--sand-2);color:var(--ink);
  border-block:1px solid var(--line);
}
.svs-rules{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(112deg,
    transparent 0 21px, rgba(14,15,16,.28) 21px 24px);
  -webkit-mask-image:linear-gradient(200deg,#000 2%,transparent 58%);
          mask-image:linear-gradient(200deg,#000 2%,transparent 58%);
  opacity:.22;
}
.svs-in{position:relative;z-index:1;}
.svs-head{max-width:62ch;margin-block-end:34px;}
.svs-head h2{color:var(--ink);font-size:clamp(24px,2.6vw,32px);margin:0 0 12px;}
.svs-head p{color:var(--muted);font-size:15px;line-height:1.8;margin:0;}
.svs .eyebrow{color:var(--signal);}

.svs-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svs-steps li{background:var(--card);padding:26px 22px;}
.svs-n{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(26px,2.4vw,32px);line-height:1;color:var(--signal);
  letter-spacing:-.02em;margin-block-end:14px;
}
.svs-steps h3{font-size:15px;margin:0 0 8px;color:var(--ink);}
.svs-steps p{font-size:13px;line-height:1.75;color:var(--muted);margin:0;}
@media(max-width:900px){ .svs-steps{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px){ .svs-steps{grid-template-columns:1fr;} }

/* =========================================================================
   عرض الأنظمة - Systems showcase
   شريط داكن كامل العرض، لوح لكل نظام: مفردة بصرية مقابل النصّ، وتبادل
   الجهة سطرًا بعد سطر. نصف القطر صفر ولا ظلال، والأزرق للفعل وحده.
   ========================================================================= */
.pg-sys{
  background:var(--graphite);
  color:var(--on-dark);
  padding-block:96px;
  /* الشريط الداكن يمتدّ للحافة حتى لو جاء بين قسمين عظميّين */
  margin-block:0;
}

/* ---------- الترويسة ---------- */
.sys-top{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:32px;
  padding-block-end:16px;
  margin-block-end:8px;
}
.sys-top h2{
  font-size:38px;
  line-height:1.2;
  color:var(--bone);
  margin:0 0 16px;
  max-width:20ch;
  letter-spacing:-.02em;   /* التتبّع السالب للعناوين الكبيرة */
}
html[dir="rtl"] .sys-top h2{max-width:24ch;letter-spacing:0;}
/* آخر فقرة في مقدّمة الأنظمة سطر خلاصة، لا فقرة عادية - يُبرز بالوزن
   واللون وخيط على المحور، ولا يُطبَّق إن كانت الفقرة وحدها. */
.sys-top-copy p:last-child:not(:only-child){
  font-size:17px;
  font-weight:600;
  color:var(--bone);
  border-inline-start:3px solid var(--plane);
  padding-inline-start:16px;
  margin-block-start:20px;
}
html[dir="rtl"] .sys-top-copy p:last-child:not(:only-child){font-size:17.5px;}

.sys-top p{
  font-size:16px;
  line-height:1.85;
  color:var(--on-dark);
  max-width:58ch;
  margin:0 0 12px;
}
.sys-tally{
  font-size:56px;
  line-height:1;
  color:var(--plane);
  opacity:.5;
  font-weight:600;
}

/* ---------- قائمة الألواح ---------- */
.sys-list{display:block;}

.sys{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:56px;
  padding-block:64px;
  border-block-start:1px solid var(--muted);
}
/* تبادل الجهة: البصري يمين ثم يسار */
.sys:nth-child(even) .sys-vis{order:2;}
.sys:nth-child(even) .sys-copy{order:1;}

/* ---------- المفردة البصرية ---------- */
.sys-vis{
  position:relative;
  overflow:hidden;
  background:var(--graphite);
  /* خيط رفيع يؤطّر اللوحة فتُقرأ شاشةً لا عناصر عائمة على الخلفية */
  border:1px solid var(--muted);
}
.sys-shot{
  margin:0;
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}
.sys-shot img,
.sys-shot svg{
  inline-size:100%;
  block-size:100%;
  display:block;
  object-fit:cover;
}

/* التكبير عند المرور يبقى للصور الحقيقية وحدها.
   تطبيقه على اللوحات المولّدة كان يعيد ترشيح خطوط 112° وحوافّ المستطيلات
   عند كل إطار، فتظهر رجفة/تموّج على كامل اللوحة. */
.sys-shot img{transition:transform 900ms cubic-bezier(.2,.8,.2,1);}
.sys:hover .sys-shot img{transform:scale(1.03);}

/* اللوحات المولّدة تستجيب للمرور بتغيّر الإطار وحده - بلا حركة ولا رجفة */
.sys-vis{transition:border-color 180ms cubic-bezier(.2,.8,.2,1);}
.sys:hover .sys-vis{border-color:var(--plane);}

/* رقم اللوح */
.sys-idx{
  position:absolute;
  inset-block-start:16px;
  inset-inline-start:16px;
  font-size:13px;
  font-weight:600;
  color:var(--graphite);
  background:var(--plane);
  padding:5px 10px;
}

/* لوح الانتقال المائل 32° - يمسح الصورة مرّة عند الظهور */
.sys-shear{
  position:absolute;
  inset-block:-20%;
  inset-inline-start:-40%;
  inline-size:44%;
  background:var(--bone);
  transform:skewX(-32deg) translateX(-140%);
  pointer-events:none;
}

/* ---------- النصّ ---------- */
.sys-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  inline-size:46px;
  block-size:46px;
  border:1px solid var(--muted);
  color:var(--plane);
  margin-block-end:22px;
  transition:background 180ms cubic-bezier(.2,.8,.2,1),
             color 180ms cubic-bezier(.2,.8,.2,1),
             border-color 180ms cubic-bezier(.2,.8,.2,1);
}
.sys-ico svg{inline-size:22px;block-size:22px;display:block;}
/* الأيقونات في الخدمات ترسم بالتتابع؛ هنا تظهر كاملة فورًا */
html .sys-ico .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
.sys:hover .sys-ico{background:var(--plane);color:var(--graphite);border-color:var(--plane);}

.sys-copy h3{
  font-size:25px;
  line-height:1.3;
  color:var(--bone);
  margin:0 0 14px;
}
.sys-copy p{
  font-size:15px;
  line-height:1.9;
  color:var(--on-dark);
  margin:0;
  max-width:46ch;
}

.sys-tags{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sys-tags li{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--plane);
  border:1px solid var(--muted);
  padding:6px 11px;
}

.sys-foot{margin-block-start:56px;}

/* ---------- الكشف عند التمرير ---------- */
/* الفئة يضيفها السكربت، فبدون JS تظهر الألواح كاملة بلا أيّ إخفاء */
.sys-anim .sys{
  opacity:0;
  /* الدخول على المحور 32°: 17 ÷ 27 = 0.63 = ظلّ 32°.
     الدخول الرأسي مخالف صريح لفصل 29 من الدليل. */
  transform:translate(-27px,17px);
  transition:opacity 900ms cubic-bezier(.2,.8,.2,1),
             transform 900ms cubic-bezier(.2,.8,.2,1);
}
.sys-anim .sys.is-on{opacity:1;transform:none;}
/* المسحة المائلة تعبر مرّة واحدة مع ظهور اللوح */
.sys-anim .sys.is-on .sys-shear{
  animation:sysWipe 900ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes sysWipe{
  0%  {transform:skewX(-32deg) translateX(-140%);}
  100%{transform:skewX(-32deg) translateX(420%);}
}

/* حياة داخل اللوحات المولّدة */
.sysv-live{animation:svPulse 1.6s steps(1,end) infinite;}
@keyframes svPulse{0%,50%{opacity:1;}51%,100%{opacity:.15;}}

/* ---------- الشاشات الصغيرة ---------- */
@media(max-width:900px){
  .pg-sys{padding-block:64px;}
  .sys-top{grid-template-columns:1fr;gap:16px;}
  .sys-top h2{font-size:28px;}
  .sys-tally{font-size:40px;}
  .sys{
    grid-template-columns:1fr;
    gap:26px;
    padding-block:44px;
  }
  /* على عمود واحد تبقى الصورة أولًا في كل الألواح */
  .sys:nth-child(even) .sys-vis{order:0;}
  .sys:nth-child(even) .sys-copy{order:0;}
  .sys-copy h3{font-size:21px;}
  .sys-copy p{font-size:14.5px;max-width:none;}
  .sys-ico{margin-block-end:16px;}
}

@media(prefers-reduced-motion:reduce){
  .sys-anim .sys{opacity:1;transform:none;transition:none;}
  .sys-anim .sys.is-on .sys-shear{animation:none;}
  .sys-shot img{transition:none;}
  .sys:hover .sys-shot img{transform:none;}
  .sysv-live{animation:none;}
}

/* =========================================================================
   حياة اللوحات المولّدة
   كل حركة تخصّ عنصرًا صغيرًا مصمتًا: تمدّد أفقي أو تلاشٍ أو رسم خطّ.
   لا شيء يُكبّر اللوحة كلها - تكبير حقل الخطوط 112° يعيد ترشيح حوافّه
   كل إطار فتظهر رجفة، وهي العلّة التي أُصلحت سابقًا.
   ========================================================================= */

/* 01 - حقول التسجيل تمتلئ بالتتابع ثم يُضغط الزرّ فتصدر التذكرة */
.sys.is-on .sysv-fill{
  transform-origin:left center;
  animation:sysvFill 7s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:calc(var(--i) * .5s);
}
@keyframes sysvFill{
  0%,4%   {transform:scaleX(0);}
  16%,72% {transform:scaleX(1);}
  84%,100%{transform:scaleX(0);}
}
.sys.is-on .sysv-ticket{animation:sysvIssue 7s cubic-bezier(.2,.8,.2,1) infinite;}
/* التذكرة لا تختفي تمامًا: تخفت ثم تُصدر من جديد.
   إخفاؤها كليًّا يترك نصف الدورة بلوحة شبه فارغة تُقرأ عطلًا. */
@keyframes sysvIssue{
  0%,42%  {opacity:.28;transform:translateX(10px);}
  54%,88% {opacity:1;transform:translateX(0);}
  100%    {opacity:.28;transform:translateX(10px);}
}
.sys.is-on .sysv-register .sysv-cta{animation:sysvPress 7s steps(1,end) infinite;}
@keyframes sysvPress{0%,40%{opacity:1;}44%,50%{opacity:.45;}52%,100%{opacity:1;}}

/* 03 - مؤشّر الجلسة الحيّة ينتقل بين صفوف جدول الأعمال */
.sys.is-on .sysv-step{
  opacity:0;
  animation:sysvStep 6s steps(1,end) infinite;
  animation-delay:calc(var(--i) * 1.2s);
}
@keyframes sysvStep{0%,20%{opacity:1;}21%,100%{opacity:0;}}
.sys.is-on .sysv-rowbg{
  opacity:0;
  animation:sysvRow 6s steps(1,end) infinite;
  animation-delay:calc(var(--i) * 1.2s);
}
@keyframes sysvRow{0%,20%{opacity:.16;}21%,100%{opacity:0;}}

/* 06 - بطاقات المؤشّرات تنمو ثم يُرسم المنحنى */
.sys.is-on .sysv-kpi{
  transform-origin:left center;
  animation:sysvKpi 6s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:calc(var(--i) * .12s);
}
@keyframes sysvKpi{
  0%,6%   {transform:scaleX(0);}
  22%,80% {transform:scaleX(1);}
  94%,100%{transform:scaleX(0);}
}
/* المنحنى يُرسم بإزاحة التقطيع - لا تحويل ولا تكبير */
.sys.is-on .sysv-line{
  stroke-dasharray:640;
  animation:sysvDraw 6s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes sysvDraw{
  0%,8%   {stroke-dashoffset:640;}
  46%,84% {stroke-dashoffset:0;}
  100%    {stroke-dashoffset:640;}
}
.sys.is-on .sysv-analytics .sysv-cta{animation:sysvBlink 6s steps(1,end) infinite;}
@keyframes sysvBlink{0%,44%{opacity:0;}48%,86%{opacity:1;}90%,100%{opacity:0;}}

/* 02 - شعاع المسح، ويستجيب له القارئ عند الباب في اللحظة نفسها */
.sys.is-on .sysv-scan{animation:sysvScan 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
.sys.is-on .sysv-read{animation:sysvRead 3.2s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes sysvRead{0%,52%{opacity:.26;}60%,78%{opacity:.62;}86%,100%{opacity:.26;}}
.sys.is-on .sysv-okled{animation:sysvOk 3.2s steps(1,end) infinite;}
@keyframes sysvOk{0%,58%{opacity:.25;}62%,84%{opacity:1;}88%,100%{opacity:.25;}}
@keyframes sysvScan{
  0%,8%   {transform:translateY(-104px);opacity:0;}
  16%     {opacity:1;}
  84%     {opacity:1;}
  92%,100%{transform:translateY(112px);opacity:0;}
}
/* 04 - شريط تقدّم البثّ ينمو ثم يعود، والكاميرات تتناوب الهواء */
.sys.is-on .sysv-prog{
  transform-origin:left center;
  animation:sysvProg 9s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes sysvProg{
  0%     {transform:scaleX(.10);}
  86%    {transform:scaleX(1);}
  93%,100%{transform:scaleX(.10);}
}
.sys.is-on .sysv-cam{
  opacity:0;
  animation:sysvCam 4.8s steps(1,end) infinite;
  animation-delay:calc(var(--i) * 1.6s);
}
@keyframes sysvCam{0%,33%{opacity:1;}34%,100%{opacity:0;}}
.sys.is-on .sysv-camled{
  animation:sysvCamLed 4.8s steps(1,end) infinite;
  animation-delay:calc(var(--i) * 1.6s);
}
@keyframes sysvCamLed{0%,33%{opacity:1;}34%,100%{opacity:.28;}}
.sys.is-on .sysv-bar{
  transform-origin:left center;
  animation:sysvBar 5.5s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes sysvBar{
  0%,6%   {transform:scaleX(0);}
  26%,82% {transform:scaleX(1);}
  96%,100%{transform:scaleX(0);}
}
@media(prefers-reduced-motion:reduce){
  .sys.is-on .sysv-scan,.sys.is-on .sysv-prog,.sys.is-on .sysv-bar,
  .sys.is-on .sysv-read,.sys.is-on .sysv-okled,
  .sys.is-on .sysv-cam,.sys.is-on .sysv-camled,
  .sys.is-on .sysv-fill,.sys.is-on .sysv-ticket,.sys.is-on .sysv-step,
  .sys.is-on .sysv-kpi,.sys.is-on .sysv-line,.sys.is-on .sysv-rowbg,
  .sys.is-on .sysv-register .sysv-cta,.sys.is-on .sysv-analytics .sysv-cta{animation:none;}
  /* بلا حركة تبقى العناصر في حالتها النهائية المقروءة */
  .sys.is-on .sysv-step{opacity:0;}
  .sys.is-on .sysv-step[style*="--i:0"]{opacity:1;}
}


/* 11 - رقم الاستحقاق ينتقل من القائمة إلى بطاقة الراعي */
.sys.is-on .sysv-hop{animation:sysvHop 5.5s cubic-bezier(.2,.8,.2,1) infinite;}
@keyframes sysvHop{
  0%,14%  {transform:translate(-120px,60px);opacity:0;}
  22%     {opacity:1;}
  46%,78% {transform:translate(120px,-140px);opacity:1;}
  90%,100%{transform:translate(120px,-140px);opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .sys.is-on .sysv-hop{animation:none;transform:translate(120px,-140px);}
}

/* ---------- rich تحريري مدمج: صدارة كبيرة وعمود جانبي (richx) ---------- */
.richx{position:relative;}
/* خط يُرسم عند بلوغ القسم وينكسر بذيل 32° - توقيع الهوية */
.richx-rule{
  display:block;position:relative;block-size:2px;inline-size:88px;
  background:var(--signal,#1B34F5);margin-block-end:30px;
  transform:scaleX(0);transform-origin:var(--rx-origin, right);
}
html[dir="ltr"] .richx-rule{--rx-origin:left;}
.richx-rule::after{
  content:'';position:absolute;inset-inline-end:-18px;inset-block-start:-5px;
  inline-size:24px;block-size:2px;background:var(--plane,#7B8CFF);
  transform:rotate(-32deg);
}
.richx.richx-on .richx-rule{
  transform:scaleX(1);
  transition:transform 700ms cubic-bezier(.2,.8,.2,1);
}
.richx-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px 56px;align-items:start;
}
.richx-lead{
  font-size:clamp(19px,2.4vw,26px);line-height:1.95;font-weight:650;
  color:var(--graphite,#0E0F10);letter-spacing:-.2px;margin:0;
  opacity:0;transform:translateY(14px);
}
.richx-aside{
  border-inline-start:1px solid var(--line,#DDD8D0);
  padding-inline-start:26px;padding-block-start:6px;
  opacity:0;transform:translateY(14px);
}
.richx-tick{display:block;font-size:12px;color:var(--plane,#7B8CFF);margin-block-end:10px;}
.richx-aside p{font-size:14px;line-height:2.05;color:var(--muted-ink,#5A5F66);margin:0;}
.richx-aside p + p{margin-block-start:10px;}
.richx.richx-on .richx-lead,
.richx.richx-on .richx-aside{
  opacity:1;transform:none;
  transition:opacity 560ms cubic-bezier(.2,.8,.2,1), transform 560ms cubic-bezier(.2,.8,.2,1);
}
.richx.richx-on .richx-aside{transition-delay:140ms;}
@media (max-width: 820px){
  .richx-grid{grid-template-columns:1fr;}
  .richx-aside{border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid var(--line,#DDD8D0);padding-block-start:16px;}
}
@media (prefers-reduced-motion: reduce){
  .richx-rule{transform:scaleX(1);transition:none;}
  .richx-lead,.richx-aside{opacity:1;transform:none;transition:none;}
}

/* ---------- richb: اللوحة التحريرية الداكنة (صفحة الأنظمة) ---------- */
.richb-sec{padding-block:26px 64px;}
.richb{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:4fr 3fr;
  background:var(--graphite,#0E0F10);color:var(--bone,#F2EFE9);
  border:1px solid #1E2024;
}
/* الرقم المقصوص: ينزف من الزاوية - وزن ثقيل وحضور خافت */
.richb-num{
  position:absolute;inset-block-end:-.28em;inset-inline-start:-.06em;z-index:0;
  font-size:clamp(120px,17vw,230px);font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(123,140,255,.20);
  pointer-events:none;user-select:none;
}
.richb-copy{
  position:relative;z-index:1;
  padding:clamp(28px,4.2vw,56px);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.richb-in{font-size:11.5px;letter-spacing:.14em;color:var(--plane,#7B8CFF);}
.richb-h{font-size:clamp(24px,3.2vw,40px);line-height:1.45;margin:0;color:var(--bone,#F2EFE9);}
.richb-h b{font-weight:800;}
.richb-h em{font-style:normal;font-weight:300;display:block;}
.richb-lead{font-size:clamp(15px,1.5vw,17.5px);line-height:2.05;color:#D8D4CC;margin:0;max-inline-size:56ch;}
.richb-p{font-size:13.5px;line-height:2;color:#9BA0A8;margin:0;max-inline-size:56ch;}
.richb-btn{
  margin-block-start:10px;background:var(--bone,#F2EFE9);color:var(--graphite,#0E0F10);
  border:0;padding:13px 26px;font-weight:700;font-size:14px;
  transition:background 160ms cubic-bezier(.2,.8,.2,1), color 160ms cubic-bezier(.2,.8,.2,1);
}
.richb-btn:hover{background:var(--signal,#1B34F5);color:#fff;}
/* الشريط العمودي: الصورة تملأ العمود وتنزف من الحافتين، بغسل أزرق وقصّة 32° */
.richb-img{position:relative;margin:0;min-block-size:340px;}
.richb-img img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;}
.richb-wash{position:absolute;inset:0;background:var(--signal,#1B34F5);mix-blend-mode:multiply;opacity:.42;}
.richb-cut{
  position:absolute;inset-block-end:-1px;inset-inline:0;block-size:74px;
  background:var(--graphite,#0E0F10);
  clip-path:polygon(0 100%, 100% 100%, 100% 0);
}
html[dir="rtl"] .richb-cut{clip-path:polygon(0 100%, 100% 100%, 0 0);}
/* الظهور: النص يصعد والصورة تنكشف جانبيًا */
.richb .richb-copy{opacity:0;transform:translateY(18px);}
.richb .richb-img{clip-path:inset(0 0 0 100%);}
html[dir="ltr"] .richb .richb-img{clip-path:inset(0 100% 0 0);}
.richb.richx-on .richb-copy{
  opacity:1;transform:none;
  transition:opacity 620ms cubic-bezier(.2,.8,.2,1) 120ms, transform 620ms cubic-bezier(.2,.8,.2,1) 120ms;
}
.richb.richx-on .richb-img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 780ms cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 860px){
  .richb{grid-template-columns:1fr;}
  .richb-img{order:-1;min-block-size:220px;}
  .richb-num{font-size:110px;}
}
@media (prefers-reduced-motion: reduce){
  .richb .richb-copy,.richb .richb-img{opacity:1;transform:none;clip-path:none;transition:none;}
}

/* ---------- أغلفة المدونة: بلا زوايا دائرية ولا تدرجات ---------- */
.feat-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite,#0E0F10);}
.feat-cover img{inline-size:100%;block-size:100%;object-fit:cover;display:block;}
.feat-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:72px;font-weight:800;color:rgba(242,239,233,.16);}
.post-cover{margin:0 auto 8px;max-inline-size:1000px;overflow:hidden;background:var(--graphite,#0E0F10);}
.post-cover img{inline-size:100%;block-size:auto;display:block;}