@charset "utf-8";

/* ══════════════════════════════════════════════════════════
   الرئيسية — مبنية على إطار فيجما
   "الرئيسية (جديد)" 227:66 · 1440×9463 · عمود المحتوى 1048px
   الخط الأصلي Graphik Arabic (تجاري وغير مثبَّت)
   ══════════════════════════════════════════════════════════ */

:root{
  --cyan:#2AC0D7;
  --blue-2:#3B79F5;
  --violet:#8A38F5;
  --purple:#644E91;
  --purple-2:#644D90;
  --ink:#0A1119;
  --slate:#1E3650;
  --sand:#EAD6B0;
  --gray:#F5F5F5;
  /* ألوان التصميم القديم */
  --lilac:#E0CFF5;
  --sky:#DEECFF;
  --aqua:#CCEAEF;
  --dune:#F5EBD8;
  --taupe:#5D524A;
  --blue-1:#0966E5;
  /* منقولة مع قسم «B2B بالأرقام» من صفحة عن B2B */
  --blue:#0966E5;
  --cream:#FAF0DD;
  --cream-line:#F5E2BD;

  --w:1048px;
  --gutter:32px;
  /* وحدة التدرّج: 1px عند عرض التصميم (1048) وتصغر معه خطّيًّا،
     فيبقى ترتيب سطح المكتب نفسه على كل المقاسات وتصغر الأحجام فقط */
  --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)));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

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

/* ─────────── أزرار ─────────── */
.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;
}
.btn:hover{ filter:brightness(.94); }
.btn--solid{ background:var(--cyan); color:#fff; font-weight:400; }
.btn--white{ background:#fff; color:var(--ink); border:1px solid rgba(245,245,245,.5); }
.btn--ghost{ color:#fff; border:1px solid rgba(245,245,245,.5); }
.btn--lg{ height:calc(72 * var(--u)); padding:calc(24 * var(--u)) calc(32 * var(--u)); font-size:max(11px, calc(20 * var(--u))); line-height:max(15px, calc(24 * var(--u))); }
.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)); }

/* ══════════════════ 1 · البطل ══════════════════ */
.hero{
  position:relative;
  background:var(--cyan);
  padding:calc(40 * var(--u)) 0 calc(93 * var(--u));
  overflow:hidden;
}

/* الشريط */
/* الشريط العلوي يبقى كما كان تمامًا: تثبيت الوحدة عند 1px
   يعيد كل قيمه إلى بكسلات التصميم الأصلية بلا تدرّج */
.nav{ --u:1px; font-size:16px; }

.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:#fff; text-decoration:none;
  transition:opacity .18s ease;
}
/* تخفيف لا تغيير لون: الرابط أبيض على سماوي في سطح المكتب وداكن على أبيض داخل
   القائمة المنسدلة، فأيّ لون ثابت يفشل في إحدى الحالتين.
   (كان color:var(--cyan) فيصير أبيضَ على سماوي ⟵ سماويًّا على سماوي فيختفي.) */
.nav__links a:hover{ opacity:.72; }
.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:#fff;
  flex:none;
}
.nav__toggle svg{ width:calc(24 * var(--u)); height:calc(24 * var(--u)); display:block; }

/* نجمة البطل: 52×52 رباعية inner 0.21 @ (1263, 590) */
.deco--hero{
  position:absolute;
  width:calc(52 * var(--u));
  aspect-ratio:1;
  left:87.71%;
  top:calc(590 * var(--u));
  color:rgba(255,255,255,.3);
}

/* منصّة البطل: 1067.24×525 @ (196, 260) */
/* المنصّة محاذية لحافة عمود المحتوى، ويتجاوز النص الحافة اليمنى بـ19.24 كما في التصميم */
.hero__stage{
  position:relative;
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin:calc(164 * var(--u)) auto 0;
  aspect-ratio:1048 / 525;
}

.hero__panel{
  position:absolute;
  margin:0;
  left:0;
  top:0;
  width:43.42%;             /* 455 / 1048 */
  height:100%;
  border-radius:calc(48 * var(--u));
  background:var(--gray);
  overflow:hidden;
}
.hero__panel img{
  position:absolute;
  left:14.07%;              /* 64 / 455 */
  top:8.57%;                /* 45 / 525 */
  width:71.69%;             /* 326.17 / 455 */
  height:auto;
}
.deco--heropanel{
  position:absolute;
  width:21.3%;              /* 96.92 / 455 */
  aspect-ratio:1;
  left:74.73%;              /* 340 / 455 */
  top:10.17%;               /* 53.4 / 525 */
  transform-origin:0 0;
  transform:rotate(-52.02deg);
  color:var(--cyan);
}

.hero__text{
  position:absolute;
  right:-1.836%;            /* -19.24 / 1048 */
  top:4.571%;               /* 24 / 525 */
  width:57.63%;             /* 604 / 1048 */
  text-align:right;
  color:#fff;
}
.hero__badge{
  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));
  background:#fff;
  color:var(--purple-2);
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(24 * var(--u)));
  font-weight:500;
}
.hero__badge img{ width:calc(38 * var(--u)); height:auto; flex:none; }
.hero__text h1{
  margin-top:calc(24 * var(--u));
  max-width:calc(570 * var(--u));          /* صندوق التصميم 545؛ الخط البديل أعرض بـ14px */
  font-size:max(11px, calc(60.43 * var(--u)));
  line-height:max(15px, calc(94.7 * var(--u)));
  font-weight:600;
}
.hero__lead{
  margin-top:calc(24 * var(--u));
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(29.34 * var(--u)));
  font-weight:400;
}
.hero__text .btn--lg{ margin-top:calc(32 * var(--u)); }

/* شرائط المزايا: @ y879، فجوة 56 */
.hero__pills{
  margin-top:calc(94 * var(--u));
  display:flex;
  justify-content:center;
  gap:calc(56 * var(--u));
}
.hero__pills li{
  display:inline-flex;
  align-items:center;
  gap:calc(9 * var(--u));
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(22 * var(--u)));
  font-weight:500;
  color:var(--purple);
}
.hero__pills i{
  width:calc(12 * var(--u)); height:calc(12 * var(--u));
  border-radius:calc(100 * var(--u));
  background:var(--purple);
  flex:none;
}

/* ══════════════════ 2 · عملاء وثقوا فينا ══════════════════ */
.clients{ margin-top:calc(120 * var(--u)); text-align:center; }
/* الشريط يُبنى باتجاه ltr: في rtl ينزاح النسختان خارج الإطار فلا يعود شيء للرؤية */
.marquee{
  /* كان ممتدًّا على كامل عرض الشاشة، وحُصر في عمود المحتوى كبقيّة الأقسام.
     الشعارات تحتفظ بمقاسها لأنها بنود ثابتة تمرّ عبر الإطار، لا شبكة
     تشتقّ أبعادها من الحاوية — فيقلّ الظاهر منها في اللحظة الواحدة لا غير */
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin:calc(48 * var(--u)) auto 0;
  height:calc(134 * var(--u));
  display:flex;
  align-items:center;
  overflow:hidden;
  direction:ltr;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{
  display:flex;
  align-items:center;
  gap:calc(24.85 * var(--u));
  padding-right:calc(24.85 * var(--u));   /* يكمل دورة التكرار */
  flex:none;
  will-change:transform;          /* يضمن التركيب على معالج الرسوم في الهواتف الأقدم */
  animation:marquee 42s linear infinite;
}
.marquee__track li{ flex:none; width:calc(155.34 * var(--u)); height:calc(118.06 * var(--u)); overflow:hidden; }
/* الشعار في أعلى 76% من الملف وشريط الاسم الأسود في أسفله؛ التثبيت للأعلى يقصّه */
.marquee__track img{ width:100%; height:100%; object-fit:cover; object-position:top; }
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-100%,0,0); }
}

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

.band__lead{
  margin-top:calc(24 * var(--u));
  margin-inline:auto;
  max-width:calc(568 * var(--u));
  font-size:max(11px, calc(24 * var(--u)));
  line-height:max(15px, calc(40 * var(--u)));
  font-weight:400;
}

/* ══════════════════ 4 · البطاقات الأربع ══════════════════ */
.stack{ margin-top:calc(132 * var(--u)); display:flex; flex-direction:column; gap:calc(100 * var(--u)); }

.hsplit{
  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));
}
.hpanel      { grid-column:1; grid-row:1; }
.hsplit__text{ grid-column:2; grid-row:1; }

.hsplit--rev{ grid-template-columns:minmax(0,calc(416 * var(--u))) minmax(0,calc(514 * var(--u))); }
.hsplit--rev .hsplit__text{ grid-column:1; }
.hsplit--rev .hpanel      { grid-column:2; }

.hsplit__text{ text-align:right; padding-top:calc(48 * var(--u)); }
.hsplit__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);
}
/* عنوان «عن B2B» وحده بلون الشريط العلوي؛ النوعيّة أعلى من القاعدة أعلاه
   ليغلبها، والعناوين الثلاثة الأخرى تبقى بلون الحبر */
.hsplit__text h3.h3--cyan{ color:var(--cyan); }
.hsplit__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);
}
.hsplit__text .btn{ margin-top:calc(16 * var(--u)); }

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

/* بعض الصور أعرض من لوحتها عمدًا وتُقصّ بحدودها، فيُرفع قيد max-width العامّ */
.hpanel img{ position:absolute; height:auto; max-width:none; }
.img--c1{ left:0;        top:17.30%; width:100%;    }   /* 514×488 @ (0,105)      */
.img--c2{ left:-8.56%;   top:0;      width:117.12%; }   /* 602×691 @ (-44,0)      */
.img--c3{ left:-13.23%;  top:19.60%; width:126.65%; }   /* 651×488 @ (-68,119)    */
.img--c4{ left:11.67%;   top:18.89%; width:76.6%;   }   /* 393.7×815.65 @ (60,114.68) */

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

.deco--c1{ width:29.85%; left:65.37%; top:14.98%; transform:rotate(-52.02deg); color:rgba(255,255,255,.5); }
.deco--c2{ width:42.39%; left:-12.45%; top:20.88%; transform:rotate(-52.02deg); color:rgba(255,255,255,.5); }
.deco--c3{ width:29.85%; left:62.89%; top:14.86%; transform:rotate(-52.02deg); color:rgba(255,255,255,.5); }
.deco--c4{ width:28.99%; left:1.56%;  top:1.81%;  color:rgba(255,255,255,.3); }

/* .deco--p01 و.deco--p06 مُعرَّفتان مع قسم «المشكلة التي نحلها» أدناه.
   كانتا هنا نسخةً ثانيةً مطابقة حرفًا بحرف، فحُذفت لئلّا يُعدَّل أحد النسختين بلا أثر. */

/* ══════════════════ 5 · دورة التوريد — القسم معطّل بتعليق في index.html ══════════════════ */
.flow{
  margin-top:calc(132 * var(--u));
  background:var(--gray);
  padding:calc(80 * var(--u)) 0;
}
.flow__head{
  width:min(670px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  text-align:center;
}
.flow__head .eyebrow{ display:block; text-align:center; }
.flow__head 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(--ink);
}

/* .pgrid و.pcard و.pnum و.pcard h4 مُعرَّفة مرّةً واحدة مع «المشكلة التي نحلها» أدناه؛
   كانت هنا نسخة ثانية مطابقة. لو أُعيد تفعيل «دورة التوريد» فسيلتقط القواعد نفسها. */

/* ══════════════════ 6 · الامتياز التجاري — القسم معطّل بتعليق في index.html ══════════════════ */
.franchise{
  margin-top:calc(120 * var(--u));
  width:min(1056px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:grid;
  /* الصورة (565) يمينًا والنص (416) يسارًا */
  grid-template-columns:minmax(0,calc(565 * var(--u))) minmax(0,calc(416 * var(--u)));
  justify-content:space-between;
  align-items:center;
  gap:calc(75 * var(--u));
}
.franchise__img { grid-column:1; grid-row:1; margin:0; }
.franchise__text{ grid-column:2; grid-row:1; text-align:right; }

.franchise__img img{ width:100%; height:auto; border-radius:calc(24 * var(--u)); }

.franchise__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;
}
.franchise__lead{
  margin-top:calc(24 * var(--u));
  font-size:max(11px, calc(20 * var(--u)));
  line-height:max(15px, calc(47.78 * var(--u)));
  font-weight:400;
}
.feats{
  margin-top:calc(16 * var(--u));
  max-width:calc(322 * var(--u));
  margin-inline-start:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:calc(16 * var(--u));
}
.feats li{
  display:inline-flex;
  align-items:center;
  gap:calc(8 * var(--u));
  font-size:max(11px, calc(16 * var(--u)));
  line-height:max(15px, calc(19 * var(--u)));
  font-weight:500;
  color:var(--purple);
}
.franchise__text .btn{ margin-top:calc(16 * var(--u)); }

/* ══════════════════ 7 · الشركاء ══════════════════ */
.partners{
  margin-top:calc(120 * 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 h2{ font-size:max(11px, calc(32 * var(--u))); line-height:max(15px, calc(46 * var(--u))); font-weight:600; }
.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;
  white-space:nowrap;
}
.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; }

/* صورة مجمّعة بديلة لشبكة .logos — تحمل عنوانها وشعاراتها داخل الملف نفسه */
.partners__collage{ margin-top:calc(64 * var(--u)); width:100%; height:auto; border-radius:calc(24 * var(--u)); }

/* ══════════════════ 7 · B2B بالأرقام ══════════════════ */
.stats{ margin-top:calc(132 * var(--u)); }
.stats__head{ text-align:center; padding-inline:var(--gutter); }
.stats__head .eyebrow--ink{
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(46 * var(--u)));
  font-weight:600;
}

.bento{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin:calc(72 * var(--u)) auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:calc(20 * var(--u));
  aspect-ratio:1048 / 612;
}
/* البطاقة حاوية قياس: مقاساتها الداخلية نِسَب من عرضها (المرجع 514 في التصميم)،
   فتتدرّج تدرّجًا موحّدًا كما بين إطار فيجما 1440 وإطار 402 */
.bento__cell,
.bento__big{
  position:relative;
  container-type:inline-size;
  border-radius:calc(48 * var(--u));           /* العنصر لا يستعلم نفسه كحاوية، فتبقى بالبكسل */
  overflow:hidden;
  margin:0;
}
.bento__cell--cyan { grid-column:1; grid-row:1; background:var(--cyan); }
/* خلفية بنفسجية بلون كلمة «تنمو» في عنوان القسم؛ الحدّ الكريمي أُسقط لأنّه
   كان يخدم الخلفية الكريمية السابقة */
.bento__cell--cream{ grid-column:1; grid-row:2; background:var(--violet); }
.bento__big        { grid-column:2; grid-row:1 / span 2; background:var(--blue); }

.bento__txt{
  position:absolute;
  right:6.23%;                  /* 32 / 514 */
  width:41.44%;                 /* 213 / 514 */
  text-align:right;
  z-index:2;
}
.bento__cell--cyan  .bento__txt{ top:21.11%; color:#fff; }        /* 62.5 / 296 */
/* أبيض لا slate: النصّ الداكن على البنفسجي تباينه 2.1:1 وهو دون الحدّ المقروء */
.bento__cell--cream .bento__txt{ top:14.36%; color:#fff; }        /* 42.5 / 296 */

.bento__txt h4{
  font-size:6.871cqw;           /* 35.32 / 514 */
  line-height:14.364cqw;        /* 73.83 / 514 */
  font-weight:600;
}
.bento__txt p{
  margin-top:3.307cqw;          /* 17 / 514 */
  font-size:3.113cqw;           /* 16 / 514 */
  line-height:7.782cqw;         /* 40 / 514 */
  font-weight:500;
}

.bento__cell--cyan img{
  position:absolute;
  left:-6.23%;                  /* -32 / 514 */
  top:12.84%;                   /* 38 / 296 */
  width:64.2%;                  /* 330 / 514 */
  height:auto;
}
.bento__cell--cream img{
  position:absolute;
  left:3.89%;                   /* 20 / 514 */
  top:19.59%;                   /* 58 / 296 */
  width:52.53%;                 /* 270 / 514 */
  height:auto;
}

/* حُذفت صورة الشبكة من هذه البطاقة، فلم يعد للنصّ ما يتموضع فوقه —
   يُوسَّط أفقيًّا ورأسيًّا في البطاقة بدل تثبيته أعلى اليمين */
.bento__txt--big{
  right:auto;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  /* وُسّع من 78% بعد توحيد حجم «500+ فرع»: السطر صار 379.7 من أصل 401 عند 1440،
     وهامش 5% لا يكفي لخطّ بديل أعرض من خطّ التصميم */
  width:88%;
  text-align:center;
  color:#fff;
}
/* «500+ فرع» في سطر واحد على كل المقاسات بطلب صاحب المشروع — التصميم يضعهما
   سطرين (العنصران block و«فرع» تحته بفاصل 8). inline يحاذيهما على خطّ القاعدة،
   والمسافة بينهما هي فراغ الـHTML بين الوسمين. الكتلة مطلقة ومتمركزة فلا يتغيّر
   ارتفاع البطاقة ولا الصفحة. */
.stat{
  display:inline;
  /* صُغّر الربع بطلب صاحب المشروع: 96 ⟶ 72، وارتفاع السطر بالنسبة نفسها */
  font-size:14.008cqw;          /* 72 / 514 — التصميم 96 */
  line-height:9.762cqw;         /* 50.18 / 514 — التصميم 66.9 */
  font-weight:600;
}
.stat__unit{
  display:inline;
  /* الفراغ بين الوسمين يُرسم بحجم خطّ الأب (16) لا بحجم الرقم، فيلتصق السطر
     عند تكبيره. الفاصل بـem ليتدرّج مع الخطّ على كل المقاسات. */
  margin-inline-start:.2em;
  font-size:14.008cqw;          /* نفس حجم الرقم بطلب صاحب المشروع؛ التصميم 40 / 514 */
  line-height:9.762cqw;
  font-weight:600;
}
.bento__txt--big p{
  margin-top:1.556cqw;
  font-size:3.502cqw;           /* 18 / 514 */
  line-height:7.782cqw;
  font-weight:400;
}
.bento__big img{
  position:absolute;
  left:3.31%;                   /* 17 / 514 */
  top:48.37%;                   /* 296 / 612 */
  width:93.19%;                 /* 479 / 514 */
  height:auto;
}

.deco--big{
  width:28.6%;
  left:3.7%;
  top:2.29%;
}
.deco--big path{
  fill:none;
  stroke:rgba(222,236,255,.27);
  stroke-width:6.12;   /* 9 × (100 / 147) */
}
/* البطاقة الكريمية — رباعية 147 محدَّدة 9px @ (426.48, 115.53) دوران ‎-15°‎ */
/* موضع التصميم الأصلي: تنساب خارج الحافّة اليسرى خلف النصّ.
   z-index:0 يثبّت بقاءها تحت النصّ (z-index:2) صراحةً لا اعتمادًا على ترتيب DOM.
   والشفافية لأنّ نجمة بيضاء صريحة خلف نصّ أبيض تُذيب حروفه — كانت في الأصل
   كريميّة على خلفية كريميّة أي خافتة بطبعها. */
.deco--cream{
  width:28.6%;
  left:82.97%;
  top:39.03%;
  transform:rotate(-15deg);
  z-index:0;
  opacity:.32;
}
.deco--cream path{
  fill:none;
  stroke:#fff;
  stroke-width:6.12;
}

/* الشبكة مصمَّمة لبطاقات 514px. بعمودين على شاشة ضيّقة تصير البطاقة 141px،
   وكل نصّها مقيس بوحدات الحاوية (cqw) بلا أرضية — فيهبط المتن إلى 4.4px
   والعنوان إلى 9.7px، أي غير مقروءين. عمود واحد يضاعف عرض الحاوية،
   وأرضيات px تحرس ما تبقّى. النِّسَب هي نِسَب التصميم نفسها. */
/* ══════════════════ المشكلة التي نحلها — منقول من صفحة عن B2B ══════════════════ */
.eyebrow--cyan{ color:var(--cyan); }   /* لم تكن معرَّفة هنا */
.problems{
  margin-top:calc(132 * var(--u));
  background:var(--gray);
  padding:calc(80 * var(--u)) 0;
}
.problems__head{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  text-align:center;
}
.problems__head 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(--ink);
}

.pgrid{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin:calc(64 * var(--u)) auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(12 * var(--u));
}
.pcard{
  position:relative;
  aspect-ratio:341.33 / 205.5;
  border-radius:calc(24 * var(--u));
  background:#fff;
  overflow:hidden;
  padding:calc(32 * var(--u));
  text-align:right;
}
.pnum{
  display:block;
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(32 * var(--u)));
  font-weight:600;
  color:rgba(10,17,25,.14);
}
.pcard h4{
  margin-top:calc(44 * var(--u));
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:600;
  color:var(--slate);
}
.pcard--wide h4{
  font-size:max(11px, calc(31 * var(--u)));
  line-height:max(15px, calc(32 * var(--u)));
}
/* «اختلاف جودة المنتجات» يحتاج 275.8px بخطّ التصميم والمتاح 277.3 — أي فائض 0.5%،
   فالالتفاف على حدّ السكّين يقع ويزول بتقريب البكسل الجزئي: قِيس سطرًا واحدًا عند 721
   و≥1200، وسطرين بينهما فيُقصّ الثاني (28.8px عند 768 و38.8 عند 1048) لأنّ ارتفاع
   البطاقة مثبَّت بـaspect-ratio والفائض الرأسيّ فيها ≈2u بينما السطر يكلّف 74.91u.
   التصميم نفسه يصغّر هذا العنوان الطويل إلى 31px، فلا يُصغَّر أكثر ولا يُشدّ ارتفاع سطره
   (كلاهما يزيح العنوان 21px عن محاذاة جيرانه). يُمدّ صندوق السطر يسارًا 24u بدل ذلك:
   النصّ محاذٍ لليمين فحافّته اليمنى لا تتزحزح، والمساحة المضافة فارغة أصلًا،
   فيصير الفائض 9.2% — يكفي خطّ التصميم وخطوط النظام البديلة معًا.
   ودون 721 لا حاجة إليه: مهرب aspect-ratio:auto يمنع القصّ، والمدّ هناك يُلصق
   النصّ بحافّة البطاقة. */
.pcard--fit h4{ font-size:max(11px, calc(31 * var(--u))); }
@media (min-width:721px){
  .pcard--fit h4{ margin-inline-end:calc(-24 * var(--u)); }
}

/* بطاقة المشكلة 01 — نجمة رباعية 67 @ (19.33, 14) بلا دوران */
.deco--p01{
  width:19.63%;
  left:5.66%;
  top:6.81%;
  color:rgba(138,56,245,.2);
}
/* بطاقة المشكلة 06 — سباعية 79.87 @ (2, 66.46) */
.deco--p06{
  width:23.4%;
  left:.59%;
  top:32.34%;
  transform:rotate(-52.02deg);
  color:rgba(42,192,215,.32);
}

/* التركيب كما هو على سطح المكتب — عمودان و«500+» تمتدّ صفّين — كما تبقى .pgrid
   ثلاثة أعمدة على كل عرض. البطاقة وحدها تتحرّر من نسبتها فتنمو بارتفاع نصّها
   المحكوم بأرضيات القراءة؛ نفس مهرب .pcard في آخر الملفّ.
   لولا ذلك لقُصّ النصّ: بالعمودين وبالنسبة مثبَّتة تصير البطاقة 168×97 عند 375
   وعمود النصّ 70px، فتتجاوز الكتلة قاع البطاقة 62.5px. */
@media (max-width:720px){
  .bento{ aspect-ratio:auto; grid-auto-rows:minmax(0,1fr); }
  .bento__cell,
  .bento__big{ aspect-ratio:auto; }
  .bento__cell{ min-height:calc(296 * var(--u)); }

  /* داخل البطاقة يتكيّف رأسيًّا: الصورة أعلى والنصّ تحتها بعرض البطاقة كاملًا.
     إبقاء تركيب سطح المكتب هنا («صورة يسارًا ونصّ يمينًا») يترك للنصّ 80px من
     أصل 168 فتنكسر الفقرة كلمةً في كل سطر وتصغر الصورة إلى النصف. */
  .bento__cell{ display:flex; flex-direction:column; justify-content:center; padding-block:9%; }

  /* النصّ يخرج من الإطلاق ليقود ارتفاع البطاقة.
     relative لا static: static يدفعه خلف أشقّائه المطلقين (النجمة والصورة). */
  .bento__cell .bento__txt{
    position:relative;
    top:auto; right:auto; width:auto;
    padding:0 8%;
  }
  .bento__cell img{
    position:relative;
    order:-1;                     /* الصورة تسبق النصّ رغم ورودها بعده في الـHTML */
    left:auto; top:auto; transform:none;
    display:block; margin:0 auto 6%;
  }
  .bento__cell--cyan  img{ width:64%; }
  .bento__cell--cream img{ width:70%; }

  /* top/left موروثتان من قاعدة التوسيط المطلق؛ تُلغيان وإلّا أزاحتا الكتلة
     نصف البطاقة فتُقصّ «500+». */
  .bento__big{ display:grid; place-items:center; }
  .bento__txt--big{
    position:relative;
    top:auto; left:auto; transform:none;
    width:92%; margin:0; padding:9% 0;
  }

  .bento__txt h4{ font-size:max(15px, 6.871cqw); line-height:max(21px, 14.364cqw); }
  .bento__txt p{ font-size:max(11px, 3.113cqw); line-height:max(17px, 7.782cqw); }
  /* «500+ فرع» سطر واحد بحجم واحد، وأرضيته أخفض من السابق (34) لأن السطر صار
     ضعف عرضه تقريبًا فلا يتّسع له صندوق البطاقة على الشاشات الضيّقة */
  .stat,
  .stat__unit{ font-size:max(20px, 14.008cqw); line-height:max(23px, 9.762cqw); }
}

/* ══════════════════ 8 · الأسئلة الشائعة ══════════════════ */
.faq{
  margin-top:calc(120 * var(--u));
  background:var(--gray);
  padding:calc(88 * var(--u)) 0;
}
.faq__title{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  text-align:center;
  font-size:max(11px, calc(32 * var(--u)));
  line-height:max(15px, calc(46 * var(--u)));
  font-weight:600;
}
.faq__list{
  width:min(882px,calc(100% - var(--gutter) * 2));
  margin:calc(64 * var(--u)) auto 0;
  display:flex;
  flex-direction:column;
  gap:calc(32 * var(--u));
}
.faq__list details{
  background:#fff;
  border-radius:calc(24 * var(--u));
}
.faq__list summary{
  list-style:none;
  cursor:pointer;
  min-height:calc(92 * var(--u));
  padding:calc(32 * var(--u)) calc(24 * var(--u));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(42 * var(--u));
  font-size:max(11px, calc(23.2 * var(--u)));
  line-height:max(15px, calc(28 * var(--u)));
  font-weight:400;
  color:var(--ink);
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary .ico{ transition:transform .2s ease; }
.faq__list details[open] summary .ico{ transform:rotate(180deg); }
.faq__list details p{
  padding:0 calc(24 * var(--u)) calc(28 * var(--u));
  font-size:max(11px, calc(18 * var(--u)));
  line-height:max(15px, calc(32 * var(--u)));
  color:var(--slate);
  text-align:right;
}

/* ══════════════════ 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:17.65%;
  right:17.65%;             /* 185 / 1048 */
  top:63.65%;               /* 499 / 784 */
  text-align:center;
  color:#fff;
}
/* سطر واحد كما في التصميم؛ الخطّ البديل يتجاوز الصندوق بـ0.6px فيلتفّ بلا nowrap */
.cta__body h2{ font-size:max(11px, calc(48 * var(--u))); line-height:max(15px, calc(89.22 * var(--u))); font-weight:500; white-space:nowrap; }
.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(32 * var(--u)); }

/* ══════════════════ 10 · التذييل ══════════════════ */
.footer{
  margin-top:calc(132 * 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;
}
/* ثلاث كتل: «تواصل معنا» يمينًا · العلامة وسطًا · شعارات الجهات يسارًا.
   العمودان الجانبيان بحصّة متساوية فتستقرّ العلامة في المنتصف البصري
   مهما اختلف عرضهما. */
/* الكتل تبدأ من مستوى واحد بطلب صاحب المشروع — كانت متمركزة رأسيًّا (center)
   لأن ارتفاعاتها متفاوتة، فكان رأس كل كتلة يبدأ عند ارتفاع مختلف. */
.footer__cols{ display:flex; justify-content:space-between; align-items:flex-start; gap:calc(48 * var(--u)); }
/* صار العمودان اثنين («تواصل معنا» و«روابط سريعة»)، فحصّة الجهات ضِعف حصّة
   العمود الواحد لتتساوى كفّتا الصفّ وتبقى العلامة في المنتصف البصري */
/* الكتل الأربع بعرض محتواها، وspace-between يوزّع الباقي فجوات متساوية.
   كانت الأعمدة نامية وعمود الجهات بحصّة مضاعفة (لتوسيط العلامة يوم كانت
   الكتل ثلاثًا)، فلمّا صارت الشعارات عمودًا واحدًا عرضه 190 بقي داخل حصّته
   400.7 فانفتحت فجوة 210.7px بينه وبين العلامة. */
.footer__cols > .footer__col,
.footer__cols > .footer__gov{ flex:0 0 auto; }
.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 لأن المتصفّح يقيس مساهمة الترويسة في عرض العمود بأضيق كلمة لا بالسطر
   الكامل، فتلتفّ سطرين بلا داعٍ على الشاشات الضيّقة.
   الفائض يمتصّه عمود الجهات (grow:2 وbasis صفر) فلا يطفح شيء. */
.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 كالترويسة: عرض العمود يُشتقّ من أضيق كلمة، فكان «أسئلة شائعة؟» يلتفّ
   سطرين في عمود 43.5px عند 375. الفرق يمتصّه عمود الجهات (grow:2). */
.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 فيُقرأ مباشرةً. ارتفاع موحّد والعرض يتبع النسبة. */
/* عمود واحد بطلب صاحب المشروع: كانت شبكة ملتفّة باثنين في الصفّ فيبقى الثالث
   وحده وتنفتح بجانبه فجوة بعرض شعار كامل (66.7px عند 375 و200 عند 1440).
   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)
   بطلبه أيضًا بعد إضافة عمود «روابط سريعة»، ليفرج 30px للأعمدة عند 1440. */
.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;
}

/* ══════════════════ 7 · متخصصين في توريد قطاع الهوريكا ══════════════════ */
.spec{
  margin-top:calc(132 * var(--u));
  background:var(--gray);
  padding:calc(88 * var(--u)) 0;
}
.spec__head{
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  text-align:center;
}
.spec__head h2{ font-size:max(11px, calc(32 * var(--u))); line-height:max(15px, calc(46 * var(--u))); font-weight:600; color:var(--ink); }
.spec__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); }

/* حاوية الشريط شفّافة على سطح المكتب فلا تؤثّر في التخطيط،
   والنسخة الثانية للبطاقات لا تظهر إلا داخل الشريط المتحرّك */
.spec__strip{ display:contents; }
.spec__cards[aria-hidden]{ display:none; }

.spec__cards{
  /* هامش 60 لا 32: صورة البطاقة اليمنى تطفح 54.6px خارجها */
  width:min(1198px,calc(100% - 120px));
  margin:calc(150 * var(--u)) auto 0;              /* كانت 218 (y=398)؛ ضُيّقت بطلب صاحب المشروع */
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(20 * var(--u));
}
.spec__card{
  position:relative;
  aspect-ratio:386 / 282;
  border-radius:calc(48 * var(--u));
}
.spec__card--violet{ background:var(--lilac); }
.spec__card--blue  { background:var(--sky); }
.spec__card--cyan  { background:var(--aqua); }

/* الصور مقصوصة من الأعلى كما في التصميم (STRETCH بـ m12=0) */
.spec__card img{
  position:absolute;
  max-width:none;
  object-fit:cover;
  object-position:top;
}
/* الحاوية المقصوصة تحاكي قصّ الإطار في فيجما (mask مفعّل على البطاقات الثلاث) */
.spec__clip{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
}
/* النسخة الداخلية: تصل قاع البطاقة، ويقصّها حدّها */
.spec__card--violet .spec__in { left:-1.19%;  top:-87.58%; width:115.14%; height:187.58%; }
.spec__card--blue   .spec__in { left:-20.73%; top:-56.74%; width:141.45%; height:193.62%; }
/* النسخة الطافحة: غير مقصوصة وتتوقّف أعلى من قاع البطاقة */
.spec__card--violet .spec__out{ left:-1.19%;  top:-87.23%; width:115.34%; height:151.77%; }
.spec__card--blue   .spec__out{ left:-20.47%; top:-56.74%; width:141.45%; height:121.28%; }
.spec__card--cyan   .spec__out{ left:-5.18%;  top:-69.5%;  width:131.61%; height:169.5%;  }

/* ══════════════════ 9 · ابدأ رحلة شراء أكثر ذكاءً ══════════════════ */
.journey{ margin-top:calc(132 * var(--u)); }
.journey__title{
  width:min(772px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  padding:calc(8 * var(--u)) 0;
  text-align:center;
  font-size:max(11px, calc(52.11 * var(--u)));
  line-height:max(15px, calc(74.91 * var(--u)));
  font-weight:600;
  color:var(--ink);
}
.journey__list{
  /* كان ممتدًّا على كامل عرض الشاشة (مأخوذ من إطار 1440 في التصميم القديم)،
     وحُصر في عمود المحتوى 1048 كبقيّة الأقسام بطلب صاحب المشروع.
     الصفّ صار 524 بدل 720، فتُصغَّر وحدة القسم بنسبة 1048/1440 = 0.7278
     لتبقى كل نِسبه الداخلية (الحشو والخطوط والصور) كما صُمّمت تمامًا */
  --u: calc(var(--u0) * .7278);
  width:min(var(--w),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  margin-top:calc(64 * var(--u));
  outline:2px solid var(--gray);   /* حدّ لا يغيّر التخطيط، كحدود فيجما المتمركزة */
  outline-offset:-1px;
}
.journey__row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.journey__txt{ grid-column:1; grid-row:1; background:#fff; }
.journey__fig{ grid-column:2; grid-row:1; }
.journey__row--rev .journey__txt{ grid-column:2; }
.journey__row--rev .journey__fig{ grid-column:1; }

.journey__txt{
  padding-block-start:calc(74 * var(--u));
  padding-inline-start:calc(80 * var(--u));
  padding-inline-end:calc(203.04 * var(--u));
  text-align:right;
}
.journey__num{
  display:block;
  margin-top:calc(8.66 * var(--u));
  font-size:max(11px, calc(120.75 * var(--u)));
  line-height:.162;                /* 19.56 / 120.75 — صندوق ضيّق والحروف تطفح كما في التصميم */
  font-weight:600;
}
.journey__txt h3{ margin-top:calc(68.83 * var(--u)); font-size:max(11px, calc(40.11 * var(--u))); line-height:max(15px, calc(65.9 * var(--u))); font-weight:600; color:var(--ink); }
.journey__txt p { margin-top:calc(22.92 * var(--u)); font-size:max(11px, calc(26.94 * var(--u))); line-height:max(15px, calc(42.04 * var(--u))); font-weight:400; color:var(--ink); }

.journey__fig{
  position:relative;
  margin:0;
  aspect-ratio:720 / 605;
  overflow:hidden;
}
.journey__img{ position:absolute; max-width:none; object-fit:cover; }
.journey__img--top{ object-position:top; }

.deco--j7{ width:30.26%; left:67.08%; top:22.11%; transform:rotate(-52.02deg); }
.deco--j4{ width:12.08%; left:7.5%;   top:80.5%; }

.journey__row--a .journey__num{ color:var(--blue-2); }
.journey__row--a .journey__fig{ background:var(--sky); }
.journey__row--a .deco--j7{ color:var(--blue-2); }
.journey__row--a .deco--j4{ color:rgba(9,102,229,.22); }
.journey__row--a .journey__img{ left:21.94%; top:10.58%; width:56.25%; height:138.69%; }

.journey__row--b .journey__num{ color:var(--taupe); }
.journey__row--b .journey__fig{ background:var(--dune); }
.journey__row--b .deco--j7{ color:var(--taupe); }
.journey__row--b .deco--j4{ color:rgba(234,214,176,.64); }
.journey__row--b .journey__img{ left:21.67%; top:10.41%; width:56.67%; height:139.97%; }

.journey__row--c .journey__num{ color:var(--violet); }
.journey__row--c .journey__fig{ background:rgba(138,56,245,.2); }
.journey__row--c .deco--j7{ color:var(--violet); }
.journey__row--c .deco--j4{ color:rgba(138,56,245,.31); }
.journey__row--c .journey__img{ left:21.67%; top:10.41%; width:56.67%; height:89.59%; }

.journey__row--d .journey__num{ color:var(--cyan); }
.journey__row--d .journey__fig{ background:rgba(42,192,215,.2); }
.journey__row--d .deco--j7{ color:var(--cyan); }
.journey__row--d .deco--j4{ color:rgba(42,192,215,.32); }
.journey__row--d .journey__img{ left:22%; top:10.62%; width:56.11%; height:138.35%; }

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

/* خمسة روابط لا تتّسع أفقيًّا دون 1120، فيُطوى الشريط قبل أن تتلامس المجموعتان */

/* الشريط العلوي كما كان: نفس نقاط توقّفه الأصلية، مقصورة عليه
   حتى لا تمسّ أزرار الصفحة المتدرّجة */
@media (max-width:1000px){
  .nav__start{ gap:32px; }
  .nav__links{ gap:24px; }
  .nav__links a{ font-size:16px; }
}

@media (max-width:720px){
  .nav__end .btn--ghost{ display:none; }
  .nav__login{ display:block; }
  .nav .btn{ height:48px; padding:12px 18px; font-size:16px; }
  .logo img{ width:104px; height:45px; }
}

/* الشريط العلوي كما كان: يُطوى إلى زرّ قائمة تحت 1120 */
@media (max-width:1120px){
  .nav__toggle{ display:block; }
  .nav__in{ position:relative; }
  .nav__links{
    display:none;
    position:absolute;
    inset-inline:0;
    top:68px;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:20px;
    background:#fff;
    border-radius:20px;
    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; }

  /* شريط المزايا الثلاث يُخفى على الشاشات الصغيرة بطلب صاحب المشروع؛
     حشو البطل السفلي (93) يكفي لبقاء التنفّس أسفل المنصّة */
  .hero__pills{ display:none; }

  /* «منظومة واحدة تدير التفاصيل»: الفقرة مقيّدة بـ568 متدرّجة فتضيق إلى 190px
     بينما الخطّ واقف عند أرضية 11px ⟵ أسطر قصيرة وهوامش فارغة.
     تُطلق لتملأ العمود على الشاشات الصغيرة */
  .band__lead{ max-width:100%; }

  /* عناوين الأقسام مصمَّمة عند 32 فتبلغ أرضية 11px قبل غيرها، فتتساوى مع نصّ
     الفقرات وتفقد تمييزها كعناوين. تُرفع الأرضية وحدها — لا قيمة التصميم —
     فيعود التسلسل: العناوين الكبرى ← عناوين الأقسام ← الترويسة ← المتن */
  /* .eyebrow قبل .eyebrow--lg كترتيب الأصل: تساوي النوعيّة يجعل الأخير هو الفائز */
  .eyebrow{
    font-size:max(13px, calc(24 * var(--u)));
    line-height:max(17px, calc(29.83 * var(--u)));
  }
  .eyebrow--lg,
  .spec__head h2,
  .faq__title,
  .partners__head h2,
  .stats__head .eyebrow--ink{   /* مصمَّمة عند 32 كعناوين الأقسام لا كترويسة صغيرة */
    font-size:max(15px, calc(32 * var(--u)));
    line-height:max(21px, calc(46 * var(--u)));
  }
  .journey__txt h3{
    font-size:max(17px, calc(40.11 * var(--u)));
    line-height:max(24px, calc(65.9 * var(--u)));
  }
  /* العناوين الكبرى (48–52) تنزل دون عناوين الأقسام تحت 360 لأنّ تدرّجها أسرع،
     فتُرفع أرضيتها هي الأخرى ليبقى التسلسل صحيحًا على كل عرض */
  .display{
    font-size:max(19px, calc(52.11 * var(--u)));
    line-height:max(27px, calc(74.91 * var(--u)));
  }
  /* عنوان «المشكلة التي نحلها» بحجم 48 نفسه — أُلحق هنا عند نقله من صفحة عن B2B.
     أرضيته الأصلية 11px لم تكن تضرّ هناك (لا أرضيات في تلك الصفحة)، لكنّها هنا
     تُنزله دون عناوين الأقسام (32 ⟵ 15px) فينقلب التسلسل ويصير بحجم ترويسته. */
  .hsplit__text h3,
  .problems__head h2{
    font-size:max(18px, calc(48 * var(--u)));
    line-height:max(26px, calc(74.91 * var(--u)));
  }
  /* nowrap كان يقصّ العنوان ~10px داخل البطاقة ذات النسبة الثابتة حتّى قبل
     التكبير؛ الالتفاف يزيله، والكتلة مثبّتة من القاع فتنمو لأعلى بلا تجاوز */
  .cta__body h2{
    white-space:normal;
    font-size:max(18px, calc(48 * var(--u)));
    line-height:max(25px, calc(89.22 * var(--u)));
  }

  /* «ابدأ رحلة شراء»: مع stretch يأخذ الإطار ارتفاع الصفّ الذي يطوله النصّ
     (الخطّ واقف عند أرضية 11px فلا يصغر معه)، ثم يشتقّ aspect-ratio العرضَ
     من الارتفاع فيتّسع الإطار فوق مساره ويغزو عمود النصّ.
     align-self:start يوقف التمدّد، فيعود الإطار وخلفيته وصورته إلى مقاس التصميم،
     وتخفيف الحشو الجانبي يمنح النصّ عرضًا فلا يطول الصفّ ولا تبقى فجوة */
  .journey__fig{ align-self:start; }
  .journey__txt{
    padding-inline-end:calc(90 * var(--u));
    padding-inline-start:calc(40 * var(--u));
  }

  /* «جاهز لتطوير تجربة الشراء»: الكتلة مثبَّتة من القمّة عند 63.65% بينما
     ارتفاعها لا يتدرّج (أرضية الخطّ 11px)، فتتجاوز قاع البطاقة تحت 340px
     ويُقصّ أسفل الزرّ. تثبيتها من القاع عند 9.37% — وهي نسبة التصميم نفسها
     عند 1440 — يجعلها تنمو لأعلى فلا تلامس الحافّة أبدًا */
  .cta__body{ top:auto; bottom:9.37%; }

  /* البطل: كتلة النصّ مطلقة داخل منصّة بنسبة 1048/525، وارتفاعها لا يتدرّج
     (أرضية الخطّ 11px) فتتجاوز المنصّة ثم البطل نفسه، و.hero{overflow:hidden}
     يقصّ زرّ «أنشئ حسابك» كاملًا تحت 360px. أرضية للحشو السفلي تستوعب الفائض */
  .hero{ padding-bottom:max(calc(93 * var(--u)), 56px); }

  /* «متخصصين في توريد قطاع الهوريكا»: البطاقات الثلاث تصير 85px عرضًا
     عند 390 فتفقد معناها. تتحوّل هنا إلى شريط متحرّك بنمط «عملاء وثقو فينا»
     ببطاقة 200px — أي ‎2.4×‎ الحجم. ارتفاع الشريط يستوعب بروز الصورة فوق
     البطاقة (87.23% من ارتفاعها في البنفسجية، وهي الأكبر) والبطاقات ملصقة
     بالقاع. direction:ltr يمنع انزياح النسختين خارج الإطار كما في RTL */
  .spec__strip{
    display:flex;
    align-items:flex-end;
    margin-top:calc(22 * var(--u));    /* كانت 32؛ ضُيّقت بطلب صاحب المشروع */
    /* كان 280 (146 بطاقة + 127 بروز كامل + 7). البروز الكامل يترك فوق البطاقات
       شريطًا فارغًا 32–51px حسب الصورة الظاهرة، فيبدو الفصل عن النصّ كبيرًا.
       230 تقصّ أعلى البروز وحده فتلتصق البطاقات بالنصّ والصور تبقى مقروءة */
    height:230px;
    overflow:hidden;
    direction:ltr;
  }
  .spec__cards,
  .spec__cards[aria-hidden]{
    display:flex;
    align-items:flex-end;
    width:auto;
    margin:0;
    flex:none;
    gap:20px;
    padding-right:20px;            /* يكمل دورة التكرار */
    will-change:transform;
    animation:marquee 18s linear infinite;
  }
  .spec__card{ flex:none; width:200px; border-radius:24px; }

  /* «شركاء نفخر بالتعامل معهم»: الترويسة صندوق max-content محاذًى يمينًا،
     فيلتصق السطر الأقصر بالحافّة اليمنى. تُوسَّط على الشاشات الصغيرة */
  .partners__head{ width:auto; text-align:center; }

  /* التركيب كما هو على سطح المكتب: أربع كتل في صفّ واحد وعمود الجهات بينها.
     كانت الفجوة 0 اعتمادًا على أن space-between يوزّع المتبقّي، والأعمدة نامية
     (grow) فلا يتبقّى شيء — قِيست الفجوات الثلاث 0.0px و«sales@b2b.sa» يلامس
     «الرئيسية» عند 274.3 بالضبط. فصارت الفجوة صريحة.
     الآن تسري فجوة التصميم المتدرّجة نفسها (48 × ‎--u‎ ⟵ 15.7px عند 375
     و13.2 عند 320) بلا تجاوز، وقد كانت 80 يوم كُتب `gap:0` فلم تكن تتّسع.
     وقاعدة `.footer__col{flex:0 0 auto}` التي كانت هنا ميّتة أصلًا:
     نوعيّتها (0,1,0) دون قاعدة الأساس (0,2,0). */
  .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 (المطلوب 341 والمتاح 288)،
   فتُخفَّض أرضية نصّ التذييل وحده إلى 9px ليبقى التركيب أربعة أعمدة بلا كسر */
@media (max-width:360px){
  .footer__col h5,.footer__col a,.footer__bar{ font-size:max(9px, calc(20 * var(--u))); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  /* شريط الشعارات زخرفي بحت ويستمرّ: كان توقيفه هنا سببَ جموده على الهواتف
     التي يُفعَّل فيها «تقليل الحركة» أو وضع توفير الطاقة. */
}

@media (max-width:720px){
  .br-lg{ display:none; }   /* منقولة مع القسم — لم تكن هنا */
  .pcard{ aspect-ratio:auto; min-height:calc(205.5 * var(--u)); }
}