@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);
}
/* بطاقة المشكلة 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 — رباعية 147 محدَّدة 9px @ (19, 14) */
.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°‎ */
.deco--cream{
  width:28.6%;
  left:82.97%;
  top:39.03%;
  transform:rotate(-15deg);
}
.deco--cream path{
  fill:none;
  stroke:var(--cream-line);
  stroke-width:6.12;
}

/* ══════════════════ 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%; }

/* ══════════════════ 6 · المشكلة التي نحلها ══════════════════ */
.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)));
}
/* تعويض الخطّ البديل: «اختلاف جودة المنتجات» يحتاج 284.8px والمتاح 277.3،
   فيلتفّ سطرين بارتفاع سطر 74.91 ويتجاوز البطاقة. التصميم نفسه يصغّر عنوانه الطويل إلى 31px. */
.pcard--fit h4{ font-size:max(11px, calc(31 * var(--u))); }

/* ══════════════════ 6ب · خدماتنا الرئيسية ══════════════════
   إطار «حلولنا(جديد)»: بطاقة 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);
}

/* ══════════════════ 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(--cream); border:1.5px solid var(--cream-line); }
.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 */
.bento__cell--cream .bento__txt{ top:14.36%; color:var(--slate); }/* 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:6.23%;
  top:9.15%;                    /* 56 / 612 */
  width:46.89%;                 /* 241 / 514 */
  color:#fff;
}
.stat{
  display:block;
  font-size:18.677cqw;          /* 96 / 514 */
  line-height:13.016cqw;        /* 66.9 / 514 */
  font-weight:600;
}
.stat__unit{
  display:block;
  margin-top:1.556cqw;          /* 8 / 514 */
  font-size:7.782cqw;           /* 40 / 514 */
  line-height:13.016cqw;
  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;
}

/* ══════════════════ 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;
  padding:calc(48 * var(--u)) 0 calc(96 * var(--u));
}
.footer__in{
  width:min(1049px,calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.footer__cols{
  display:flex;
  justify-content:space-between;
  gap:calc(80 * var(--u));
}
.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; }
.footer__col h5{
  font-size:max(11px, calc(16 * var(--u)));
  line-height:max(15px, calc(19 * var(--u)));
  font-weight:500;
}
/* عنوان «تواصل معنا» بأيقونة — الأيقونة يمين النصّ كبقيّة صفوف العمود */
.footer__h5{ display:flex; align-items:center; gap:calc(8 * var(--u)); }
/* الأيقونة بمقاس صندوق السطر (19) لا 20، وإلا زاد ارتفاع العنوان 1px عن التصميم */
.footer__h5 svg{ width:max(12px, calc(19 * var(--u))); height:max(12px, calc(19 * var(--u))); }
.footer__col a{
  font-size:max(11px, calc(16 * var(--u)));
  line-height:max(15px, calc(19 * var(--u)));
  font-weight:500;
  text-decoration:none;
}
.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:flex-start; text-align:right; }
.logo--footer{ width:calc(151.55 * var(--u)); height:calc(65.08 * var(--u)); object-fit:contain; }
/* صندوق ثابت 305.21 في فيجما (textAutoResize:HEIGHT) والنصّ محاذًى يمينًا
   بداخله؛ min() يمنع تجاوزه للعمود على الشاشات الضيّقة */
.footer__tag{
  min-width:calc(305.21 * var(--u));
  font-size:max(11px, calc(14.45 * var(--u)));
  line-height:max(15px, calc(26.5 * var(--u)));
  font-weight:400;
}
.footer__social{
  margin-top:calc(7.22 * var(--u));
  display:flex;
  align-items:center;
  gap:calc(9.03 * 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(21.67 * var(--u)); height:calc(21.67 * var(--u)); fill:currentColor; display:block; }


.footer__bar{
  margin-top:calc(56 * var(--u));
  padding-top:calc(24 * var(--u));
  border-top:1px solid rgba(255,255,255,.5);
  display:flex;
  justify-content:space-between;
  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 تبقى النسبة كما في التصميم فلا يتغيّر سطح المكتب. */
/* التذييل: الفجوة 80 المتدرّجة تلتهم العرض بينما النصّ واقف عند أرضية 11px،
   فتنكمش الأعمدة دون محتواها (34px!) وتنكسر «الشروط والأحكام» وأخواتها سطرين.
   gap:0 مع space-between يجعل ما تبقّى بعد المحتوى هو الفجوة، متساويًا. */
@media (max-width:720px){
  .footer__cols{ gap:0; }
  .footer__col,.footer__brand{ flex:0 0 auto; }
  .footer__bar{ flex-wrap:wrap; row-gap:calc(8 * var(--u)); }
  /* «مورد شامل لقطاع الهوريكا» واقف عند أرضية 11px و min-width تصميمية 305،
     فيثبّت عمود العلامة عند ~105px — نحو ثلث الصفّ — ويأكل من الأعمدة الثلاثة.
     تحرير min-width مع أرضية 9px يعيده إلى حجم متناسب مع بقيّة التذييل. */
  .footer__tag{
    min-width:0;
    font-size:max(9px, calc(14.45 * var(--u)));
    line-height:max(13px, calc(26.5 * 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(14px, calc(21.67 * var(--u))); height:max(14px, calc(21.67 * var(--u))); }
  .footer__social{ gap:max(6px, calc(9.03 * var(--u))); }
}

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

@media (max-width:720px){
  .pcard{ aspect-ratio:auto; min-height:calc(205.5 * 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; }
}