@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;

  --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;
}
.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:#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);
}
.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{ width:19.63%; left:5.66%; top:6.81%;  color:rgba(138,56,245,.2); }
.deco--p06{ width:23.4%;  left:.59%;  top:32.34%; transform:rotate(-52.02deg); color:rgba(42,192,215,.32); }

/* ══════════════════ 5 · دورة التوريد ══════════════════ */
.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{
  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);
}

/* ══════════════════ 6 · الامتياز التجاري ══════════════════ */
.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)); }

/* ══════════════════ 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;
  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-width يحفظه ويسمح له بالنموّ إن لزم على الضيّقة */
.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;
}

/* ══════════════════ 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{
    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)));
  }
  .hsplit__text h3{
    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; }

  /* التذييل: الأعمدة كانت تنكمش دون محتواها لأن الفجوة 80 المتدرّجة
     تلتهم العرض بينما النصّ واقف عند أرضية 11px، فتنكسر الروابط سطرين.
     gap:0 مع space-between يجعل ما تبقّى بعد المحتوى هو الفجوة، متساويًا */
  .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 (المطلوب 341 والمتاح 288)،
   فتُخفَّض أرضية نصّ التذييل وحده إلى 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 (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  /* شريط الشعارات زخرفي بحت ويستمرّ: كان توقيفه هنا سببَ جموده على الهواتف
     التي يُفعَّل فيها «تقليل الحركة» أو وضع توفير الطاقة. */
}