@charset "utf-8";

/* ══════════════════════════════════════════════════════════
   عن B2B — مبني على القياسات المستخرجة من إطار فيجما
   "عن B2B (جديد)" 227:397 · 1440×7410
   العمود المحتوى 1048px · الخط الأصلي Graphik Arabic
   ══════════════════════════════════════════════════════════ */

:root{
  /* ألوان التصميم */
  --cyan:#2AC0D7;
  --blue:#0966E5;
  --blue-2:#3B79F5;
  --violet:#8A38F5;
  --purple:#644E91;
  --ink:#0A1119;
  --slate:#1E3650;
  --sand:#EAD6B0;
  --cream:#FAF0DD;
  --cream-line:#F5E2BD;
  --pale-blue:#DEECFF;
  --gray:#F5F5F5;

  /* تخطيط */
  --w:1048px;
  --gutter:32px;

  /* وحدة التدرّج: 1px عند عرض التصميم (1048) وتصغر معه خطّيًّا،
     فيبقى ترتيب سطح المكتب نفسه على كل المقاسات وتصغر الأحجام فقط.
     --u0 هي الأساس، و--u قابلة للاشتقاق محلّيًّا داخل قسم بعينه. */
  --u0: min(1px, calc((100vw - var(--gutter) * 2) / 1048));
  --u: var(--u0);

  --font:"IBM Plex Sans Arabic","Graphik Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--font);
  font-size:max(11px, calc(16 * var(--u)));
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p{ margin:0; }
a{ color:inherit; }

.wrap{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}

/* ─────────── الترويسة الصغيرة (eyebrow) ─────────── */
.eyebrow{
  font-size:max(11px, calc(24 * var(--u)));
  line-height:max(15px, calc(29.83 * var(--u)));
  font-weight:500;
}
.eyebrow--light  { color:#fff; }
.eyebrow--cyan   { color:var(--cyan); }
.eyebrow--violet { color:var(--violet); }
.eyebrow--ink    { color:var(--ink); }

/* ─────────── الأزرار ─────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:calc(8 * var(--u));
  height:calc(56 * var(--u));
  padding:calc(16 * var(--u)) calc(24 * var(--u));
  border-radius:calc(100 * var(--u));
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(22 * var(--u)));
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:filter .18s ease, background-color .18s ease;
}
.btn:hover{ filter:brightness(.95); }
.btn--solid{
  background:var(--cyan);
  color:#fff;
  border:1px solid rgba(245,245,245,.5);
}
/* زرّ الدخول صار بلون زرّ «انضم الان» نفسه بطلب صاحب المشروع؛
   btn--outline لم يعد مستعملًا لكنه باقٍ للرجوع إليه */
.btn--outline{
  color:var(--slate);
  border:1px solid var(--slate);
}
.btn--white{
  background:#fff;
  color:var(--ink);
}
.ico{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); flex:none; }
.ico--sm{ width:calc(20 * var(--u)); height:calc(20 * var(--u)); }

/* ══════════════════ 0 · الشريط العلوي ══════════════════ */
/* الشريط العلوي يبقى كما كان: تثبيت الوحدة عند 1px يعيد كل قيمه
   إلى بكسلات التصميم بلا تدرّج (نفس ما فُعل في الرئيسية) */
.nav{ --u:1px; padding-top:calc(40 * var(--u)); }

.nav__in{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  height:calc(56 * var(--u));
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.nav__start{ display:flex; align-items:center; gap:calc(48 * var(--u)); }
.logo{ flex:none; }
.logo img{ width:calc(130 * var(--u)); height:calc(56 * var(--u)); object-fit:contain; }

/* 24 لا 32: بعد تسمية زرّ الدخول «تسجيل دخول» لم يبقَ بين آخر رابط
   والأزرار سوى 3px. و24 هي القيمة التي يستعملها التصميم نفسه دون 1000 */
.nav__links{ display:flex; align-items:center; gap:calc(24 * var(--u)); }
.nav__links a{
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(22 * var(--u)));
  font-weight:500;
  color:var(--slate);
  text-decoration:none;
}
.nav__links a:hover{ color:var(--cyan); }

.nav__end{ display:flex; align-items:center; gap:calc(16 * var(--u)); }
/* بديل زرّ الدخول داخل قائمة الجوال حيث لا يتّسع الشريط لزرّين */
.nav__login{ display:none; }

.nav__toggle{
  display:none;
  width:calc(24 * var(--u)); height:calc(24 * var(--u)); padding:0;
  background:none; border:0; cursor:pointer;
  color:var(--ink);
  flex:none;
}
.nav__toggle svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); display:block; }

/* ══════════════════ 1 · البطل ══════════════════ */
.hero{ margin-top:calc(74 * var(--u)); }

.hero__card{
  position:relative;
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  aspect-ratio:1048 / 784;
  border-radius:calc(72 * var(--u));
  overflow:hidden;
  background:var(--cyan);
  isolation:isolate;
}
.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* الشكل الأسود المموّه: 1131×769 @ (107,245) داخل البطاقة، rx كبير، #000 @0.43 */
.hero__scrim{
  position:absolute;
  left:10.21%;
  top:31.25%;
  width:107.92%;
  height:98.09%;
  border-radius:50%;
  background:rgba(0,0,0,.43);
  filter:blur(calc(150 * var(--u)));
  pointer-events:none;
}
/* مثبَّتة من القاع لا من القمّة: ارتفاعها لا يتدرّج (أرضية الخطّ 11px)
   فتتجاوز قاع البطاقة ذات النسبة الثابتة ويقصّها overflow:hidden.
   12.80% هي نسبة التصميم نفسها عند 1440، فلا يتغيّر شيء على سطح المكتب. */
.hero__body{
  position:absolute;
  right:6.87%;          /* 72 / 1048 */
  bottom:12.80%;        /* القاع بدل top:54.08% */
  width:68.99%;         /* 723 / 1048 */
  text-align:right;
  color:#fff;
}
.hero__body h1{
  margin-top:calc(8 * var(--u));
  max-width:calc(440 * var(--u));
  font-size:max(11px, calc(40 * var(--u)));
  line-height:max(15px, calc(66.9 * var(--u)));
  font-weight:600;
}
.hero__lead{
  margin-top:calc(8 * var(--u));
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(40 * var(--u)));
  font-weight:400;
}

/* ══════════════════ 2 · بطاقة الاقتباس 01 ══════════════════ */
.quote{ margin-top:calc(40 * var(--u)); }

.quote__card{
  position:relative;
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  /* حدّ أدنى لا نسبة صلبة: الشرائح تُقصّ عند أرضية الخطّ على الشاشات الضيّقة */
  min-height:calc(420 * var(--u));
  border-radius:calc(48 * var(--u));
  overflow:hidden;
  background:rgba(42,192,215,.2);
}
/* من القاع لا القمّة: الكتلة مطلقة فلا يرفع min-height البطاقة لأجلها،
   وارتفاعها لا يتدرّج (أرضية الخطّ) فتُقصّ الشرائح. 17.85% نسبة التصميم عند 1440. */
.quote__body{
  position:absolute;
  right:6.87%;          /* 1172 → 72 من اليمين */
  bottom:17.85%;
  width:55.44%;         /* 581 / 1048 */
  text-align:right;
}
.quote__body h2{
  margin-top:calc(16 * var(--u));
  font-size:max(11px, calc(48 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:600;
  color:var(--slate);
}

.chips{
  display:flex;
  justify-content:flex-start;
  gap:calc(24 * var(--u));
  margin-top:0;
}
.chips li{
  display:inline-flex;
  align-items:center;
  gap:calc(16 * var(--u));
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:500;
  color:var(--purple);
}
/* النقطة يمين النصّ كما في التصميم (نمو @929–957 ونقطته @973) */
.chips i{ order:-1; }
.chips i{
  width:calc(8 * var(--u));
  height:calc(8 * var(--u));
  border-radius:calc(100 * var(--u));
  background:var(--purple);
  flex:none;
}

/* بطاقة «شريك واحد» — نفس هندسة بطاقة 01 (1048×420 · r=48) بألوان
   إطار «حلولنا(جديد)» 227:3736 — خلفية #8A38F5 بشفافية 0.2 ونجمة #644E91.
   الفجوة 40 هي نفسها بين البطاقتين في التصميم (Spacing:40) */
.quote--violet{ margin-top:calc(40 * var(--u)); }
.quote--violet .quote__card{ background:rgba(138,56,245,.2); }
.quote--violet .deco--quote{ color:var(--purple); }
.eyebrow--purple{ color:var(--purple); }

/* ══════════════════ الأشكال الزخرفية ══════════════════ */
.deco{
  position:absolute;
  transform-origin:0 0;
  pointer-events:none;
  aspect-ratio:1;
}
.deco path{ fill:currentColor; }

/* بطاقة 01 — نجمة سباعية 153.41 @ (0, 340.93) دوران ‎-52.02°‎ */
.deco--quote{
  width:14.64%;
  left:0;
  top:81.17%;
  transform:rotate(-52.02deg);
  color:var(--cyan);
}
/* رؤيتنا — 153.41 @ (336, 90.93) */
.deco--vision{
  width:29.85%;
  left:65.37%;
  top:14.98%;
  transform:rotate(-52.02deg);
  color:rgba(255,255,255,.5);
}
/* مهمتنا — 217.9 @ (-64, 126.76) */
.deco--mission{
  width:42.39%;
  left:-12.45%;
  top:20.88%;
  transform:rotate(-52.02deg);
  color:rgba(255,255,255,.5);
}
/* بطاقة +500 — رباعية 147 محدَّدة 9px @ (19, 14) */

/* ══════════════════ 3 · أكثر من مورد / بالأرقام (شريط مركزي) ══════════════════ */
.band{
  margin-top:calc(132 * var(--u));
  text-align:center;
  padding-inline:var(--gutter);
}
/* تمييز داخل العنوان: فيجما يلوّن جزءًا منه #8A38F5 عبر styleOverrideTable */
.display em{ font-style:normal; color:var(--violet); }

.display{
  margin-top:calc(24 * var(--u));
  font-size:max(11px, calc(52.11 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:600;
  color:var(--ink);
}
.band .eyebrow--ink{
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(46 * var(--u)));
  font-weight:600;
}
.band__lead{
  margin-top:calc(24 * var(--u));
  margin-inline:auto;
  max-width:calc(924 * var(--u));
  font-size:max(11px, calc(24 * var(--u)));
  line-height:max(15px, calc(40 * var(--u)));
  font-weight:400;
  color:var(--ink);
}

/* ══════════════════ 4 و 5 · رؤيتنا / مهمتنا ══════════════════ */
.split{
  margin-top:calc(132 * var(--u));
  width:min(1052px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:grid;
  /* رؤيتنا: اللوحة (514) في العمود الأيمن، النص (416) في الأيسر */
  grid-template-columns:minmax(0,calc(514 * var(--u))) minmax(0,calc(416 * var(--u)));
  justify-content:space-between;
  align-items:start;
  gap:calc(24 * var(--u));
}
.split__text{ grid-column:2; grid-row:1; }
.panel{ grid-column:1; grid-row:1; }

/* مهمتنا: معكوسة — النص (416) يمينًا واللوحة (514) يسارًا */
.split--rev{
  margin-top:calc(100 * var(--u));
  grid-template-columns:minmax(0,calc(416 * var(--u))) minmax(0,calc(514 * var(--u)));
}
.split--rev .split__text{ grid-column:1; }
.split--rev .panel{ grid-column:2; }

.split__text{ text-align:right; padding-top:calc(48 * var(--u)); }
.split--rev .split__text{ padding-top:calc(40 * var(--u)); }

.split__text h3{
  margin-top:calc(16 * var(--u));
  font-size:max(11px, calc(48 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:600;
  color:var(--ink);
}
.split__lead{
  margin-top:calc(16 * var(--u));
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(47.78 * var(--u)));
  font-weight:400;
  color:var(--ink);
}

.panel{
  position:relative;
  margin:0;
  width:100%;
  aspect-ratio:514 / 607;
  border-radius:calc(48 * var(--u));
  overflow:hidden;
}
.panel--blue{ background:var(--blue-2); }
.panel--sand{ background:var(--sand); }

.panel img{
  position:absolute;
  width:79.38%;                 /* 408 / 514 */
  height:auto;
  top:16.47%;                   /* 100 / 607 */
  left:10.24%;                  /* 53 / 514 */
}
.panel--sand img{ left:10.24%; }

/* ══════════════════ 8 · الشركاء ══════════════════ */
.partners{
  margin-top:calc(132 * var(--u));
  width:min(1239px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  border-radius:0 0 calc(32 * var(--u)) calc(32 * var(--u));
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(42,192,215,.33) 100%);
  padding:calc(105 * var(--u)) 0 calc(58 * var(--u));
}
.partners__in{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.partners__head{
  width:max-content;
  max-width:100%;
  margin-inline:auto;
  text-align:right;
}
.partners__head p{ white-space:nowrap; }
.partners__head h2{
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(46 * var(--u)));
  font-weight:600;
  color:var(--ink);
}
.partners__head p{
  margin-top:calc(18 * var(--u));
  font-size:max(11px, calc(23.2 * var(--u)));
  line-height:max(15px, calc(28 * var(--u)));
  font-weight:300;
  color:var(--ink);
}

.logos{
  margin-top:calc(64 * var(--u));
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  column-gap:calc(21 * var(--u));
  row-gap:calc(22.4 * var(--u));
}
.logos li{
  aspect-ratio:131.71 / 97.47;
  overflow:hidden;
}
/* التثبيت للأعلى يقصّ شريط الاسم الأسود أسفل ملفّ الشعار */
.logos img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}

/* ══════════════════ 9 · نداء الإجراء ══════════════════ */
.cta{ margin-top:calc(132 * var(--u)); }

.cta__card{
  position:relative;
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  aspect-ratio:1048 / 784;
  border-radius:calc(72 * var(--u));
  overflow:hidden;
  background:var(--cyan);
  isolation:isolate;
}
.cta__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* شكل بنفسجي مموّه 1656×1036 @ (-304, 451) */
.cta__scrim{
  position:absolute;
  left:-29.01%;
  top:57.53%;
  width:158.02%;
  height:132.14%;
  border-radius:50%;
  background:var(--purple);
  filter:blur(calc(150 * var(--u)));
  pointer-events:none;
}
.cta__body{
  position:absolute;
  left:16.41%;
  right:16.41%;                 /* 172 / 1048 */
  /* من القاع لا القمّة: الارتفاع لا يتدرّج فيصطدم الزرّ بحافّة البطاقة.
     9.34% هي نسبة التصميم عند 1440 فلا يتغيّر سطح المكتب. */
  bottom:9.34%;
  text-align:center;
  color:#fff;
}
.cta__body h2{
  font-size:max(11px, calc(48 * var(--u)));
  line-height:max(15px, calc(89.22 * var(--u)));
  font-weight:500;
}
.cta__body p{
  margin-top:calc(5 * var(--u));
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(29.34 * var(--u)));
  font-weight:400;
}
.cta__body .btn{ margin-top:calc(37 * var(--u)); }

/* ══════════════════ 10 · التذييل ══════════════════ */
.footer{
  margin-top:calc(138 * var(--u));
  background:var(--cyan);
  color:#fff;
  /* كان 96 أسفل مقابل 48 أعلى — فراغ ظاهر تحت الشريط السفلي،
     زاد وضوحه بعد حذف عمودَي الروابط وقِصَر التذييل، فقُلّص إلى 18.
     والعلويّ قُلّص من 48 إلى 24 بطلب صاحب المشروع. */
  padding:calc(24 * var(--u)) 0 calc(18 * var(--u));
}
.footer__in{
  width:min(1049px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
/* ثلاث كتل: «تواصل معنا» يمينًا · العلامة وسطًا · شعارات الجهات يسارًا.
   العمودان الجانبيان بحصّة متساوية فتستقرّ العلامة في المنتصف البصري. */
.footer__cols{
  display:flex;
  justify-content:space-between;
  /* الكتل تبدأ من مستوى واحد بطلب صاحب المشروع — كانت متمركزة رأسيًّا (center)
     لأن ارتفاعاتها متفاوتة، فكان رأس كل كتلة يبدأ عند ارتفاع مختلف. */
  align-items:flex-start;
  gap:calc(48 * var(--u));
}
/* الكتل الأربع بعرض محتواها، وspace-between يوزّع الباقي فجوات متساوية.
   الأعمدة النامية كانت تبتلع كل المتبقّي فتتلاصق الكتل بفجوة صفر. */
.footer__cols > .footer__col,
.footer__cols > .footer__gov,
.footer__cols > .footer__brand{ flex:0 0 auto; }
.footer__col,
.footer__brand{ display:flex; flex-direction:column; }

/* في RTL يكون flex-start هو اليمين */
.footer__col{ align-items:flex-start; gap:calc(32 * var(--u)); text-align:right; }
/* كان 16 — كُبّر بطلب صاحب المشروع */
.footer__col h5{
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(24 * var(--u)));
  font-weight:500;
}
/* عنوان «تواصل معنا» بأيقونة — الأيقونة يمين النصّ كبقيّة صفوف العمود */
/* nowrap لأن المتصفّح يقيس مساهمة الترويسة في عرض العمود بأضيق كلمة لا بالسطر
   الكامل، فتلتفّ سطرين بلا داعٍ على الشاشات الضيّقة */
.footer__h5{ display:flex; align-items:center; gap:calc(8 * var(--u)); white-space:nowrap; }
/* الأيقونة بمقاس صندوق السطر — كان 19 مع خطّ 16، وصار 24 مع خطّ 20 */
.footer__h5 svg{ width:max(12px, calc(24 * var(--u))); height:max(12px, calc(24 * var(--u))); }
/* nowrap كالترويسة: عرض العمود يُشتقّ من أضيق كلمة، فيلتفّ «أسئلة شائعة؟» سطرين */
.footer__col a{
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(24 * var(--u)));
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}
.footer__col a:hover{ text-decoration:underline; }

.footer__row{
  display:inline-flex;
  align-items:center;
  gap:calc(8 * var(--u));
}
/* في التصميم الأيقونة يمين النصّ (النصّ 195–320 والأيقونة 328–348) */
.footer__row .ico{ order:-1; }

/* العلامة في منتصف التذييل بطلب صاحب المشروع — كانت محاذاة يمينًا */
.footer__brand{ align-items:center; text-align:center; }

/* شعارات الجهات الرسمية بلا رقاقة بيضاء: الخلفية البيضاء كانت مدمجة في ملفّات PNG
   نفسها (بلا قناة ألفا و76-83% من بكسلاتها أبيض ناصع)، فنُزعت إلى ألفا في نسخ
   -alpha بفكّ التركيب على الأبيض. حبر الشعارات رماديّ داكن وتباينه على السماوي
   4.75-7.46:1 فيُقرأ مباشرةً. ارتفاع موحّد والعرض يتبع النسبة. */
/* عمود واحد بطلب صاحب المشروع: كانت شبكة ملتفّة باثنين في الصفّ فيبقى الثالث
   وحده وتنفتح بجانبه فجوة بعرض شعار كامل.
   align-items:flex-end هو اليسار في RTL، فتبقى الشعارات ملاصقة لحافّة التذييل. */
.footer__gov{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:calc(10 * var(--u));
}
.footer__gov img{
  /* قياس موحّد للرقاقات الثلاث: العرض والارتفاع ثابتان، وobject-fit:contain
     يُدخل كل شعار داخلها بنسبته بلا تشويه. تثبيت الارتفاع وحده كان يترك
     العروض متفاوتة (163 · 159 · 155) لاختلاف نسب الشعارات. */
  width:calc(190 * var(--u));
  height:calc(56 * var(--u));
  object-fit:contain;
}
/* أيقونات التواصل مكبَّرة 20% عن قياس التصميم بطلب صاحب المشروع (21.67 ⟵ 26).
   أمّا الشعار فأُعيد إلى مقاس التصميم (181.86×78.1 ⟶ 151.55×65.08) بطلبه أيضًا
   بعد إضافة عمود الروابط، ليفرج مساحة للأعمدة. */
.logo--footer{ width:calc(151.55 * var(--u)); height:calc(65.08 * var(--u)); object-fit:contain; }
/* حُذف السطر التعريفي «مورد شامل لقطاع الهوريكا» بطلب صاحب المشروع، ومعه
   قواعد .footer__tag الثلاث. */
.footer__social{
  margin-top:calc(7.22 * var(--u));
  display:flex;
  align-items:center;
  gap:calc(11 * var(--u));
}
.footer__sa{
  font-size:max(11px, calc(21.67 * var(--u)));
  line-height:1;
  font-weight:400;
}
.footer__social a{ display:inline-flex; align-items:center; text-decoration:none; }
/* الثلاثة رموز متجهيّة مجرّدة بلا مربّع خلفية: كانت إنستغرام ولينكدإن صورتين نقطيّتين
   على هيئة بلاطة بيضاء محفور فيها الشعار، فلا تُقرأ عند 14px ولا تشبه X المجرّدة.
   الآن ثلاثتها SVG بـ currentColor ومقاس واحد، حادّة عند أيّ حجم */
.footer__x{ display:inline-flex; }
.footer__social svg{ width:calc(26 * var(--u)); height:calc(26 * var(--u)); fill:currentColor; display:block; }


.footer__bar{
  margin-top:calc(40 * var(--u));
  padding-top:calc(20 * var(--u));
  border-top:1px solid rgba(255,255,255,.5);
  display:flex;
  /* صار العنصر واحدًا بعد حذف الرقم الضريبي، فمركزه بدل space-between
     الذي كان يدفعه إلى اليمين ويترك نصف الشريط فارغًا */
  justify-content:center;
  text-align:center;
  gap:calc(24 * var(--u));
  font-size:max(11px, calc(16 * var(--u)));
  line-height:max(15px, calc(19 * var(--u)));
  font-weight:400;
}

/* ══════════════════════════════════════════════════════════
   الاستجابة
   ══════════════════════════════════════════════════════════ */

/* الشريط العلوي وحده يحتفظ بنقاط توقّفه — بقيّة الصفحة تتدرّج بوحدة واحدة */
@media (max-width:1000px){
  .nav__links{ gap:calc(24 * var(--u)); }
  .nav__start{ gap:calc(32 * var(--u)); }
  .nav__links a{ font-size:max(11px, calc(16 * var(--u))); }
}


/* خمسة روابط لا تتّسع أفقيًّا دون 1120، فيُطوى الشريط قبل أن تتلامس المجموعتان */
@media (max-width:1120px){
  .nav__toggle{ display:block; }
  .nav__in{ position:relative; }
  .nav__links{
    display:none;
    position:absolute;
    inset-inline:0;
    top:calc(68 * var(--u));
    flex-direction:column;
    align-items:flex-start;
    gap:calc(18 * var(--u));
    padding:calc(20 * var(--u));
    background:#fff;
    border-radius:calc(20 * var(--u));
    box-shadow:0 18px 40px rgba(10,17,25,.18);
    z-index:20;
  }
  .nav__links a{ color:var(--slate); }
  .nav__in.is-open .nav__links{ display:flex; }
}

@media (max-width:720px){
  :root{ --gutter:16px; }
  .br-lg{ display:none; }
  .nav__end .btn--login{ display:none; }
  .nav__login{ display:block; }
  .logo img{ width:calc(104 * var(--u)); height:calc(45 * var(--u)); }
}


/* دون 360 تصير كتلة الاقتباس أطول من نسبة البطاقة حتى مثبَّتةً من القاع،
   لأن النصّ واقف عند أرضية 11px ولا يصغر معها. تعود إلى التدفّق فتنمو
   البطاقة بمحتواها بدل أن تقصّه. الحشو بالنِّسب فيتدرّج مع العرض. */
/* دون 720 يقصّ ثبات النسبة عنوانَ البطاقة (22px عند 390) لأن الخطّ
   واقف عند أرضية 11px. تصير النسبة حدًّا أدنى فترتفع البطاقة بمحتواها.
   فوق 720 تبقى النسبة كما في التصميم فلا يتغيّر سطح المكتب. */
/* التركيب كما هو على سطح المكتب: أربع كتل في صفّ واحد وعمود الجهات بينها.
   كانت الفجوة 0 اعتمادًا على أن space-between يوزّع المتبقّي، والأعمدة نامية
   فلا يتبقّى شيء، فتتلاصق الكتل. الآن تسري فجوة التصميم المتدرّجة نفسها
   (48 × --u) بلا تجاوز، وقد كانت 80 يوم كُتب `gap:0` فلم تكن تتّسع. */
@media (max-width:720px){
  .footer__bar{ flex-wrap:wrap; row-gap:calc(8 * var(--u)); }
  /* أيقونات التذييل تتقلّص إلى ~7px فلا تُقرأ؛ أرضية تُبقيها بحجم النصّ */
  .footer .ico--sm{ width:max(12px, calc(20 * var(--u))); height:max(12px, calc(20 * var(--u))); }
  /* وأيقونات التواصل الاجتماعي كذلك — تصل إلى ~7px فتختفي على الخلفية */
  .footer__social svg{ width:max(17px, calc(26 * var(--u))); height:max(17px, calc(26 * var(--u))); }
  .footer__social{ gap:max(7px, calc(11 * var(--u))); }
}

/* دون 360 لا يتّسع العمود لأربعة أعمدة عند أرضية 11px،
   فتُخفَّض أرضية نصّ التذييل وحده إلى 9px ليبقى التركيب بلا كسر */
@media (max-width:360px){
  .footer__col h5,.footer__col a,.footer__bar{ font-size:max(9px, calc(20 * var(--u))); }
}


@media (max-width:360px){
  .quote__card{ min-height:0; }
  .quote__body{
    position:relative;
    right:auto; left:auto; bottom:auto;
    width:auto;
    padding:7.11% 6.87%;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ══════════════════ خدماتنا الرئيسية ══════════════════
   إطار «حلولنا(جديد)»: بطاقة 1048×955 · r=48 · #F5F5F5 · عرض داخلي 848.
   كل المقاسات الداخلية نِسَب من عرض البطاقة عبر cqw لا نِسَبًا مئوية،
   لأن النسبة المئوية تُحسب من الحاوية الأعلى فتتضخّم وتُخلّ بتوزيع flex.
   ولا aspect-ratio على البطاقات النصّية حتى تنمو بمحتواها بدل أن تقصّه. */
.services{ margin-top:calc(132 * var(--u)); }
.services__card{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  container-type:inline-size;     /* المرجع 1048 لكل ما بداخلها */
  border-radius:calc(48 * var(--u));
  background:var(--gray);
}

/* حشو البطاقة يُنفَّذ هوامشَ على أبنائها، إذ لا يستعلم العنصر نفسه كحاوية */
.services__head{
  margin:6.87cqw 9.54cqw 0;       /* 72 · 100 من 1048 */
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2.29cqw;
}
.services__head h2{
  flex:none;
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(46 * var(--u)));
  font-weight:600;
  color:var(--slate);
}
.services__head p{
  width:48.23%;                   /* 409 / 848 */
  font-size:max(11px, calc(19.42 * var(--u)));
  line-height:max(15px, calc(23 * var(--u)));               /* 46 لسطرين */
  font-weight:400;
  color:var(--slate);
  text-align:right;
}

.services__grid{
  margin:4.62cqw 9.54cqw 7.98cqw; /* 48.37 · 100 · 83.63 */
  display:flex;
  flex-direction:column;
  gap:1.62cqw;                    /* 17 */
}
.srow{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.54cqw; }
/* عرض ثابت بنسبة التصميم بدل flex:1: مع aspect-ratio والحشو لا يتساوى
   توزيع flex فيخرج عمودان بعرضين مختلفين (456 و375 بدل 416) */
.srow > *{ flex:0 0 auto; width:39.69cqw; margin:0; min-width:0; }
/* الصفّ الثاني بطاقتاه متساويتا الارتفاع في التصميم (252 لكلٍّ) */
.srow--b{ align-items:stretch; }

.scard{
  position:relative;
  border-radius:3.71cqw;          /* 38.84 */
  background:#fff;
  text-align:right;
  color:var(--slate);
}

/* «التوريد المتكامل» — 416×436، كتلة المحتوى 334.16 عند (40.91, 48.63) */
.scard--lead{ padding:4.64cqw 3.90cqw 10.36cqw; }
.scard--lead img{
  display:block;
  width:66.43%;                   /* 222 / 334.16 */
  height:auto;
}
.scard--lead h3{
  margin-top:2.29cqw;             /* 24 */
  font-size:max(11px, calc(35.97 * var(--u)));
  line-height:max(15px, calc(51.7 * var(--u)));
  font-weight:600;
}
.scard--lead p{
  margin-top:1.91cqw;             /* 20 */
  font-size:max(11px, calc(19.45 * var(--u)));
  line-height:max(15px, calc(30.36 * var(--u)));
  font-weight:400;
}

/* لوحة الهاتف — 415.91×435.33: صفيحة بيضاء بأسفلها والصورة تمتدّ فوقها */
.scard--phone{
  position:relative;
  margin:0;
  aspect-ratio:415.91 / 435.33;
}
.scard__plate{
  position:absolute;
  inset:auto 0 0 0;
  height:69.52%;                  /* 302.63 / 435.33 */
  border-radius:3.71cqw;
  background:#fff;
}
/* STRETCH بـ m11=0.664 و m12=0 ⟵ يُظهر أعلى الصورة */
.scard--phone img{
  position:absolute;
  left:11.78%;                    /* 49 / 415.91 */
  top:0;
  width:76.22%;                   /* 317 / 415.91 */
  height:100%;
  object-fit:cover;
  object-position:top;
}

/* البطاقتان الصغيرتان — 416×252، كتلة المحتوى عند y=72.63 */
.scard--sm{ padding-block:6.93cqw 7.06cqw; }
.scard--procure{ padding-inline:3.83cqw 6.09cqw; }   /* 40.18 · 63.82 */
.scard--store  { padding-inline:3.82cqw 4.87cqw; }   /* 40 · 51 */
.scard--sm h3{
  font-size:max(11px, calc(22.66 * var(--u)));
  line-height:max(15px, calc(37.22 * var(--u)));
  font-weight:600;
}
.scard--sm p{
  margin-top:1.85cqw;             /* 19.42 */
  font-size:max(11px, calc(15.22 * var(--u)));
  line-height:max(15px, calc(23.74 * var(--u)));
  font-weight:400;
}
/* نجمة رباعية 67 @ (24.82, 24.63) — خلف النصّ كبقيّة زخارف البطاقات */
.deco--svc{
  width:16.11%;                   /* 67 / 416 */
  left:5.97%;
  top:9.77%;
  color:var(--violet);
}

/* أرضية عنوان «خدماتنا الرئيسية» على الشاشات الصغيرة — كانت ضمن قاعدة عناوين
   الأقسام المشتركة في صفحة الرئيسية، وانتقلت معه إلى هنا. بدونها ينكمش العنوان
   دون أرضيته فيصغر عن بقيّة عناوين الصفحة. */
@media (max-width:720px){
  .services__head h2{
    font-size:max(15px, calc(32 * var(--u)));
    line-height:max(21px, calc(46 * var(--u)));
  }
}