/* أقسام الصفحة (المرحلة 3): الهيدر، الواجهة، من نحن، الرؤية والرسالة والقيم.
   خصائص منطقية فقط، وألوان وخطوط النظام فقط. */

/* ---------- الهيدر (داخل الكتلة الداكنة، غير ثابت) ---------- */
.site-header {
  background: var(--color-dark-bg);
  color: var(--color-dark-text);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-dark-border);
}
.site-logo { display: inline-flex; flex: none; margin-inline-end: auto; }
/* 48px بالجوال و56px بالكمبيوتر حتى يُقرأ الاسمان العربي والإنجليزي */
.site-logo img { block-size: 48px; inline-size: auto; }
@media (min-width: 64rem) { .site-logo img { block-size: 56px; } }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--color-ivory);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  text-decoration: none;
  border-block-end: 1px solid transparent;
}
@media (hover: hover) { .site-nav a:hover { border-block-end-color: var(--color-ivory); } }

.site-header .lang-switch { color: var(--color-ivory); border-color: var(--color-dark-muted); }
@media (hover: hover) { .site-header .lang-switch:hover { color: var(--color-ivory); border-color: var(--color-ivory); } }

/* ---------- قائمة الجوال (أقل من 64rem) ----------
   بدون JS: الزر مخفي والروابط ظاهرة بسطر ثاني تحت الشعار.
   مع JS (الكلاس js على <html> من السكربت الصغير أول الـ body): الزر يظهر والروابط تنطوي بلوحة تحت الهيدر. */
.site-header { position: relative; z-index: 10; }
.site-nav__toggle { display: none; }
@media (max-width: 63.99rem) {
  .site-nav { order: 3; flex-basis: 100%; }
  html.js .site-nav { order: 0; flex-basis: auto; }
  html.js .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding-inline: var(--space-3);
    background: transparent;
    color: var(--color-ivory);
    border: 1px solid var(--color-dark-muted);
    border-radius: var(--radius-sm);
    font-size: var(--step--1);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  html.js .site-nav__list {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    background: var(--color-dark-bg);
    border-block-end: 1px solid var(--color-dark-border);
  }
  html.js .site-nav.is-open .site-nav__list { display: flex; }
  html.js .site-nav__list a { inline-size: 100%; padding-block: var(--space-2); border-block-end: 1px solid var(--color-dark-border); }
}
.site-nav__icon { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* أضيق من 30rem: الشعار + زر القائمة + زر اللغة بسطر واحد. الزر يصير أيقونة فقط،
   وكلمة "القائمة"/"Menu" تبقى اسماً للزر لقارئ الشاشة (مخفية بصرياً فقط) */
@media (max-width: 29.99rem) {
  .site-header__inner { column-gap: var(--space-3); }
  html.js .site-nav__toggle { min-inline-size: 44px; justify-content: center; padding-inline: var(--space-2); }
  html.js .site-nav__toggle span {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- الواجهة (Hero) ---------- */
.hero {
  position: relative;
  overflow: clip;                        /* الرسم يطلع من حافة النهاية بدون تمرير أفقي */
  padding-block: var(--space-7) var(--space-section);
}
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.hero__text {
  /* خط هامش رفيع جهة البداية مثل هامش الدفتر */
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-dark-border);
}
.hero__title {
  font-size: var(--step-5);
  line-height: var(--leading-display);
  text-wrap: balance;
  max-inline-size: 14em;
}
/* المقدمة أكبر من النص، فحدّها أضيق شوي حتى يبقى السطر 62-68 حرفاً (مقيس: كان 70 بالإنجليزي عند 768) */
.hero__lead { margin-block-start: var(--space-5); max-inline-size: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }

/* رسمة الواجهة: جهة "البرنامج" وجهة "الأجهزة" بينهما خط PCB واحد بعقدتين يقطعه فاصل منقط.
   الجوال: صفّان (كل جهة 3 عناصر بصف) والخط عمودي بينهما. الكمبيوتر: عمودان والخط أفقي بينهما.
   الرسوم aria-hidden والتسميات نص HTML. الآجر لعنصرين فقط: مربع تطبيق بالجوال والنبضة. */
.hero__art { inline-size: 100%; max-inline-size: 34rem; margin-inline: auto; }
.hero-art {
  --bus: 3.5rem;                       /* سُمك الشريط بين الجهتين (فيه الخط والفاصل) */
  --dot: 0.625rem;                     /* قطر العقدة والنبضة */
  display: grid;
  grid-template-rows: auto var(--bus) auto;
}
.hero-art__group { min-inline-size: 0; }
.hero-art__head {
  max-inline-size: none;
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-dark-border);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-ivory);
}
.hero-art__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hero-art__item { display: grid; justify-items: center; align-content: start; gap: var(--space-2); max-inline-size: none; text-align: center; }
.hero-art__icon { inline-size: 3rem; block-size: 3rem; overflow: visible; }
.hero-art__lines { fill: none; stroke: var(--color-ivory); stroke-opacity: 0.85; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-art__lines *, .hero-art__accent * { vector-effect: non-scaling-stroke; }
.hero-art__accent { fill: var(--color-accent-on-dark); stroke: none; }
.hero-art__label { font-size: max(0.875rem, var(--step--1)); line-height: var(--leading-tight); color: var(--color-ivory); }   /* 14px فما فوق */

/* الشريط: فاصل منقط + خط PCB بعقدتين + نبضة (transform وopacity فقط) */
.hero-art__bus { position: relative; }
.hero-art__divider { position: absolute; inset-inline: 0; inset-block-start: 50%; border-block-start: 2px dotted var(--color-dark-muted); }
.hero-art__trace { position: absolute; inset-block: calc(var(--dot) / 2 + 0.25rem); inset-inline-start: calc(50% - 1px); inline-size: 2px; background: var(--color-ivory); opacity: 0.85; }
.hero-art__node, .hero-art__pulse {
  position: absolute;
  inset-inline-start: calc(50% - var(--dot) / 2);
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
}
.hero-art__node { border: 1.5px solid var(--color-ivory); background: var(--color-ink); }
.hero-art__node--start, .hero-art__pulse { inset-block-start: 0.25rem; }
.hero-art__node--end { inset-block-end: 0.25rem; }
.hero-art__pulse { background: var(--color-accent-on-dark); opacity: 0; }
/* نبضة واحدة بعد bm:intro-done (js/site.js يضيف is-pulsing): تبدأ بعد دخول الرسمة وتنتهي خلال 4 ثوانٍ، ثم تختفي */
.hero-art.is-pulsing .hero-art__pulse { animation: hero-pulse-y 2s var(--ease-out) 1.8s 1 both; }
@keyframes hero-pulse-y {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; transform: translateY(calc(var(--bus) - var(--dot) - 0.5rem)); }
  100% { opacity: 0; transform: translateY(calc(var(--bus) - var(--dot) - 0.5rem)); }
}

@media (min-width: 64rem) {
  .hero { padding-block-start: var(--space-8); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  /* الكمبيوتر (27/10): الرسوم أكبر بحوالي 40% (48 ← 56px) والتسميات 16px حتى توازن العنوان والنص */
  .hero-art { --bus: 5rem; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) var(--bus) minmax(0, 1fr); align-items: center; }
  .hero-art__items { grid-template-columns: none; gap: var(--space-5); }
  .hero-art__item { grid-template-columns: 3.5rem minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--space-4); text-align: start; }
  .hero-art__icon { inline-size: 3.5rem; block-size: 3.5rem; }
  .hero-art__label { font-size: 1rem; }
  .hero-art__bus { align-self: stretch; }
  .hero-art__divider { inset-block: 0; inset-inline: calc(50% - 1px) auto; border-block-start: 0; border-inline-start: 2px dotted var(--color-dark-muted); }
  .hero-art__trace { inset-block: calc(50% - 1px) auto; inset-inline: calc(var(--dot) / 2 + 0.25rem); inline-size: auto; block-size: 2px; }
  .hero-art__node, .hero-art__pulse { inset-block: calc(50% - var(--dot) / 2) auto; }
  .hero-art__node--start, .hero-art__pulse { inset-inline-start: 0.25rem; }
  .hero-art__node--end { inset-inline-start: auto; inset-inline-end: 0.25rem; }
  /* الاتجاه: من البرنامج (جهة البداية) إلى الأجهزة، فبالعربي لليسار */
  .hero-art { --dir: 1; }
  .hero-art:dir(rtl) { --dir: -1; }
  .hero-art.is-pulsing .hero-art__pulse { animation-name: hero-pulse-x; }
}
@keyframes hero-pulse-x {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; }
  85% { opacity: 1; transform: translateX(calc(var(--dir) * (var(--bus) - var(--dot) - 0.5rem))); }
  100% { opacity: 0; transform: translateX(calc(var(--dir) * (var(--bus) - var(--dot) - 0.5rem))); }
}

/* دخول عناصر الواجهة بعد الـ Intro (js/site.js يضيف is-entering مع --i عند bm:intro-done).
   الإخفاء فقط تحت intro-on، وبشفافية 0.01 مو 0: العناصر تحت طبقة الحبر أصلاً، و0.01 يخلي المتصفح
   يحسب الـ H1 مرسوماً من أول إطار، فما يتأخر LCP لـ 9 ثوانٍ. بدون JS أو بدون Intro: ظاهرة دائماً. */
html.intro-on .hero [data-enter] { opacity: 0.01; transform: translateY(12px); }
.hero [data-enter].is-entering {
  animation: hero-enter 0.6s var(--ease-out) calc(var(--i, 0) * 400ms) both;
}
@keyframes hero-enter {
  from { opacity: 0.01; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- ظهور الأقسام بالتمرير (مرة واحدة) ---------- */
.reveal { transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal.is-pending { opacity: 0; transform: translateY(var(--reveal-distance)); }

/* ---------- من نحن ---------- */
.about { padding-block: var(--space-section); }
.about__grid { display: grid; gap: var(--space-5) var(--space-8); }
.about__title { font-size: var(--step-3); }
.about__body > * + * { margin-block-start: var(--space-4); }
.about__body p:first-child { font-size: var(--step-1); font-weight: var(--weight-regular); line-height: var(--leading-body); }
@media (min-width: 48rem) {
  .about__grid { grid-template-columns: minmax(10rem, 3fr) minmax(0, 8fr); }
  .about__title {
    /* العنوان بعمود ضيق، وخط عمودي رفيع يفصله عن النص */
    padding-inline-end: var(--space-5);
    border-inline-end: 1px solid var(--color-border-subtle);
    align-self: start;
    padding-block-end: var(--space-6);
  }
}

/* ---------- الرؤية والرسالة والقيم ---------- */
.values {
  padding-block: var(--space-section);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border-subtle);
}
.values__title { font-size: var(--step-3); margin-block-end: var(--space-7); }
.values__label {
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  margin-block-end: var(--space-3);
}
.values__statements { display: grid; gap: var(--space-7); }
.values__vision p {
  font-size: var(--step-3);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  max-inline-size: 22em;
  text-wrap: balance;
}
.values__vision { padding-block-start: var(--space-4); border-block-start: 2px solid var(--color-accent); }
.values__mission p { font-size: var(--step-1); line-height: var(--leading-body); }
.values__mission { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
@media (min-width: 64rem) {
  .values__statements { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
  .values__mission { margin-block-start: var(--space-7); }   /* إيقاع غير متماثل: الرسالة أوطأ من الرؤية */
}

.values__list { margin-block-start: var(--space-8); }
.values__rows { margin: 0; border-block-start: 1px solid var(--color-border); }
.values__row {
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-subtle);
}
.values__row dt { font-weight: var(--weight-bold); }
.values__row dd { margin: 0; color: var(--color-ink); }
@media (min-width: 48rem) { .values__row { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
/* الكمبيوتر: القيم بعمودين (صفين × قيمتين) حتى ما يبقى نصف الصف فارغاً، والوصف 19px */
@media (min-width: 64rem) {
  .values__rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .values__row dd { font-size: 1.1875rem; }
}

/* ---------- الخدمات البرمجية (فاتح) ----------
   عنوان بعمود ضيق، وقائمة مُزاحة بعمودين بخطوط رفيعة، والأنظمة المخصصة أعرض وأكبر لأنها الأشمل */
.services { padding-block: var(--space-section); }
.services__grid { display: grid; gap: var(--space-6) var(--space-8); }
.services__title { font-size: var(--step-3); }
.services__intro { margin-block-start: var(--space-3); font-size: var(--step-1); line-height: var(--leading-body); max-inline-size: 22em; }
.services__list { display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.service {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-subtle);
  /* بدون هذا، العنصر بالعمود الأول ياخذ طول صفّه (بسبب الإزاحة) ويتوزع الفراغ بين الأيقونة والعنوان */
  align-self: start;
  align-content: start;
}
.service__icon { grid-row: span 2; inline-size: 3rem; block-size: 3rem; }
.service__lines { fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.service__lines * , .service__accent * { vector-effect: non-scaling-stroke; }
.service__accent { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service__name { font-size: var(--step-1); }
.service__desc { color: var(--color-ink); }
.service--wide { border-block-start: 2px solid var(--color-accent); }
.service--wide .service__name { font-size: var(--step-2); }
@media (min-width: 48rem) {
  .services__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); row-gap: var(--space-7); }
  .service { grid-template-columns: minmax(0, 1fr); }
  .service__icon { grid-row: auto; inline-size: 3.5rem; block-size: 3.5rem; margin-block-end: var(--space-2); }
  .service:nth-child(2n) { margin-block-start: var(--space-8); }   /* الإزاحة: العمود الثاني أوطأ */
  .service--wide { grid-column: 1 / -1; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--space-6); margin-block-start: 0; }
  .service--wide .service__icon { grid-row: span 2; inline-size: 6rem; block-size: 6rem; }
}
@media (min-width: 64rem) {
  .services__grid { grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr); align-items: start; }
  .services__head { padding-inline-end: var(--space-5); border-inline-end: 1px solid var(--color-border-subtle); padding-block-end: var(--space-6); }
}

/* ---------- الأجهزة (داكن) ----------
   شريط عقد موصولة بخط PCB أفقي (عمودي بالجوال)، ثم قائمة أنواع بسطر واحد بفواصل رفيعة */
.hardware { padding-block: var(--space-section); }
/* أصغر شوي من step-3 بالجوال (25px عند 375) حتى "برنامج + جهاز + تركيب + دعم" يكفي بسطر واحد؛ نفس الحد الأعلى 40px */
.hardware__title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); max-inline-size: 22em; text-wrap: balance; }
/* الكسر بعد النقطتين فقط: المقطع الثاني بسطر لحاله. بالعربي ما ينكسر داخلياً،
   وبين الكلمات و"+" مسافة غير منكسرة، فلو اضطر للكسر (عرض ضيق جداً) تبقى "+" آخر السطر */
.hardware__title-tail { display: block; }
/* (المرحلة 7) بدون nowrap: كان يمنع الالتفاف عند تكبير تباعد النص (WCAG 1.4.12) فيطلع عن الشاشة 9px.
   بالأحجام العادية يبقى سطراً واحداً (مقيس 375 و768 و1280)، ولو اضطر للكسر ينكسر بعد + فقط بفضل المسافات غير المنكسرة */
.hardware__lead { margin-block-start: var(--space-4); }
.hardware__flow {
  position: relative;
  display: grid;
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
.hardware__flow li { position: relative; display: flex; align-items: center; gap: var(--space-4); }
.hardware__node {
  position: relative;
  z-index: 1;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--color-ivory);
  border-radius: 50%;
  background: var(--color-dark-bg);
}
.hardware__node::after {               /* وسادة PCB صغيرة داخل العقدة */
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--color-accent-on-dark);
}
.hardware__step { font-size: var(--step-1); font-weight: var(--weight-bold); }
/* خط الوصل: عمودي بالجوال */
.hardware__flow::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 9px;
  border-inline-start: 2px solid var(--color-accent-on-dark);   /* 2px: بـ 1.5px يُرسم 1px على الشاشات العادية ويبين رمادياً */
}
@media (min-width: 48rem) {
  .hardware__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .hardware__flow li { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  /* خط أفقي رفيع من أول عقدة لآخرها */
  .hardware__flow::before {
    inset-block: 9px auto;
    inset-inline: 10px calc(25% - 10px);
    border-inline-start: 0;
    border-block-start: 2px solid var(--color-accent-on-dark);
  }
}
.hardware__types { margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-dark-border); }
.hardware__types-title { font-size: var(--step-0); color: var(--color-dark-muted); margin-block-end: var(--space-3); }
.hardware__types-list { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin: 0; padding: 0; list-style: none; }
.hardware__types-list li { font-size: var(--step-1); max-inline-size: none; }
@media (min-width: 48rem) {
  .hardware__types-list li + li { margin-inline-start: var(--space-5); padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--color-dark-border); }
}
@media (max-width: 47.99rem) { .hardware__types-list { flex-direction: column; } }
.hardware__specs { margin-block-start: var(--space-6); }
.hardware__specs table { border-collapse: collapse; margin-block-end: var(--space-5); }
.hardware__specs caption { text-align: start; font-weight: var(--weight-bold); padding-block-end: var(--space-2); }
.hardware__specs th, .hardware__specs td { padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--color-dark-border); text-align: start; font-weight: var(--weight-regular); }
.hardware__cta { margin-block-start: var(--space-7); }

/* ---------- كيف نعمل (فاتح) ----------
   الأرقام الكبيرة هي العنصر الأساسي (زخرفية: aria-hidden، والترتيب من <ol role="list">).
   الكمبيوتر: درج أفقي متدرج بخط رفيع يربط الخطوات. الجوال: عمودي بخط رفيع جهة البداية. */
.step-num:lang(en) { font-family: var(--font-latin); }   /* Readex Pro للعربي، IBM Plex Sans للإنجليزي */
.process { padding-block: var(--space-section); }
.process__title { font-size: var(--step-3); }
.process__intro { margin-block-start: var(--space-3); font-size: var(--step-1); line-height: var(--leading-body); }
.process__steps { margin: var(--space-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-6); }
.step { position: relative; padding-inline-start: 5rem; }
.step .step-num { position: absolute; inset-inline-start: 0; inset-block-start: -0.08em; }
.step__name { font-size: var(--step-1); }
.step__desc { margin-block-start: var(--space-2); font-size: max(1.0625rem, var(--step-0)); }   /* 17px على الأقل */
.step:not(:last-child)::after {                 /* خط رفيع يربط الرقم بالخطوة اللي بعده */
  content: "";
  position: absolute;
  inset-inline-start: 1.1rem;
  inset-block: calc(var(--size-step-number) + var(--space-2)) calc(-1 * var(--space-5));
  border-inline-start: 1px solid var(--color-border);
}
@media (min-width: 64rem) {
  .process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; --stair: 3.5rem; }
  .step {
    padding: var(--space-4) var(--space-5) 0 0;
    padding-inline: 0 var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }
  .step:nth-child(2) { margin-block-start: calc(1 * var(--stair)); }
  .step:nth-child(3) { margin-block-start: calc(2 * var(--stair)); }
  .step:nth-child(4) { margin-block-start: calc(3 * var(--stair)); }
  .step .step-num { position: static; display: block; margin-block-end: var(--space-3); }
  .step:not(:last-child)::after { content: none; }
  .step:not(:first-child)::before {             /* القائمة العمودية للدرج: تصل خط هذه الخطوة بخط اللي قبلها */
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(-1 * var(--stair) - 1px);
    block-size: var(--stair);
    border-inline-start: 1px solid var(--color-border);
  }
}

/* ---------- أعمالنا (سطح) ---------- */
.work { padding-block: var(--space-section); background: var(--color-surface); border-block: 1px solid var(--color-border-subtle); }
.work__grid { display: grid; gap: var(--space-5); grid-template-areas: "title" "frame" "empty" "list"; }
.work__title { grid-area: title; font-size: var(--step-3); }
.work__frame { grid-area: frame; }
.work__empty { grid-area: empty; font-size: var(--step-1); line-height: var(--leading-body); }
.work__list { grid-area: list; display: grid; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 64rem) {
  /* الصف الأول بقدر العنوان والثاني ياخذ الباقي، فنص الحالة يجي مباشرة تحت H2 (مو بوسط ارتفاع الإطار) */
  .work__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "title frame" "empty frame" "list list"; column-gap: var(--space-8); row-gap: var(--space-4); align-items: start; }
  .work__empty { align-self: start; }
  .work__list { grid-template-columns: 1fr 1fr; }
}
.art { inline-size: 100%; block-size: auto; overflow: visible; }
.art__lines { fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art__lines *, .art__accent * { vector-effect: non-scaling-stroke; }
.art__accent { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.art--work .art__lines { stroke: var(--color-border); }
.art-dash { stroke-dasharray: 6 5; }
.work-item { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
.work-item__type { font-size: var(--step--1); color: var(--color-muted); font-weight: var(--weight-bold); }
.work-item__title { font-size: var(--step-1); margin-block: var(--space-1) var(--space-2); }
.work-item img { inline-size: 100%; block-size: auto; margin-block-end: var(--space-3); border: 1px solid var(--color-border-subtle); }
.work-item a { display: inline-block; margin-block-start: var(--space-2); }

/* ---------- لماذا بنو موسى (فاتح، تحريري) ----------
   عمود نص واحد مريح بعرض القراءة، وهامش جانبي فيه الرسم بخط رفيع */
.name { padding-block: var(--space-section); }
.name__grid { display: grid; gap: var(--space-6); }
.name__art { max-inline-size: 11rem; }
.name__title { font-size: var(--step-3); margin-block-end: var(--space-4); }
.name__text p:not(.name__motto) { font-size: var(--step-1); line-height: var(--leading-body); max-inline-size: 46ch; }   /* خط أكبر من النص العادي، فحدّ أضيق حتى يبقى السطر ≤ 68 حرفاً (مقيس: كان 69) */
.name__text p + p { margin-block-start: var(--space-4); }
.name__motto {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-subtle);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);   /* 24px فما فوق: الآجر مسموح للنص الكبير فقط */
  line-height: var(--leading-heading);
  color: var(--color-accent);
}
@media (min-width: 64rem) {
  .name__grid { grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); column-gap: var(--space-8); align-items: start; }
  .name__art { max-inline-size: none; padding-inline-end: var(--space-6); border-inline-end: 1px solid var(--color-border-subtle); }
}

/* ---------- أسئلة شائعة (فاتح) ----------
   عمود عنوان ضيق يثبت بالتمرير (كمبيوتر) وقائمة <details> بخطوط رفيعة، بدون بطاقات.
   خط شعري داخل الحاوية يفصله عن "لماذا بنو موسى" لأن الاثنين على الورق. */
.faq { padding-block-end: var(--space-section); }
.faq__grid { display: grid; gap: var(--space-6); padding-block-start: var(--space-section); border-block-start: 1px solid var(--color-border-subtle); }
.faq__title { font-size: var(--step-3); }
.faq__list { border-block-start: 1px solid var(--color-border); }
.faq__item { border-block-end: 1px solid var(--color-border-subtle); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 3.5rem;
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17 → 20 */
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }
@media (hover: hover) { .faq__q:hover .faq__q-text { color: var(--color-primary); } }
/* + و − بخطين رفيعين: الخط العمودي يدور ويصير أفقياً عند الفتح (160ms، وصفر مع تقليل الحركة) */
.faq__icon { position: relative; flex: none; inline-size: 1.75rem; block-size: 1.75rem; border: 1px solid var(--color-border); border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0.75rem; block-size: 1.5px; background: var(--color-ink); }
.faq__icon::after { transform: rotate(90deg); transition: transform var(--duration-fast) var(--ease-out); }
.faq__item[open] .faq__icon { border-color: var(--color-accent); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding-block-end: var(--space-5); padding-inline-end: calc(1.75rem + var(--space-4)); }
@media (min-width: 64rem) {
  .faq__grid { grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr); column-gap: var(--space-8); align-items: start; }
  .faq__title { position: sticky; inset-block-start: var(--space-6); }
}

/* ---------- تواصل معنا (سطح) ----------
   عمود معلومات ضيق (قنوات الاتصال تحت خط آجر) + نموذج على لوح ورق بخط شعري */
.contact { padding-block: var(--space-section); background: var(--color-surface); border-block-start: 1px solid var(--color-border-subtle); }
.contact__grid { display: grid; gap: var(--space-7); }
.contact__title { font-size: var(--step-3); }
.contact__lead { margin-block-start: var(--space-3); }
.contact__channels { margin: var(--space-6) 0 0; padding: 0; list-style: none; border-block-start: 2px solid var(--color-accent); }
.channel {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-subtle);
}
.channel__icon { grid-row: span 2; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.2rem; fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.channel__label { font-size: var(--step--1); color: var(--color-muted); line-height: var(--leading-tight); padding-block-start: 0.3rem; }
.channel__link { display: inline-flex; align-items: center; justify-self: start; min-block-size: 44px; font-weight: var(--weight-bold); }
.contact__noscript { padding: var(--space-5); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }

.contact-form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.contact-form[hidden] { display: none; }
.contact-form__title { font-size: var(--step-1); }
.field__label { display: block; margin-block-end: var(--space-2); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.field__hint { font-weight: var(--weight-regular); font-size: var(--step--1); color: var(--color-muted); }
.field__control {
  display: block;
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  line-height: var(--leading-tight);
}
textarea.field__control { min-block-size: 9rem; resize: vertical; line-height: var(--leading-body); }
.field__control[dir="ltr"] { text-align: left; }   /* الهاتف: الأرقام تبدأ من اليسار حتى بالصفحة العربية */
@media (hover: hover) { .field__control:hover { border-color: var(--color-ink); } }
/* الخطأ ما يعتمد على اللون وحده: حد أعرض + علامة ! + نص */
.field__control[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--step--1); font-weight: var(--weight-bold); line-height: var(--leading-heading); }
.field__error:not(:empty) { display: flex; gap: var(--space-2); align-items: start; margin-block-start: var(--space-2); }
.field__error:not(:empty)::before {
  content: "!" / "";
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-block-start: 0.1em;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-surface);
  font-size: 0.85em;
  line-height: 1;
}
.contact-form__submit .btn { min-inline-size: 12rem; }
.contact-form__privacy { margin-block-start: var(--space-3); font-size: var(--step--1); color: var(--color-muted); }
.contact-form__status { max-inline-size: var(--measure); }
.contact-form__status:not(:empty) { padding: var(--space-4); border-inline-start: 3px solid var(--color-success); background: var(--color-surface); }
.contact-form__status:focus { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-offset); }
@media (min-width: 48rem) {
  .contact-form { grid-template-columns: 1fr 1fr; padding: var(--space-6); }
  .contact-form__title, .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .contact__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; }
}

/* ---------- الفوتر (داكن، تحريري) ----------
   ثلاثة أعمدة غير متساوية بعناوين صغيرة فوق خطوط شعرية، وخط آجر داكن فوق سطر الحقوق */
.site-footer { padding-block: var(--space-8) var(--space-6); }
.site-footer__grid { display: grid; gap: var(--space-7); }
.site-footer__logo { block-size: 48px; inline-size: auto; }
.site-footer__tagline { margin-block-start: var(--space-4); }
.site-footer__status { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); color: var(--color-dark-muted); font-size: var(--step--1); }
.site-footer__status::before { content: ""; flex: none; inline-size: 1.5rem; block-size: 2px; background: var(--color-accent-on-dark); }
.site-footer__label {
  font-size: var(--step--1);
  color: var(--color-dark-muted);
  line-height: var(--leading-tight);
  padding-block-end: var(--space-3);
  margin-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-dark-border);
}
.site-footer__links, .site-footer__contact { margin: 0; padding: 0; list-style: none; }
.site-footer__links a, .site-footer__contact a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; text-decoration: none; }
@media (hover: hover) { .site-footer__links a:hover, .site-footer__contact a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }
.site-footer__social { justify-content: center; min-inline-size: 44px; }
.site-footer__icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-footer__place { margin-block-start: var(--space-2); color: var(--color-dark-muted); }
.site-footer__bottom { margin-block-start: var(--space-7); }
.site-footer__legal { max-inline-size: none; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-accent-on-dark); font-size: var(--step--1); color: var(--color-dark-muted); }
/* بدون JS الزر العائم ما يختفي قرب الفوتر: نترك مكانه فارغاً حتى ما يغطي سطر الحقوق */
html:not(.js) .site-footer { padding-block-end: calc(var(--space-6) + 4.5rem); }
/* 48-64rem: الشعار بصف لحاله والعمودان تحته (العمود الثالث الضيق ما يكفي للإيميل على 768). من 64rem ثلاثة أعمدة */
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-7); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--space-6); }
}
@media (min-width: 64rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
  .site-footer__brand { grid-column: auto; }
}

/* ---------- زر واتساب العائم (واحد فقط) ----------
   أسفل جهة النهاية. يختفي أثناء الـ Intro، ومع فتح قائمة الجوال، وقرب قسم التواصل والفوتر (js/site.js) */
.wa-float {
  position: fixed;
  inset-inline-end: var(--space-4);
  inset-block-end: var(--space-4);
  z-index: 50;
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ivory);
  /* حلقة عاجية رفيعة: تحدد الزر فوق الأقسام الداكنة (الأخضر على الحبر وحده ضعيف) */
  box-shadow: 0 0 0 1.5px var(--color-ivory), var(--shadow-2);
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s, background-color var(--duration-fast) var(--ease-out);
}
.wa-float__icon { inline-size: 1.75rem; block-size: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .wa-float:hover { background: var(--color-primary-hover); color: var(--color-ivory); } }
/* إطار مزدوج: حبر خارجي (فوق الفاتح) وعاجي داخلي (فوق الداكن) */
.wa-float:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: 4px; box-shadow: 0 0 0 4px var(--color-ivory), var(--shadow-2); }
/* الاختفاء بالشفافية فقط (مو visibility): يبقى بترتيب Tab بعد الفوتر، ويرجع ظاهراً كاملاً لما يوصله التركيز */
.wa-float.is-away, html:has(.site-nav.is-open) .wa-float { opacity: 0; pointer-events: none; }
.wa-float.is-away:focus-visible { opacity: 1; pointer-events: auto; }
html.intro-on .wa-float { display: none; }
/* أثناء ظهور الـ Hero: يختفي بالكامل ويخرج من ترتيب Tab (visibility بعد انتهاء التلاشي)، لأنه كان يغطي تسمية
   "حاسوب" بالجوال. مع JS وقبل أول قراءة من IntersectionObserver يبقى مخفياً حتى ما يومض فوق الـ Hero؛ بدون JS ظاهر كما كان */
html.js .wa-float:not(.is-ready), .wa-float.is-hero {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}
@media (min-width: 64rem) { .wa-float { inset-inline-end: var(--space-6); inset-block-end: var(--space-6); } }

@media (prefers-reduced-motion: reduce) {
  .hero-art__pulse { animation: none !important; opacity: 0; }
  .reveal { transition: none; }
  .faq__icon::after, .wa-float { transition: none; }
}

/* ---------- وضع التباين العالي (forced-colors) ----------
   المتصفح يفرض ألوان النص والخلفيات والحدود، لكن ما يغيّر stroke الرسوم ولا خلفيات العناصر الزخرفية،
   فالرسوم الخطية بلون الحبر كانت تختفي على خلفية سوداء. هنا كلها بلون نص النظام CanvasText. */
@media (forced-colors: active) {
  .hero-art__lines, .service__lines, .service__accent, .art__lines, .art__accent, .art--work .art__lines,
  .channel__icon { stroke: CanvasText; }
  .faq__icon::before, .faq__icon::after { forced-color-adjust: none; background: CanvasText; }
  .faq__icon { border-color: CanvasText; }
  .hero-art__accent { fill: CanvasText; }
  .hero-art__trace { forced-color-adjust: none; background: CanvasText; opacity: 1; }
  .wa-float { border: 2px solid LinkText; }
  .wa-float:focus-visible { outline-color: Highlight; }
}