/* =========================================================================
   هيرو الصفحات - Page hero band
   البنية مأخوذة عن النموذج المرفق: نظرة، عنوان يظهر كلمة كلمة، نصّ،
   أزرار، لوح أرقام، وشريط وسوم متحرّك. أمّا اللغة البصرية فمن هوية
   العلامة السابعة: جرافيت وعظمي، نصف قطر صفر، بلا ظلال ولا تدرّجات،
   وأزرق الإشارة للفعل وحده.
   ========================================================================= */

.phb{
  position:relative;
  overflow:hidden;
  background:var(--graphite);
  color:var(--on-dark);
  padding-block:76px 0;
  isolation:isolate;      /* يحصر ترتيب الطبقات داخل الشريط */
}

/* ---------- حقل اللوحات خلف النصّ ---------- */
.phb-field{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  /* الحقل يقف في الجهة المقابلة للنصّ دائمًا: يسارًا في العربية ويمينًا
     في الإنجليزية. وضعه في جهة النصّ يجعل اللوحات تمرّ خلف العنوان
     فيصعب قراءته. */
  justify-content:flex-end;
  gap:14px;
  padding-inline-end:2%;
  pointer-events:none;
  overflow:hidden;
  /* يتلاشى تمامًا قبل أن يصل إلى عمود النصّ */
  -webkit-mask-image:linear-gradient(to var(--phb-dir,left),#000 0 42%,transparent 62%);
          mask-image:linear-gradient(to var(--phb-dir,left),#000 0 42%,transparent 62%);
}
html[dir="rtl"] .phb-field{--phb-dir:right;}
html[dir="ltr"] .phb-field{--phb-dir:left;}
.phb-col{inline-size:190px;flex:0 0 auto;}
.phb-track{
  display:flex;
  flex-direction:column;
  gap:14px;
  animation:phbScroll 26s cubic-bezier(.5,0,.5,1) infinite;
}
/* سرعات مختلفة كي يُقرأ الحقل حيًّا لا شريطًا واحدًا */
.phb-col-1 .phb-track{animation-duration:31s;animation-delay:-6s;}
.phb-col-2 .phb-track{animation-duration:36s;animation-delay:-12s;}

.phb-cell{
  display:block;
  inline-size:190px;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid var(--muted);
  opacity:.22;
}
.phb-cell svg{inline-size:100%;block-size:100%;display:block;}

/* وقفة قصيرة في منتصف الدورة - المسار يحمل القائمة مرّتين
   فالانتهاء عند -50% يطابق البداية بصريًا. */
@keyframes phbScroll{
  0%  {transform:translateY(0);}
  44% {transform:translateY(-22%);}
  58% {transform:translateY(-22%);}
  100%{transform:translateY(-50%);}
}

/* ---------- المحتوى ---------- */
.phb-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:center;
  padding-block-end:64px;
}
.phb-copy .eyebrow{color:var(--plane);margin-block-end:18px;}

.phb-h{
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--bone);
  margin:0 0 20px;
  max-width:16ch;
}
html[dir="rtl"] .phb-h{letter-spacing:0;line-height:1.3;max-width:19ch;}

.phb-w{
  display:inline-block;
  animation:phbWordIn 720ms cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(80ms + var(--w) * 70ms);
}
@keyframes phbWordIn{from{opacity:0;transform:translateY(16px);}}

/* الجزء الملوّن من العنوان: أزرق الهوية المحيطي، لا تدرّج */
.phb-accent{color:var(--plane);}

.phb-copy p{
  font-size:16px;
  line-height:1.85;
  color:var(--on-dark);
  margin:0 0 14px;
  max-width:52ch;
}
.phb-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:18px;}
.phb-ctas .btn-outline{
  background:transparent;
  border-color:var(--muted);
  color:var(--bone);
}
.phb-ctas .btn-outline:hover{background:var(--bone);color:var(--graphite);border-color:var(--bone);}

/* ---------- لوح الأرقام ---------- */
.phb-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--muted);
  /* معتم تمامًا: شفافيته كانت تُظهر لوحات الخلفية خلف الأرقام فتتّسخ */
  background:var(--graphite);
}
.phb-stat{
  padding:22px 22px 24px;
  border-inline-start:1px solid var(--muted);
  border-block-start:1px solid var(--muted);
  min-inline-size:0;
}
.phb-stat:nth-child(-n+2){border-block-start:0;}
.phb-stat:nth-child(odd){border-inline-start:0;}
.phb-stat .v{
  display:block;
  font-family:var(--font-mono);
  font-size:28px;
  font-weight:600;
  line-height:1.1;
  color:var(--bone);
  margin-block-end:8px;
}
/* =========================================================================
   بطاقات الهيرو
   لوّنت بنظام الهوية: الأزرق المحيطي للحدّ والأيقونة والرقم، والبرتقالي
   في بطاقة البيانات وحدها بوصفها المؤشّر الحيّ. أزرق الإشارة يبقى للزرّ
   وحده فلا يتكرّر في الشاشة. الحركة على المحور 32° بتتابع 60 مللي.
   ========================================================================= */
.phb-stat{position:relative;overflow:hidden;}

/* الحدّ الملوّن على الحافة العلوية لا الجانبية.
   كان على جهة البداية فيقع فوق خيط الشبكة نفسه، فيظهر خطّان فوق بعضهما
   يُقرآن فاصلًا ملوّنًا بين البطاقتين لا حدًّا لبطاقة - وهو التشوّه. */
.phb-stat-bar{
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  block-size:3px;
  background:var(--plane);
  transform:scaleX(0);
  transform-origin:inline-start center;
  animation:phbBar 420ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(340ms + var(--i,0) * 60ms);
}
@keyframes phbBar{to{transform:scaleX(1);}}
/* بطاقة البيانات: المؤشّر الحيّ - الاستعمال الوحيد للبرتقالي هنا */
.phb-stat:nth-child(4) .phb-stat-bar{background:var(--alert);}

.phb-stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-block-end:16px;
}
.phb-stat-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  inline-size:36px;
  block-size:36px;
  flex:0 0 auto;
  border:1px solid var(--muted);
  color:var(--plane);
  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);
}
.phb-stat-ico svg{inline-size:19px;block-size:19px;display:block;}
/* أيقونات الخدمات ترسم بالتتابع في مكانها الأصلي؛ هنا تظهر كاملة */
html .phb-stat-ico .svc-ico path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
.phb-stat-n{
  font-size:11px;
  letter-spacing:.14em;
  /* بلا شفافية: 0.85 تُنزل التباين الفعلي إلى 4.92 و4.70 - يمرّان بهامش
     ضيّق، والقيمة الكاملة تعطي 6.43 و6.15. */
  color:var(--plane);
}
.phb-stat:nth-child(4) .phb-stat-n{color:var(--alert);}

/* المسحة المائلة 32° تعبر البطاقة مرّة عند ظهورها */
.phb-stat-wipe{
  position:absolute;
  inset-block:-20%;
  inset-inline-start:-45%;
  inline-size:40%;
  background:var(--plane);
  opacity:.22;
  transform:skewX(-32deg) translateX(-180%);
  pointer-events:none;
  animation:phbCardWipe 900ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(300ms + var(--i,0) * 60ms);
}
@keyframes phbCardWipe{
  from{transform:skewX(-32deg) translateX(-180%);}
  to  {transform:skewX(-32deg) translateX(460%);}
}

/* المرور: عنصر واحد يتحرّك - المربّع ينقلب والخلفية ترتفع درجة */
.phb-stat{transition:background 180ms cubic-bezier(.2,.8,.2,1);}
.phb-stat:hover{background:var(--surface-dark);}
.phb-stat:hover .phb-stat-ico{background:var(--plane);color:var(--graphite);border-color:var(--plane);}
.phb-stat:nth-child(4):hover .phb-stat-ico{background:var(--alert);border-color:var(--alert);}

/* خانة بعنوان نصّي بدل رقم: عنوان بوزنه لا رقم بخط أحادي المسافة */
.phb-stat-t .v{
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.3;
  margin-block-end:10px;
}
html[dir="rtl"] .phb-stat-t .v{letter-spacing:0;}
.phb-stat-t .k{font-size:13px;}
@media(max-width:900px){ .phb-stat-t .v{font-size:16px;} }

.phb-stat .k{
  display:block;
  font-size:12.5px;
  line-height:1.6;
  color:var(--sand);
}

/* ---------- شريط الوسوم ---------- */
.phb-marquee{
  position:relative;
  z-index:2;
  overflow:hidden;
  border-block-start:1px solid var(--muted);
  padding-block:14px;
}
.phb-marquee-track{
  display:flex;
  gap:26px;
  inline-size:max-content;
  animation:phbMarquee 38s linear infinite;
}
@keyframes phbMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.phb-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--sand);
  white-space:nowrap;
}
.phb-tag i{
  inline-size:5px;
  block-size:5px;
  background:var(--plane);
  display:block;
  flex:0 0 auto;
}

/* =========================================================================
   وضع التعاقب: بطاقة واحدة في كل نبضة
   الفئة is-rot يضيفها السكربت وحده، فبدون جافاسكربت تبقى الشبكة
   الرباعية والبطاقات الأربع ظاهرة معًا.
   ========================================================================= */
.phb-stats.is-rot{
  display:grid;
  grid-template-columns:1fr;
  /* البطاقة المخفيّة تقف 26px على المحور خارج اللوح؛ نقصّها هنا بدل
     الاتّكال على قصّ الصفحة العام. */
  overflow:hidden;
  /* كل البطاقات في الخانة نفسها: ارتفاع اللوح = أطول بطاقة، فلا يقفز */
}
/* البطاقة معتمة كي تُغطّي الخارجة تمامًا أثناء المسح، فلا يظهر نصّان
   فوق بعضهما. التلاشي المتقاطع كان يُظهرهما شفّافين معًا 420 مللي -
   وهو ما يُتعب العين. */
.phb-stats.is-rot .phb-stat{
  grid-area:1 / 1;
  border:0;
  background:var(--graphite);
  visibility:hidden;
  z-index:1;
  pointer-events:none;
}
.phb-stats.is-rot .phb-stat.is-on{
  visibility:visible;
  z-index:2;
  pointer-events:auto;
  /* «المسحة هي الانتقال، وهي تحلّ محلّ كل تلاشٍ متقاطع» - دراسة 02 */
  animation:phbPlaneIn 420ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* المستوى يدخل من جهة بداية القراءة: يمينًا في العربية ويسارًا في الإنجليزية */
@keyframes phbPlaneIn{
  from{clip-path:polygon(100% 0, 100% 0, 100% 100%, 134% 100%);}
  to  {clip-path:polygon(-34% 0, 100% 0, 100% 100%, 0 100%);}
}
html[dir="ltr"] .phb-stats.is-rot .phb-stat.is-on{animation-name:phbPlaneInLtr;}
@keyframes phbPlaneInLtr{
  from{clip-path:polygon(0 0, 0 0, -34% 100%, 0 100%);}
  to  {clip-path:polygon(0 0, 134% 0, 100% 100%, 0 100%);}
}

/* المسحة المائلة فوق البطاقة تُلغى في وضع التعاقب: المسح نفسه هو الحركة،
   وحركتان في نبضة واحدة مخالفة لـ«عنصر واحد يتحرّك». */
.phb-stats.is-rot .phb-stat-wipe{display:none;}

/* الحدّ يمتدّ بعد اكتمال المسح لا معه - تعاقب لا تكديس */
.phb-stats.is-rot .phb-stat .phb-stat-bar{animation:none;transform:scaleX(0);}
.phb-stats.is-rot .phb-stat.is-on .phb-stat-bar{
  animation:phbBar 420ms cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:380ms;
}

.phb-stats.is-rot .phb-stat{padding:30px 30px 34px;}

/* ---------- شريط المؤشّر ---------- */
.phb-rot-rail{
  display:flex;
  gap:8px;
  margin-block-start:12px;
}
.phb-rot-dot{
  flex:1;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  block-size:14px;
  display:flex;
  align-items:center;
}
.phb-rot-dot i{
  display:block;
  inline-size:100%;
  block-size:3px;
  background:var(--muted);
  transition:background 180ms cubic-bezier(.2,.8,.2,1);
}
.phb-rot-dot:hover i{background:var(--sand);}
.phb-rot-dot.is-on i{background:var(--plane);}
/* المؤشّر الرابع يتبع لون بطاقته */
.phb-rot-dot:nth-child(4).is-on i{background:var(--alert);}
.phb-rot-dot:focus-visible{outline:2px solid var(--plane);outline-offset:3px;}

@media(max-width:900px){
  .phb-stats.is-rot .phb-stat{padding:24px 22px 28px;}
}

/* =========================================================================
   شريط الدعوة بجدول المواصفات
   ========================================================================= */
.cta-band{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.cta-band-copy h2{
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.28;
  color:var(--bone);
  margin:0 0 16px;
  max-width:20ch;
}
.cta-band-copy p{
  font-size:15.5px;
  line-height:1.85;
  color:var(--on-dark);
  margin:0 0 26px;
  max-width:48ch;
}

.cta-spec{
  margin:0;
  border:1px solid var(--muted);
}
.cta-spec > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
  border-block-start:1px solid var(--muted);
}
.cta-spec > div:first-child{border-block-start:0;}
.cta-spec dt{font-size:14px;color:var(--bone);}
.cta-spec dd{
  margin:0;
  font-size:13.5px;
  color:var(--plane);
  text-align:end;
  white-space:nowrap;
}

/* ---------- الشاشات الصغيرة ---------- */
@media(max-width:1000px){
  .phb-col-2{display:none;}
}
@media(max-width:900px){
  .phb{padding-block-start:56px;}
  /* الحقل يقع خلف النصّ على عمود واحد فيشوّشه - يُحذف تمامًا */
  .phb-field{display:none;}
  .phb-inner{grid-template-columns:1fr;gap:34px;padding-block-end:44px;}
  .phb-h{max-width:none;}
  .phb-copy p{max-width:none;}
  .phb-stat{padding:20px 18px;}
  .phb-stat .v{font-size:23px;}

  .cta-band{grid-template-columns:1fr;gap:32px;}
  .cta-band-copy h2{max-width:none;}
  .cta-band-copy p{max-width:none;}
}
@media(max-width:480px){
  .phb-stats{grid-template-columns:1fr;}
  .phb-stat{border-inline-start:0;border-block-start:1px solid var(--muted);}
  .phb-stat:first-child{border-block-start:0;}
  .cta-spec > div{flex-direction:column;gap:6px;}
  .cta-spec dd{text-align:start;}
}

@media(prefers-reduced-motion:reduce){
  .phb-stat-bar{animation:none;transform:scaleX(1);}
  .phb-stat-wipe{display:none;}
  .phb-stat,.phb-stat-ico{transition:none;}
  .phb-track{animation:none;}
  .phb-marquee-track{animation:none;}
  .phb-w{animation:none;}
}


/* شريط دعوة أزرق - يتمايز عن شريط الجرافيت حين يتجاوران */
.pg-cta.v-blue{background:var(--signal);}
.pg-cta.v-blue .cta-band-copy p{color:rgba(255,255,255,.88);}
.pg-cta.v-blue .cta-spec{border-color:rgba(242,239,233,.35);}
.pg-cta.v-blue .cta-spec > div{border-color:rgba(242,239,233,.35);}
.pg-cta.v-blue .cta-spec dd{color:var(--bone);font-weight:600;}
.pg-cta.v-blue .cta-btn:hover{background:var(--graphite);border-color:var(--graphite);color:var(--bone);}


/* شريط دعوة أحمر بلون الهوية الناري - النص داكن لأن الأبيض عليه لا يقرأ */
.pg-cta.v-red{background:var(--alert);}
.pg-cta.v-red h2,.pg-cta.v-red .cta-band-copy h2{color:var(--graphite);}
.pg-cta.v-red .cta-band-copy p{color:rgba(14,15,16,.82);}
.pg-cta.v-red .cta-spec{border-color:rgba(14,15,16,.4);}
.pg-cta.v-red .cta-spec > div{border-color:rgba(14,15,16,.4);}
.pg-cta.v-red .cta-spec dt{color:rgba(14,15,16,.75);}
.pg-cta.v-red .cta-spec dd{color:var(--graphite);font-weight:700;}
.pg-cta.v-red .cta-btn{background:var(--graphite);color:var(--bone);border-color:var(--graphite);}
.pg-cta.v-red .cta-btn:hover{background:var(--bone);color:var(--graphite);border-color:var(--bone);}