/* =========================================================
   Tasharuky Hub - ستايلات إضافية ما بتنعمل بسهولة بـ Tailwind
   ========================================================= */

/* ---------- الخط Rubik محلي (نفس ملفات Google Fonts) ---------- */
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/rubik-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* التمرير طبيعي (بدون Lenis) — الهيدر غير ثابت فلا حاجة لإزاحة الروابط */
html { scroll-padding-top: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

:root {
  --navy-950: #0E1A38;
  --navy-900: #0D2240;
  --brand: #18753C;
  --brand-light: #3DB86A;
  --muted: #C9D2E3;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* إخفاء عناصر الأنيميشن قبل ما يشتغل GSAP (يمنع الوميض) */
.js [data-anim],
.js .reveal { visibility: hidden; }

/* أداء: الهوفر متوقف لحظيًا أثناء السكرول فقط (أجهزة الماوس) */
@media (hover: hover) {
  html.is-scrolling main, html.is-scrolling footer { pointer-events: none; }
}
/* أداء: الطبقات اللي بتتحرك مع السكرول على طبقة مستقلة (ما بيتغير الشكل) */
.res-wm, .st-bg, .st-wm, .cta-wm { will-change: transform; }

/* ---------- Header ---------- */
#siteHeader.is-scrolled {
  background: rgba(14, 26, 56, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
#siteHeader.is-scrolled .header-line { opacity: 0; }
.header-line { transition: opacity .3s; }

.nav-link { position: relative; transition: color .2s; }
.nav-link:hover, .nav-link.is-active { color: #fff; }
.nav-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -8px; height: 2px;
  background: var(--brand-light); border-radius: 2px;
  transform: scaleX(0); transition: transform .3s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

.icon-btn {
  align-items: center; justify-content: center;   /* display من Tailwind (inline-flex / hidden) */
  width: 36px; height: 36px; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  transition: background .2s, border-color .2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }

/* ---------- Buttons ---------- */
.btn-primary, .btn-outline {
  position: relative; overflow: hidden;
  align-items: center; justify-content: center;   /* display من Tailwind (inline-flex / hidden) */
  border-radius: 4px; font-weight: 600; white-space: nowrap;
  transition: transform .25s ease, background .25s, color .25s, box-shadow .25s;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: #1c8646; box-shadow: 0 10px 30px -10px rgba(61, 184, 106, .7); transform: translateY(-2px); }
/* لمعة بتمر على الزر عند الهوفر */
.btn-primary::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover::before { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }

.btn-outline { border: 1.5px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--navy-950); transform: translateY(-2px); }

/* أثناء أنيميشن الدخول: بدون CSS transitions (GSAP هو المسؤول) */
.is-intro .feature-card, .is-intro .btn-primary, .is-intro .btn-outline { transition: none !important; }

/* ---------- Hero ---------- */
.hero { min-height: 623px; }
@media (min-width: 768px) { .hero { min-height: 1190px; } }
@media (min-width: 1024px) { .hero { min-height: 768px; } }

.hero-bg picture, .hero-img { display: block; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 75% bottom;      /* موبايل: نفس قصّة فيجما */
}
@media (min-width: 768px) {                           /* آيباد: الصورة بحجمها الطبيعي تحت ويمين */
  .hero-img { inset: auto 0 0 auto; width: 1440px; height: 768px; }
}
@media (min-width: 1024px) {                          /* ويب: تغطي القسم كامل */
  .hero-img { inset: 0; width: 100%; height: 100%; object-position: right bottom; }
}

/* خلفية كحلي ورا الصورة: لما الـ parallax ينزّل الصورة ما يبين أبيض فوق (كان يطلع شريط رمادي تحت الهيدر) */
/* آخر 110px بدون كحلي: التعريجة أسفل الصورة شفافة ولازم يبين تحتها الأبيض تبع القسم الجاي */
@media (max-width: 767px), (min-width: 1024px) {
  .hero-bg { background: linear-gradient(180deg, #0E1A38 calc(100% - 110px), transparent calc(100% - 110px)); }
}
.hero-bg > div { position: absolute; left: 0; right: 0; top: 0; }
.hero-shade-mobile {
  bottom: 0;
  background: linear-gradient(180deg, rgba(14,26,56,.94) 0%, rgba(14,26,56,.7) 45%, rgba(14,26,56,.4) 80%, rgba(14,26,56,0) 100%);
}
.hero-shade-tablet {
  height: 622px;
  background: linear-gradient(90deg, #0E1A38 0%, #0D2240 60%, #0D213F 100%);
}
.hero-bg > .hero-shade-tablet-fade {
  top: 420px; height: 320px;
  background: linear-gradient(180deg, #0E1D3B 0%, rgba(14,29,59,.92) 68%, rgba(14,29,59,0) 100%);
}
.hero-bg > .hero-shade-desktop {
  right: auto; width: 900px; height: 648px;
  background: linear-gradient(90deg, rgba(14,26,56,.92) 0%, rgba(14,26,56,.35) 55%, rgba(14,26,56,0) 100%);
}
.hero-shade-top {
  height: 130px;
  background: linear-gradient(180deg, rgba(14,26,56,.7), rgba(14,26,56,0));
}

/* الإنجليزي: النصوص أطول، فالعنوان أصغر شوي والعمود أعرض بالويب */
html[lang="en"] .hero h1 { font-size: 27px; }
@media (min-width: 768px)  { html[lang="en"] .hero h1 { font-size: 38px; } }
@media (min-width: 1024px) {
  html[lang="en"] .hero h1 { font-size: 44px; }
  html[lang="en"] .hero-content { width: 600px; }
  html[lang="en"] .hero-content [data-i18n="hero.text"] { max-width: 540px; }
}

/* سطور العنوان: قناع لأنيميشن الطلوع */
.line-mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }

/* النقاط الثلاث جنب الـ eyebrow */
.eyebrow-dots i {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; opacity: .9;
}
.eyebrow-dots i.is-green { background: var(--brand-light); }

/* كروت الخدمات */
.feature-card {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 6px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(201, 210, 227, .28);
  color: #fff; font-weight: 600; font-size: 12.5px; line-height: 1.45;
  transition: transform .3s ease, border-color .3s, background .3s;
}
@media (min-width: 768px) {
  .feature-card { min-height: 60px; padding: 0 16px; gap: 12px; font-size: 14.5px; }
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(61, 184, 106, .7);
  background: rgba(255, 255, 255, .09);
}

.hex-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 27px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(61, 184, 106, .2); color: var(--brand-light);
  transition: background .3s, color .3s;
}
@media (min-width: 768px) { .hex-icon { width: 26px; height: 30px; } }
.feature-card:hover .hex-icon { background: var(--brand-light); color: #fff; }

/* العلامة المائية: شكل أبيض بشفافية 9% - حطها داخل قسم عليه relative */
.watermark {
  position: absolute; pointer-events: none;
  width: 300px; aspect-ratio: 300 / 342;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / contain;
  opacity: .09;
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Section: Why (لماذا التطوير المؤسسي الرقمي)
   ========================================================= */
.why-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #15234A; }
.why-dots i.is-green { background: var(--brand); }

/* ---------- Journey stage (ويب + آيباد) ----------
   كل المقاسات بوحدات من التصميم:
   --p = 1px من إحداثيات فيجما (للمواقع)   --u = 1px من مقاسات الويب (للأحجام)  */
.journey { position: relative; }
.j-stage {
  position: relative; container-type: inline-size;
  --W: 754; --p: calc(100cqw / 754); --u: calc(100cqw / 754 * .82);
  margin-top: 34px; aspect-ratio: 754 / 227;
}
@media (min-width: 1024px) {
  .journey { margin-top: 82px; }
  .j-stage { --W: 1200; --p: calc(100cqw / 1200); --u: calc(100cqw / 1200); margin-top: 0; aspect-ratio: 1200 / 270; }
  /* إحداثيات فيجما بتطلّع "سابقًا" 36px برا الكونتينر والكرت بيوقف 41px قبل نهايته،
     فمنزيح المسار 38px لجوّا حتى يصطف مع العنوان وصورة قبل/بعد (والكرت معه تحت) */
  .j-stage { translate: calc(var(--side) * -38 * var(--p)) 0; }
}
.j-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.j-svg--d { display: none; }
@media (min-width: 1024px) { .j-svg--d { display: block; } .j-svg--t { display: none; } }
[dir="ltr"] .j-svg, [dir="ltr"] .m-svg { transform: scaleX(-1); }

.j-line-navy, .j-line-green { fill: none; stroke-linecap: round; }
.j-line-navy  { stroke: #15234A; stroke-opacity: .35; stroke-width: 5.2; stroke-dasharray: 0 1 0 2; stroke-dashoffset: -1; }
.j-line-green { stroke: #18753C; stroke-opacity: .9;  stroke-width: 6.4; stroke-dasharray: 0 3; }
.j-svg--t .j-line-navy  { stroke-width: 4.3; }
.j-svg--t .j-line-green { stroke-width: 5.2; }
.j-draw { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.j-guide { fill: none; stroke: none; }

/* عناصر بمواقع من فيجما: inset-inline-start = المسافة من بداية السطر (يمين بالعربي، يسار بالإنجليزي) */
.j-node, .j-start, .j-end, .j-corner {
  position: absolute;
  inset-inline-start: calc(var(--x) * var(--p));
  top: calc(var(--y) * var(--p));
  translate: calc(var(--side) * 50%) -50%;
}

[dir="rtl"] .j-stage { --side: 1; }
[dir="ltr"] .j-stage { --side: -1; }
.j-node { --x: var(--tx); --y: var(--ty); width: calc(65.8 * var(--u)); height: calc(76 * var(--u)); list-style: none; }
@media (min-width: 1024px) { .j-node { --x: var(--dx); --y: var(--dy); } }

.j-hex { position: relative; display: block; width: 100%; height: 100%; }
.j-hex-shape { width: 100%; height: 100%; display: block; }
.j-icon { position: absolute; left: 50%; top: 50%; width: 42%; height: auto; translate: -50% -50%; color: #fff; }
.j-badge {
  position: absolute; inset-inline-start: calc(50% - 39 * var(--u)); top: calc(50% - 36 * var(--u));
  width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: 1px solid #E1E6EE;
  color: #15234A; font-size: max(9px, calc(11.5 * var(--u))); font-weight: 700; line-height: 1;
}
[dir="ltr"] .j-badge { inset-inline-start: calc(50% - 39 * var(--u)); }

.j-label {
  position: absolute; left: 50%; translate: -50% 0; width: max-content; max-width: calc(200 * var(--u));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.j-node--above .j-label { bottom: calc(100% + 6 * var(--u)); }
.j-node--below .j-label { top: calc(100% + 11 * var(--u)); }
.j-title { color: #15234A; font-weight: 700; font-size: max(13px, calc(18 * var(--u))); line-height: 1.45; }
.j-sub   { color: #5A6478; font-size: max(10.5px, calc(13 * var(--u))); line-height: 1.5; margin-top: calc(5 * var(--u)); }

.j-start { --x: 15.6; --y: 110.9; width: calc(29.8 * var(--u)); height: calc(34 * var(--u)); }
.j-start svg { width: 100%; height: 100%; display: block; overflow: visible; }
.j-before {
  position: absolute; inset-inline-start: calc(3.4 * var(--p)); top: calc(13 * var(--p));
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u));
}
@media (min-width: 1024px) {
  .j-start { --x: -21; --y: 179; }
  .j-before { inset-inline-start: calc(-36 * var(--p)); top: calc(58 * var(--p)); }
}
.j-before-k { color: #5A6478; font-size: max(11px, calc(13 * var(--u))); font-weight: 600; }
.j-before-v { position: relative; color: #8C95A6; font-size: max(12px, calc(16 * var(--u))); font-weight: 500; line-height: 1.4; }
.j-strike {
  position: absolute; inset-inline: calc(-4 * var(--u)) calc(-6 * var(--u)); top: 58%; height: 2.5px;
  background: #8C95A6; border-radius: 2px; transform-origin: var(--origin, right) center;
}
[dir="ltr"] .j-strike { --origin: left; }

.j-end, .j-corner { border-radius: 50%; background: #18753C; }
.j-corner { --x: 737.2; --y: 66.7; width: calc(16.4 * var(--p)); height: calc(16.4 * var(--p)); }
.j-end { --x: 737.2; --y: 227; width: calc(19 * var(--p)); height: calc(19 * var(--p)); border: 3px solid #fff; z-index: 2; }
@media (min-width: 1024px) {
  .j-corner { display: none; }
  .j-end { --x: 859; --y: 125.2; width: calc(20 * var(--p)); height: calc(20 * var(--p)); border: 0; translate: calc(var(--side) * 50%) -50%; }
}

/* ---------- Journey (موبايل) ---------- */
.m-stage { position: relative; height: 440px; margin-top: 18px; }
.m-svg { position: absolute; inset-inline-start: 12px; top: 0; width: 20px; height: 440px; overflow: visible; }
.m-svg .j-line-navy  { stroke-width: 5.2; }
.m-start { position: absolute; inset-inline-start: 7.5px; top: 0; width: 27.8px; height: 32px; }
.m-start svg { width: 100%; height: 100%; display: block; }
.m-before {
  position: absolute; inset-inline-start: 53px; top: 1px; height: 30px;
  display: flex; align-items: center; gap: 16px;
}
.m-stage .j-before-k { font-size: 13px; }
.m-stage .j-before-v { font-size: 16px; }
.m-stage .j-strike { inset-inline: -4px -7px; }
.m-node {
  --u: 0.6px;
  position: absolute; inset-inline-start: 0; top: calc(var(--my) * 1px); translate: 0 -50%;
  display: flex; align-items: center; gap: 19px; width: 100%;
}
.m-node .j-hex { width: 45px; height: 52px; flex-shrink: 0; }
.m-node .j-badge { --u: .68px; inset-inline-start: calc(22.5px - 26px); top: calc(26px - 26px); }
.m-label { display: flex; flex-direction: column; align-items: flex-start; }
.m-node .j-title { font-size: 16px; }
.m-node .j-sub { font-size: 13px; margin-top: 8px; }
.m-end { position: absolute; inset-inline-start: 15px; top: 432px; translate: 0 -50%; width: 14px; height: 15px; border-radius: 50%; background: #18753C; }
[dir="ltr"] .m-svg { transform: none; }

/* ---------- بطاقة الوجهة ---------- */
.j-card {
  --cu: 1px;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 280px; margin-top: 10px; padding: 28px 30px 18px 16px;
  padding-inline: 30px 16px;
  border-radius: 6px; color: #fff;
  background: linear-gradient(140deg, #15234A 0%, #163760 100%);
}
.j-card-wm {
  position: absolute; z-index: -1; pointer-events: none; opacity: .09;
  inset-inline-end: -80px; top: 35px; width: 260px; height: 296px;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
}
.j-card-k { color: #8FD3A6; font-size: 11px; font-weight: 600; }
.j-card-t { margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 1.3; direction: ltr; text-align: end; }
[dir="ltr"] .j-card-t { text-align: start; }
.j-card-d { margin-top: 14px; max-width: 240px; color: #D6DDEA; font-size: 15px; line-height: 24.5px; }
.j-card-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 53px; margin-top: 22px; border-radius: 4px; background: var(--brand);
  font-size: 14px; font-weight: 700; color: #fff; transition: background .25s;
  margin-inline-end: 0;
}
.j-card-cta:hover { background: #1c8646; }
.j-cta-arrow { width: 18px; height: 18px; transition: translate .3s ease; }
.j-card-cta:hover .j-cta-arrow { translate: calc(var(--arrow-dir, -1) * 5px) 0; }
[dir="ltr"] .j-card-cta { --arrow-dir: 1; }
[dir="ltr"] .flip-rtl-x { transform: scaleX(-1); }
/* موبايل: الزر عرض كامل بالكرت */
@media (max-width: 767px) { .j-card-cta { margin-inline-start: -14px; } }

@media (min-width: 768px) {
  .j-card { min-height: 236px; margin-top: 0; padding: 22px 30px 22px; border-radius: 7px; }
  .j-card-wm { inset-inline-end: -30px; top: 60px; width: 300px; height: 342px; }
  .j-card-k { font-size: 12px; }
  .j-card-t { font-size: 22px; }
  .j-card-cta { height: auto; margin-top: 18px; background: none; justify-content: flex-start; align-self: flex-start; gap: 21px; }
  .j-card-cta:hover { background: none; color: #8FD3A6; }
}
@media (min-width: 1024px) {
  .j-card {
    --cu: var(--u);
    position: absolute; top: 0;
    inset-inline-start: calc((859 + 38) * var(--p)); width: calc(300 * var(--p)); min-height: calc(250 * var(--p));
    padding: calc(28 * var(--cu)) calc(30 * var(--cu)) calc(28 * var(--cu));
    border-radius: 6px;
  }
  .journey { container-type: inline-size; }
  .j-card { --p: calc(100cqw / 1200); --u: calc(100cqw / 1200); }
  .j-card-wm { inset-inline-end: calc(-110 * var(--cu)); top: calc(85 * var(--cu)); width: calc(300 * var(--cu)); height: calc(342 * var(--cu)); }
  .j-card-k { font-size: max(10px, calc(12 * var(--cu))); }
  .j-card-t { margin-top: calc(6 * var(--cu)); font-size: max(17px, calc(22 * var(--cu))); }
  .j-card-d { margin-top: calc(14 * var(--cu)); font-size: max(12px, calc(15 * var(--cu))); line-height: 1.63; max-width: none; }
  .j-card-cta { margin-top: 0; font-size: max(12px, calc(14 * var(--cu))); }
}

/* ---------- قبل / بعد ----------
   الوضع الافتراضي = تصميم فيجما بالضبط. السحب بيحرّك الخط (JS بيحدّث --aw/--bw والقص) */
.compare { margin-top: 40px; }
@media (min-width: 1024px) { .compare { margin-top: 86px; } }
.compare-frame {
  --x: 50.46%;
  position: relative; container-type: inline-size; aspect-ratio: 1200 / 309.5; overflow: hidden;
  clip-path: polygon(0 0, 97.78% 0, 100% 9.6%, 100% 100%, 2.22% 100%, 0 90.4%);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; background: #E1E6EE;
}
[dir="ltr"] .compare-frame { --x: 49.54%; clip-path: polygon(2.22% 0, 100% 0, 100% 90.4%, 97.78% 100%, 0 100%, 0 9.6%); }

.compare-layer { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.compare-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; }
.compare-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* بالعربي: "بعد" يسار، "قبل" يمين */
.compare-after  { left: 0;  width: var(--aw, 55.556%); clip-path: var(--clip, polygon(0 0, 98.333% 0, 83.333% 100%, 0 100%)); z-index: 1; }
.compare-before { right: 0; width: var(--bw, 53.704%); }
.compare-after::after  { background: linear-gradient(to right, rgba(27,42,78,.55), rgba(27,42,78,0)); }
.compare-before::after { background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.35)); }

/* بالإنجليزي: معكوس */
[dir="ltr"] .compare-after  { left: auto; right: 0; clip-path: var(--clip, polygon(1.667% 0, 100% 0, 100% 100%, 16.667% 100%)); }
[dir="ltr"] .compare-before { right: auto; left: 0; }
[dir="ltr"] .compare-after::after  { background: linear-gradient(to left, rgba(27,42,78,.55), rgba(27,42,78,0)); }
[dir="ltr"] .compare-before::after { background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,.35)); }

.compare-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.compare-line line { stroke: #fff; stroke-width: 5.7; }
@media (max-width: 1023px) { .compare-line line { stroke-width: 3.6; } }

.compare-handle {
  /* التوسيط بالـmargin مش بـtranslate (GSAP بيدمج translate بالـtransform وقت الأنيميشن) */
  --hw: 6.667cqw;
  position: absolute; z-index: 3; left: var(--x); top: 50%;
  width: var(--hw); aspect-ratio: 80 / 89.1; margin: calc(var(--hw) * -.556875) 0 0 calc(var(--hw) / -2);
  cursor: ew-resize;
  filter: drop-shadow(0 6px 16px rgba(14, 26, 56, .25));
  transition: scale .25s ease;
}
.compare-handle svg { width: 100%; height: 100%; display: block; }
.compare-handle:hover, .compare-frame.is-dragging .compare-handle { scale: 1.08; }
.compare-handle:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 4px; border-radius: 50%; }
.compare-frame.is-dragging { cursor: ew-resize; }

/* =========================================================
   Section: Services (خدمات Tasharuky Hub) - أكورديون
   ========================================================= */
.svc-header { display: grid; grid-template-areas: "eyebrow" "h2" "text"; }
.svc-eyebrow { grid-area: eyebrow; }
.svc-h2 { grid-area: h2; margin-top: 8px; }
.svc-sub { grid-area: sub; }
.svc-text { grid-area: text; margin-top: 20px; }
.svc-cta { grid-area: cta; }
@media (min-width: 768px) {
  .svc-header { grid-template-columns: 1fr auto; grid-template-areas: "eyebrow eyebrow" "h2 cta" "sub sub" "text text"; }
  .svc-h2 { margin-top: 11px; }
  .svc-cta { align-self: start; margin-top: 11px; }
  .svc-sub { margin-top: 14px; }
  .svc-text { margin-top: 9px; max-width: 400px; }
}
@media (min-width: 1024px) {
  .svc-header { grid-template-columns: 1fr 420px; grid-template-areas: "eyebrow text" "h2 text" "sub cta"; column-gap: 40px; }
  .svc-text { align-self: end; margin-top: 0; max-width: none; }
  .svc-sub { margin-top: 18px; }
  .svc-cta { margin-top: 3px; justify-self: start; }
}

.svc-list { margin-top: 26px; display: flex; flex-direction: column; gap: 9px; }
.svc-col { display: contents; }
.svc-item { order: var(--o); }
@media (min-width: 768px) { .svc-list { gap: 12px; margin-top: 23px; } }
@media (min-width: 1024px) {
  .svc-list { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .svc-col { display: flex; flex-direction: column; gap: 12px; }
}

.svc-item {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #E1E6EE; border-radius: 4px;
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.svc-item::before {   /* الشريط الأخضر على جهة البداية */
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: var(--brand); transform: scaleY(0); transition: transform .35s ease;
}
.svc-item:hover { border-color: rgba(24, 117, 60, .45); box-shadow: 0 8px 24px -16px rgba(21, 35, 74, .35); }
.svc-item.is-open { background: #F1F7F3; border-color: var(--brand); box-shadow: inset 0 0 0 .2px var(--brand); }
.svc-item.is-open::before { transform: scaleY(1); }

.svc-head {
  display: flex; align-items: center; gap: 18px; width: 100%;
  min-height: 75px; padding: 13px 20px; padding-inline-start: 18px;
  text-align: start; cursor: pointer;
}
@media (min-width: 768px) { .svc-head { min-height: 66px; padding-block: 12px; } }
.svc-head:focus-visible { outline: 2px solid var(--brand-light); outline-offset: -4px; }

.svc-hex {
  flex-shrink: 0; display: grid; place-items: center;
  width: 34.6px; height: 40px; color: #fff; background: #15234A;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background .3s;
}
.svc-hex svg { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.svc-hex svg { width: 24px; height: 24px; }
.svc-item:hover .svc-hex svg { transform: scale(1.12) rotate(-8deg); }
.svc-item.is-open .svc-hex { background: var(--brand); }

.svc-title { flex: 1; color: #15234A; font-size: 16px; font-weight: 700; line-height: 28px; }
@media (min-width: 768px) { .svc-title { font-size: 17px; line-height: 1.5; } }
.svc-num { display: none; color: #C7CEDA; font-size: 14px; font-weight: 700; transition: color .3s; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .svc-num { display: block; margin-inline-end: 6px; } }
.svc-chev { flex-shrink: 0; width: 12px; height: 6px; color: #8C95A6; transition: transform .35s ease, color .3s; }
.svc-item.is-open .svc-num, .svc-item.is-open .svc-chev { color: var(--brand); }
.svc-item.is-open .svc-chev { transform: rotate(180deg); }

/* فتح/إغلاق بنعومة */
.svc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1); }
.svc-item.is-open .svc-panel { grid-template-rows: 1fr; }
.svc-panel-in { overflow: hidden; min-height: 0; }
.svc-panel-in p {
  margin-inline: 22px 20px; padding: 14px 4px 20px; border-top: 1px solid #CFE3D6;
  color: #5A6478; font-size: 14px; line-height: 23.5px;
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .35s ease;
}
.svc-item.is-open .svc-panel-in p { opacity: 1; transform: none; transition-delay: .12s; }

/* موبايل: أول 5 خدمات + زر "عرض الكل" */
@media (max-width: 767px) {
  .svc-list:not(.is-expanded) .svc-item[data-more] { display: none; }
}
.svc-more {
  align-items: center;   /* display من Tailwind: flex md:hidden */ justify-content: center; gap: 10px;
  width: 100%; height: 55px; margin-top: 11px;
  border: 1.2px solid #15234A; border-radius: 4px; background: transparent;
  color: #15234A; font-size: 14px; font-weight: 700; transition: background .25s, color .25s;
}
.svc-more:hover { background: #15234A; color: #fff; }
.svc-more-chev { width: 12px; height: 6.8px; transition: transform .35s ease; }
.svc-more[aria-expanded="true"] .svc-more-chev { transform: rotate(180deg); }

/* =========================================================
   Section: Sectors (من نخدم؟) - خلية نحل
   ========================================================= */
.sec {
  padding: 47px 0 48px;
  /* خلفية خاصة بالقسم + حد سفلي حتى ما يذوب في قسم البرامج الأبيض */
  background-image: linear-gradient(180deg, #fff 0%, #fff 30%, #EEF5F0 100%);
  border-bottom: 1px solid #DDE8E1;
}
.sec-minis-phone { position: absolute; inset: 0; pointer-events: none; }
.sec-mini { position: absolute; }
.sec-inner { position: relative; }

/* النص (موبايل = الويب × 1.2) */
.sec-text { position: relative; z-index: 2; }
.sec-eyebrow { gap: 15.6px; font-size: 15px; line-height: 24px; }
.sec-eyebrow .why-dots i { width: 8.4px; height: 8.4px; }
.sec-h2 { margin-top: 13px; font-size: 57px; line-height: 1.25; }
.sec-sub { margin-top: 23px; font-size: 21.5px; line-height: 34px; }
.sec-bars { display: flex; gap: 7.2px; margin-top: 13px; }
.sec-bars i { display: block; height: 4.8px; border-radius: 3px; width: 57.6px; background: var(--brand); }
.sec-bars i + i { width: 9.6px; background: #15234A; }
.sec-list { margin-top: 36px; display: flex; flex-direction: column; gap: 24px; }
.sec-list li { display: flex; align-items: center; gap: 21.5px; color: #15234A; font-weight: 700; font-size: 22px; line-height: 1.4; }
.sec-li-hex {
  flex-shrink: 0; display: grid; place-items: center; width: 37.4px; height: 43.2px; color: #fff; background: #15234A;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.sec-li-ico { width: 24px; height: 24px; }

@media (min-width: 768px) {
  .sec { padding: 64px 0 56px; }
  .sec-eyebrow { gap: 13px; font-size: 12px; line-height: 20px; }
  .sec-eyebrow .why-dots i { width: 7px; height: 7px; }
  .sec-h2 { margin-top: 12px; font-size: 48px; line-height: 1.3; }
  .sec-sub { margin-top: 14px; font-size: 18px; line-height: 28px; }
  .sec-bars { gap: 6px; margin-top: 10px; }
  .sec-bars i { height: 4px; width: 48px; }
  .sec-bars i + i { width: 8px; }
  .sec-list { margin-top: 30px; gap: 20px; }
  .sec-list li { gap: 18px; font-size: 18px; }
  .sec-li-hex { width: 31.2px; height: 36px; }
  .sec-li-ico { width: 20px; height: 20px; }
}
@media (min-width: 1024px) {
  .sec { padding: 56px 0; }
  .sec-inner { display: flex; align-items: center; justify-content: center; gap: 60px; }
  .sec-text { width: 284px; flex-shrink: 0; }
}
@media (min-width: 1280px) { .sec-inner { gap: 108px; } }

/* خط الوصل (ويب) */
.sec-list { position: relative; }
.sec-conn-li { position: absolute !important; inset: 0; }
.sec-connector { position: absolute; left: -130px; top: 88px; width: 410px; height: 270px; overflow: visible; pointer-events: none; }
[dir="ltr"] .sec-connector { left: auto; right: -130px; transform: scaleX(-1); }
.sec-conn-stub { stroke: #15234A; stroke-opacity: .35; stroke-width: 2.6; stroke-linecap: round; fill: none; }
.sec-conn-path { stroke: #18753C; stroke-opacity: .9; stroke-width: 3.2; stroke-linecap: round; fill: none; stroke-dasharray: 1 1; }
.sec-conn-dot { fill: #18753C; }
.sec-conn-ring { fill: none; stroke: #18753C; stroke-opacity: .3; stroke-width: 2; transform-box: fill-box; transform-origin: center; }

/* خلية النحل: مسرح بإحداثيات فيجما 575×664، --u = 1px من التصميم */
.hc-wrap { display: flex; justify-content: center; margin: 40px -16px 0; }
@media (min-width: 768px) { .hc-wrap { margin: 48px 0 0; } }
@media (min-width: 1024px) { .hc-wrap { margin: 0; flex: 0 1 575px; justify-content: flex-start; min-width: 0; } }
.hc-stage {
  position: relative; container-type: inline-size; --u: calc(100cqw / 575);
  width: min(575px, 100%); aspect-ratio: 575 / 664;
}
.hc-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hc-minis { position: absolute; inset: 0; pointer-events: none; }
.hc-mini { position: absolute; left: calc(var(--mx) * var(--u)); top: calc(var(--my) * var(--u)); width: calc(var(--mw) * var(--u)); height: calc(var(--mh) * var(--u)); overflow: visible; }
.hc-cells { position: absolute; inset: 0; }
.hc-cell {
  position: absolute; list-style: none;
  left: calc((var(--cx) - 85.7) * var(--u)); top: calc((var(--cy) - 99) * var(--u));
  width: calc(171.4 * var(--u)); height: calc(198 * var(--u));
}
.hc-shape { position: absolute; inset: calc(-1 * var(--u)); width: calc(100% + 2 * var(--u)); height: calc(100% + 2 * var(--u)); overflow: visible; transition: filter .25s ease; }
.hc-shape polygon { fill: #fff; stroke: #E1E6EE; stroke-width: 1.65; transition: stroke .3s; }
.hc-cell:not(.hc-center):hover .hc-shape { filter: drop-shadow(0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(21, 35, 74, .14)); }
.hc-cell:not(.hc-center):not(.hc-green):hover .hc-shape polygon { stroke: rgba(24, 117, 60, .55); }

.hc-ico {
  position: absolute; left: 50%; top: calc(50% - 41.6 * var(--u)); translate: -50% -50%;
  width: calc(34.3 * var(--u)); height: calc(39.6 * var(--u)); display: grid; place-items: center;
  background: var(--brand); color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background .3s, scale .4s cubic-bezier(.22, 1, .36, 1);
}
.hc-ico-svg { width: calc(26.4 * var(--u)); height: calc(26.4 * var(--u)); }
.hc-cell:hover .hc-ico { background: #15234A; scale: 1.12; }
.hc-label {
  position: absolute; left: calc(10 * var(--u)); right: calc(10 * var(--u)); top: calc(50% - 9 * var(--u));
  text-align: center; color: #15234A; font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u));
}

.hc-green .hc-shape polygon { fill: var(--brand); stroke: none; }
.hc-green .hc-label { top: calc(50% - 12 * var(--u)); color: #fff; }
.hc-ico2 { position: absolute; left: 50%; top: calc(50% - 39.6 * var(--u)); translate: -50% -50%; display: flex; gap: calc(16.7 * var(--u)); color: #fff; }
.hc-i { width: calc(26.4 * var(--u)); height: calc(26.4 * var(--u)); }
.hc-sub { position: absolute; left: 0; right: 0; top: calc(50% + 42.5 * var(--u)); text-align: center; color: #D8F0DF; font-weight: 500; font-size: calc(15.5 * var(--u)); line-height: calc(20 * var(--u)); }

.hc-center { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.hc-center .hc-shape { inset: 0; width: 100%; height: 100%; }
.hc-wm {
  position: absolute; left: calc(50% - 49.5 * var(--u)); top: calc(50% - 86.9 * var(--u));
  width: calc(217.8 * var(--u)); height: calc(247.5 * var(--u)); opacity: .1;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
}
.hc-brand {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: calc(6 * var(--u)); color: #fff; font-size: calc(17.6 * var(--u)); line-height: calc(26.5 * var(--u)); font-weight: 600;
}
.hc-brand b + b { font-size: calc(17 * var(--u)); }

/* حركة مستمرة بعد ما تكتمل الخلية */
@keyframes hc-dash { to { stroke-dashoffset: -200; } }
@keyframes hc-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(1.08); } }
@keyframes hc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hc-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.sec.is-live .hc-dash { /* ثابت: أُلغيت الحركة المتكررة */ }
.sec.is-live .hc-glow { transform-box: fill-box; transform-origin: center; }
.sec.is-live .hc-mini, .sec.is-live .sec-mini { /* ثابتة */ }
.sec.is-live .hc-mini:nth-child(2n), .sec.is-live .sec-mini:nth-child(2n) { animation-duration: 5.5s; animation-delay: -1.5s; }
.sec.is-live .hc-mini:nth-child(3n), .sec.is-live .sec-mini:nth-child(3n) { animation-duration: 6.5s; animation-delay: -3s; }
.sec.is-live .sec-conn-ring { /* ثابتة */ }
.hc-center .hc-shape polygon { fill: url(#hcNavy); stroke: none; }

/* الإنجليزي: نصوص أطول */
html[lang="en"] .sec-h2 { font-size: 46px; }
@media (min-width: 768px) { html[lang="en"] .sec-h2 { font-size: 40px; } }
html[lang="en"] .hc-label { font-size: calc(15 * var(--u)); line-height: calc(19 * var(--u)); }

/* القطاعات - آيباد: خلية النحل يسار (72%) والنص يمين (الويب × 1.15) */
.sec-minis-tab { position: absolute; inset: 0; pointer-events: none; }
.sec-connector-t { position: absolute; right: 0; top: 0; width: 374px; height: 277px; overflow: visible; pointer-events: none; }
[dir="ltr"] .sec-connector-t { right: auto; left: 0; transform: scaleX(-1); }
@media (min-width: 768px) and (max-width: 1023px) {
  .sec { padding: 40px 0 82px; }
  .sec-inner { display: flex; align-items: flex-start; }
  .sec-text { flex: 1; padding-top: 74px; }
  .sec-eyebrow { gap: 15px; font-size: 14px; line-height: 23px; }
  .sec-eyebrow .why-dots i { width: 8px; height: 8px; }
  .sec-h2 { margin-top: 12px; font-size: 55px; line-height: 1.3; }
  .sec-sub { margin-top: 18.6px; font-size: 20.7px; line-height: 32px; }
  .sec-bars { gap: 6.9px; margin-top: 12px; }
  .sec-bars i { height: 4.6px; width: 55.2px; }
  .sec-bars i + i { width: 9.2px; }
  .sec-list { margin-top: 34.5px; gap: 23px; }
  .sec-list li { gap: 20.7px; font-size: 21px; }
  .sec-li-hex { width: 35.9px; height: 41.4px; }
  .sec-li-ico { width: 23px; height: 23px; }
  .hc-wrap { margin: 0; margin-inline-end: -12px; flex: none; }
  .hc-stage { width: 414px; }
  html[lang="en"] .sec-h2 { font-size: 44px; }
}

/* =========================================================
   Section: Programs (برامج Tasharuky Hub)
   ========================================================= */
.prg { padding: 64px 0 48px; overflow-x: clip; } /* الكروت بتدخل من الطرفين (x ±60px) — بدون هيك الصفحة بتصير أعرض من الشاشة على الآيباد لحظة التحميل */
.prg-header { display: grid; grid-template-areas: "eyebrow" "h2" "text"; }
.prg-eyebrow { grid-area: eyebrow; font-size: 13px; line-height: 20px; }
.prg-h2 { grid-area: h2; margin-top: 10px; font-size: 25px; line-height: 1.5; }
.prg-text { grid-area: text; margin-top: 10px; font-size: 13px; line-height: 23.4px; }
@media (min-width: 768px) {
  .prg { padding: 64px 0 72px; }
  .prg-h2 { margin-top: 11px; font-size: 42px; line-height: 1.3; }
  .prg-text { margin-top: 14px; max-width: 520px; font-size: 17px; line-height: 30px; }
}
@media (min-width: 1024px) {
  .prg { padding: 84px 0 90px; }
  .prg-header { grid-template-columns: 1fr 520px; grid-template-areas: "eyebrow text" "h2 text"; column-gap: 40px; }
  .prg-text { align-self: end; margin-top: 0; }
}

/* الكروت */
.prg-cards { display: flex; flex-direction: column; margin-top: 30px; }
@media (min-width: 768px) { .prg-cards { margin-top: 32px; } }

.prg-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 26.8px 28px 23px; border-radius: 6px; color: #fff;
  transition: translate .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
.prg-card--navy { background: linear-gradient(140deg, #15234A 0%, #163760 100%); }
.prg-card--green { background: #18753C; }
.prg-card:hover { translate: 0 -6px; box-shadow: 0 24px 40px -24px rgba(14, 26, 56, .55); }

.prg-wm {
  position: absolute; z-index: -1; pointer-events: none; opacity: .08;
  inset-inline-end: -92px; top: 58px; width: 288px; height: 328px;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
  transition: translate .6s cubic-bezier(.2, .7, .2, 1);
}
.prg-card--green .prg-wm { inset-inline-end: -100px; top: 63.5px; width: 315px; height: 359px; }
.prg-card:hover .prg-wm { translate: 0 -10px; }

.prg-num { position: absolute; inset-inline-end: 28px; top: 18.5px; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; }
.prg-ico {
  display: grid; place-items: center; width: 38.2px; height: 44px; align-self: flex-start;
  background: rgba(255, 255, 255, .14); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background .3s, rotate .5s cubic-bezier(.22, 1, .36, 1);
}
.prg-ico svg { width: 17.5px; height: 17.5px; }
.prg-card:hover .prg-ico { background: rgba(255, 255, 255, .24); rotate: 30deg; }
.prg-card:hover .prg-ico svg { rotate: -30deg; }
.prg-ico svg { transition: rotate .5s cubic-bezier(.22, 1, .36, 1); }

.prg-title { margin-top: 15px; font-size: 22.5px; font-weight: 700; line-height: 1.4; }
.prg-en { margin-top: 8.5px; font-size: 9.7px; font-weight: 600; line-height: 14px; text-align: end; color: #8FD3A6; }
[dir="ltr"] .prg-en { text-align: start; }
.prg-card--green .prg-en { color: #D8F0DF; }
.prg-desc { margin-top: 13px; color: #E3E8F2; font-size: 15px; line-height: 27px; }
.prg-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 14.5px; font-weight: 700; line-height: 22px;
}
.prg-desc { margin-bottom: 4.6px; }
.prg-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: translate .3s ease; }
.prg-cta:hover .prg-arrow { translate: calc(var(--arrow-dir, -1) * 6px) 0; }
[dir="ltr"] .prg-cta { --arrow-dir: 1; }

@media (min-width: 768px) {
  .prg-card { min-height: 330px; padding: 24px 28px 23px; border-radius: 4px; }
  .prg-wm, .prg-card--green .prg-wm { inset-inline-end: -115px; top: 66px; width: 363px; height: 413px; }
  .prg-num { top: 16px; font-size: 40px; letter-spacing: -2px; }
  .prg-ico { width: 48.4px; height: 56px; }
  .prg-ico svg { width: 22px; height: 22px; }
  .prg-title { margin-top: 12px; font-size: 30px; }
  .prg-en { margin-top: 11px; font-size: 11.5px; line-height: 16px; }
  .prg-desc { margin-top: 15px; font-size: 17px; line-height: 30px; }
  .prg-desc { margin-bottom: 28px; }
  .prg-cta { margin-top: auto; padding-top: 6px; padding-bottom: 14px; font-size: 15.5px; }
}

/* "أو" بين الكرتين (موبايل/آيباد) */
.prg-or { position: relative; z-index: 2; display: grid; place-items: center; height: 35.7px; }
.prg-or svg { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 34.6px; height: 40px; overflow: visible; }
.prg-or b { position: relative; color: #15234A; font-size: 11px; font-weight: 700; }
@media (min-width: 1024px) { .prg-or { display: none; } }

.prg-handle { display: none; }

/* ويب: الكرتين ملزوقين بخط مايل ومقبض سداسي بالنص (متل قسم قبل/بعد).
   --p = حصة الكرت الأول (40-60). السحب أو الهوفر بيكبّر البرنامج المختار */
@media (min-width: 1024px) {
  .prg-cards {
    --p: 50; --d: 56px; --s: 8px;
    position: relative; display: grid; grid-template-columns: calc(var(--p) * 1%) minmax(0, 1fr); gap: 0; margin-top: 48px;
  }
  .prg-card { min-width: 0; min-height: 360px; border-radius: 0; }
  .prg-card:hover { translate: none; box-shadow: none; }
  .prg-card--navy {
    margin-inline-end: calc(var(--d) / -2); padding-inline-end: calc(var(--d) + 30px);
    clip-path: polygon(calc(var(--d) + var(--s) / 2) 0, 100% 0, 100% 100%, calc(var(--s) / 2) 100%);
  }
  .prg-card--green {
    margin-inline-start: calc(var(--d) / -2); padding-inline-start: calc(var(--d) + 30px);
    clip-path: polygon(0 0, calc(100% - var(--s) / 2) 0, calc(100% - var(--d) - var(--s) / 2) 100%, 0 100%);
  }
  [dir="ltr"] .prg-card--navy { clip-path: polygon(0 0, calc(100% - var(--d) - var(--s) / 2) 0, calc(100% - var(--s) / 2) 100%, 0 100%); }
  [dir="ltr"] .prg-card--green { clip-path: polygon(calc(var(--s) / 2) 0, 100% 0, 100% 100%, calc(var(--d) + var(--s) / 2) 100%); }
  .prg-card--navy .prg-num { inset-inline-end: calc(var(--d) + 34px); }

  .prg-handle {
    /* التوسيط بالـmargin مش بـtranslate: GSAP بيدمج translate بالـtransform وبيمسحه مع clearProps فالمقبض بيزيح عن الخط */
    --hw: 72px;
    display: block; position: absolute; z-index: 3; top: 50%; left: calc(100% - var(--p) * 1%);
    width: var(--hw); aspect-ratio: 80 / 89.1; margin: calc(var(--hw) * -.556875) 0 0 calc(var(--hw) / -2);
    cursor: ew-resize; touch-action: none;
    filter: drop-shadow(0 6px 16px rgba(14, 26, 56, .3));
    transition: scale .25s ease;
  }
  [dir="ltr"] .prg-handle { left: calc(var(--p) * 1%); }
  .prg-handle svg { width: 100%; height: 100%; display: block; }
  .prg-handle:hover, .prg-cards.is-dragging .prg-handle { scale: 1.08; }
  .prg-handle:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 4px; border-radius: 50%; }
  .prg-cards.is-dragging { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
}

/* سؤال + زر */
.prg-help { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 12px; }
.prg-q { color: #15234A; font-size: 15.5px; font-weight: 700; line-height: 24px; }
.prg-btn {
  width: 100%; height: 58px; margin-top: 19px; padding-inline: 49.5px 22px; justify-content: space-between;
  font-size: 16px; font-weight: 700;
}
.prg-btn .prg-arrow { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .prg-help { margin-top: 35px; }
  .prg-q { font-size: 18.5px; line-height: 26px; }
  .prg-btn { width: 336px; height: 54px; margin-top: 21px; padding-inline: 29.4px 26px; font-size: 17px; }
}

/* =========================================================
   Section: Journey (رحلة العمل)
   ========================================================= */
.wk { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 64px; }
/* خلفية: شبكة نقاط خفيفة بتتلاشى + الشكل المائي للهوية */
.wk::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(21, 35, 74, .14) 1.2px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 62%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 62%, #000 20%, transparent 75%);
}
.wk::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -120px; bottom: -90px; width: 360px; height: 410px; opacity: .045; pointer-events: none;
  background: url('../assets/images/brand/watermark-shape-lg.png') no-repeat center / contain;
}
.wk-header { display: grid; grid-template-areas: "eyebrow" "h2" "text"; }
.wk-eyebrow { grid-area: eyebrow; font-size: 11.5px; line-height: 18px; }
.wk-h2 { grid-area: h2; margin-top: 15px; font-size: 27px; line-height: 1.4; }
.wk-text { grid-area: text; margin-top: 18px; font-size: 13px; line-height: 25.8px; }
@media (min-width: 768px) {
  .wk { padding: 72px 0 88px; }
  .wk-h2 { margin-top: 11px; font-size: 44px; line-height: 1.3; }
  .wk-text { margin-top: 3px; max-width: 470px; font-size: 17px; line-height: 31.6px; }
}
@media (min-width: 1024px) {
  .wk { padding: 124px 0 150px; }
  .wk::after { width: 520px; height: 592px; inset-inline-end: -170px; bottom: -150px; }
  .wk-header { grid-template-columns: 1fr 520px; grid-template-areas: "eyebrow text" "h2 text"; column-gap: 40px; }
  .wk-text { align-self: end; margin-top: 0; margin-bottom: -5px; }
}

/* المسار */
.wk-track { position: relative; margin-top: 33px; }
@media (min-width: 768px) { .wk-track { margin-top: 25px; } }
@media (min-width: 1024px) { .wk-track { margin-top: 120px; } }
.wk-line { position: absolute; display: none; pointer-events: none; height: 12px; background-repeat: repeat-x; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2212%22%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%2318753C%22%20fill-opacity%3D%22.9%22/%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%226%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3C/svg%3E"); background-position: right center; }
[dir="ltr"] .wk-line { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2212%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%2318753C%22%20fill-opacity%3D%22.9%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%226%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%226%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3C/svg%3E"); background-position: left center; }
.wk-line--m { display: block; width: 12px; height: 398.5px; top: 39.3px; right: 18px; background-repeat: repeat-y; background-position: center top; }
.wk-line--m, [dir="ltr"] .wk-line--m { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2258%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223.2%22%20fill%3D%22%2318753C%22%20fill-opacity%3D%22.9%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2225.33%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2244.67%22%20r%3D%222.6%22%20fill%3D%22%2315234A%22%20fill-opacity%3D%22.35%22/%3E%3C/svg%3E"); background-position: center top; }
[dir="ltr"] .wk-line--m { right: auto; left: 18px; }
@media (min-width: 768px) {
  .wk-line--m { display: none; }
  .wk-line--t1 { display: block; top: 30px; inset-inline: -2px 8px; }
  .wk-line--t2 { display: block; top: 296px; inset-inline: -18px -10px; }
}
@media (min-width: 1024px) {
  .wk-line--t1, .wk-line--t2 { display: none; }
  .wk-line--d { display: block; top: 30px; inset-inline: -16px -14px; }
}
.wk-start { position: absolute; display: none; width: 26.2px; height: 30px; top: 21px; inset-inline-start: -33.1px; overflow: visible; }
@media (min-width: 768px) { .wk-start { display: block; } }
@media (min-width: 1024px) { .wk-start { inset-inline-start: -53.1px; } }
.wk-end { position: absolute; z-index: 1; width: 14px; height: 14px; top: 446.5px; inset-inline-start: 17px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(24, 117, 60, .16), 0 0 0 10px rgba(24, 117, 60, .07); }
@media (min-width: 768px) { .wk-end { width: 16px; height: 16px; top: 294px; inset-inline-start: auto; inset-inline-end: -28px; } }
@media (min-width: 1024px) { .wk-end { top: 28px; inset-inline-end: -38px; } }

/* الخطوات */
.wk-steps { position: relative; display: flex; flex-direction: column; }
.wk-step { --s: .72; position: relative; display: flex; align-items: flex-start; gap: 21px; min-height: 116px; list-style: none; }
@media (min-width: 768px) {
  .wk-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 29px; }
  .wk-step { --s: 1; flex-direction: column; align-items: center; gap: 26px; min-height: 0; }
}
@media (min-width: 1024px) { .wk-steps { grid-template-columns: repeat(4, 1fr); column-gap: 24px; } }

.wk-node { position: relative; flex-shrink: 0; width: calc(62.4px * var(--s)); height: calc(72px * var(--s)); z-index: 1; }
/* هالة سداسية ثابتة حوالين كل خطوة (بتقطع الخط المنقّط) */
.wk-node::before {
  content: ""; position: absolute; inset: calc(-10px * var(--s)) calc(-8.7px * var(--s));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #DDE2EC;
}
.wk-step--green .wk-node::before { background: #D3E6DA; }
.wk-hex { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-ico { position: absolute; left: 50%; top: 50%; width: calc(24px * var(--s)); height: calc(24px * var(--s)); translate: -50% -50%; color: #fff; }
.wk-badge {
  position: absolute; inset-inline-start: calc(50% - 37.5px * var(--s)); top: calc(50% - 35px * var(--s));
  width: calc(24px * var(--s)); height: calc(24px * var(--s)); display: grid; place-items: center; border-radius: 50%;
  background: #fff; border: 1px solid #E1E6EE; color: #15234A; font-size: calc(11px * var(--s)); font-weight: 700; line-height: 1;
}
@media (max-width: 767px) { .wk-badge { width: 16px; height: 16px; font-size: 9px; inset-inline-start: calc(50% - 26.4px); top: calc(50% - 27.4px); } }

/* الكارد (آيباد + ويب)، الموبايل: نص بدون كارد */
.wk-card { position: relative; flex: 1; }
.wk-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wk-title { color: #15234A; font-size: 17.5px; font-weight: 700; line-height: 25px; }
.wk-num { display: none; }
.wk-desc { margin-top: 9px; color: #5A6478; font-size: 13.5px; line-height: 27.4px; }
@media (min-width: 768px) {
  .wk-card {
    align-self: stretch; min-height: 139px; padding: 10px 22px 20px 26px; padding-inline: 26px 22px;
    border: 1px solid #E1E6EE; border-radius: 4px;
    background: var(--wk-mark) no-repeat left -34px bottom -40px / 120px 138px, #fff;
    transition: box-shadow .3s ease;
  }
  [dir="ltr"] .wk-card { background-position: right -34px bottom -40px, 0 0; }
  .wk-card::before { content: ""; position: absolute; top: -1px; inset-inline: -1px; height: 3px; border-radius: 4px 4px 0 0; background: #15234A; }
  .wk-step--green .wk-card::before { background: var(--brand); }
  .wk-title { margin-top: 8px; font-size: 24px; line-height: 1.4; }
  /* رقم مفرّغ (outline) بدل المصمت */
  .wk-num { display: block; margin-top: -1px; color: transparent; -webkit-text-stroke: 1.4px #15234A; font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
  .wk-step--green .wk-num { -webkit-text-stroke-color: var(--brand); }
  .wk-desc { margin-top: 12px; font-size: 15px; line-height: 24.5px; }
  .wk-step:hover .wk-card { box-shadow: 0 18px 32px -22px rgba(21, 35, 74, .35); }

  /* الخطوة الأخيرة = الوجهة: كارد كحلي مميّز */
  .wk-step:last-child .wk-card {
    --wk-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-33%20-38%2066%2076%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.14%22%20stroke-width%3D%221.2%22%3E%3Cpolygon%20points%3D%220%2C-36%2031.2%2C-18%2031.2%2C18%200%2C36%20-31.2%2C18%20-31.2%2C-18%22/%3E%3Cpolygon%20points%3D%220%2C-24%2020.8%2C-12%2020.8%2C12%200%2C24%20-20.8%2C12%20-20.8%2C-12%22/%3E%3C/g%3E%3C/svg%3E");
    border-color: #15234A;
    background: var(--wk-mark) no-repeat left -34px bottom -40px / 120px 138px, linear-gradient(158deg, #15234A 0%, #163760 125%);
    box-shadow: 0 24px 40px -26px rgba(21, 35, 74, .55);
  }
  [dir="ltr"] .wk-step:last-child .wk-card { background-position: right -34px bottom -40px, 0 0; }
  .wk-step:last-child .wk-card::before { background: #3DB86A; }
  .wk-step:last-child .wk-title { color: #fff; }
  .wk-step:last-child .wk-num { -webkit-text-stroke-color: rgba(255, 255, 255, .7); }
  .wk-step:last-child .wk-desc { color: #C9D2E3; }
}
/* سداسي مفرّغ كعلامة مائية في زاوية الكارد */
.wk-card { --wk-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-33%20-38%2066%2076%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2315234A%22%20stroke-opacity%3D%22.08%22%20stroke-width%3D%221.2%22%3E%3Cpolygon%20points%3D%220%2C-36%2031.2%2C-18%2031.2%2C18%200%2C36%20-31.2%2C18%20-31.2%2C-18%22/%3E%3Cpolygon%20points%3D%220%2C-24%2020.8%2C-12%2020.8%2C12%200%2C24%20-20.8%2C12%20-20.8%2C-12%22/%3E%3C/g%3E%3C/svg%3E"); }

/* ويب: الكروت متدرّجة (زِق زاق) ومربوطة بالمسار بخط نقاط عمودي */
@media (min-width: 1024px) {
  .wk-steps { align-items: start; }
  .wk-card { flex: none; width: 100%; min-height: 196px; padding-block: 18px 30px; }
  .wk-num { font-size: 56px; }
  .wk-step::after {
    content: ""; position: absolute; top: 72px; left: 50%; width: 6px; height: 26px; margin-left: -3px;
    background: radial-gradient(circle, rgba(21, 35, 74, .4) 2px, transparent 2.5px) center 2px / 6px 10px repeat-y;
  }
  .wk-step--green::after { background-image: radial-gradient(circle, rgba(24, 117, 60, .75) 2px, transparent 2.5px); }
  .wk-step:nth-child(even) .wk-card { margin-top: 72px; }
  .wk-step:nth-child(even)::after { height: 98px; }
}
/* عرض نص الوصف مثل فيجما (الأسطر بتنكسر بنفس المكان) */
.wk-desc { max-width: 256px; }
@media (min-width: 768px) { .wk-desc { max-width: 215px; } }
html[lang="en"] .wk-desc { max-width: none; }

/* البرامج - آيباد (فيجما 834): الكروت فوق بعض بدون "أو" */
@media (min-width: 768px) and (max-width: 1023px) {
  .prg { padding: 43px 0 48px; }
  .prg-text { margin-top: 10.4px; }
  .prg-cards { margin-top: 23px; gap: 16px; }
  .prg-or { display: none; }
  .prg-card { min-height: 296px; }
  .prg-title { margin-top: -8px; }
  .prg-desc { margin-bottom: 14px; max-width: 510px; }
  html[lang="en"] .prg-title { margin-top: 12px; }
  .prg-help { margin-top: 31px; }
}

/* =========================================================
   النتائج: ماذا ستحقق منظمتك؟
   ========================================================= */
.res { padding: 64px 0 18px; }
.res-header { display: grid; grid-template-areas: "eyebrow" "h2" "text"; }
.res-eyebrow { grid-area: eyebrow; gap: 16px; font-size: 14px; line-height: 22px; }
.res-h2 { grid-area: h2; margin-top: 14px; font-size: 29px; line-height: 1.4; }
.res-text { grid-area: text; margin-top: 7px; font-size: 13.5px; line-height: 25px; }
html[lang="en"] .res-h2 { font-size: 27px; }

.res-grid { display: grid; row-gap: 22.7px; margin-top: 31px; padding-inline: 5px 17px; }
.res-item { display: flex; align-items: center; gap: 21px; height: 44px; }
.res-hex { position: relative; flex: none; display: grid; place-items: center; width: 38.2px; height: 44px; color: #fff; }
.res-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.res-item--green .res-shape polygon { fill: #18753C; }
.res-item--navy .res-shape polygon { fill: #15234A; }
.res-ico { position: relative; width: 18px; height: 18px; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.res-item:hover .res-shape { transform: rotate(30deg) scale(1.06); }
.res-item:hover .res-ico { transform: scale(1.12); }
.res-label { font-size: 15.5px; font-weight: 600; line-height: 27px; color: #15234A; }
html[lang="en"] .res-label { font-size: 15px; line-height: 23px; }

.res-banner {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin-top: 32px; min-height: 119.6px; padding: 28px 24px 24px; border-radius: 4px;
  background: linear-gradient(158deg, #15234A 0%, #163760 125%); color: #fff;
}
.res-banner-head { display: flex; align-items: flex-start; gap: 12px; }
.res-note { font-size: 14px; line-height: 25px; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.res-cta { width: 100%; height: 50px; gap: 12px; margin-top: 8px; padding-inline: 24px; font-size: 15px; }
.res-wm {
  position: absolute; z-index: -1; inset-inline-end: -48px; bottom: -44px; width: 166px; height: 189px; opacity: .07; pointer-events: none;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
}
.res-dot { position: relative; flex: none; width: 10px; height: 10px; margin-top: 10px; border-radius: 50%; background: #3DB86A; box-shadow: 0 0 0 4px rgba(61, 184, 106, .18); }
html[lang="en"] .res-dot { margin-top: 8px; }
.res-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DB86A; opacity: 0; /* نبض النقطة أُلغي */ }
@keyframes res-ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.res-goal { font-size: 17px; font-weight: 700; line-height: 30px; text-wrap: balance; }
html[lang="en"] .res-goal { font-size: 15.5px; line-height: 26px; }

/* آيباد (لا يوجد تصميم بعد: تخطيط وسط بين الويب والجوال) */
@media (min-width: 768px) {
  .res { padding: 64px 0 72px; }
  .res-eyebrow { gap: 13px; font-size: 14px; }
  .res-h2 { margin-top: 10px; font-size: 44px; line-height: 1.3; }
  html[lang="en"] .res-h2 { font-size: 38px; }
  .res-text { margin-top: 8px; max-width: 520px; font-size: 17px; line-height: 30px; }
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 26px; margin-top: 48px; padding-inline: 0; }
  .res-hex { margin-inline-start: 5px; }
  .res-item { position: relative; height: auto; min-height: 74px; gap: 20px; padding-bottom: 30px; }
  .res-item::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: #E1E6EE; transform-origin: right; }
  [dir="ltr"] .res-item::after { transform-origin: left; }
  /* رسم الخط: نفس حركة GSAP السابقة (power2.inOut، 0.8ث، تأخير 0.12ث لكل بند) */
  .res-lines .res-item::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.455, .03, .515, .955) calc(var(--i, 0) * .12s); }
  .res-lines.is-in .res-item::after { transform: scaleX(1); }
  .res-label { font-size: 17px; line-height: 28px; }
  html[lang="en"] .res-label { font-size: 16px; line-height: 25px; }
  .res-banner { margin-top: 56px; min-height: 110px; gap: 15px; padding: 32px; }
  .res-banner-head { gap: 15px; }
  .res-note { font-size: 16px; line-height: 28px; }
  .res-cta { width: auto; height: 52px; font-size: 16px; }
  .res-goal { max-width: none; font-size: 20px; line-height: 32px; }
  html[lang="en"] .res-goal { max-width: none; font-size: 19px; line-height: 30px; }
  .res-wm { inset-inline-start: -55px; inset-inline-end: auto; top: -28px; bottom: auto; width: 176px; height: 200px; }
  .res-dot { margin-top: 11px; }
  html[lang="en"] .res-dot { margin-top: 10px; }
}
/* ويب */
@media (min-width: 1024px) {
  .res { padding: 84px 0 100px; }
  .res-header { grid-template-columns: 1fr 520px; grid-template-areas: "eyebrow ." "h2 text"; column-gap: 40px; }
  .res-h2 { margin-top: 12px; font-size: 48px; }
  html[lang="en"] .res-h2 { font-size: 40px; }
  .res-text { align-self: center; margin-top: 0; font-size: 19px; line-height: 32px; }
  /* البطاقات عمودين × 3 صفوف، والبانر عمود جانبي (يسار بالعربي / يمين بالإنجليزي) */
  .res-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 56px; margin-top: 60px; }
  /* توزيع الصفوف على كامل ارتفاع البانر حتى يلتقي آخر خط فاصل بأسفل البانر */
  .res-grid { margin-top: 0; align-content: space-between; }
  .res-label { font-size: 17px; line-height: 28px; }
  html[lang="en"] .res-label { font-size: 17px; line-height: 26px; }
  .res-banner { margin-top: 0; padding: 40px 36px 36px; gap: 18px; }
  .res-banner-head { align-items: flex-start; }
  .res-dot { margin-top: 13px; }
  html[lang="en"] .res-dot { margin-top: 12px; }
  .res-cta { width: 100%; margin-top: auto; }
  .res-wm { inset-inline-start: auto; inset-inline-end: -70px; top: auto; bottom: -60px; width: 260px; height: 296px; }
  .res-goal { font-size: 24.8px; line-height: 36px; }
  html[lang="en"] .res-goal { font-size: 22px; line-height: 34px; }
}

/* =========================================================
   قصة نجاح
   ========================================================= */
.st { padding: 34px 0 11px; }
/* خط فاصل بعرض المحتوى: سكشن النتائج قبله أبيض أيضًا فكانا يبدوان سكشنًا واحدًا */
.st > div::before { content: ""; display: block; height: 1px; margin-bottom: 44px; background: #E1E6EE; }
.st-eyebrow { gap: 16px; font-size: 13.4px; line-height: 22px; }
.st-card {
  --s: 1;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  margin-top: 24px; padding: 12px 10px 24px; border-radius: 4px;
  background: linear-gradient(160deg, #15234A 0%, #163760 100%); color: #fff;
}
.st-bg { display: none; position: absolute; z-index: -1; top: 0; right: 0; width: 1000px; height: 440px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2; opacity: .06; pointer-events: none; }
[dir="ltr"] .st-bg { right: auto; left: 0; transform: scaleX(-1); }
.st-wm {
  position: absolute; z-index: -1; inset-inline-start: -78px; top: 167.7px; width: 300px; height: 342px; opacity: .06; pointer-events: none;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
}
.st-media { display: none; }
.st-logo { margin-top: 14px; }
.st-logo img { display: block; width: 136px; height: auto; }

.st-body { position: relative; padding-inline: 10px; }
.st-title { max-width: 220px; margin-top: 17px; font-size: 21px; font-weight: 700; line-height: 36px; }
.st-sub span { white-space: nowrap; }
.st-sub { max-width: 190px; margin-top: 13px; font-size: 14.5px; line-height: 28.5px; color: #C9D2E3; }
.st-bar, .st-h3 { display: none; }
.st-list { display: grid; row-gap: 11.1px; margin-top: 11px; padding-inline-start: 4px; }
.st-item { display: flex; align-items: center; gap: 15px; font-size: 14.5px; font-weight: 600; line-height: 22px; }
.st-hex { flex: none; width: 27.8px; height: 32px; overflow: visible; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.st-hex polygon { fill: rgba(61,184,106,.2); }
.st-hex path { fill: none; stroke: #3DB86A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-item:hover .st-hex { transform: rotate(30deg) scale(1.08); }
.st-cta {
  display: flex; align-items: center; gap: 12px;
  height: 57.5px; margin: 23.5px -4px 0; padding: 0 16px; border-radius: 4px;
  background: #18753C; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.st-cta:hover { background: #1c8746; box-shadow: 0 10px 24px -10px rgba(61,184,106,.55); }
.st-cta-d { display: none; }
.st-cta-m { flex: 1; text-align: center; }
.st-arrow { flex: none; width: 14px; height: 12px; }
.st-cta:hover .st-arrow { animation: st-nudge .8s ease-in-out infinite; }
@keyframes st-nudge { 50% { translate: -4px 0; } }
[dir="ltr"] .st-cta:hover .st-arrow { animation-name: st-nudge-l; }
@keyframes st-nudge-l { 50% { translate: 4px 0; } }

/* موبايل: نفس عناصر الديسكتوب (صورة + شريك النجاح + أبرز النتائج) بس فوق بعض */
@media (max-width: 767px) {
  .st-wm { display: none; }
  .st-bg--t { display: block; }
  .st-media { position: relative; display: block; height: 320px; margin: 0; overflow: hidden; border-radius: 4px; }
  .st-photo { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
  .st-media::after { content: ""; position: absolute; inset: auto 0 0; height: 170px; background: linear-gradient(to bottom, rgba(21,35,74,0), rgba(21,35,74,.92)); pointer-events: none; }
  .st-media::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(61,184,106,.45); border-radius: 4px; pointer-events: none; }
  .st-logo { margin-top: 22px; }

  .st-title { max-width: none; margin-top: 14px; font-size: 24px; line-height: 1.35; }
  .st-sub { max-width: none; margin-top: 10px; font-size: 15px; line-height: 1.7; }
  .st-bar { display: block; width: 52px; height: 3px; margin-top: 20px; background: #3DB86A; transform-origin: right; }
  [dir="ltr"] .st-bar { transform-origin: left; }
  .st-h3 { display: block; margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.6; color: #3DB86A; }
  .st-list { row-gap: 14px; margin-top: 16px; }
}

/* آيباد + ويب: صورة + محتوى */
@media (min-width: 768px) {
  .st { padding: 0 0 48px; }
  .st > div::before { margin-bottom: 56px; }
  .st-eyebrow { gap: 16px; }
  .st-card { --s: .85; flex-direction: row; align-items: flex-start; margin-top: 22px; padding: 16px; }
  .st-bg--t { display: block; }
  .st-wm { display: none; }
  .st-media { order: 2; position: relative; display: block; flex: none; width: 226px; height: 340px; margin: 0; overflow: hidden; border-radius: 4px; }
  .st-photo { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .st-media:hover .st-photo { transform: scale(1.04); }
  .st-media::after { content: ""; position: absolute; inset: auto 0 0; height: 153px; background: linear-gradient(to bottom, rgba(21,35,74,0), rgba(21,35,74,.92)); pointer-events: none; }
  .st-media::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(61,184,106,.45); border-radius: 4px; pointer-events: none; }
  .st-logo { margin: 0 0 calc(var(--s) * 18px); }
  .st-logo img { width: calc(var(--s) * 170px); }

  .st-body { flex: 1; min-width: 0; padding-top: 9.7px; padding-inline: 12px 0; }
  .st-title { max-width: none; margin-top: 0; font-size: calc(var(--s) * 38px); line-height: 1.25; }
  .st-sub { max-width: none; margin-top: calc(var(--s) * 19.2px); font-size: calc(var(--s) * 19px); line-height: 1.6; }
  .st-bar { display: block; width: calc(var(--s) * 60px); height: calc(var(--s) * 3px); margin-top: calc(var(--s) * 26.6px); background: #3DB86A; transform-origin: right; }
  [dir="ltr"] .st-bar { transform-origin: left; }
  .st-h3 { display: block; margin-top: calc(var(--s) * 22px); font-size: calc(var(--s) * 18px); font-weight: 700; line-height: 1.6; color: #3DB86A; }
  .st-list { grid-template-columns: repeat(2, calc(var(--s) * 300px)); row-gap: calc(var(--s) * 18px); margin-top: calc(var(--s) * 27.3px); padding-inline-start: calc(var(--s) * 4px); }
  .st-item { gap: calc(var(--s) * 15px); font-size: calc(var(--s) * 18px); line-height: 1.5; }
  .st-hex { width: calc(var(--s) * 27.8px); height: calc(var(--s) * 32px); }
  .st-hex path { stroke-width: 2; }
  .st-cta { width: calc(var(--s) * 424px); height: calc(var(--s) * 52px); margin: calc(var(--s) * 25px) 0 0; padding-inline: calc(var(--s) * 25.4px) calc(var(--s) * 22px); justify-content: space-between; font-size: calc(var(--s) * 16px); }
  .st-cta-d { display: block; }
  .st-cta-m { display: none; }
  .st-arrow { width: calc(var(--s) * 14px); height: calc(var(--s) * 12px); }
}
@media (min-width: 1024px) {
  .st { padding: 0 0 90px; }
  .st > div::before { margin-bottom: 76px; }
  .st-card { margin-top: 35px; }
  .st-bg--t { display: none; }
  .st-bg--d { display: block; }
  .st-media { width: calc(var(--s) * 440px); height: calc(var(--s) * 408px); }
  .st-media::after { height: calc(var(--s) * 210px); }
  .st-body { padding-inline: calc(var(--s) * 40px) 0; padding-top: calc(var(--s) * 20px); }
}
@media (min-width: 1280px) { .st-card { --s: 1; } }
html[lang="en"] .st-sub { max-width: none; }
@media (min-width: 768px) {
  html[lang="en"] .st-body { padding-inline-end: 24px; }
  html[lang="en"] .st-list { grid-template-columns: repeat(2, minmax(0, calc(var(--s) * 300px))); }
  html[lang="en"] .st-cta { width: auto; min-width: calc(var(--s) * 424px); max-width: 100%; gap: 24px; }
  html[lang="en"] .st-cta-d { white-space: nowrap; }
}

/* =========================================================
   لماذا تختار تشاركي؟
   ========================================================= */
.wu { padding: 66px 0 16px; }
.wu-eyebrow { gap: 17px; font-size: 13px; line-height: 20px; }
.wu-h2 { margin-top: 10px; font-size: 29px; line-height: 1.4; }
html[lang="en"] .wu-h2 { font-size: 27px; }
.wu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12.2px 10px; margin-top: 36px; }
.wu-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  height: 130.9px; padding: 18.45px 15px 0; border: 1px solid #E1E6EE; border-radius: 4px; background: #fff;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.wu-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 36px -18px rgba(21,35,74,.25); }
.wu-num { display: none; position: absolute; top: 15px; inset-inline-end: 17.5px; font-size: 11px; font-weight: 500; line-height: 16px; color: #B9C1CF; }
.wu-hex { flex: none; width: 29.4px; height: 33.9px; overflow: visible; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.wu-card:hover .wu-hex { transform: rotate(30deg); }
.wu-hex polygon { fill: #fff; stroke-width: 1.6; transition: fill .35s ease; }
.wu-hex path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s ease; }
.wu-card--green .wu-hex polygon { stroke: #18753C; } .wu-card--green .wu-hex path { stroke: #18753C; }
.wu-card--navy .wu-hex polygon { stroke: #15234A; }  .wu-card--navy .wu-hex path { stroke: #15234A; }
.wu-card--green:hover .wu-hex polygon { fill: #18753C; } .wu-card--navy:hover .wu-hex polygon { fill: #15234A; }
.wu-card:hover .wu-hex path { stroke: #fff; }
.wu-text { max-width: 138px; margin-top: 16.25px; font-size: 14px; font-weight: 600; line-height: 22.3px; color: #15234A; }
html[lang="en"] .wu-text { max-width: none; font-size: 13px; line-height: 19px; }

@media (min-width: 768px) {
  .wu { padding: 42px 0 56.5px; }
  .wu-h2 { margin-top: 4.5px; font-size: 48px; line-height: 1.3; }
  html[lang="en"] .wu-h2 { font-size: 42px; }
  .wu-grid { gap: 17px; margin-top: 31.5px; }
  .wu-card { flex-direction: row; align-items: center; gap: 20.5px; height: 103px; padding: 0 23px; }
  .wu-num { display: block; top: 13.7px; }
  .wu-hex { width: 45px; height: 52px; }
  .wu-text { position: relative; top: -4.5px; max-width: 238px; margin-top: 0; font-size: 19px; line-height: 26.3px; }
  html[lang="en"] .wu-text { max-width: 230px; font-size: 16px; line-height: 23px; }
}
@media (min-width: 1024px) {
  .wu { padding: 83px 0 100px; }
  .wu-h2 { margin-top: 6px; }
  .wu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48.6px; }
  .wu-card { height: 104px; padding-inline: 22.5px 18px; }
}

/* =========================================================
   دعوة للتواصل
   ========================================================= */
.cta { padding: 56px 0 0; }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 28px;
  padding: 32px 22px 22px; border-radius: 4px; color: #fff;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(61,184,106,.16), transparent 70%),
    linear-gradient(162deg, #15234A 0%, #163760 100%);
}
[dir="ltr"] .cta-card {
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(61,184,106,.16), transparent 70%),
    linear-gradient(162deg, #15234A 0%, #163760 100%);
}
/* شريط أخضر رفيع أعلى البطاقة */
.cta-card::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 96px; height: 4px; background: var(--brand-light);
}
.cta-wm {
  position: absolute; z-index: -1; inset-inline-end: -60px; bottom: -90px; width: 240px; aspect-ratio: 300 / 342; opacity: .045; pointer-events: none;
  background: url('../assets/images/brand/watermark-shape.png') no-repeat center / 100% 100%;
}
.cta-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--brand-light); }
.cta-eyebrow .eyebrow-dots { display: flex; gap: 3px; }
.cta-title { margin-top: 10px; font-size: 29px; font-weight: 700; line-height: 1.45; }
.cta-title-g { color: var(--brand-light); }
.cta-text { margin-top: 12px; max-width: 520px; font-size: 14.5px; line-height: 1.85; color: var(--muted); }
.cta-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cta-btn { display: inline-flex; gap: 14px; height: 52px; padding-inline: 24px; font-size: 16px; }
.cta-ico { flex: none; width: 19px; height: 19px; }
.cta-btn:hover .cta-ico { animation: cta-bob .9s ease-in-out infinite; }
@keyframes cta-bob { 50% { translate: 0 2px; } }

/* مسار البداية: 3 خطوات */
.cta-path {
  padding: 22px 20px 6px; border-radius: 4px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.cta-path-t { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.cta-steps { margin-top: 18px; }
.cta-step { position: relative; display: flex; align-items: flex-start; gap: 14px; padding-bottom: 20px; }
.cta-step:not(:last-child)::before {
  content: ""; position: absolute; top: 50px; bottom: 4px; inset-inline-start: 20px;
  border-inline-start: 2px dotted rgba(255,255,255,.28);
}
.cta-hex { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 48px; }
.cta-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.45); stroke-width: 1.5; }
.cta-hex b { position: relative; font-size: 13.5px; font-weight: 700; color: #fff; }
.cta-step.is-goal .cta-hex svg { fill: var(--brand); stroke: var(--brand-light); }
.cta-step-t { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.cta-step-t b { font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.cta-step-t small { font-size: 13px; line-height: 1.6; color: var(--muted); }
.cta-step.is-goal .cta-step-t b { color: var(--brand-light); }

@media (min-width: 768px) {
  .cta { padding-top: 64px; }
  .cta-card { gap: 36px; padding: 48px 44px 40px; }
  .cta-wm { width: 300px; inset-inline-end: -70px; bottom: -110px; }
  .cta-eyebrow { font-size: 14px; }
  .cta-title { font-size: 44px; line-height: 1.35; }
  .cta-text { font-size: 17px; }
  .cta-actions { flex-direction: row; gap: 12px; margin-top: 28px; }
  .cta-btn { height: 56px; padding-inline: 26px; font-size: 17px; }
  /* الخطوات أفقية على الآيباد */
  .cta-path { padding: 24px 26px 4px; }
  .cta-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cta-step { flex-direction: column; gap: 12px; }
  .cta-step:not(:last-child)::before {
    top: 23px; bottom: auto; inset-inline-start: 54px; inset-inline-end: -8px;
    border-inline-start: 0; border-top: 2px dotted rgba(255,255,255,.28);
  }
  .cta-step-t { padding-top: 0; }
}
@media (min-width: 1024px) {
  .cta { padding-top: 80px; }
  .cta-card { grid-template-columns: minmax(0, 1fr) 400px; align-items: center; gap: 64px; padding: 64px 64px 64px 56px; padding-inline: 64px 56px; }
  .cta-wm { width: 340px; inset-inline-end: -80px; bottom: -150px; }
  .cta-title { font-size: 46px; }
  .cta-actions { margin-top: 32px; }
  /* الخطوات عمودية بجانب النص */
  .cta-path { padding: 28px 28px 10px; }
  .cta-steps { display: block; margin-top: 22px; }
  .cta-step { flex-direction: row; gap: 16px; padding-bottom: 24px; }
  .cta-step:not(:last-child)::before {
    top: 54px; bottom: 6px; inset-inline-start: 20px; inset-inline-end: auto;
    border-top: 0; border-inline-start: 2px dotted rgba(255,255,255,.28);
  }
  .cta-step-t { padding-top: 5px; }
  .cta-step-t b { font-size: 16.5px; }
  .cta-step-t small { font-size: 13.5px; }
}

/* =========================================================
   الفوتر
   ========================================================= */
.ft { padding: 43.7px 0 0; }
.ft-inner { display: flex; flex-direction: column; align-items: center; padding: 43.8px 0 1.5px; border-top: 1px solid #E1E6EE; }
.ft-logo img { display: block; width: 99px; height: auto; }
.ft-nav { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin-top: 18px; text-align: center; font-size: 12.5px; font-weight: 500; line-height: 20px; color: #15234A; }
.ft-nav a { padding: 4px 0; transition: color .25s ease; }
.ft-nav a:hover { color: #18753C; }
.ft-copy { margin-top: 13px; font-size: 12px; line-height: 18px; color: #5A6478; }
@media (min-width: 768px) {
  .ft { padding-top: 64px; }
  .ft-inner { flex-direction: row; padding: 33px 0 36px; }
  .ft-nav { position: relative; top: -5.7px; }
  .ft-copy { position: relative; top: -4px; }
  .ft-logo img { width: 126px; }
  .ft-nav { display: flex; width: auto; margin: 0 0 0; margin-inline-start: 32px; font-size: 14.5px; text-align: start; }
  .ft-nav a { min-width: 90px; }
  html[lang="en"] .ft-nav a { min-width: 0; margin-inline-end: 32px; }
  .ft-copy { margin: 0; margin-inline-start: auto; font-size: 13.5px; }
}
@media (min-width: 1024px) {
  .ft { padding-top: 80px; }
  .ft-inner { padding-bottom: 38px; }
  .ft-nav { margin-inline-start: 135px; }
}
/* English adjustments (CTA / why us / footer) */
html[lang="en"] .wu-card { height: auto; min-height: 130.9px; padding-bottom: 14px; }
html[lang="en"] .wu-text { font-size: 12.5px; line-height: 18px; }
html[lang="en"] .cta-title { font-size: 26px; line-height: 1.3; }
.ft-nav a, .ft-copy { white-space: nowrap; }
@media (min-width: 768px) {
  html[lang="en"] .wu-card { height: 103px; min-height: 0; padding-bottom: 0; }
  html[lang="en"] .wu-text { font-size: 16px; line-height: 23px; }
  html[lang="en"] .cta-title { font-size: 40px; line-height: 1.25; }
  html[lang="en"] .ft-nav { margin-inline-start: 28px; }
  html[lang="en"] .ft-nav a { margin-inline-end: 22px; }
  html[lang="en"] .ft-copy { font-size: 12.5px; }
}
@media (min-width: 1024px) {
  html[lang="en"] .wu-card { height: 104px; }
  html[lang="en"] .cta-title { font-size: 42px; line-height: 1.25; }
  html[lang="en"] .ft-nav { margin-inline-start: 80px; }
  html[lang="en"] .ft-nav a { margin-inline-end: 32px; }
}

/* أداء: صورة المقدمة على طبقة مستقلة حتى لا يُعاد رسمها أثناء حركة الدخول (بدون تغيير الشكل) */
.hero-img { will-change: transform, opacity; }

/* جمل انتقالية قصيرة في نهاية الأقسام (نفس نقاط الهوية + نص ثانوي) */
.sec-bridge { display: flex; align-items: center; gap: 12px; margin-top: 32px; color: #5A6478; font-size: 14.5px; font-weight: 500; line-height: 1.7; }
.sec-bridge .why-dots { flex: none; }
@media (min-width: 768px) { .sec-bridge { margin-top: 40px; font-size: 16px; } }
.cta .sec-bridge, .hero .sec-bridge { display: none; }
/* القطاعات: الجملة داخل .sec-inner اللي بيصير flex (صف) من الآيباد وطالع، فكانت تطلع عمود ثالث جنب الخلية — نخليها بسطر كامل تحت */
@media (min-width: 768px) {
  .sec-inner { flex-wrap: wrap; row-gap: 0; }
  .sec-inner > .sec-bridge { flex: 0 0 100%; }
}
/* آيباد: خط الوصل المنحني بينزل تحت الخلية، فالجملة تنزل تحته */
@media (min-width: 768px) and (max-width: 1023px) {
  .sec { padding-bottom: 48px; }
  .sec-inner > .sec-bridge { margin-top: 84px; }
}