/* =========================================================
   Impact Forge — site.css  (Native CSS Nesting, scoped per component)
   كل سكشن/مكوّن = كلاس واحد بيحتوي على كل أبنائه وكل الـ responsive بتاعه.
   الترتيب:
     1) Tokens & Base        2) Shared components
     3) Global UI            4) Header
     5) Hero                 6) Highlights strip
     7) Quote                8) About
     9) Programs (home)     10) Marquee
    11) Why                 12) Impact numbers
    13) Advisors teaser     14) CTA
    15) Footer              16) Inner pages (page hero, message, programs,
                                advisors, vision, contact, detail, method)
   ========================================================= */

/* =====================================================
   1) TOKENS & BASE
   ===================================================== */
:root {
  /* ===== ألوان الهوية (من ملف المحتوى المعتمد) ===== */
  --if-royal: #2e4fa0; /* العناوين، الأزرار الرئيسية، القائمة */
  --if-steel: #2787a9; /* الروابط، العناصر الثانوية */
  --if-teal: #229aab; /* الإبراز، الوسوم، hover */
  --if-gradient: linear-gradient(
    135deg,
    #2e4fa0,
    #229aab
  ); /* Hero، الشريط الختامي، الفوتر */
  --if-surface: #f2f4f7; /* خلفيات الأقسام المتبادلة */
  --if-text: #1d2939; /* النصوص */
  --if-deep: #1f3a7a; /* أغمق درجة من الأزرق الملكي (عمق البلاطات) */
  --if-mint: #a6e3ea; /* لون إبراز فوق الخلفيات الداكنة (تيل فاتح من اللوجو) — تباين ≥ 4.5 على الأزرق الملكي */
  /* لون وسم ثابت لكل برنامج (مشتق من ألوان الهوية) */
  --p1: #229aab;
  --p2: #2e4fa0;
  --p3: #2787a9;
  --p4: #1f3a7a;
  --p5: #1b7684;
  /* توكنز الصفحة تتبع الهوية */
  --bg: #ffffff;
  --surf: #ffffff;
  --ink: var(--if-text);
  --mut: #475467;
  --navy: var(--if-royal);
  --navy2: var(--if-steel);
  --teal: var(--if-teal);
  --gold: var(--if-royal);
  --line: #e4e7ec;
  --teal-ink: var(--if-steel);
  --gold-ink: var(--if-royal);
  --plus-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 25v14M25 32h14' stroke='%23fff' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E");
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;

  /* اللغة: النصوص بتتبدّل من الـ JS عبر attributes (ar / en) */
  &[lang="en"] body {
    line-height: 1.65;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", sans-serif;
  line-height: 1.8;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
p,
li {
  text-wrap: pretty;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

section {
  padding: 84px 0;
  @media (max-width: 860px) {
    padding: 60px 0;
  }
}

h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin: 0 0 8px;
  font-weight: 800;
}

/* Shared keyframes */
@keyframes orb-float {
  50% {
    transform: translate(40px, 30px) scale(1.15);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes pulse-ring {
  70% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--if-teal) 0%, transparent);
  }
}
@keyframes rise-up {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}

/* Reduced motion: يطفي كل الحركة */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* =====================================================
   2) SHARED COMPONENTS
   ===================================================== */

/* حاوية المحتوى: بتبدأ وتنتهي في نفس نقطة محتوى الهيرو */
.container {
  max-width: 1288px;
  margin: auto;
  padding-inline: 24px;
}

.skip-link {
  position: fixed;
  inset-block-start: -80px;
  inset-inline-start: 12px;
  z-index: 100;
  background: var(--gold);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;

  &:focus {
    inset-block-start: 12px;
  }
}

/* Icons */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.14em;
  flex: none;
}
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: var(--teal);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--if-teal) 13%, transparent),
    color-mix(in srgb, var(--if-royal) 13%, transparent)
  );
  margin-bottom: 12px;
  transition: 0.3s;
}

/* Section heading helpers
   الـ kicker: شارة بارزة 3D بألوان الهوية
   (النص بيتبدّل بـ textContent مع اللغة، فكل الزخرفة على ::before / ::after) */
.kicker {
  --k-edge: color-mix(in srgb, var(--if-royal) 22%, transparent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 7px 18px 7px 12px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--if-royal);
  /* وش الشارة + حدود متدرجة من الهوية */
  background:
    linear-gradient(180deg, #ffffff, #eef3fb) padding-box,
    linear-gradient(120deg, var(--if-royal), var(--if-teal)) border-box;
  /* إضاءة من فوق + bevel تحت + سُمك + ظل = بروز 3D */
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 color-mix(in srgb, var(--if-royal) 10%, transparent),
    0 2px 0 var(--k-edge),
    0 10px 20px -10px color-mix(in srgb, var(--if-deep) 55%, transparent);
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;

  html[dir="rtl"] & {
    padding: 7px 12px 7px 18px;
  }
  html[lang="en"] & {
    letter-spacing: 0.06em; /* التباعد للإنجليزي بس؛ بيكسر اتصال الحروف العربي */
  }

  /* مكعب صغير بألوان الهوية بيلف 3D (نفس فكرة مكعبات "لمحة عن الشركة") */
  &::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--if-mint), var(--if-teal) 45%, var(--if-royal));
    box-shadow:
      inset 1.5px 1.5px 0 #ffffffb3,
      inset -1.5px -1.5px 0 #0b1c4a40,
      0 3px 6px -1px color-mix(in srgb, var(--if-royal) 55%, transparent);
    animation: kicker-cube 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
  /* لمعة بتعدّي على الشارة */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 35%, #ffffffcc 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: 150% 0;
    animation: kicker-shine 4.5s ease-in-out infinite;
    pointer-events: none;
  }

  &:hover {
    translate: 0 -2px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 color-mix(in srgb, var(--if-royal) 10%, transparent),
      0 4px 0 var(--k-edge),
      0 16px 26px -12px color-mix(in srgb, var(--if-deep) 60%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    &::before,
    &::after {
      animation: none;
    }
  }
}
@keyframes kicker-cube {
  /* الوقفات دايمًا على وش كامل (0 / 180 / 360) عشان المكعب ما يختفيش وهو واقف */
  0%, 20% { transform: perspective(40px) rotateX(0) rotateY(0); }
  50%, 70% { transform: perspective(40px) rotateX(180deg) rotateY(180deg); }
  100% { transform: perspective(40px) rotateX(360deg) rotateY(360deg); }
}
@keyframes badge-float {
  50% {
    translate: 0 -4px;
  }
}
@keyframes kicker-shine {
  0%, 55% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}
.lead {
  color: var(--mut);
  max-width: 680px;
  margin: 0 0 36px;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: 36px;

  .lead {
    margin: 0;
  }
}
.english-name {
  display: inline-block;
  direction: ltr;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c8eaef;
}
.gradient-text {
  display: inline-block;
  color: transparent;
  background: linear-gradient(190deg, #ffffff, #c8eaef);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Reveal on scroll: لا نخفي المحتوى إلا لو الـ JS شغال */
.reveal {
  transition: 1s cubic-bezier(0.2, 0.7, 0.2, 1);

  .js &:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px);
  }
  .gsap-enabled & {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .js &:not(.is-visible) {
      opacity: 1;
      transform: none;
    }
  }
}

/* أقسام داكنة عامة */
.section-dark {
  color: #fff;
  background-image:
    linear-gradient(160deg, var(--if-royal), var(--if-steel));

  /* نسخة زجاجية للأقسام الداكنة */
  .kicker {
    --k-edge: #0b1c4a66;
    color: #fff;
    /* وش مصمت (لو شفاف، تدرّج الحدود بيبان من تحته) */
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--if-royal) 70%, #ffffff), var(--if-deep)) padding-box,
      linear-gradient(120deg, var(--if-mint), #ffffff26) border-box;
    box-shadow:
      inset 0 1px 0 #ffffff59,
      0 2px 0 var(--k-edge),
      0 12px 24px -12px #050d26b3;

    &::after {
      background-image: linear-gradient(100deg, transparent 35%, #ffffff40 50%, transparent 65%);
    }
  }
  .lead,
  p {
    color: #cfe0f3;
  }
  .link-more {
    color: #c8eaef;
  }
}

/* ---------- BUTTON ----------
   زرار بارز 3D: جسم متدرّج + إضاءة فوق + bevel تحت + حافة سميكة (--b-edge)
   بيطلع مع الـ hover وبيتضغط مع الضغط */
.btn {
  --ink: var(--if-royal);
  --b-edge: var(--if-deep); /* لون سُمك الزرار */
  --b-depth: 4px; /* سُمك الزرار */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  isolation: isolate;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--if-royal) 82%, #ffffff), var(--if-deep));
  border: 1px solid #ffffff45;
  border-radius: 31px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 #ffffff66,
    inset 0 -3px 0 #0b1c4a59,
    0 var(--b-depth) 0 var(--b-edge),
    0 calc(var(--b-depth) + 10px) 22px -8px #050d2699;
  transition:
    translate 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 300ms,
    color 500ms,
    letter-spacing 500ms;
  padding: 14px 22px;
  font-size: 0.9rem;
  min-height: 44px;

  /* اللوح الفاتح اللي بيتمد مع الـ hover (بإضاءة وbevel كمان) */
  &::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    z-index: -1;
    width: 77%;
    height: 100%;
    background: linear-gradient(190deg, #ffffff, #c8eaef);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -3px 0 color-mix(in srgb, var(--if-royal) 14%, transparent);
    border-radius: 0 0 31px 0;
    transition: 500ms cubic-bezier(0, 0, 0.2, 1);
  }
  html[dir="rtl"] &::after {
    border-radius: 0 0 0 31px;
  }
  /* لمعة بتعدّي (نفس لمعة الـ kicker) */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg, transparent 35%, #ffffff8c 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: 150% 0;
    animation: kicker-shine 5s ease-in-out infinite;
    pointer-events: none;
  }
  &:hover {
    --b-depth: 6px;
    translate: 0 -3px;
  }
  &:active {
    --b-depth: 1px;
    translate: 0 3px;
    transition-duration: 80ms;
  }
  &:hover::after {
    width: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    &::before {
      animation: none;
    }
  }
  html[lang="en"] &:hover {
    letter-spacing: 0.5px;
  }
  &:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }

  .btn-text {
    position: relative;
    z-index: 1;
  }
  .icon {
    position: relative;
    z-index: 1;
    font-size: 1.2rem;
    transition: translate 0.25s;
    color: #fff;
  }

  /* السهم في خانة ثابتة آخر الزرار، على الجزء الغامق دايمًا:
     اللوح الفاتح = العرض كله ناقص الخانة دي (بدل 77% اللي كانت بتختلف مع عرض الزرار) */
  --arrow-slot: 52px;
  &:has(.btn-arrow) {
    /* !important عشان مقاسات الـ padding الخاصة ببعض الأزرار ما تاكلش مكان السهم */
    padding-inline-end: calc(var(--arrow-slot) + 6px) !important;
  }
  &:has(.btn-arrow)::after {
    width: calc(100% - var(--arrow-slot));
  }
  /* لازم يجي بعد اللي فوقه: نفس الـ specificity، فالأخير هو اللي بيكسب */
  &:has(.btn-arrow):hover::after {
    width: 100%;
  }
  .btn-arrow {
    position: absolute;
    inset-block: 0;
    margin-block: auto;
    inset-inline-end: calc((var(--arrow-slot) - 1.2rem) / 2);
  }
  &:hover .btn-arrow {
    translate: -5px 0;
    color: var(--ink);
  }
  html[dir="ltr"] & .btn-arrow {
    transform: rotate(180deg);
  }
  html[dir="ltr"] &:hover .btn-arrow {
    translate: 5px 0;
  }

  /* Secondary: ghost on navy glass */
  &.btn-ghost {
    --b-edge: #0b1c4a99;
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--if-royal) 55%, transparent), color-mix(in srgb, var(--if-deep) 80%, transparent));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    &::after {
      width: 0;
      border-radius: 31px;
      background: linear-gradient(190deg, #ffffff, #c8eaef);
    }
    html[dir="rtl"] &::after {
      border-radius: 31px;
    }
    &:hover {
      color: var(--ink);
    }
    &:hover .icon {
      color: var(--ink);
    }
    &:hover::after {
      width: 100%;
    }
  }

  /* حالة "قريبًا" */
  &.is-soon {
    opacity: 0.6;
    cursor: not-allowed;
  }
  &.is-soon:hover,
  &.is-soon:active {
    --b-depth: 4px;
    translate: none;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- PLATFORM LINK + "SOON" BADGE ---------- */
.platform-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  .soon-badge {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 99px;
    background: linear-gradient(190deg, #ffffff, #c8eaef);
    color: var(--navy);
  }
  &:not(.is-soon) .soon-badge {
    display: none;
  }
  &.is-soon {
    cursor: default;
  }
}
.coming-soon {
  font-size: 0.85rem;
  color: var(--gold-ink);
  font-weight: 700;
}

/* ---------- EYEBROW (شارة فوق العنوان) ---------- */
/* نفس شارة الـ kicker (النسخة الفاتحة): كبسولة بارزة 3D + مكعب بيلف + لمعة بتعدّي */
.eyebrow {
  --k-edge: #0b1c4a59;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 14px 8px 20px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--if-royal);
  /* وش فاتح + حدود متدرجة من الهوية */
  background:
    linear-gradient(180deg, #ffffff, #eef3fb) padding-box,
    linear-gradient(120deg, var(--if-mint), var(--if-teal)) border-box;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 color-mix(in srgb, var(--if-royal) 10%, transparent),
    0 2px 0 var(--k-edge),
    0 12px 24px -12px #050d26b3;
  transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;

  html[dir="rtl"] & {
    padding: 8px 20px 8px 14px;
  }

  /* لمعة بتعدّي على الشارة */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 35%, #ffffffcc 50%, transparent 65%);
    background-size: 300% 100%;
    background-position: 150% 0;
    animation: kicker-shine 4.5s ease-in-out infinite;
    pointer-events: none;
  }

  &:hover {
    translate: 0 -2px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 color-mix(in srgb, var(--if-royal) 10%, transparent),
      0 4px 0 var(--k-edge),
      0 18px 28px -12px #050d26cc;
  }

  .eyebrow-text {
    background: linear-gradient(90deg, var(--if-royal), var(--if-steel));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* النقطة بقت مكعب صغير بألوان الهوية بيلف 3D (نفس مكعب الـ kicker) */
  .eyebrow-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--if-mint), var(--if-teal) 45%, var(--if-royal));
    box-shadow:
      inset 1.5px 1.5px 0 #ffffffb3,
      inset -1.5px -1.5px 0 #0b1c4a40,
      0 3px 6px -1px #050d2699;
    animation: kicker-cube 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    &::after,
    .eyebrow-dot {
      animation: none;
    }
  }
}

/* ---------- SECTION BADGE (شارة عنوان القسم: رقم + عنوان) ---------- */
.section-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 6px;
  padding-inline: 6px 22px;
  border-radius: 99px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--teal) 10%, var(--surf)),
    var(--surf) 55%,
    color-mix(in srgb, var(--gold) 14%, var(--surf))
  );
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--navy) 45%, transparent);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;

  /* حدود متدرجة (نفس أسلوب .eyebrow) */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
      115deg,
      var(--gold) 0%,
      color-mix(in srgb, var(--if-royal) 20%, transparent) 35%,
      var(--teal) 70%,
      color-mix(in srgb, var(--if-teal) 0%, transparent) 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box exclude,
      linear-gradient(#000 0 0);
  }
  /* لمعة خفيفة */
  &::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 40%;
    pointer-events: none;
    inset-inline-start: -60%;
    background: linear-gradient(100deg, transparent, #ffffff80, transparent);
    transform: skewX(-20deg);
    animation: badge-shine 5s ease-in-out infinite;
  }
  .section-badge-number {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0;
    background: linear-gradient(190deg, #ffffff, #c8eaef);
    color: var(--navy);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--if-teal) 12%, transparent),
      0 6px 14px -6px color-mix(in srgb, var(--navy) 50%, transparent);
  }
  .section-badge-title {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
  }
}
@keyframes badge-shine {
  0%,
  55% {
    inset-inline-start: -60%;
  }
  100% {
    inset-inline-start: 130%;
  }
}

/* ---------- LINK WITH ARROW ---------- */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--teal-ink);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.3s;

  &:hover {
    gap: 16px;
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
  .section-dark &,
  .cta & {
    color: #c8eaef;
  }
}

/* ---------- CARD ---------- */
.card {
  position: relative;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  transition:
    translate 0.3s,
    box-shadow 0.3s,
    border-color 0.3s;

  &:hover {
    translate: 0 -6px;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--if-royal) 13%, transparent);
    border-color: var(--teal);
  }
  &:hover .icon-box {
    background: linear-gradient(135deg, var(--teal), var(--navy2));
    color: #fff;
    transform: rotate(-6deg) scale(1.08);
  }
  h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
  }
  p {
    margin: 0;
    color: var(--mut);
    font-size: 0.92rem;
  }
  @media (hover: none) {
    &:hover {
      translate: none;
      scale: none;
    }
  }
}

/* ---------- ROUND ARROW BUTTON ---------- */
.arrow-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  border: 1px solid var(--line);
  transition:
    transform 0.45s,
    background-color 0.45s,
    border-color 0.45s,
    color 0.45s;

  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
}

/* ---------- TABS ---------- */
.tabs {
  position: relative;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  scrollbar-width: none;

  .tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid var(--line);
    background: var(--surf);
    color: var(--ink);
    border-radius: 99px;
    padding: 8px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.25s;

    .icon {
      font-size: 1.1rem;
    }
    &.is-active,
    &:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
    }
    /* مع GSAP: المؤشر المتزحلق هو الخلفية */
    .gsap-enabled & {
      position: relative;
      z-index: 1;
    }
    .gsap-enabled &.is-active {
      background: transparent;
      border-color: transparent;
      color: #fff;
    }
  }
  .tab-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 99px;
    background: var(--navy);
    pointer-events: none;
  }

  @media (max-width: 860px) {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    .tab {
      white-space: nowrap;
    }
  }
}

/* ---------- LOGO ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  /* لوجو الفوتر: اللوجو الرسمي الملوّن */
  .logo-img {
    width: 230px;
  }

  .logo-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--teal), var(--gold));
    display: grid;
    place-items: center;
    font-style: normal;
    color: #ffffff;
    font-size: 1.3rem;
  }
}

/* ---------- WORD SPLIT (GSAP) ---------- */
/* قناع الكلمات: العربي بيتقسم كلمات مش حروف عشان الحروف تفضل متشبكة */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.06em 0.22em;
  margin: -0.14em -0.06em -0.22em;
}
.word-inner {
  display: inline-block;
}

/* =====================================================
   3) GLOBAL UI (progress / back-to-top / cursor)
   ===================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform-origin: 0 50%;
  transform: scaleX(0);

  html[dir="rtl"] & {
    transform-origin: 100% 50%;
  }
}

.back-to-top {
  position: fixed;
  inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: #ffffff;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 8px 24px #0006;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 40;
  display: grid;
  place-items: center;

  &.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* مؤشر الماوس */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  pointer-events: none;
  opacity: 0;
  transition:
    width 0.3s,
    height 0.3s,
    margin 0.3s,
    background-color 0.3s,
    border-color 0.3s,
    opacity 0.3s;

  &.is-active {
    opacity: 1;
  }
  &.is-hover {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    background: color-mix(in srgb, var(--if-teal) 12%, transparent);
    border-color: var(--gold);
  }
}

/* =====================================================
   4) HEADER
   ===================================================== */
.header {
  --bar: #fff;
  --sc: 34px;
  position: fixed;
  inset: 5px 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
  transition: top 0.3s ease;

  /* أول ما الصفحة تتسكرل (الكلاس من site.js) */
  &.is-scrolled {
    inset: 0 0 auto;
  }

  .header-wrapper {
    display: flex;
    justify-content: center;
    padding: 0;
    direction: ltr;
    filter: drop-shadow(0 8px 14px #00000040);
  }

  .header-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 0.8rem 1rem;
    border-radius: 0 0 30px 30px;
    background: var(--bar);

    html[dir="rtl"] & {
      direction: rtl;
    }
    html[dir="ltr"] & {
      direction: ltr;
    }
    .logo {
      margin-inline: 6px 10px;
      white-space: nowrap;
    }
  }

  .header-scoop-left,
  .header-scoop-right {
    min-width: var(--sc);
    height: var(--sc);
  }
  .header-scoop-left {
    background-image: radial-gradient(
      circle var(--sc) at bottom left,
      transparent calc(var(--sc) - 0.6px),
      var(--bar) var(--sc)
    );
  }
  .header-scoop-right {
    background-image: radial-gradient(
      circle var(--sc) at bottom right,
      transparent calc(var(--sc) - 0.6px),
      var(--bar) var(--sc)
    );
  }

  .menu-toggle {
    display: none;
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;

    a,
    .lang-toggle {
      display: inline-block;
      padding: 0.5rem 0.85rem;
      border-radius: 12px;
      font: inherit;
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.4;
      white-space: nowrap;
      transition:
        background-color 0.25s,
        color 0.25s,
        transform 0.25s;
    }
    a {
      background: #fff;
      color: var(--navy);

      &:hover {
        background: var(--teal);
        color: var(--if-text);
        transform: translateY(-2px);
      }
      /* الصفحة الحالية: مش زرار (عشان ما تتلخبطش مع "سجّل الآن")
         نص ملكي + مكعب الهوية بيلف + خط متدرّج بلمعة تحت الكلمة */
      &.is-active {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: color-mix(in srgb, var(--if-teal) 8%, #fff);
        color: var(--if-royal);

        &::before {
          content: "";
          flex: none;
          width: 9px;
          height: 9px;
          border-radius: 2.5px;
          background: linear-gradient(135deg, var(--if-mint), var(--if-teal) 45%, var(--if-royal));
          box-shadow:
            inset 1px 1px 0 #ffffffb3,
            inset -1px -1px 0 #0b1c4a40,
            0 2px 4px -1px color-mix(in srgb, var(--if-royal) 55%, transparent);
          animation: kicker-cube 5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
        }
    
        &:hover {
          background: color-mix(in srgb, var(--if-teal) 14%, #fff);
          color: var(--if-royal);
        }
        @media (prefers-reduced-motion: reduce) {
          &::before,
          &::after {
            animation: none;
          }
        }
      }
      /* زر سجّل الآن */
      &.nav-register {
        background: var(--gold);
        color: #ffffff;
      }
      &.nav-register:hover {
        background: var(--teal);
        color: var(--if-text);
      }
      /* زر المنصة */
      &.platform-link {
        background: var(--navy);
        color: #fff;
      }
      &.platform-link:hover {
        background: var(--navy2);
        color: #fff;
      }
      &.platform-link.is-soon:hover {
        transform: none;
      }
    }
    .lang-toggle {
      border: 1px solid #0000007b;
      background: transparent;
      cursor: pointer;
    }
    .lang-toggle:hover {
      background: #ffffff22;
    }

    /* أهداف لمس مريحة */
    @media (pointer: coarse) {
      a,
      .lang-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  @media (max-width: 1240px) {
    --sc: 26px;
    .header-bar {
      width: calc(100% - 2 * var(--sc));
      max-width: 560px;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0;
    }
    .menu-toggle {
      display: block;
    }
    .nav-links {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-top: 12px;

      &.is-open {
        display: flex;
      }
      a,
      .lang-toggle {
        text-align: center;
      }
    }
  }
}

/* =====================================================
   5) HERO
   ===================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  min-height: calc(100svh - 60px);
  padding: 116px 0 0;
  color: #f5f9ff;
  overflow: clip;
  background: var(--if-royal);
  margin: 6px 4px;
  border-radius: 20px;
  /* حافة فاتحة من جوه + ظل بره عشان الهيرو يبان كبلوك بارز عن الصفحة */
  box-shadow:
    inset 0 1px 0 #ffffff33,
    inset 0 0 0 1px #ffffff14,
    0 30px 70px -30px #0b1c4ab3;

  > .container {
    width: 100%;
  }

  /* مربعات الهوية */
  .hero-pixels {
    position: absolute;
    z-index: 1;
    width: 190px;
    height: auto;
    opacity: 0.85;
    pointer-events: none;
    top: 0;
    left: 0;
    overflow: visible;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
      /* سبوت لايت ورا المجسّم في النص */
      radial-gradient(
        38% 55% at 50% 62%,
        color-mix(in srgb, var(--if-teal) 55%, transparent),
        transparent 70%
      ),
      radial-gradient(
        55% 55% at 82% 30%,
        color-mix(in srgb, var(--if-teal) 27%, transparent),
        transparent 70%
      ),
      /* تغميق الأطراف (vignette) عشان النص والمجسّم يبرزوا */
      radial-gradient(
        120% 90% at 50% 45%,
        transparent 45%,
        #0b1c4a99 100%
      ),
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--if-royal) 80%, #0b1c4a) 0%,
        var(--if-royal) 50%,
        var(--if-steel) 100%
      );

    /* أرضية شبكية بمنظور تحت المجسّم */
    &::before {
      content: "";
      position: absolute;
      inset: auto -10% 0;
      height: 48%;
      background-image:
        linear-gradient(#ffffff1f 1px, transparent 1px),
        linear-gradient(90deg, #ffffff1f 1px, transparent 1px);
      background-size: 64px 64px;
      background-position: center bottom;
      transform: perspective(520px) rotateX(62deg);
      transform-origin: 50% 100%;
      -webkit-mask: linear-gradient(transparent, #000 70%);
      mask: linear-gradient(transparent, #000 70%);
      pointer-events: none;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.5;
      background: url("../images/desix-bg.png") no-repeat center/cover;
    }
  }

  .hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: orb-float 16s ease-in-out infinite;
  }
  .hero-orb-1 {
    width: 380px;
    height: 380px;
    background: color-mix(in srgb, var(--if-teal) 22%, transparent);
    inset-block-start: -100px;
    inset-inline-start: -80px;
  }
  .hero-orb-2 {
    width: 420px;
    height: 420px;
    background: color-mix(in srgb, var(--if-royal) 18%, transparent);
    inset-block-end: 60px;
    inset-inline-end: -120px;
    animation-delay: -7s;
  }

  /* شبكة الهيرو: هي المرجع لمحاذاة باقي السكاشن */
  .hero-grid {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr) minmax(0, 0.95fr);
    grid-template-areas: "intro visual content";
    gap: 0 clamp(16px, 2.4vw, 40px);
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 20px 0;
  }

  /* العمود الأول: الشارة + العنوان + شعار الرؤية */
  .hero-intro {
    grid-area: intro;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-top: clamp(8px, 4vh, 48px);
  }
  .hero-title {
    margin: 0 0 10px;
    /* عنوان طويل (٦ كلمات): حجم أصغر عشان يفضل ٣ سطور وما يزقّش الصورة لتحت */
    font-size: clamp(1.9rem, 2.7vw, 2.9rem);
    font-weight: 800;
    line-height: 1.35;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 14px #0b1c4a59; /* فصل ناعم عن الخلفية */

    html[lang="en"] & {
      line-height: 1.12;
      letter-spacing: -0.02em;
    }
    /* الكلمات المميزة: أبيض لمنت صافي.
       الظل بـ drop-shadow مش text-shadow (الـ text-shadow بيبان من تحت النص الشفاف ويطفّي اللون) */
    b {
      position: relative;
      display: inline-block;
      color: transparent;
      background: linear-gradient(180deg, #ffffff 30%, var(--if-mint));
      -webkit-background-clip: text;
      background-clip: text;
      text-shadow: none;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* نفس قيم الـ text-shadow الأصلي */
    }
  }
  .hero-subtitle {
    margin: 0 0 16px;
    font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    line-height: 1.6;
    font-weight: 600;
    color: #eaf3fb;

    html[lang="en"] & {
      line-height: 1.2;
    }
  }

  /* شعار رؤية 2030: بلاطة بارزة 3D
     (الطفو والميلان بخاصيتي translate/rotate عشان ما يتعارضوش مع transform بتاع GSAP) */
  .hero-intro {
    perspective: 900px;
  }
  .vision-badge {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    /* علامة ثقة مش عنصر بطل: الحجم الأصلي، والهدوء جاي من الوش الزجاجي والبروز الخفيف */
    padding: 20px 22px;
    border: 1px solid transparent;
    border-radius: 22px;
    /* وش زجاجي شبه شفاف بيذوب في الهيرو + حدود رفيعة هادية */
    background:
      linear-gradient(160deg, #ffffff1f, #ffffff08) padding-box,
      linear-gradient(140deg, #ffffff40, #ffffff0d 50%, #ffffff26) border-box;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* بروز خفيف: لمعة فوق + سُمك 2px + ظل ناعم قريب */
    box-shadow:
      inset 0 1px 0 #ffffff33,
      0 2px 0 #0b1c4a4d,
      0 10px 22px -14px #050d2699;
    animation: badge-float 6s ease-in-out infinite;
    transition: rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);

    /* لمعان زجاجي على النص اللي فوق */
    &::before {
      content: "";
      position: absolute;
      inset: 0 0 52% 0;
      z-index: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, #ffffff2e, transparent);
      pointer-events: none;
    }
    /* لمعة بتعدّي (نفس لمعة الـ kicker) */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(100deg, transparent 35%, #ffffff2e 50%, transparent 65%);
      background-size: 300% 100%;
      background-position: 150% 0;
      animation: kicker-shine 6s ease-in-out infinite;
      pointer-events: none;
    }
    /* ميلان 3D مع الماوس */
    &:hover {
      rotate: -1 1 0 6deg;
    }

    img {
      position: relative;
      z-index: 1;
      display: block;
      width: clamp(92px, 9vw, 128px);
      height: auto;
      /* الشعار نفسه بارز: حافة + ظل */
      filter: drop-shadow(0 4px 10px #0b1c4a66);
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;
      &::after {
        animation: none;
      }
    }
  }

  /* العمود الأوسط: الصورة */
  .hero-visual {
    grid-area: visual;
    align-self: end;
    justify-self: center;
    width: 100%;
    max-width: 880px;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    display: grid;
    place-items: end center;
    isolation: isolate;
  }
  /* القوس: مجسّم بإضاءة من فوق + تظليل جانبي (كأنه أسطوانة) + لوح خلفي بيدّيه سُمك */
  .hero-arch {
    position: absolute;
    inset: -28% 0% 0;
    border-radius: 999px 999px 0 0;
    background:
      /* لمعة الإضاءة من فوق */
      radial-gradient(70% 45% at 50% 0%, #ffffff47, transparent 70%),
      /* تظليل الجوانب */
      linear-gradient(90deg, #0b1c4a66, transparent 22%, transparent 78%, #0b1c4a66),
      /* جسم القوس */
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--if-teal) 88%, #ffffff) 0%,
        var(--if-teal) 30%,
        color-mix(in srgb, var(--if-steel) 70%, var(--if-royal)) 70%
      );
    box-shadow:
      inset 0 2px 0 #ffffffa6,
      inset 0 30px 60px #ffffff1f,
      inset 0 -80px 90px #0b1c4a73,
      0 40px 90px -30px #071233cc;
    z-index: -1;

    /* حافة مضيئة على القوس من فوق */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(180deg, #e9fffb 0%, #8ff3e6aa 25%, transparent 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      pointer-events: none;
    }
  }
  /* لوح خلفي ورا القوس مزاح لتحت وللجنب = سُمك المجسّم
     (على .hero-visual مش جوه القوس، عشان يترسم وراه مش فوقه) */
  /* .hero-visual::before {
    content: "";
    position: absolute;
    inset: calc(-28% - 14px) -14px 0;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--if-royal) 70%, #0b1c4a), #071233);
    transform: translate(18px, 10px);
    box-shadow: 0 30px 60px -20px #050d26b3;
    z-index: -3;
  } */
  /* ظل/توهّج الأرضية تحت المجسّم */
  .hero-visual::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 4%;
    right: 4%;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #8ff3e680, color-mix(in srgb, var(--if-teal) 35%, transparent) 55%, transparent);
    filter: blur(8px);
    z-index: -3;
    pointer-events: none;
  }
  .hero-glow {
    position: absolute;
    bottom: 10%;
    width: 78%;
    height: 70%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--if-teal) 22%, transparent);
    filter: blur(80px);
    z-index: -2;
  }
  .hero-image {
    display: block;
    width: 100%;
    height: 410px;
    object-fit: contain;
    object-position: 50% 100%;
    /* ظل للعمق + هالة فاتحة حوالين الأشخاص تفصلهم عن القوس */
    filter: drop-shadow(0 30px 40px #0009) drop-shadow(0 0 28px #8ff3e640);
    transform-origin: 50% 100%;
    transform: scale(1.12);

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

  /* العمود الثالث: النص + الأزرار */
  .hero-content {
    grid-area: content;
    align-self: end;
    display: flex;
    flex-direction: column;
    /* gap: 22px; */
    padding-bottom: 48px;
    min-width: 0;
  }
  /* لوجو النص فوق البراجراف: أبيض عشان يبان على خلفية الهيرو الزرقا */
  .hero-brand {
    display: block;
    width: min(300px, 80%);
    height: auto;
    margin-bottom: -10px;
    filter: brightness(0) invert(1);

    /* تابلت/موبايل: الهيرو بيبقى عمود واحد واللوجو بيقع بين العنوان والبراجراف
       تحت لوجو الهيدر على طول = تكرار، فبيختفي */
    @media (max-width: 980px) {
      display: none;
    }
  }
  .hero-lead {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 26px 0px 22px;
    border: 0;
    color: #e8f0fa; /* أوضح على الخلفية الأغمق */
    font-size: 1.08rem;
    line-height: 1.8;
    text-wrap: pretty;

    /* &::after {
      content: "";
      position: absolute;
      inset-inline-start: 10px;
      width: 2px;
      height: 70%;
      border-radius: 3px;
      background: linear-gradient(
        92deg,
        var(--gold),
        color-mix(in srgb, var(--if-royal) 0%, transparent)
      );
      top: 50%;
      transform: translateY(-50%);
    } */
  }
  .hero-content .actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;

    @media (max-width: 1200px) {
      flex-wrap: wrap;
    }
  }

  /* دخول العناصر (بدون GSAP) */
  .fade-up {
    animation: rise-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--d) * 1s);

    .gsap-enabled & {
      animation: none;
      visibility: hidden;
    }
  }

  @media (max-width: 980px) {
    min-height: 0;
    padding-top: 104px;

    .hero-pixels {
      width: 96px;
      opacity: 0.55;
    }
    /* موبايل: عمود واحد بترتيب القراءة:
       الشارة ← العنوان ← الوصف والأزرار ← شعار الرؤية ← الصورة
       (hero-intro بـ display: contents عشان عناصره تترتب مع الباقي بـ order) */
    .hero-grid {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding-block: 8px 0;
    }
    .hero-intro {
      display: contents;
    }
    .eyebrow {
      order: 1;
      align-self: flex-start;
      margin-bottom: 0;
    }
    .hero-title,
    .hero-subtitle {
      order: 2;
      margin: 0;
    }
    .hero-content {
      order: 3;
    }
    .vision-badge {
      order: 4;
      align-self: flex-start;
      margin-top: 0;
    }
    .hero-visual {
      order: 5;
      align-self: center;
    }
    .hero-content {
      padding-bottom: 0;
    }
    .hero-content .actions {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .hero-content .btn {
      flex: 1 1 150px;
      width: auto;
      padding: 18px;
    }
    .hero-visual {
      max-width: 520px;
      margin-bottom: 0;
      /* القوس طالع فوق الصورة بـ 28% (inset سالب) — المسافة دي تمنعه يغطي أزرار الهيرو */
      margin-top: 26%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .eyebrow-dot,
    .hero-orb {
      animation: none !important;
    }
  }
}

/* =====================================================
   6) HIGHLIGHTS STRIP (شريط 3D بيتمرجح مع أول سكرول)
   ===================================================== */
.highlights-zone {
  position: relative;
  z-index: 5;
  margin-top: -6px;
  padding: 0;
  perspective: 1000px;
  perspective-origin: 50% -10%;
  pointer-events: none;

  .highlights-hold {
    position: relative;

    &.is-active .highlights-shadow {
      opacity: 0.7;
      animation: highlights-cast 3.4s both;
    }
  }
  .highlights-shadow {
    position: absolute;
    inset-inline: 7%;
    bottom: -30px;
    height: 44px;
    z-index: -1;
    filter: blur(12px);
    opacity: 0;
    transform-origin: 50% 0;
    @media (prefers-reduced-motion: reduce) {
      opacity: 0.7;
    }
  }

  .highlights {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 14px 32px;
    background: #fff;
    box-shadow: 0 20px 50px color-mix(in srgb, var(--if-royal) 8%, transparent);
    border: 1px solid #d0d5dd;
    border-top: 0;
    border-radius: 0 0 36px 36px;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    will-change: transform;
    transform: translate3d(0, -14px, 0) rotateX(-92deg);
    opacity: 0;
    visibility: hidden;
    backface-visibility: hidden;

    &.is-swinging {
      visibility: visible;
      opacity: 1;
      animation: highlights-swing 3.4s both;
    }
    &.is-settled {
      animation: none;
      transform: none;
      opacity: 1;
      visibility: visible;
    }
    @media (prefers-reduced-motion: reduce) {
      transform: none;
      opacity: 1;
      visibility: visible;
    }
  }

  .highlights-pin {
    position: absolute;
    top: -5px;
    z-index: 4;
    width: 38px;
    height: 15px;
    border-radius: 5px 5px 9px 9px;
    background: linear-gradient(
      180deg,
      #ffffff,
      var(--if-royal) 55%,
      var(--if-royal)
    );
    box-shadow:
      0 3px 8px rgba(2, 18, 43, 0.45),
      inset 0 1px 0 #fff9;

    &::after {
      content: "";
      position: absolute;
      inset: 4px auto auto 50%;
      width: 6px;
      height: 6px;
      margin-inline-start: -3px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff, #7a5412);
      box-shadow: 0 1px 1px #0006;
    }
  }
  .pin-start {
    inset-inline-start: 7%;
  }
  .pin-end {
    inset-inline-end: 7%;
  }

  .highlight-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-radius: 22px;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      background-color 0.3s;

    & + &::before {
      content: "";
      position: absolute;
      inset-block: 14% 14%;
      inset-inline-start: 0;
      width: 1px;
      background: linear-gradient(transparent, #d0d5dd, transparent);
    }
    &:hover .highlight-icon {
      transform: scale(1.08) rotate(-5deg);
      box-shadow:
        0 0 0 2px var(--teal),
        0 0 0 8px color-mix(in srgb, var(--if-teal) 15%, transparent),
        0 12px 22px -8px rgba(10, 35, 66, 0.4);
    }
  }
  .highlight-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    padding: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffffff, #eaf6f8 70%);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--if-teal) 25%, transparent),
      0 0 0 6px color-mix(in srgb, var(--if-teal) 10%, transparent),
      0 8px 16px -6px rgba(10, 35, 66, 0.3);
    transition:
      transform 0.4s,
      box-shadow 0.4s;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
  }
  .highlight-title {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.5;
  }
  .highlight-desc {
    display: block;
    font-size: 0.85rem;
    color: #55667a;
    line-height: 1.5;
  }

  @media (max-width: 980px) {
    perspective: 800px;

    .highlights {
      grid-template-columns: 1fr 1fr;
      gap: 6px 0;
      padding: 34px 10px 24px;
      border-radius: 0 0 28px 28px;
    }
    .highlight-item {
      padding: 10px 12px;
      gap: 12px;
    }
    .highlight-item:nth-of-type(3)::before {
      display: none;
    }
    .highlight-icon {
      width: 50px;
      height: 50px;
      padding: 7px;
    }
    .highlight-title {
      font-size: 0.9rem;
    }
    .highlight-desc {
      font-size: 0.8rem;
    }
    .highlights-pin {
      width: 30px;
    }
  }
  @media (max-width: 480px) {
    .highlight-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
  }
}

@keyframes highlights-swing {
  0% {
    transform: translate3d(0, -14px, 0) rotateX(-92deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1);
  }
  4% {
    opacity: 1;
  }
  19% {
    transform: translate3d(0, 0, 0) rotateX(52deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  35% {
    transform: translate3d(0, 0, 0) rotateX(-27deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  50% {
    transform: translate3d(0, 0, 0) rotateX(15deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  63% {
    transform: translate3d(0, 0, 0) rotateX(-8.5deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  75% {
    transform: translate3d(0, 0, 0) rotateX(4.5deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  85% {
    transform: translate3d(0, 0, 0) rotateX(-2.2deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  93% {
    transform: translate3d(0, 0, 0) rotateX(0.9deg);
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg);
    opacity: 1;
  }
}
@keyframes highlights-cast {
  0% {
    opacity: 0;
    transform: scale(0.6, 0.4);
  }
  19% {
    opacity: 0.95;
    transform: scale(1.05, 1.5) translateY(14px);
  }
  35% {
    opacity: 0.55;
    transform: scale(0.9, 0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1, 1.2) translateY(8px);
  }
  63% {
    opacity: 0.6;
    transform: scale(0.95, 0.95);
  }
  78% {
    opacity: 0.72;
    transform: scale(1, 1.05) translateY(3px);
  }
  100% {
    opacity: 0.7;
    transform: scale(1, 1);
  }
}

/* =====================================================
   7) كلمة المستشارة — تصميم بوستر
   ===================================================== */
.advisor-poster {
  padding-block: clamp(70px, 9vw, 130px);
  perspective: 1600px;
}
.poster {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 40px;
  color: #fff;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 4vw, 56px) 0;
  background:
    radial-gradient(70% 60% at 85% 10%, color-mix(in srgb, var(--if-teal) 38%, transparent), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--if-royal) 70%, transparent), transparent 70%),
    linear-gradient(160deg, #0d1f4f, var(--if-deep) 45%, #142b66);
  box-shadow:
    inset 0 1px 0 #ffffff2e,
    inset 0 -3px 0 #0006,
    0 6px 0 #0b1c4a,
    0 50px 90px -40px color-mix(in srgb, var(--if-deep) 85%, transparent);
  transform-origin: 50% 100%;


  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
  }
}
/* كلمة ضخمة مفرّغة في الخلفية */
/* لوجو الاسم (text-logo) كعلامة مائية — أبيض شفاف فوق خلفية البوستر الغامقة.
   العنصر نفسه فاضل (GSAP بيحرّكه مع السكرول)، والكلمة اللي جواه مخفية */
.poster-watermark {
  position: absolute;
  z-index: -1;
  /* جهة عمود النص (end = يمين في الإنجليزي / شمال في العربي) وعرضه على قد العمود،
     عشان الكلمة تبان كاملة وما تدخلش ورا الصورة (كانت 92% فبتتقص "IMPACTFO…" في العربي) */
  inset-inline-end: 3%;
  bottom: 54px;
  width: min(54%, 700px);
  aspect-ratio: 472 / 58;
  font-size: 0;
  color: transparent;
  background: url("../images/text-logo.svg") no-repeat center / contain;
  filter: brightness(0) invert(1); /* اللوجو أزرق → أبيض */
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

/* الشريط العلوي */
.poster-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid #ffffff1f;
  font-size: 0.85rem;

  img {
    display: block;
    width: clamp(110px, 12vw, 150px);
    height: auto;
  }
}
.poster-label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--if-mint);
}
.poster-issue {
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid #ffffff38;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.poster-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(34px, 5vw, 64px);
}

/* الصورة: إطار قوسي + خط متوازي + ختم دوّار */
.poster-photo {
  position: relative;
  margin: 0;
  padding: 14px 0 0 14px;
  max-width: 440px;
  justify-self: center;
  width: 100%;
}
.poster-arch,
.poster-arch-line {
  display: block;
  border-radius: 999px 999px 28px 28px;
  aspect-ratio: 4 / 5;
}
.poster-arch {
  position: relative;
  overflow: hidden;
  background: var(--if-royal);
  box-shadow:
    inset 0 0 0 1px #ffffff2e,
    0 6px 0 #0b1c4a,
    0 40px 60px -30px #000c;

  img {
    display: block;
    width: 100%;
    height: 112%;
    object-fit: cover;
    object-position: 50% 18%;
    filter: saturate(0.92) contrast(1.04);
  }
  /* تدرّج بلون الهوية من تحت عشان الصورة تندمج مع البوستر */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--if-deep) 75%, transparent)),
      linear-gradient(200deg, color-mix(in srgb, var(--if-teal) 22%, transparent), transparent 45%);
  }
}
.poster-arch-line {
  position: absolute;
  inset: 0 14px 14px 0;
  border: 1.5px solid color-mix(in srgb, var(--if-mint) 70%, transparent);
  aspect-ratio: auto;
}
.poster-stamp {
  position: absolute;
  width: clamp(96px, 11vw, 132px);
  bottom: 12%;
  inset-inline-start: -8%;
  animation: poster-spin 18s linear infinite;
  filter: drop-shadow(0 12px 18px #0008);

  circle {
    fill: color-mix(in srgb, var(--if-mint) 92%, #fff);
  }
  text {
    direction: ltr; /* النص على المسار الدائري لازم يبقى LTR وإلا بيختفي في الصفحة العربي */
    font-size: 15px;
    font-weight: 700;
    fill: var(--if-deep);
    font-family: inherit;
  }
}
.poster-stamp-core {
  position: absolute;
  width: clamp(96px, 11vw, 132px);
  aspect-ratio: 1;
  bottom: 12%;
  inset-inline-start: -8%;
  display: grid;
  place-items: center;
  pointer-events: none;

  .icon {
    width: 36%;
    height: 36%;
    padding: 8px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(150deg, var(--if-royal), var(--if-deep));
    box-shadow: 0 3px 0 #0b1c4a;
    rotate: 135deg;
  }
  html[dir="ltr"] & .icon {
    rotate: 45deg;
  }
}
@keyframes poster-spin {
  to {
    rotate: 360deg;
  }
}
.poster-tag {
  position: absolute;
  top: 18%;
  inset-inline-end: -6%;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--if-deep) 55%, transparent);
  border: 1px solid #ffffff3d;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 #ffffff33, 0 14px 24px -12px #000a;
  rotate: -4deg;
}

/* النص */
.poster-copy {
  position: relative;
  min-width: 0;
}
.poster-mark {
  display: block;
  height: 0.5em;
  margin-bottom: 0.15em;
  font-size: clamp(6rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: 0.9;
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(180deg, var(--if-mint), var(--if-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.poster-quote {
  margin: 0;
  font-size: clamp(1.6rem, 3.3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;

  b {
    color: var(--if-mint);
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--if-teal) 40%, transparent) 62% 92%, transparent 92%);
  }
}
.poster-excerpt {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: 1.02rem;
  line-height: 1.95;
  color: #c9d8ee;
}
.poster-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;

  b {
    display: block;
    font-size: 1.05rem;
    color: #fff;
  }
  small {
    display: block;
    margin-top: 2px;
    font-size: 0.86rem;
    color: var(--if-mint);
  }
}
.poster-sign-line {
  flex: none;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--if-teal), var(--if-mint));
}
.poster-actions {
  margin-top: 30px;
}

/* نسخة "الكلمة كاملة" (صفحة من نحن): نص طويل، فالصورة بتثبت جنبه وهو بيتقري */
.advisor-poster--full {
  .poster-grid {
    align-items: start;
  }
  .poster-photo {
    position: sticky;
    top: 120px;
  }
  .poster-quote {
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  }
}
.poster-body {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #ffffff1f;
  max-width: 62ch;

  p {
    margin: 0 0 1.1em;
    font-size: 1.04rem;
    line-height: 2;
    color: #c9d8ee;
    text-wrap: pretty;
  }
  p:last-child {
    margin-bottom: 0;
  }
  /* أول فقرة أوضح شوية؛ الحرف الأول البارز للإنجليزي بس (في العربي بيفصل الحرف عن الكلمة) */
  .poster-lead {
    font-size: 1.12rem;
    color: #e6eefa;
  }
  html[dir="ltr"] & .poster-lead::first-letter {
    float: inline-start;
    margin-inline-end: 10px;
    font-size: 3.3em;
    font-weight: 800;
    line-height: 0.95;
    color: var(--if-mint);
  }
}
@media (max-width: 860px) {
  .advisor-poster--full .poster-photo {
    position: relative;
    top: auto;
  }
}

/* الشريط السفلي */
.poster-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline: calc(-1 * clamp(22px, 4vw, 56px));
  padding: 16px clamp(22px, 4vw, 56px);
  border-top: 1px solid #ffffff1f;
  background: #0b1c4a66;
  font-size: 0.9rem;
  font-weight: 700;
  color: #dbe7f6;

  i {
    width: 6px;
    height: 6px;
    rotate: 45deg;
    background: var(--if-mint);
  }
}
.poster-foot-end {
  margin-inline-start: auto;
  color: var(--if-mint);
}

@media (max-width: 860px) {
  .poster {
    border-radius: 30px;
  }
  .poster-grid {
    grid-template-columns: 1fr;
  }
  .poster-photo {
    max-width: 300px;
  }
  .poster-tag {
    inset-inline-end: -4px;
  }
  .poster-stamp,
  .poster-stamp-core {
    inset-inline-start: auto;
    inset-inline-end: -14px;
    bottom: 6%;
  }
  .poster-label {
    text-align: end;
  }
  .poster-issue {
    display: none;
  }
  .poster-foot {
    flex-wrap: wrap;
    font-size: 0.82rem;
  }
  .poster-foot-end {
    flex-basis: 100%;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .poster-stamp {
    animation: none;
  }
}

/* =====================================================
   8) ABOUT
   ===================================================== */
/* ===== لمحة عن الشركة: مكعبين 3D بيلفّوا مع السكرول ===== */
.about-track {
  position: relative;
  /* كل خطوة = ارتفاع شاشة؛ المحتوى sticky جوه */
  height: calc(var(--steps) * 100svh);
  padding: 0;
}
.about-stick {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  padding-top: 70px; /* مساحة الهيدر الثابت */
  /* بقع ألوان الهوية ناعمة ورا المحتوى */
  background:
    radial-gradient(40% 50% at 12% 28%, color-mix(in srgb, var(--if-teal) 16%, transparent), transparent 70%),
    radial-gradient(38% 46% at 88% 78%, color-mix(in srgb, var(--if-royal) 14%, transparent), transparent 70%),
    var(--if-surface);

  > .container {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  /* لوجو الاسم (text-logo) كعلامة مائية كبيرة في الخلفية، بيزحف مع السكرول (--about-p من site.js)
     نفس ملف لوجو الهيدر، فالمتصفح بياخده من الكاش من غير تحميل زيادة */
  &::before {
    content: "";
    position: absolute;
    inset-inline-start: -2%;
    bottom: 4%;
    z-index: 0;
    width: min(96vw, 1180px);
    aspect-ratio: 472 / 58;
    background: url("../images/text-logo.svg") no-repeat center / contain;
    opacity: 0.07; /* هادية: خلفية مش عنصر */
    translate: calc(var(--about-p, 0) * -10%) 0;
    pointer-events: none;
  }
}

/* عمود النص: كارت زجاجي بارز */
.about-track .about-text {
  position: relative;
  min-width: 0; /* الناف جواه بتتصغّر بـ scale؛ ده بيمنع عرضها الأصلي يوسّع الكارت */
  padding: clamp(24px, 3vw, 40px);
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffffe6, #ffffffb3);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--if-royal) 12%, transparent),
    0 34px 60px -30px color-mix(in srgb, var(--if-deep) 55%, transparent);

  h2 {
    position: relative;
    color: var(--if-deep);
  }

  /* ناف المكعبات جوه الكارت: الكارت هو اللي بيتحكم في المكعبات */
  .cube-nav-wrap {
    justify-content: flex-start;
    margin-top: 24px;
  }
  .goo {
    transform-origin: top right;

    html[dir="ltr"] & {
      transform-origin: top left;
    }
  }
}
@media (max-width: 860px) {
  .about-track .about-text {
    padding: 20px;
  }
}
.about-cubes {
  --s: min(290px, 20vw); /* ارتفاع المكعب (مكعب الصور مربع، ومكعب النص ×1.45 في العرض) */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s) * 0.24);
}
.cube-stage {
  position: relative;
  display: flex;
  height: var(--s);
  perspective: 1200px;

  /* ظل المكعبين على الأرض */
  &::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: calc(var(--s) * -0.2);
    height: calc(var(--s) * 0.14);
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--if-deep) 40%, transparent), transparent);
    filter: blur(6px);
    pointer-events: none;
  }
}
.cube {
  position: relative;
  /* الدوران حوالين المحور الأفقي، فالعرض حر: مكعب النص أعرض عشان نص الرؤية والرسالة */
  width: var(--w, var(--s));
  height: var(--s);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--s) / -2));
  will-change: transform;
}
/* وجوه مكعب النص بتلف لتحت، ووجوه مكعب الصور لفوق (عكس بعض) */
.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transform: rotateX(calc(var(--f) * -90deg)) translateZ(calc(var(--s) / 2));

  .cube-image & {
    transform: rotateX(calc(var(--f) * 90deg)) translateZ(calc(var(--s) / 2));
  }
}
.cube-text {
  --w: calc(var(--s) * 1.45);
}
.cube-text .cube-face {
  background:
    radial-gradient(80% 60% at 100% 0%, #ffffff26, transparent 70%),
    var(--if-gradient);
  color: #fff;
}
.cube-image .cube-face {
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* لمسة لون الهوية على الصورة */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 40%, color-mix(in srgb, var(--if-royal) 55%, transparent));
  }
}
/* تغميق الوجوه اللي مش قدّام (بيتحسب في site.js حسب زاوية الوجه) */
.cube-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--if-deep);
  opacity: 0.6;
  pointer-events: none;
}
.cube-copy {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--s) * 0.03);
  padding: calc(var(--s) * 0.08);

  h3 {
    margin: 0;
    font-size: calc(var(--s) * 0.1);
    font-weight: 700;
    line-height: 1.3;
  }
  p {
    margin: 0;
    font-size: max(13px, calc(var(--s) * 0.047));
    line-height: 1.65;
    color: #dbe8f3;
  }
}
/* القيم الأربعة كوسوم */
.cube-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  span {
    padding: 6px 14px;
    border-radius: 99px;
    background: #ffffff1f;
    border: 1px solid #ffffff38;
    color: #fff;
    font-weight: 600;
  }
}
.cube-mark {
  position: absolute;
  top: 10%;
  inset-inline-start: 10%;
  width: calc(var(--s) * 0.16);
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.cube-num {
  position: absolute;
  top: 7%;
  inset-inline-end: 10%;
  font-size: calc(var(--s) * 0.18);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--if-mint);
}
/* ناف المكعبات "اللزجة": شكل الخلفية path واحد (أزرار + جسور) بيترسم في site.js */
.cube-nav-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0; /* الناف بتتصغّر بـ scale؛ ده بيمنع عرضها الأصلي يوسّع العمود */
}
.goo {
  position: relative;
  width: max-content;
  transform-origin: top center; /* بيصغر لو أعرض من المساحة (site.js) */

  svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .goo-base {
    fill: var(--if-deep);
  }
}
.cube-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 32px; /* الجسور محسوبة على المسافة دي */
  width: max-content;

  button {
    all: unset;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px 22px;
    border-radius: 12px;
    font: 600 0.9rem/1em "IBM Plex Sans Arabic", sans-serif;
    white-space: nowrap;
    color: #ffffffcc;
    cursor: pointer;
    transition: color 0.2s;
  }
  button.is-hot {
    color: #fff;
  }
  button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }
  /* نقطة تحت الوجه الحالي */
  button[aria-current="step"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--if-mint);
  }
}
@media (max-width: 860px) {
  /* موبايل: مكعب النص بعرض الشاشة ومكعب الصور بيستخبى */
  .about-cubes {
    --s: 220px;
  }
  .cube-stage {
    width: 100%;
  }
  .cube-text {
    --w: 100%;
  }
  .cube-image {
    display: none;
  }
  .about-stick {
    padding-top: 84px;
  }
}

.about {
  .about-grid {
    display: grid;
    /* عمود المكعبات أعرض من عمود النص */
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 56px;
    align-items: center;
  }

  .about-text {
    p {
      color: var(--mut);
      margin: 0 0 14px;
      font-size: 1.04rem;
      line-height: 1.9;
      max-width: 62ch;
    }
    .highlight {
      color: var(--ink);
    }
  }
  .about-action {
    margin-top: 26px;

    .btn {
      padding: 16px 28px;
      font-size: 1rem;
    }
    .btn:focus-visible {
      outline-color: var(--gold);
    }
  }

  /* الشكل المترابط */
  .about-cards {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    aspect-ratio: 1 / 1.12;
    container-type: inline-size;
    isolation: isolate;

    .about-shape {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      z-index: 0;
      filter: drop-shadow(
        0 26px 40px color-mix(in srgb, var(--navy2) 30%, transparent)
      );

      html[dir="ltr"] & {
        transform: scaleX(-1);
      } /* البطاقة 01 دايمًا في جهة بداية القراءة */
    }

    .about-card {
      --cb: var(--surf);
      position: absolute;
      z-index: 1;
      display: flex;
      flex-direction: column;
      padding: 2.2cqw 2.2cqw 2.6cqw;
      background: var(--cb);
      border-radius: 3.6cqw;
      box-shadow: 0 12px 34px color-mix(in srgb, var(--navy) 14%, transparent);
      transition:
        translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.4s;

      &:hover {
        translate: 0 -6px;
        box-shadow: 0 24px 46px color-mix(in srgb, var(--teal) 30%, transparent);
      }
      &:hover .about-card-image img {
        transform: scale(1.08);
      }
      &:hover .about-card-number::after {
        width: 2.6em;
      }
      h3 {
        margin: 2.6cqw 0.6cqw 0.8cqw;
        font-weight: 800;
        font-size: clamp(1rem, 4cqw, 1.5rem);
        line-height: 1.35;
      }
      p {
        margin: 0 0.6cqw;
        font-size: clamp(0.78rem, 2.3cqw, 0.95rem);
        line-height: 1.65;
        max-width: none;
        color: var(--mut);
      }
      @media (hover: none) {
        &:hover {
          translate: none;
        }
      }
    }

    /* المواضع مبنية على أبعاد الصورة (1024 × 1024) — نسب مئوية من جهة البداية */
    .about-card-1 {
      inset-inline-start: 4.9%;
      top: 5.9%;
      width: 43.1%;
      height: 45.4%;
      box-shadow: none;
    } /* المربع العلوي */
    .about-card-2 {
      inset-inline-start: 53.4%;
      top: 9%;
      width: 42.6%;
      height: 37.5%;
    } /* الفراغ العلوي */
    .about-card-3 {
      inset-inline-start: 5.6%;
      top: 56%;
      width: 40.6%;
      height: 39.5%;
    } /* الفراغ السفلي */
    .about-card-4 {
      inset-inline-start: 48.8%;
      top: 47.4%;
      width: 47.3%;
      height: 47.9%;
      --cb: var(--if-royal);
      box-shadow: none; /* المربع السفلي */

      h3,
      p {
        color: #fff;
      }
      .about-card-number {
        color: #ffffff;
      }
    }

    .about-card-image {
      position: relative;
      border-radius: 2.8cqw;
      overflow: hidden;
      aspect-ratio: 2.1 / 1;
      background: #dbe9f3;
      flex: none;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }
    }
    .about-card-number {
      position: absolute;
      inset-inline-start: 0;
      bottom: 0;
      display: inline-flex;
      align-items: center;
      gap: 1.2cqw;
      padding: 0.6cqw 2.4cqw 0 2cqw;
      background: var(--cb);
      color: var(--gold-ink);
      font-weight: 800;
      font-size: clamp(0.78rem, 2.6cqw, 1rem);
      line-height: 1.5;
      border-start-end-radius: 2.8cqw;

      &::after {
        content: "";
        width: 1.6em;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        order: -1;
        transition: width 0.4s;
      }
    }

    /* دخول الكروت (بدون GSAP) */
    &.is-visible .about-card {
      animation: about-card-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
      animation-delay: calc(var(--i) * 0.14s + 0.2s);

      .gsap-enabled & {
        animation: none;
      }
    }

    @media (max-width: 720px) {
      /* موبايل: كروت متتالية بدون الشكل المترابط */
      aspect-ratio: auto;
      display: grid;
      gap: 14px;
      container-type: normal;
      max-width: 100%;

      .about-shape {
        display: none;
      }
      .about-card,
      .about-card-1,
      .about-card-2,
      .about-card-3,
      .about-card-4 {
        position: static;
        width: auto;
        height: auto;
        padding: 14px 14px 20px;
        border-radius: 26px;
      }
      .about-card-1 {
        box-shadow: 0 0 0 3px var(--teal);
      }
      .about-card-image {
        border-radius: 18px;
        aspect-ratio: 16 / 9;
      }
      .about-card-number {
        font-size: 1rem;
        gap: 8px;
        padding: 4px 14px 0 12px;
        border-start-end-radius: 16px;
      }
      .about-card h3 {
        font-size: 1.3rem;
        margin: 16px 6px 4px;
      }
      .about-card p {
        font-size: 0.95rem;
        margin: 0 6px;
      }
    }
  }

  @media (max-width: 860px) {
    .about-grid {
      grid-template-columns: 1fr;
      gap: 44px;
    }
  }
}
@keyframes about-card-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.94);
  }
}

/* =====================================================
   9) PROGRAMS — الرئيسية (كروت متراصة مع السكرول)
   ===================================================== */
.programs {
  .program-stack {
    display: grid;
    gap: 28px;
  }

  .program-slide {
    position: sticky;
    top: calc(108px + var(--k) * 18px);
  }

  /* كارت البرنامج: بلاطة 3D بلون مميز لكل برنامج (--ac) */
  .program-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-origin: 50% 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(18px, 4vw, 56px);
    min-height: 270px;
    padding: clamp(26px, 4vw, 52px);
    border-radius: 32px;
    color: #fff;
    /* لون البرنامج أوضح: توهّج كبير في الركن + لمسة تحت */
    background:
      radial-gradient(70% 110% at 92% 0%, color-mix(in srgb, var(--ac) 80%, transparent), transparent 70%),
      radial-gradient(50% 70% at 8% 100%, color-mix(in srgb, var(--ac) 35%, transparent), transparent 70%),
      linear-gradient(140deg, var(--if-royal), var(--if-deep));
    border: 1px solid #ffffff1f;
    /* إضاءة فوق + bevel تحت + سُمك + ظل */
    box-shadow:
      inset 0 1px 0 #ffffff40,
      inset 0 -3px 0 #0b1c4a4d,
      0 4px 0 var(--if-deep),
      0 34px 60px -30px color-mix(in srgb, var(--if-deep) 70%, transparent);
    transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);

    /* شريط بلون البرنامج على جنب الكارت */
    &::before {
      content: "";
      position: absolute;
      inset-block: 22%;
      inset-inline-start: 0;
      width: 5px;
      border-start-end-radius: 6px;
      border-end-end-radius: 6px;
      background: linear-gradient(180deg, var(--if-mint), color-mix(in srgb, var(--ac) 70%, #fff));
      box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 80%, transparent);
    }
    html[dir="rtl"] &::before {
      border-radius: 6px 0 0 6px;
    }

    h3 {
      font-size: clamp(1.4rem, 3vw, 2.1rem);
      margin: 0 0 10px;
      line-height: 1.35;
    }
    p {
      margin: 0;
      color: #e1ecf8;
      font-size: 1.05rem;
      line-height: 1.75;
      max-width: 52ch;
    }
    .english-name {
      margin-bottom: 4px;
      color: var(--if-mint);
    }
    &:hover {
      translate: 0 -4px;
    }
    &:hover .program-icon {
      rotate: -6deg;
      scale: 1.04;
    }
    &:hover .program-more {
      gap: 16px;
      color: var(--if-royal);
      background: linear-gradient(180deg, #ffffff, #e6f0fa);
      border-color: #fff;
    }
  }
  .program-number {
    font-size: clamp(4rem, 10vw, 8.5rem);
    font-weight: 800;
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--if-mint) 75%, transparent);
    font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 4px 10px #0b1c4a59);
  }
  /* أيقونة البرنامج: بلاطة 3D، والأيقونة بلون البرنامج */
  .program-icon {
    width: clamp(84px, 11vw, 136px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 30%;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: color-mix(in srgb, var(--ac) 70%, var(--if-deep));
    background: linear-gradient(190deg, #ffffff, #d7eef2);
    box-shadow:
      inset 0 2px 0 #fff,
      inset 0 -4px 0 color-mix(in srgb, var(--ac) 22%, transparent),
      0 6px 0 color-mix(in srgb, var(--ac) 55%, #0b1c4a),
      0 22px 34px -14px #050d26a6;
    transition: rotate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.5s;
  }
  /* "تفاصيل البرنامج": زرار كبسولة زجاجي واضح بيتحوّل أبيض مع الـ hover */
  .program-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 9px 18px;
    border-radius: 99px;
    border: 1px solid #ffffff40;
    background: #ffffff1a;
    box-shadow:
      inset 0 1px 0 #ffffff40,
      0 2px 0 #0b1c4a59;
    font-weight: 700;
    color: #fff;
    transition: gap 0.3s, color 0.3s, background 0.3s, border-color 0.3s;

    html[dir="ltr"] & .icon {
      transform: rotate(180deg);
    }
  }

  @media (max-width: 720px) {
    .program-card {
      grid-template-columns: 1fr;
      min-height: 0;
      gap: 10px;
    }
    .program-icon {
      position: absolute;
      top: 22px;
      inset-inline-end: 22px;
      width: 64px;
      font-size: 1.8rem;
    }
    .program-number {
      font-size: 4rem;
    }
  }
}

/* =====================================================
   9b) PROGRAMS — كاروسيل 3D بمنظور (الرئيسية)
   كروت متراصة فوق وتحت الكارت النشط؛ التقليب بالسحب/العجلة/اللمس/الأسهم (site.js)
   ===================================================== */
.pgx {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.pgx-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* قائمة البرامج */
.pgx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 22px;
}
.pgx-row {
  --ac: var(--if-royal);
  all: unset;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  color: var(--mut);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);


  html[dir="rtl"] &::before {
    border-radius: 4px 0 0 4px;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ac) 14%, transparent) 50%, transparent 70%);
    translate: -110% 0;
    pointer-events: none;
  }

  &:hover {
    color: var(--if-deep);
    background: color-mix(in srgb, var(--ac) 6%, transparent);
  }
  &:hover .pgx-n {
    rotate: -6deg;
  }
  &:hover .pgx-ic {
    opacity: 0.55;
    scale: 0.9;
  }

  &[aria-pressed="true"] {
    color: var(--if-deep);
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 5%, #fff));
    border-color: color-mix(in srgb, var(--ac) 18%, transparent);
    translate: 0 -2px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -2px 0 color-mix(in srgb, var(--ac) 8%, transparent),
      0 3px 0 color-mix(in srgb, var(--ac) 22%, #dfe7f3),
      0 18px 30px -20px color-mix(in srgb, var(--if-deep) 65%, transparent);

    &::before {
      scale: 1 1;
    }
    &::after {
      animation: pgx-row-shine 0.9s ease-out both;
    }
    .pgx-n {
      color: #fff;
      background: linear-gradient(150deg, var(--ac), var(--if-royal));
      border-color: transparent;
      rotate: 0deg;
      box-shadow:
        inset 0 1px 0 #ffffff59,
        inset 0 -2px 0 #0b1c4a33,
        0 3px 0 var(--if-deep),
        0 10px 16px -8px color-mix(in srgb, var(--ac) 70%, transparent);
    }
    .pgx-t {
      font-size: 1.05em;
    }
    .pgx-ic {
      opacity: 1;
      scale: 1;
    }
  }
  &:focus-visible {
    outline: 3px solid var(--if-royal);
    outline-offset: 2px;
  }
}
html[dir="rtl"] .pgx-row::after {
  background: linear-gradient(260deg, transparent 30%, color-mix(in srgb, var(--ac) 14%, transparent) 50%, transparent 70%);
}
@keyframes pgx-row-shine {
  from {
    translate: 110% 0;
  }
  to {
    translate: -110% 0;
  }
}
/* الرقم: بلاطة 3D صغيرة بلون البرنامج */
.pgx-n {
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--ac) 85%, var(--if-deep));
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 9%, #fff));
  border: 1px solid color-mix(in srgb, var(--ac) 16%, transparent);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 0 color-mix(in srgb, var(--ac) 18%, #e3eaf4);
  font-variant-numeric: tabular-nums;
  transition:
    color 0.3s,
    background 0.3s,
    box-shadow 0.3s,
    rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pgx-t {
  transition: font-size 0.3s;
}
.pgx-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--if-teal));
  box-shadow:
    inset 0 1px 0 #ffffff59,
    0 6px 12px -6px color-mix(in srgb, var(--ac) 80%, transparent);
  opacity: 0;
  scale: 0.7;
  transition:
    opacity 0.3s,
    scale 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);

  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pgx-row[aria-pressed="true"]::after {
    animation: none;
  }
}

/* زرار "عرض جميع البرامج" تحت القائمة (المحتوى الخاص بكل برنامج على الكارت نفسه) */
.pgx-actions {
  margin-top: 6px;
}

/* المسرح */
.pgx-visual {
  min-width: 0;
}
.pgx-stage {
  position: relative;
  height: 520px;
  touch-action: pan-y pinch-zoom; /* السحب الرأسي باللمس يسكرول الصفحة؛ الأفقي يقلّب */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;

  .pgx.is-dragging & {
    cursor: grabbing;
  }
  &:focus-visible {
    outline: 3px solid var(--if-royal);
    outline-offset: 6px;
    border-radius: 24px;
  }
}
.pgx-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.pgx-scene {
  position: absolute;
  inset: 0;
  perspective: 1200px;
}
.pgx-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  aspect-ratio: 1.4; /* أطول شوية عشان الوصف والزرار على الكارت */
  max-height: 66%;
  translate: -50% -50%;
  perspective: 1200px;
  pointer-events: none;
}
/* الكارت: صورة البرنامج خلفية + طبقة بألوان الهوية + محتوى البرنامج والزرار فوقها
   (التدرّج تحت = احتياطي لو الصورة ما اتحمّلتش) */
.pgx-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  backface-visibility: hidden;
  -webkit-user-drag: none;
  background:
    radial-gradient(70% 110% at 92% 0%, color-mix(in srgb, var(--ac) 80%, transparent), transparent 70%),
    radial-gradient(50% 70% at 8% 100%, color-mix(in srgb, var(--ac) 35%, transparent), transparent 70%),
    linear-gradient(140deg, var(--if-royal), var(--if-deep));
  border: 1px solid #ffffff1f;
  box-shadow:
    inset 0 1px 0 #ffffff40,
    inset 0 -3px 0 #0b1c4a4d,
    0 30px 50px -28px #050d2699;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.7s;

  .pgx.is-dragging & {
    transition: none;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: -6px;
  }
  /* طبقة الهوية فوق الصورة: غامقة تحت عشان النص يتقري، شفافة فوق عشان الصورة تبان */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(70% 90% at 92% 0%, color-mix(in srgb, var(--ac) 55%, transparent), transparent 70%),
      linear-gradient(to top, color-mix(in srgb, var(--if-deep) 96%, transparent) 0%, color-mix(in srgb, var(--if-deep) 80%, transparent) 38%, color-mix(in srgb, var(--if-royal) 25%, transparent) 75%, transparent 100%);
  }
  h3 {
    margin: 4px 0 0;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    line-height: 1.4;
    text-shadow: 0 2px 10px #0b1c4a80;
  }
  .english-name {
    color: var(--if-mint);
  }
  p {
    margin: 8px 0 14px;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #e1ecf8;
    max-width: 48ch;
    /* سطرين بالكتير عشان الكارت ما يتزحمش */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* موبايل: الكارت أصغر، فالعنوان والزرار بس */
    @media (max-width: 860px) {
      display: none;
    }
  }
  @media (max-width: 860px) {
    .pgx-cta {
      margin-top: 10px;
    }
  }
}
.pgx-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pgx-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
/* زرار "تفاصيل البرنامج" على الكارت: كبسولة فاتحة بارزة */
.pgx-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-royal);
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff, #e6f0fa);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--ac) 55%, #0b1c4a),
    0 12px 20px -12px #050d26b3;
  transition: gap 0.3s, translate 0.3s;

  &:hover {
    gap: 16px;
    translate: 0 -2px;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: 3px;
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
}
.pgx-num {
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--if-mint) 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.pgx-icon {
  width: clamp(56px, 6vw, 76px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: color-mix(in srgb, var(--ac) 70%, var(--if-deep));
  background: linear-gradient(190deg, #ffffff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 color-mix(in srgb, var(--ac) 22%, transparent),
    0 5px 0 color-mix(in srgb, var(--ac) 55%, #0b1c4a),
    0 16px 24px -12px #050d26a6;
}
/* تغميق الكروت البعيدة (بيتحسب في site.js) */
.pgx-shade {
  position: absolute;
  inset: 0;
  background: var(--if-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s;

  .pgx.is-dragging & {
    transition: none;
  }
}

/* تحت المسرح: العداد + الأسهم + النقط */
.pgx-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 7%;
  margin-top: 6px;
}
.pgx-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;

  b {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--if-royal);
    font-variant-numeric: tabular-nums;
    /* "01 / 05" لازم تتقري من الشمال لليمين حتى في العربي */
    direction: ltr;
    unicode-bidi: isolate;
    align-self: flex-start;
  }
  span {
    font-size: 0.8rem;
    color: var(--mut);
  }
}
.pgx-ctl {
  display: flex;
  gap: 10px;
}
.pgx-arrow {
  all: unset;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--if-royal);
  background: linear-gradient(180deg, #ffffff, #eef3fb);
  border: 1px solid color-mix(in srgb, var(--if-royal) 18%, transparent);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--if-royal) 18%, transparent),
    0 10px 18px -12px var(--if-deep);
  transition: background-color 0.25s, color 0.25s, translate 0.25s, opacity 0.25s;

  &:hover:not(:disabled) {
    background: var(--if-royal);
    color: #fff;
    translate: 0 -2px;
  }
  &:focus-visible {
    outline: 3px solid var(--if-royal);
    outline-offset: 3px;
  }
  &:disabled {
    opacity: 0.4;
    cursor: default;
  }
  /* السهم الأصلي بيشاور يمين/شمال؛ هنا لفوق (السابق) ولتحت (التالي) */
  &.pgx-prev .icon {
    rotate: 90deg;
  }
  &.pgx-next .icon {
    rotate: -90deg;
  }
}
.pgx-pag {
  display: flex;
  justify-content: center;
  margin-top: 16px;

  > div {
    display: flex;
    padding: 4px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--if-royal) 7%, #fff);
  }
}
.pgx-dot {
  all: unset;
  width: 28px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;

  i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--if-royal);
    opacity: 0.3;
    transition: width 0.3s, opacity 0.3s;
  }
  &[aria-current="true"] i {
    width: 22px;
    opacity: 1;
    background: linear-gradient(90deg, var(--if-royal), var(--if-teal));
  }
  &:focus-visible {
    outline: 2px solid var(--if-royal);
    border-radius: 8px;
  }
}

@media (max-width: 860px) {
  /* موبايل: العنوان ← الكروت ← القائمة ← زرار كل البرامج */
  .pgx {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .pgx-info {
    display: contents;
  }
  .pgx-visual {
    order: 1;
  }
  .pgx-list {
    order: 2;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .pgx-row {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  .pgx-n {
    width: 32px;
    border-radius: 10px;
    font-size: 0.75rem;
  }
  .pgx-ic {
    display: none;
  }
  .pgx-actions {
    order: 3;
  }
  .pgx-stage {
    height: 380px;
  }
  .pgx-anchor {
    width: 92%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pgx-card,
  .pgx-shade {
    transition: none;
  }
}

/* =====================================================
   10) MARQUEE (شريطين متقاطعين بيتحركوا حسب سرعة السكرول)
   ===================================================== */
.marquee {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  direction: ltr;

  .marquee-row {
    width: 110%;
    margin-left: -5%;
    padding: 14px 0;
    transform: rotate(-3deg);
    box-shadow: 0 20px 40px -20px
      color-mix(in srgb, var(--if-royal) 40%, transparent);

    &.marquee-row-dark {
      position: relative;
      z-index: 2;
      background: var(--navy);
    }
    &.marquee-row-light {
      margin-top: -60px;
      transform: rotate(2.5deg);
      background: linear-gradient(90deg, #ffffff, #c8eaef);
    }
  }
  .marquee-track {
    display: flex;
    width: max-content;

    > span {
      display: inline-flex;
      align-items: center;
      gap: 28px;
      padding-inline: 28px 0;
      font-size: clamp(1.3rem, 3vw, 2.3rem);
      font-weight: 800;
      white-space: nowrap;
      line-height: 1.6;
    }
  }
  .marquee-text {
    padding-inline-end: 0;
  }
  .icon {
    font-size: 0.8em;
  }

  .marquee-row-dark {
    .marquee-text {
      color: transparent;
      background: linear-gradient(190deg, #ffffff, #c8eaef);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .icon {
      color: #c8eaef;
    }
  }
  .marquee-row-light {
    .marquee-text,
    .icon {
      color: var(--navy);
    }
  }
}

/* =====================================================
   11) WHY IMPACT FORGE (bento)
   ===================================================== */
.why {
  .bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(210px, auto);
    gap: 16px;
    margin-top: 28px;
  }
  .bento-tile {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 22px;
    background: linear-gradient(150deg, var(--navy), var(--navy2));
    transition:
      translate 0.4s,
      scale 0.4s,
      box-shadow 0.4s;

    &::before {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: var(--teal);
      opacity: 0.25;
      filter: blur(30px);
      inset-block-start: -40px;
      inset-inline-end: -30px;
    }
    &:hover {
      translate: 0 -6px;
      scale: 1.02;
      box-shadow: 0 20px 40px
        color-mix(in srgb, var(--if-royal) 27%, transparent);
    }
    b {
      position: relative;
      z-index: 1;
      font-size: 1.15rem;
    }
    p {
      position: relative;
      z-index: 1;
      margin: 0;
      color: #d5e3f2;
      font-size: 0.92rem;
      line-height: 1.6;
      max-width: 40ch;
    }
    @media (hover: none) {
      &:hover {
        translate: none;
        scale: none;
      }
    }
  }
  .bento-icon {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 18px;
    font-size: 2.8rem;
    opacity: 0.9;
    color: #c8eaef;
  }

  /* تنويعات البلاطات — كلها من درجات اللوجو (أزرق ملكي ← تيل) */
  .tile-featured {
    order: -1; /* البلاطة الكبيرة أولًا: تملأ مربع 2×2 والأربع الصغيرة جنبها من غير فراغ */
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(150deg, var(--if-teal), var(--if-royal));

    .bento-icon {
      font-size: 5rem;
    }
    b {
      font-size: clamp(1.4rem, 2.4vw, 2rem);
    }
    p {
      font-size: 1.02rem;
    }
  }
  .tile-advisors {
    background: linear-gradient(150deg, var(--if-deep), var(--if-steel));
    .bento-icon {
      color: var(--if-mint);
    }
  }
  .tile-pathways {
    background: linear-gradient(150deg, var(--if-deep), var(--if-royal));
  }
  .tile-partners {
    background: linear-gradient(150deg, var(--if-steel), var(--if-royal));
  }

  @media (max-width: 860px) {
    .bento {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(180px, auto);
    }
    .tile-featured {
      grid-column: span 2;
      grid-row: auto;
    }
  }
  @media (max-width: 520px) {
    .bento {
      grid-template-columns: 1fr;
    }
    .tile-featured {
      grid-column: auto;
    }
  }
}

/* =====================================================
   12) IMPACT NUMBERS (الأرقام)
   ===================================================== */
.impact-numbers {
  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 26px 0 0;
    padding: 18px 0;
    border-block: 1px solid var(--line);
    max-width: none;

    .stat-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-inline: 14px;

      &:first-child {
        padding-inline-start: 0;
      }
      & + & {
        border-inline-start: 1px solid var(--line);
      }
    }
    .stat-number {
      font-size: clamp(1.6rem, 3vw, 2.3rem);
      font-weight: 800;
      line-height: 1.1;
      color: var(--teal-ink);
      font-variant-numeric: tabular-nums;
    }
    .stat-label {
      font-size: 0.85rem;
      color: var(--mut);
      line-height: 1.4;
    }

    @media (max-width: 520px) {
      grid-template-columns: 1fr 1fr;
      row-gap: 18px;
      .stat-item:nth-child(3) {
        border: 0;
        padding-inline-start: 0;
      }
    }
  }
}

/* =====================================================
   13) ADVISORS TEASER (مدار البرامج)
   ===================================================== */
.advisors-teaser {
  .advisors-teaser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .advisors-teaser-text p {
    color: var(--mut);
    max-width: 56ch;
  }

  .orbit {
    position: relative;
    width: min(420px, 80vw);
    aspect-ratio: 1;
    margin-inline: auto;

    &::before,
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px dashed color-mix(in srgb, var(--teal) 45%, transparent);
    }
    &::before {
      inset: 0;
    }
    &::after {
      inset: 22%;
      border-style: solid;
      border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    }
  }
  .orbit-center {
    position: absolute;
    inset: 34%;
    border-radius: 30%;
    display: grid;
    place-items: center;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--navy);
    background: linear-gradient(190deg, #ffffff, #c8eaef);
    box-shadow: 0 20px 40px -12px
      color-mix(in srgb, var(--if-teal) 40%, transparent);
  }
  .orbit-ring {
    position: absolute;
    inset: 0;
  }
  .orbit-item {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    background: var(--c);
    box-shadow: 0 10px 24px -8px var(--c);
    left: calc(50% + 50% * var(--cx));
    top: calc(50% + 50% * var(--cy));
  }

  @media (max-width: 860px) {
    .advisors-teaser-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }
}

/* =====================================================
   14) CTA — لوحة 3D عائمة بهوية الموقع
   ===================================================== */
.cta {
  position: relative;
  padding-block: clamp(56px, 7vw, 100px);
  background: linear-gradient(180deg, #fff, var(--if-surface));
  perspective: 1600px;
}
.cta-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 40px;
  color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--if-steel) 40%, transparent), transparent 70%),
    linear-gradient(150deg, var(--if-deep), var(--if-royal) 60%, #2a63a3);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    inset 0 -3px 0 #0b1c4a66,
    0 6px 0 #0b1c4a,
    0 50px 80px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);
  transform-origin: 50% 100%;
}
/* بدون قائمة البرامج: عمود واحد في النص */
.cta-panel--solo {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;

  .cta-copy {
    max-width: 640px;
  }
  .actions {
    justify-content: center;
  }
}

/* مربعات الهوية في الركن */
.cta-pixels {
  position: absolute;
  z-index: -1;
  top: 0;
  inset-inline-end: 0;
  width: clamp(90px, 11vw, 150px);
  height: auto;
  opacity: 0.35;
  pointer-events: none;
  overflow: visible;

  html[dir="rtl"] & {
    transform: scaleX(-1);
  }
}
/* شعار الموقع (favicon) كعلامة مائية */
.cta-mark {
  position: absolute;
  z-index: -1;
  inset-inline-start: -1.5%;
  bottom: -12%;
  width: clamp(9rem, 20vw, 17rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

.cta-copy {
  min-width: 0;

  h2 {
    margin: 16px 0 0;
    color: #fff;
    font-size: clamp(1.7rem, 3.3vw, 2.6rem);
    line-height: 1.35;
    text-wrap: balance;
  }
  p {
    margin: 14px 0 0;
    max-width: 50ch;
    font-size: 1.04rem;
    line-height: 1.9;
    color: #cfe0f3;
  }
  .actions {
    margin-top: 28px;
  }
  .link-more {
    color: #c8eaef;
  }
}

/* اختصار البرامج */
.cta-progs {
  min-width: 0;

  ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }
}
.cta-progs-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--if-mint);
}
.cta-prog {
  display: grid;
  grid-template-columns: 42px 1fr auto 34px;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 18px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: #ffffff10;
  border: 1px solid #ffffff22;
  box-shadow: inset 0 1px 0 #ffffff1f;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s;

  &:hover,
  &:focus-visible {
    background: #fff;
    color: var(--if-deep);
    border-color: #fff;
    translate: calc(var(--np-shift, -6px)) 0;
    box-shadow:
      inset 0 1px 0 #fff,
      0 4px 0 color-mix(in srgb, var(--ac) 45%, var(--if-deep)),
      0 16px 26px -14px #000a;
  }
  html[dir="ltr"] & {
    --np-shift: 6px;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: 3px;
  }
}
.cta-prog-icon {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 30%;
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--ac) 70%, var(--if-deep));
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--ac) 50%, #0b1c4a);
  transition: rotate 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);

  .cta-prog:hover & {
    rotate: -8deg;
  }
}
.cta-prog-num {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--if-mint);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;

  .cta-prog:hover & {
    color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
  }
}
.cta-prog-go {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: 0.95rem;
  border: 1px solid #ffffff38;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;

  .cta-prog:hover & {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ac), var(--if-teal));
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
}

@media (max-width: 900px) {
  .cta-panel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 30px;
  }
}
@media (max-width: 480px) {
  .cta-panel {
    padding: 28px 20px;
  }
  .cta-prog {
    grid-template-columns: 38px 1fr 30px;
    gap: 12px;
  }
  .cta-prog-icon {
    width: 38px;
  }
  .cta-prog-go {
    width: 30px;
  }
  .cta-prog-num {
    display: none;
  }
  .cta-copy .actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =====================================================
   15) FOOTER
   ===================================================== */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--mut);
  font-size: 0.92rem;

  /* خط الهوية المتدرج أعلى الفوتر */
  &::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--if-gradient);
  }
  /* علامة IF من اللوجو كعلامة مائية في الركن */
  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset-inline-end: -110px;
    bottom: -70px;
    width: clamp(220px, 30vw, 420px);
    aspect-ratio: 520 / 420;
    background: url("../images/logo-mark.png") no-repeat center / contain;
    opacity: 0.05;
    pointer-events: none;
  }

  /* أعمدة الهوية (graphic.svg) نازلة من أول الفوتر */
  .footer-bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    height: clamp(36px, 6vw, 90px);

    i {
      display: block;
      height: 100%;
      /* درجات الهوية نازلة من أعلى الفوتر الأبيض */
      background: linear-gradient(180deg, var(--if-royal), var(--if-teal));
      transform-origin: 50% 0;
    }
    i:nth-child(2),
    i:nth-child(5) {
      height: 66.6%;
    }
    i:nth-child(3) {
      height: 33.4%;
    }
    i:nth-child(4) {
      height: 16.7%;
    }
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
    gap: 36px;
    padding-block: 64px 40px;

    @media (max-width: 860px) {
      grid-template-columns: 1fr 1fr;
    }
    @media (max-width: 520px) {
      grid-template-columns: 1fr;
    }
  }
  .logo {
    color: var(--if-royal);
    font-size: 1.15rem;
    margin-bottom: 14px;
  }
  p {
    margin: 0 0 20px;
    max-width: 34ch;
  }
  h4 {
    margin: 0 0 16px;
    color: var(--if-royal);
    font-size: 0.95rem;

    /* شرطة متدرجة صغيرة تحت عنوان العمود */
    &::after {
      content: "";
      display: block;
      width: 28px;
      height: 3px;
      margin-top: 8px;
      border-radius: 3px;
      background: var(--if-gradient);
    }
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;

    /* خط سفلي تيل بيتمد مع اتجاه القراءة عند الـ hover */
    a {
      padding-bottom: 2px;
      background: linear-gradient(var(--if-teal), var(--if-teal)) no-repeat 100% 100% / 0 1.5px;
      transition:
        color 0.25s,
        background-size 0.3s ease-out;

      html[dir="ltr"] & {
        background-position: 0 100%;
      }
    }
    a:hover,
    a:focus-visible {
      color: var(--if-royal);
      background-size: 100% 1.5px;
    }
  }
  .platform-link {
    padding: 10px 16px;
    border-radius: 99px;
    border: 1px solid var(--line);
    color: var(--if-royal);
    font-weight: 700;

    &:not(.is-soon):hover {
      border-color: var(--if-royal);
    }
  }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-block: 20px 26px;
    /* فاصل بيتلاشى من الأطراف */
    border-top: 1px solid;
    border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--if-royal) 22%, transparent), transparent) 1;
    font-size: 0.85rem;
  }
}

/* =====================================================
   16) INNER PAGES
   ===================================================== */

/* ---------- PAGE HERO (هيرو الصفحات الداخلية) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 6px 4px 0;
  border-radius: 20px;
  padding: 150px 0 96px;
  color: #f5f9ff;
  background:
    radial-gradient(
      50% 70% at 85% 20%,
      color-mix(in srgb, var(--if-teal) 27%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 60% at 5% 100%,
      color-mix(in srgb, var(--if-royal) 17%, transparent),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      var(--if-royal),
      var(--if-royal) 55%,
      var(--if-steel)
    );

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    background: url("../images/desix-bg.png") no-repeat center/cover;
  }

  .page-hero-pixels {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: auto;
    opacity: 0.8;
    overflow: visible;
    pointer-events: none;
  }
  .page-hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;

    .gsap-enabled & {
      visibility: hidden;
    }
    h1 {
      margin: 6px 0 14px;
      font-size: clamp(2.2rem, 5vw, 4rem);
      font-weight: 800;
      line-height: 1.25;
      text-wrap: balance;

      b {
        display: inline-block;
        color: transparent;
        background: linear-gradient(190deg, #ffffff, #c8eaef);
        -webkit-background-clip: text;
        background-clip: text;
      }
    }
    .actions {
      margin-top: 30px;
    }
  }
  .page-hero-sub {
    margin: 0;
    max-width: 680px;
    color: #cfe0f3;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.75;
  }
  .page-hero-ring {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--if-royal) 25%, transparent);
    pointer-events: none;
  }
  .page-hero-ring-a {
    width: min(620px, 70vw);
    aspect-ratio: 1;
    inset-inline-end: -8%;
    bottom: -55%;
  }
  .page-hero-ring-b {
    width: min(820px, 90vw);
    aspect-ratio: 1;
    inset-inline-end: -18%;
    bottom: -80%;
    border-style: dashed;
    opacity: 0.5;
  }
  .page-hero-number {
    position: absolute;
    z-index: 0;
    inset-inline-end: 5%;
    bottom: 6%;
    font-size: clamp(7rem, 20vw, 16rem);
    font-weight: 800;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1.5px #ffffff66;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  /* مسار التنقل: كبسولة زجاجية؛ الصفحة الحالية شريحة بيضا 3D زي الـ kicker */
  .breadcrumbs {
    display: flex;
    max-width: 100%;
    margin-bottom: 20px;

    ol {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      max-width: 100%;
      margin: 0;
      padding: 4px;
      list-style: none;
      border-radius: 99px;
      background: #ffffff14;
      border: 1px solid #ffffff2b;
      box-shadow:
        inset 0 1px 0 #ffffff26,
        0 10px 24px -14px #0b1c4a99;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      overflow-x: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }
    li {
      display: inline-flex;
      align-items: center;
      flex: none;
      font-size: 0.85rem;
      font-weight: 600;
      white-space: nowrap;
    }
    /* سهم صغير بين العناصر، اتجاهه بيمشي مع اتجاه الصفحة */
    /* الفاصل: سهمين متتاليين (الأول باهت والتاني واضح) بتدرّج الهوية = إحساس بالتقدّم في المسار */
    li + li::before {
      content: "";
      flex: none;
      width: 16px;
      height: 16px;
      margin-inline: 2px 4px;
      background: linear-gradient(90deg, #ffffff, var(--if-mint));
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6.5l5 5.5-5 5.5' stroke-opacity='.4'/%3E%3Cpath d='M12.5 6.5l5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6.5l5 5.5-5 5.5' stroke-opacity='.4'/%3E%3Cpath d='M12.5 6.5l5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0.85;
    }
    /* في العربي المسار ماشي من اليمين لليسار */
    html[dir="rtl"] & li + li::before {
      scale: -1 1;
    }
    a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 99px;
      color: #cfe0f3;
      text-decoration: none;
      transition:
        background-color 0.25s,
        color 0.25s;

      &:hover {
        color: #fff;
        background: #ffffff1f;
      }
      &:focus-visible {
        outline: 2px solid var(--if-mint);
        outline-offset: 2px;
      }
    }
    .bc-home {
      padding-inline-start: 6px;
    }
    .bc-home-icon {
      width: 26px;
      height: 26px;
      padding: 5px;
      border-radius: 50%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      background: #ffffff1f;
      box-shadow: inset 0 1px 0 #ffffff33;
      transition: background-color 0.25s;
    }
    .bc-home:hover .bc-home-icon {
      background: #ffffff38;
    }
    .bc-current {
      padding: 6px 14px;
      border-radius: 99px;
      color: var(--if-deep);
      font-weight: 700;
      background: linear-gradient(190deg, #fff, #d7eef2);
      box-shadow:
        inset 0 1px 0 #fff,
        0 3px 0 color-mix(in srgb, var(--if-teal) 55%, #0b1c4a);
    }
  }
  @media (max-width: 520px) {
    .breadcrumbs .bc-home span {
      display: none; /* الأيقونة كفاية على الموبايل */
    }
    .breadcrumbs .bc-home {
      padding-inline-end: 4px;
    }
  }

  @media (max-width: 720px) {
    padding: 120px 0 64px;
    .page-hero-pixels {
      width: 96px;
      opacity: 0.55;
    }
    .page-hero-number {
      top: 96px;
      bottom: auto;
      opacity: 0.4;
    }
  }
}

/* ---------- LEADERSHIP MESSAGE ---------- */
.message {
  .message-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 44px;
    align-items: center;
  }
  .message-photo {
    position: relative;
    isolation: isolate; /* يمنع اختفاء الإطار الذهبي ورا خلفية السكشن */

    img {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 24px;
      display: block;
      box-shadow: 0 20px 50px #0008;
    }
    &::before {
      content: "";
      position: absolute;
      inset: 14px -14px -14px 14px;
      border: 2px solid var(--gold);
      border-radius: 24px;
      z-index: -1;
    }
    html[dir="rtl"] &::before {
      inset: 14px 14px -14px -14px;
    }
  }
  blockquote {
    margin: 0;
    font-size: 1.08rem;
    color: #e3edfa;

    &::before {
      content: "“";
      font-size: 5rem;
      color: var(--gold);
      line-height: 0.4;
      display: block;
      height: 34px;
    }
  }
  .message-author {
    margin-top: 20px;
    border-inline-start: 3px solid var(--gold);
    padding-inline-start: 14px;

    b {
      display: block;
      font-size: 1.1rem;
    }
    small {
      color: var(--gold);
    }
  }

  @media (max-width: 860px) {
    .message-grid {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .message-photo {
      max-width: 260px;
      margin: auto;
    }
  }
}

/* ---------- SERVICES GRID ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}

/* ---------- PROGRAM PANELS (تابات البرامج) ---------- */
.program-panel {
  display: none;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  animation: fade-in 0.5s;
  box-shadow: 0 20px 50px color-mix(in srgb, var(--if-royal) 8%, transparent);

  &.is-active {
    display: grid;
  }
  .gsap-enabled & {
    animation: none;
  }

  .panel-side {
    position: relative;
    padding: 30px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background:
      radial-gradient(circle at 50% 30%, #ffffff22, transparent 60%),
      linear-gradient(160deg, var(--ac), var(--if-royal));

    .icon-box {
      width: 104px;
      height: 104px;
      border-radius: 30px;
      font-size: 3rem;
      margin: 0 auto 14px;
      background: #ffffff1f;
      color: #fff;
      border: 1px solid #ffffff44;
      box-shadow: 0 0 40px #ffffff22;

      .gsap-enabled & {
        transition: none;
      }
    }
    h3 {
      margin: 6px 0;
      font-size: 1.15rem;
      line-height: 1.4;
    }
  }
  .panel-body {
    padding: 30px;

    p {
      color: var(--mut);
      margin: 0 0 14px;
    }
  }
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
    margin: 0 0 14px;

    li {
      background: color-mix(in srgb, var(--teal) 14%, transparent);
      border-radius: 99px;
      padding: 3px 14px;
      font-size: 0.88rem;
    }
  }

  @media (max-width: 860px) {
    &.is-active {
      grid-template-columns: 1fr;
    }
  }
}

/* ---------- ADVISORS ---------- */
.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--gold) 14%, var(--surf));
  border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
  color: var(--ink);

  .icon {
    flex: none;
    font-size: 1.4rem;
    color: var(--gold-ink);
  }
}

.advisors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;

  .advisor-card {
    position: relative;
    text-align: center;
    padding: 26px 16px;
    background: var(--surf);
    border: 1px dashed var(--line);
    border-radius: 20px;
    transition:
      translate 0.3s,
      border-color 0.3s;

    &:hover {
      border-style: solid;
      border-color: var(--teal);
      translate: 0 -5px;
    }
    b {
      display: block;
    }
    small {
      color: var(--mut);
    }
    .btn {
      width: 100%;
      padding: 10px 16px;
      min-height: 40px;
      font-size: 0.85rem;
    }
    @media (hover: none) {
      &:hover {
        translate: none;
      }
    }
  }
  .advisor-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--navy2), var(--c, var(--teal)));
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #fff8;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--if-teal) 27%, transparent);

    .icon {
      font-size: 2.6rem;
      color: #fff;
    }
  }
  .advisor-tag {
    display: inline-block;
    margin: 10px 0 14px;
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--c, var(--teal));
  }
  .advisors-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--mut);
    padding: 30px;
  }
}

/* ---------- VISION / MISSION / VALUES ---------- */
.vision-mission {
  background: var(--surf);

  .vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 34px;
    @media (max-width: 860px) {
      grid-template-columns: 1fr;
    }
  }
  .vm-card {
    border-radius: 22px;
    padding: 32px;
    color: #fff;
    background: linear-gradient(150deg, var(--navy), var(--navy2));
    position: relative;
    overflow: hidden;

    &:nth-child(2) {
      background: linear-gradient(150deg, var(--if-teal), #0b3d5c);
    }
    &::after {
      content: "";
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 30px solid #ffffff0d;
      inset-block-end: -70px;
      inset-inline-end: -50px;
    }
    h3,
    p {
      position: relative;
    }
    h3 {
      margin: 0 0 8px;
      color: var(--gold);
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    p {
      margin: 0;
      color: #e1ecf8;
    }
  }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
  }
  .value-number {
    color: var(--gold-ink);
    font-weight: 800;
    font-size: 1.6rem;
  }
}

/* ---------- القيم: كارت مطوي بيتفتح مع السكرول ---------- */
.values-fold {
  padding: 0;
}
.values-stage {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 96px 0 48px; /* مساحة الهيدر الثابت */

  > .container {
    width: 100%;
  }
}
.fold-card {
  display: flex;
  margin-top: 28px;
  transform-origin: center;
}
/* التدرّج واحد ممتد على الطيّات الأربعة (كل طيّة شايلة ربعه) */
.fold {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 34px);
  color: #fff;
  background: var(--if-gradient);
  background-size: 400% 100%;
  will-change: transform, filter;

  &:nth-child(1) { background-position: 0% 0; }
  &:nth-child(2) { background-position: 33.333% 0; }
  &:nth-child(3) { background-position: 66.666% 0; }
  &:nth-child(4) { background-position: 100% 0; }
  &:first-child {
    border-start-start-radius: 24px;
    border-end-start-radius: 24px;
  }
  &:last-child {
    border-start-end-radius: 24px;
    border-end-end-radius: 24px;
  }
  /* خط الطيّة */
  & + & {
    box-shadow: inset 1px 0 0 #ffffff26;
  }

  h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #fff;
  }
  p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #dbe8f3;
  }
}
.fold-num {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  inset-inline-start: clamp(22px, 2.4vw, 34px);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--if-mint);
}
.fold-hint {
  margin: 56px 0 0; /* بعيد كفاية عن أطراف الطيّات المايلة */
  text-align: center;
  color: var(--mut);
  font-size: 0.9rem;

  html:not(.gsap-enabled) & {
    display: none;
  }
}
@media (max-width: 720px) {
  /* موبايل: الطيّات تحت بعض ومن غير حركة الطي */
  .values-stage {
    min-height: 0;
    padding: 60px 0;
  }
  .fold-card {
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
  }
  .fold {
    min-height: 0;
    padding-top: 84px;
    border-radius: 0 !important;
    background-size: 100% 400%;

    &:nth-child(1) { background-position: 0 0%; }
    &:nth-child(2) { background-position: 0 33.333%; }
    &:nth-child(3) { background-position: 0 66.666%; }
    &:nth-child(4) { background-position: 0 100%; }
    & + & {
      box-shadow: inset 0 1px 0 #ffffff26;
    }
  }
  .fold-hint {
    display: none;
  }
}

/* ---------- CONTACT / FORMS ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  margin-top: 28px;
  text-align: start;

  @media (max-width: 860px) {
    grid-template-columns: 1fr;
  }
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;

  input,
  textarea,
  select {
    font: inherit;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid #ffffff33;
    background: #ffffff1a;
    color: #fff;
    width: 100%;

    &:focus {
      outline: 2px solid var(--teal);
      background: #ffffff26;
    }
  }
  ::placeholder {
    color: #b9cde6;
  }
  select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-inline-end: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2714%27 fill=%27none%27 stroke=%27%238ff3e6%27 stroke-width=%272%27%3E%3Cpath d=%27m3 5 4 4 4-4%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;

    html[dir="ltr"] & {
      background-position: right 16px center;
    }
    option {
      color: var(--if-text);
    }
  }
  .btn {
    align-self: flex-start;
  }
  .btn:focus-visible {
    outline-color: var(--gold);
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    @media (max-width: 520px) {
      grid-template-columns: 1fr;
    }
  }
  .form-success {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--if-teal) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--if-teal) 40%, transparent);
    font-weight: 600;
  }
  &.is-sent .form-success {
    display: flex;
  }

  /* النموذج على خلفية فاتحة */
  .form-section & {
    input,
    textarea,
    select {
      background-color: var(--surf);
      color: var(--ink);
      border-color: var(--line);
    }
    ::placeholder {
      color: var(--mut);
    }
  }
}

/* ---------- PROGRAMS INDEX (programs.html) ---------- */
.program-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);

  a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1fr) 64px;
    gap: 24px;
    padding: 34px 20px;
    border-bottom: 1px solid var(--line);
    transition: color 0.45s;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      transform: scaleX(0);
      transform-origin: 100% 50%;
      background: linear-gradient(120deg, var(--ac), var(--if-royal));
      transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1);
    }
    html[dir="ltr"] &::before {
      transform-origin: 0 50%;
    }
    &:hover {
      color: #fff;
    }
    &:hover::before {
      transform: scaleX(1);
    }
    &:hover .program-index-number {
      -webkit-text-stroke-color: #ffffff;
    }
    &:hover .english-name {
      color: #c8eaef;
    }
    &:hover p {
      color: #d5e3f2;
    }
    &:hover .arrow-circle {
      transform: rotate(45deg);
      background: #ffffff;
      border-color: #ffffff;
      color: var(--navy);
    }
  }
  .program-index-number {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ac);
    transition: -webkit-text-stroke-color 0.45s;
  }
  h3 {
    margin: 4px 0 0;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.4;
  }
  .english-name {
    color: var(--ac);
    transition: color 0.45s;
  }
  p {
    margin: 0;
    color: var(--mut);
    transition: color 0.45s;
  }

  @media (max-width: 860px) {
    a {
      grid-template-columns: 60px 1fr 48px;
      padding: 26px 8px;
    }
    p {
      grid-column: 2 / 3;
    }
    .arrow-circle {
      grid-row: 1;
      grid-column: 3;
      width: 44px;
      height: 44px;
    }
  }
}

/* ---------- PROGRAM DETAIL ---------- */
.program-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;

  .program-detail-main {
    > section {
      padding: 0 0 64px;
    }
    h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
    }
  }
  .program-detail-aside {
    position: sticky;
    top: 110px;
  }

  @media (max-width: 980px) {
    grid-template-columns: 1fr;
    .program-detail-aside {
      position: static;
      order: -1;
    }
  }
}

/* بطاقة ملخص البرنامج (الجانبية) */
.program-summary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(
      80% 60% at 100% 0%,
      color-mix(in srgb, var(--ac) 60%, transparent),
      transparent 70%
    ),
    linear-gradient(150deg, var(--if-royal), var(--if-steel));
  box-shadow: 0 30px 60px -30px
    color-mix(in srgb, var(--if-royal) 60%, transparent);

  h3 {
    margin: 0 0 16px;
    font-size: 1.1rem;
  }
  dl {
    margin: 0 0 22px;
    display: grid;
    gap: 12px;
  }
  dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff1c;
  }
  dt {
    color: #9fb2cc;
    font-size: 0.9rem;
  }
  dd {
    margin: 0;
    font-weight: 700;
    text-align: end;
  }
  .to-be-announced {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .actions {
    flex-direction: column;
  }
  .btn {
    width: 100%;
  }
}

/* الفئة المستهدفة */
.audience-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 16px;
    border-radius: 99px;
    background: var(--surf);
    border: 1px solid var(--line);
    font-weight: 600;
  }
  .icon {
    color: var(--ac, var(--teal));
    font-size: 1.2rem;
  }
}

/* المحاور: خط زمني بيتملي مع السكرول */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: module;

  &::before,
  .timeline-fill {
    content: "";
    position: absolute;
    inset-block: 28px 28px;
    inset-inline-start: 27px;
    width: 2px;
    background: var(--line);
  }
  .timeline-fill {
    background: linear-gradient(180deg, var(--teal), var(--gold));
    transform-origin: 50% 0;
  }
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    counter-increment: module;

    &::before {
      content: counter(module, decimal-leading-zero);
      flex: none;
      position: relative;
      z-index: 1;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 800;
      color: var(--navy);
      background: var(--bg);
      border: 2px solid var(--line);
      transition:
        background-color 0.4s,
        border-color 0.4s;
    }
    &.is-active::before {
      background: linear-gradient(190deg, #ffffff, #c8eaef);
      border-color: transparent;
    }
    > span {
      flex: 1;
      padding: 16px 22px;
      border-radius: 18px;
      background: var(--surf);
      border: 1px solid var(--line);
      font-weight: 700;
      font-size: 1.05rem;
      transition:
        border-color 0.4s,
        translate 0.4s;
    }
    &.is-active > span {
      border-color: color-mix(in srgb, var(--teal) 60%, transparent);
    }
  }
}

/* مخرجات التعلّم */
.outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;

    .icon-box {
      margin: 0;
      background: linear-gradient(190deg, #ffffff, #c8eaef);
      color: var(--navy);
    }
    p {
      color: var(--ink);
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.6;
    }
  }
  @media (max-width: 980px) {
    grid-template-columns: 1fr;
  }
}

/* البرنامج التالي: بانر بصورة البرنامج الجاي + محتواه (نفس لغة كروت البرامج في الرئيسية) */
.next-program {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 32px;
  color: #fff;
  text-decoration: none;
  /* احتياطي لو الصورة ما اتحمّلتش */
  background: linear-gradient(130deg, var(--ac), var(--if-royal) 70%);
  border: 1px solid #ffffff1f;
  box-shadow:
    inset 0 1px 0 #ffffff40,
    inset 0 -3px 0 #0b1c4a4d,
    0 5px 0 var(--if-deep),
    0 34px 60px -30px color-mix(in srgb, var(--if-deep) 70%, transparent);
  transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* طبقة الهوية: غامقة ناحية النص، وشفافة ناحية الصورة */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 70%),
      linear-gradient(var(--np-dir, 270deg), color-mix(in srgb, var(--if-deep) 96%, transparent) 0%, color-mix(in srgb, var(--if-deep) 82%, transparent) 42%, color-mix(in srgb, var(--if-royal) 30%, transparent) 72%, transparent 100%);
  }
  html[dir="ltr"] & {
    --np-dir: 90deg;
  }

  &:hover {
    translate: 0 -4px;
  }
  &:hover .next-program-img {
    scale: 1.06;
  }
  &:hover .arrow-circle {
    transform: rotate(45deg);
    background: #fff;
    color: var(--if-royal);
    border-color: #fff;
  }
  &:focus-visible {
    outline: 3px solid var(--if-royal);
    outline-offset: 4px;
  }

  b {
    display: block;
    margin-top: 2px;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.35;
    text-shadow: 0 2px 12px #0b1c4a80;
  }
  .english-name {
    margin-top: 10px;
    color: var(--if-mint);
  }
}
.next-program-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.next-program-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(560px, 62%);
}
.next-program-tag {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: #ffffff1f;
  border: 1px solid #ffffff38;
  box-shadow: inset 0 1px 0 #ffffff33;
}
.next-program-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.next-program-icon {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 30%;
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--ac) 70%, var(--if-deep));
  background: linear-gradient(190deg, #ffffff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    inset 0 -3px 0 color-mix(in srgb, var(--ac) 22%, transparent),
    0 4px 0 color-mix(in srgb, var(--ac) 55%, #0b1c4a),
    0 14px 22px -12px #050d26a6;
}
.next-program-num {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--if-mint) 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.next-program-desc {
  margin-top: 10px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #e1ecf8;
  max-width: 48ch;
}
.next-program-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-weight: 700;
  color: #fff;

  .arrow-circle {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    color: #fff;
    border-color: #ffffff55;
    background: #ffffff14;
  }
}
@media (max-width: 720px) {
  .next-program {
    min-height: 0;
    align-items: flex-end;
    padding-top: 150px; /* الصورة تبان فوق والمحتوى تحت */
    --np-dir: 0deg; /* موبايل: الطبقة الغامقة من تحت */

    html[dir="ltr"] & {
      --np-dir: 0deg;
    }
  }
  .next-program-body {
    max-width: none;
  }
  .next-program-desc {
    display: none;
  }
}

/* ---------- METHOD PATH (منهجيتنا: مسار بخط بيترسم) ---------- */
.method-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 40px;

  &::before,
  .method-path-fill {
    content: "";
    position: absolute;
    top: 13px;
    inset-inline: 0;
    height: 2px;
    background: var(--line);
  }
  .method-path-fill {
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transform-origin: 100% 50%;

    html[dir="ltr"] & {
      transform-origin: 0 50%;
    }
  }
  > div {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: -40px;
      inset-inline-start: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(190deg, #ffffff, #c8eaef);
      box-shadow: 0 0 0 6px var(--bg);
    }
  }
  h3 {
    margin: 0 0 6px;
    font-size: 1.15rem;
  }
  p {
    margin: 0;
    color: var(--mut);
    font-size: 0.95rem;
  }

  @media (max-width: 860px) {
    grid-template-columns: 1fr 1fr;
    row-gap: 56px;
    &::before,
    .method-path-fill {
      display: none;
    }
  }
  @media (max-width: 520px) {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   17) ADDITIONS (هوية + عناصر جديدة من ملف المحتوى)
   ===================================================== */
/* خلفيات الأقسام: متبادلة بين الأبيض و --if-surface */
.about,
.why,
.vision-mission {
  background: var(--if-surface);
}
/* خلفية الهيرو: أهدى وأعمق (كحلي ← ملكي ← فولاذي) بدل التيل الصارخ،
   مع إضاءة تيل ناعمة ورا الصورة وتغميق خفيف للأطراف = تباين مريح للنص الأبيض */
.hero .hero-bg {
  --hero-dir: 135deg;
  background:
    radial-gradient(38% 55% at 50% 62%, color-mix(in srgb, var(--if-teal) 38%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, transparent 50%, #0b1c4a73 100%),
    linear-gradient(var(--hero-dir), var(--if-deep) 0%, var(--if-royal) 55%, var(--if-steel) 100%);
}
html[dir="rtl"] .hero .hero-bg {
  --hero-dir: 225deg;
}
.page-hero {
  background: linear-gradient(135deg, var(--if-royal), var(--if-steel));
}
.english-name:empty {
  display: none;
}
.eyebrow-text {
  font-weight: 700;
}

/* قائمة البرامج المنسدلة */
.header .nav-links .nav-dropdown {
  position: relative;
  display: inline-flex;
}
.header .nav-links .nav-dropdown .caret {
  font-style: normal;
  margin-inline-start: 6px;
  font-size: 1.3em;
}
/* قائمة البرامج: طيّ 3D زي "الماكيسو" — كل برنامج بيتفرد من اللي فوقه ورا بعض،
   وكل شريط بلون البرنامج بتاعه (--p1..--p5 نفس ألوان كروت البرامج) */
.header .nav-links .nav-dropdown-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 5;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  padding-top: 10px; /* جسر للماوس بين الزرار والقائمة */
  perspective: 900px;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s 0.6s; /* تفضل ظاهرة لحد ما تتطوي */
  filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--if-deep) 35%, transparent));
}
.header .nav-links .nav-dropdown-menu a {
  --c: var(--p1);
  display: block;
  margin: 0;
  padding: 11px 18px;
  border-radius: 0;
  border-top: 1px dashed #ffffff4d;
  background: var(--c);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  /* مطوية لفوق ومتجمّعة عند الزرار (translateY بيرفع كل شريط مكان اللي فوقه)،
     وشفافة عشان ما يفضلش خط رفيع وهي واقفة على حرفها */
  transform-origin: 50% 0;
  transform: translateY(calc(var(--i, 0) * -100%)) rotateX(-90deg);
  opacity: 0;
  filter: brightness(0.6);
  /* القفل: بالعكس (آخر واحدة الأول) وأسرع ومن غير ارتداد */
  transition:
    transform 0.4s cubic-bezier(0.55, 0, 0.45, 1) calc((4 - var(--i, 0)) * 40ms),
    opacity 0.28s ease-in calc((4 - var(--i, 0)) * 40ms + 0.08s),
    filter 0.4s calc((4 - var(--i, 0)) * 40ms),
    padding 0.25s cubic-bezier(0.23, 1, 0.32, 1),
    background-color 0.25s;

  &:nth-child(1) { --i: 0; --c: var(--p1); border-top: 0; border-radius: 14px 14px 0 0; }
  &:nth-child(2) { --i: 1; --c: var(--p2); }
  &:nth-child(3) { --i: 2; --c: var(--p3); }
  &:nth-child(4) { --i: 3; --c: var(--p4); }
  &:nth-child(5) { --i: 4; --c: var(--p5); border-radius: 0 0 14px 14px; }
  &:last-child { border-end-start-radius: 14px; border-end-end-radius: 14px; }

  /* الـ hover: النص بيزق لجوه والشريط بيغمق (زي الماكيسو) */
  &:hover,
  &:focus-visible {
    padding-inline-start: 30px;
    background: color-mix(in srgb, var(--c) 82%, #000);
    color: #fff;
    transform: translateY(0) rotateX(0);
  }
}
.header .nav-links .nav-dropdown:hover .nav-dropdown-menu,
.header .nav-links .nav-dropdown:focus-within .nav-dropdown-menu {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s;

  a {
    /* نفس قائمة الدوال (translateY + rotateX) عشان الانتقال يبقى ناعم في الاتجاهين */
    transform: translateY(0) rotateX(0);
    opacity: 1;
    filter: brightness(1);
    /* الفرد: الأولى الأول وبعدها اللي تحتها */
    transition:
      transform 0.45s cubic-bezier(0.23, 1, 0.32, 1) calc(var(--i) * 70ms),
      opacity 0.2s calc(var(--i) * 70ms),
      filter 0.45s calc(var(--i) * 70ms),
      padding 0.25s cubic-bezier(0.23, 1, 0.32, 1),
      background-color 0.25s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav-links .nav-dropdown-menu a {
    transition: none !important;
  }
}
@media (max-width: 1240px) {
  /* موبايل: القائمة مفرودة جوه المنيو من غير طيّ */
  .header .nav-links .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .header .nav-links .nav-dropdown-menu {
    position: static;
    visibility: visible;
    pointer-events: auto;
    padding: 6px 0 0;
    filter: none;
  }
  .header .nav-links .nav-dropdown-menu a {
    transform: none;
    filter: none;
    opacity: 1;
  }
}

/* رحلة المتدرب: كروت بصور + أرقام متوصّلة بمسار متعرّج بيترسم مع السكرول */
.journey {
  background: #fff;
  overflow: hidden;
}
.journey-head {
  max-width: 640px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;

  .lead {
    margin-inline: auto;
  }
}
.jr {
  position: relative;
}
.jr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.jr-track {
  fill: none;
  stroke: color-mix(in srgb, var(--if-royal) 35%, #fff);
  stroke-width: 2;
  stroke-dasharray: 7 8;
  stroke-linecap: round;
}
.jr-line {
  fill: none;
  stroke: url(#jrGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--if-steel) 45%, transparent));
}
.jr-dot {
  fill: #fff;
  stroke: var(--if-teal);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 8px var(--if-teal));
  opacity: 0;
  transition: opacity 0.3s;

  .jr.is-drawing & {
    opacity: 1;
  }
}
.jr-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
}
.jr-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
/* الخطوات الزوجية: الرقم فوق الصورة → المسار يطلع وينزل زي الزجزاج */
.jr-step:nth-child(even) {
  .jr-badge {
    order: -1;
    margin: 0 0 20px;
  }
}
.jr-fig {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 4.4;
  overflow: hidden;
  border-radius: 24px;
  background: color-mix(in srgb, var(--ac) 18%, #eef3fa);
  box-shadow:
    inset 0 0 0 1px #ffffff40,
    0 4px 0 color-mix(in srgb, var(--ac) 25%, #dfe7f3),
    0 26px 40px -26px color-mix(in srgb, var(--if-deep) 60%, transparent);
  transition:
    translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.6s;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
      scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
      filter 0.8s;
  }
  /* لمعة خفيفة من فوق */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, #ffffff38, transparent 40%), linear-gradient(0deg, color-mix(in srgb, var(--if-deep) 30%, transparent), transparent 45%);
    pointer-events: none;
  }
}
.jr-step:hover .jr-fig img {
  scale: 1.07;
}
.jr-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  margin: 20px 0 0;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--if-deep);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 14%, transparent);
  box-shadow:
    0 0 0 7px #fff,
    0 3px 0 7px color-mix(in srgb, var(--if-royal) 10%, #fff),
    0 18px 30px -12px color-mix(in srgb, var(--if-deep) 45%, transparent);
  transition:
    color 0.4s,
    background 0.4s,
    scale 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);

  /* حلقة نبض حوالين آخر محطة وصل لها الخط */
  &::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid var(--if-teal);
    opacity: 0;
  }
}
.jr-text {
  margin-top: 18px;

  h3 {
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.5;
    color: var(--if-deep);
  }
  p {
    margin: 8px 0 0;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--mut);
  }
}

/* الحالات المتحركة (مع GSAP بس؛ من غيره كل حاجة ظاهرة عادي) */
.gsap-enabled .jr-step {
  .jr-fig img {
    filter: grayscale(0.85) brightness(1.06);
  }
  .jr-text {
    opacity: 0.45;
    transition: opacity 0.5s;
  }
}
.gsap-enabled .jr-step.is-on {
  .jr-fig {
    translate: 0 -6px;
  }
  .jr-fig img {
    filter: none;
  }
  .jr-text {
    opacity: 1;
  }
  .jr-badge {
    color: #fff;
    background: linear-gradient(150deg, var(--if-royal), var(--if-teal));
    scale: 1.08;
  }
}
.jr-step.is-current .jr-badge::after {
  animation: jr-pulse 1.6s ease-out infinite;
}
@keyframes jr-pulse {
  from {
    opacity: 0.8;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 1.55;
  }
}

/* تابلت/موبايل: الخطوات تحت بعض، الرقم على الجنب والمسار رأسي */
@media (max-width: 980px) {
  .jr-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .jr-step,
  .jr-step:nth-child(even) {
    display: grid;
    grid-template-columns: 58px minmax(90px, 140px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    text-align: start;

    .jr-badge {
      order: 0;
      grid-column: 1;
      grid-row: 1;
      margin: 0;
    }
    .jr-fig {
      grid-column: 2;
      grid-row: 1;
      border-radius: 18px;
    }
    .jr-text {
      grid-column: 3;
      margin: 0;
    }
  }
}
@media (max-width: 520px) {
  .jr-step,
  .jr-step:nth-child(even) {
    grid-template-columns: 50px minmax(0, 1fr);
    row-gap: 12px;

    .jr-badge {
      width: 50px;
      grid-row: 1 / span 2;
      align-self: start;
      margin-top: 30px;
    }
    .jr-fig {
      aspect-ratio: 16 / 9;
    }
    .jr-text {
      grid-column: 2;
      grid-row: 2;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jr-step.is-current .jr-badge::after {
    animation: none;
  }
}
.method-path.method-path-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 860px) {
  .method-path.method-path-5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .method-path.method-path-5 {
    grid-template-columns: 1fr;
  }
}
.method-path h3 {
  line-height: 1.5;
}

/* الأسئلة الشائعة (Accordion) */
.faq-item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surf);
  padding: 0 22px;
  margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 18px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  color: var(--if-royal);
  font-size: 1.4rem;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "–";
}
.faq-item p {
  margin: 0 0 18px;
  color: var(--mut);
}
.program-detail-main .faq-item {
  margin-bottom: 10px;
}

/* النماذج: التسميات فوق الحقول */
.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}
.contact-form label.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}
.contact-form label.check input {
  width: auto;
  margin-top: 5px;
}
.contact-form .form-success {
  color: var(--if-text);
}
.form-section {
  background: var(--if-surface);
}

/* صفحة البرنامج بدون عمود جانبي (معلومات المدة/الرسوم تُخفى لحين توفّرها) */
.program-detail.no-aside {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
}
.timeline li > span b {
  display: block;
}
.timeline li > span p {
  margin: 6px 0 0;
  color: var(--mut);
  font-weight: 400;
  font-size: 0.95rem;
}
.services-grid .card h3 {
  color: var(--if-royal);
}
.message blockquote p {
  margin: 0 0 14px;
}
.message .message-grid:not(:has(.message-photo)) {
  grid-template-columns: 1fr;
}
.notice .icon {
  color: var(--if-royal);
}
.cta .btn.btn-ghost {
  background: color-mix(in srgb, var(--if-royal) 70%, transparent);
}

/* =====================================================
   لماذا إمباكتفورج: كروت 3D بهوية الموقع، متعلّقة بدبابيس تحت كشّاف
   ===================================================== */
.why {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 34%, color-mix(in srgb, var(--if-mint) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--if-surface), #fff);
}
.whyx-head {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;

  .lead {
    margin-inline: auto;
  }
}

/* المسرح */
.whyx {
  position: relative;
  isolation: isolate;
  height: 410px;
  margin-top: 30px;
  --lamp-x: 50%;
}

/* الكشّاف */
.whyx-light {
  position: absolute;
  inset: -60px 0 0;
  z-index: -1;
  pointer-events: none;

  i {
    position: absolute;
    display: block;
  }
}
.whyx-beam {
  left: var(--lamp-x);
  top: -30px;
  width: 420px;
  height: 640px;
  margin-left: -210px;
  transform-origin: 50% 0;
  background: linear-gradient(color-mix(in srgb, var(--if-mint) 80%, transparent), color-mix(in srgb, var(--if-teal) 12%, transparent) 55%, transparent);
  clip-path: polygon(46.5% 0, 53.5% 0, 118% 100%, -18% 100%);
  filter: blur(34px);
  opacity: 0.55;
}
.whyx-lamp {
  left: var(--lamp-x);
  top: -20px;
  width: 120px;
  height: 54px;
  margin-left: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, color-mix(in srgb, var(--if-mint) 90%, transparent) 38%, transparent 72%);
  filter: blur(12px);
}
.whyx-pool {
  left: var(--lamp-x);
  top: 90px;
  width: 620px;
  height: 320px;
  margin-left: -310px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--if-teal) 24%, transparent), transparent 68%);
  filter: blur(34px);
  opacity: 0.7;
}

/* الكروت */
.whyx-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}
.whyx-card {
  /* توزيع متساوي على عرض المسرح: الكارت رقم i بيبدأ عند (العرض - عرض الكارت) × i/4 → مسافات ثابتة بين الكروت */
  --w: clamp(184px, 16.4vw, 214px);
  --pad: 30px; /* هامش على الطرفين عشان الكارت المايل ما يتقصّش عند حافة الشاشة */
  position: absolute;
  inset-inline-start: calc(var(--pad) + (100% - var(--w) - 2 * var(--pad)) * var(--i) / 4);
  top: var(--y);
  width: var(--w);
  height: 236px;
  transform-origin: var(--px) 0;
  rotate: var(--a);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  will-change: rotate;

  &.is-drag {
    cursor: grabbing;
  }
  &:hover {
    z-index: 20;
  }
}
html[dir="rtl"] .whyx-card {
  transform-origin: calc(100% - var(--px)) 0;
}
.whyx-shadow {
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 24px;
  background: var(--if-deep);
  filter: blur(22px);
  opacity: 0.28;
  translate: -12px 22px;
}
.whyx-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 5%, #fff));
  border: 1px solid color-mix(in srgb, var(--ac) 14%, transparent);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -3px 0 color-mix(in srgb, var(--ac) 8%, transparent),
    0 5px 0 color-mix(in srgb, var(--ac) 30%, #d9e3f0);
  transition:
    translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s;

  /* توهّج الكشّاف على الكارت */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 0, color-mix(in srgb, var(--if-mint) 70%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
  }
  .whyx-card:hover &,
  .whyx-card.is-lit & {
    translate: 0 -4px;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -3px 0 color-mix(in srgb, var(--ac) 8%, transparent),
      0 9px 0 color-mix(in srgb, var(--ac) 40%, #d9e3f0);
  }
  .whyx-card:hover &::before,
  .whyx-card.is-lit &::before {
    opacity: 0.5;
  }

  p {
    position: relative;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.8;
    color: #51607a;
  }
}
.whyx-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 30%;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(150deg, var(--ac), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    inset 0 -3px 0 #0b1c4a33,
    0 4px 0 var(--if-deep),
    0 12px 18px -10px color-mix(in srgb, var(--ac) 80%, transparent);
  transition: rotate 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);

  .whyx-card:hover & {
    rotate: -8deg;
  }
}
.whyx-row {
  margin-top: auto; /* من غير position عشان الرقم يتثبّت في ركن الكارت نفسه */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;

  h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--if-deep);
  }
}
/* الرقم مفرّغ بنفس أسلوب أرقام كروت البرامج */
.whyx-num {
  position: absolute;
  top: 16px;
  inset-inline-end: 18px;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in srgb, var(--ac) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.whyx-pin {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-start: var(--px);
  width: 30px;
  height: 34px;
  translate: -50% -58%;
  overflow: visible;
  filter: drop-shadow(0 6px 8px #0b1c4a80);
  pointer-events: none;
}
html[dir="rtl"] .whyx-pin {
  translate: 50% -58%;
}

/* الختام: جملة + زرار */
.whyx-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 26px;
  text-align: center;

  p {
    margin: 0;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.9;
    color: var(--mut);
  }
  b {
    color: var(--if-steel);
  }
}

/* تابلت/موبايل: الكروت في شبكة، لسه متعلّقة وبتتمرجح */
@media (max-width: 1080px) {
  .whyx {
    height: auto;
    margin-top: 56px;
  }
  .whyx-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 46px 22px;
  }
  .whyx-card {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
  }
  .whyx-face {
    position: relative;
    min-height: 210px;
  }
  .whyx-foot {
    margin-top: 48px;
  }
}
@media (max-width: 720px) {
  .whyx-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 14px;
  }
  .whyx-face {
    padding: 16px 14px 14px;
    min-height: 200px;
  }
  .whyx-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .whyx-num {
    font-size: 1.6rem;
  }
  .whyx-row h3 {
    font-size: 1rem;
  }
}
@media (max-width: 420px) {
  .whyx-cards {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-inline: auto;
  }
  .whyx-face {
    min-height: 0;
  }
  .whyx-row {
    margin-top: 14px;
  }
}

/* =====================================================
   صفحة البرامج: أكورديون بيتفتح (Showcase)
   ===================================================== */
.programs-acc {
  padding-block: clamp(48px, 6vw, 90px);
}
.pacc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.pacc-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--mut);
}
.pacc {
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  display: flex;
  gap: 12px;
  height: clamp(520px, 64vh, 640px);
}
.pa {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--ac) 16%, var(--line));
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--ac) 10%, transparent), transparent 70%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 6%, #fff));
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--ac) 22%, #dfe7f3),
    0 22px 36px -28px color-mix(in srgb, var(--if-deep) 55%, transparent);
  transition:
    flex-grow 0.75s var(--ease),
    border-color 0.3s,
    box-shadow 0.3s,
    translate 0.35s;

  &:not(.is-open):hover {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--ac) 45%, transparent);
    box-shadow:
      inset 0 1px 0 #fff,
      0 7px 0 color-mix(in srgb, var(--ac) 35%, #dfe7f3),
      0 26px 40px -26px color-mix(in srgb, var(--if-deep) 60%, transparent);
  }
  &.is-open {
    flex-grow: 4.2;
    cursor: default;
    border-color: transparent;
    box-shadow:
      0 6px 0 #0b1c4a,
      0 40px 60px -34px color-mix(in srgb, var(--if-deep) 80%, transparent);
  }
  &:has(.pa-title button:focus-visible) {
    outline: 3px solid var(--if-royal);
    outline-offset: 3px;
  }
}

/* المقفول: صورة مصغّرة + رقم + علامة + + اسم رأسي */
.pa-thumb {
  position: absolute;
  z-index: 5;
  top: 14px;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow:
    0 0 0 3px #fff,
    0 4px 0 3px color-mix(in srgb, var(--ac) 30%, #dfe7f3),
    0 12px 18px -8px #0b1c4a66;
  transition:
    opacity 0.35s,
    scale 0.45s;
  pointer-events: none;

  .pa.is-open & {
    opacity: 0;
    scale: 0.8;
  }
}
.pa-num {
  position: absolute;
  z-index: 5;
  top: 92px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px color-mix(in srgb, var(--ac) 55%, transparent);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s;

  .pa.is-open & {
    opacity: 0;
  }
}
.pa-plus {
  position: absolute;
  z-index: 6;
  top: 132px;
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ac), var(--if-teal));
  box-shadow: 0 3px 0 var(--if-deep);
  transition:
    top 0.65s var(--ease),
    left 0.65s var(--ease),
    background 0.3s;

  i {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: currentColor;
  }
  i + i {
    rotate: 90deg;
    transition: rotate 0.45s var(--ease);
  }
  /* مفتوح: العلامة تروح الركن العلوي (ناحية نهاية السطر) وتبقى "−" */
  .pa.is-open & {
    top: 18px;
    left: calc(100% - 48px);
    background: #ffffff2e;
    box-shadow: inset 0 0 0 1px #ffffff55;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  html[dir="rtl"] .pa.is-open & {
    left: 18px;
  }
  .pa.is-open & i + i {
    rotate: 0deg;
  }
}

.pa-title {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 22px;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--if-deep);
  transition:
    left 0.65s var(--ease),
    transform 0.65s var(--ease),
    color 0.4s;

  button {
    all: unset;
    cursor: pointer;
  }
  /* مفتوح: الاسم يروح على جنب (بداية السطر) */
  .pa.is-open & {
    left: 22px;
    transform: translateX(0) rotate(180deg);
    color: #fff;
    text-shadow: 0 2px 14px #0b1c4a99;
  }
  html[dir="rtl"] .pa.is-open & {
    left: calc(100% - 22px);
    transform: translateX(-100%) rotate(180deg);
  }
}

/* المفتوح: الصورة بتنكشف + كارت التفاصيل يطلع من تحت */
.pa-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  clip-path: inset(0 0 0 100%);
  transition:
    clip-path 0.75s var(--ease),
    visibility 0s 0.75s;

  html[dir="rtl"] & {
    clip-path: inset(0 100% 0 0);
  }
  .pa.is-open & {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition:
      clip-path 0.75s var(--ease),
      visibility 0s;
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--if-deep) 35%, transparent), transparent 30%, color-mix(in srgb, var(--if-deep) 70%, transparent)),
      radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 70%);
  }
}
.pa-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  transition: scale 1.2s var(--ease);

  .pa.is-open & {
    scale: 1;
  }
}
.pa-card {
  position: absolute;
  z-index: 2;
  inset-inline-end: 16px;
  bottom: 16px;
  width: min(380px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 5%, #fff));
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 color-mix(in srgb, var(--ac) 35%, #d9e3f0),
    0 24px 40px -18px #0b1c4a99;
  translate: 0 130%;
  transition: translate 0.65s var(--ease);

  .pa.is-open & {
    translate: 0 0;
    transition-delay: 0.25s;
  }
  .english-name {
    margin-top: 14px;
    color: var(--if-steel);
  }
  h3 {
    margin: 4px 0 0;
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    line-height: 1.4;
    color: var(--if-deep);
  }
  p {
    margin: 10px 0 18px;
    font-size: 0.92rem;
    line-height: 1.85;
    color: #51607a;
  }
}
.pa-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.pa-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 30%;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(150deg, var(--ac), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    inset 0 -3px 0 #0b1c4a33,
    0 4px 0 var(--if-deep);
}
.pa-cnum {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--mut);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

/* موبايل/تابلت: صفوف فوق بعض بتتفتح لتحت */
@media (max-width: 860px) {
  .pacc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pacc {
    flex-direction: column;
    height: auto;
  }
  .pa {
    flex: 0 0 auto;
    height: 84px;
    transition:
      height 0.75s var(--ease),
      border-color 0.3s,
      box-shadow 0.3s;

    &.is-open {
      height: 560px;
    }
    &:not(.is-open):hover {
      translate: none;
    }
  }
  .pa-thumb {
    top: 11px;
    left: auto;
    inset-inline-start: 12px;
    margin: 0;
  }
  .pa-num {
    display: none; /* الصورة المصغّرة كفاية تعرّف الصف على الموبايل */
  }
  .pa-plus,
  .pa.is-open .pa-plus,
  html[dir="rtl"] .pa.is-open .pa-plus {
    top: 27px;
    left: auto;
    right: auto;
    inset-inline-end: 16px;
  }
  .pa-title,
  .pa.is-open .pa-title,
  html[dir="rtl"] .pa.is-open .pa-title {
    top: 0;
    bottom: auto;
    left: auto;
    right: auto;
    inset-inline-start: 90px;
    inset-inline-end: 100px;
    height: 84px;
    display: flex;
    align-items: center;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 1.15rem;
    line-height: 1.4;
    white-space: normal;
  }
  .pa.is-open .pa-title,
  html[dir="rtl"] .pa.is-open .pa-title {
    inset-inline-start: 18px;
  }
  .pa-card {
    inset-inline: 12px;
    bottom: 12px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pa,
  .pa * {
    transition: none !important;
  }
}

/* =====================================================
   الهيرو: تجاوب أفضل للصورة (hero-visual)
   - القوس طالع فوق الصورة بـ 28% من ارتفاعها، فالمسافة فوقها بتتحسب من نفس الارتفاع (--hv-h)
   - 981–1400: عمودين (النص + الأزرار | الصورة) بدل 3 أعمدة مزنوقة
   - 641–980: عمودين برضه عشان الصورة تبان من أول شاشة
   - ≤640: عمود واحد، والصورة بمقاس مناسب ومسافة محسوبة
   ===================================================== */
.hero {
  --hv-h: 410px;

  .hero-image {
    height: var(--hv-h);
  }

  @media (min-width: 981px) and (max-width: 1400px) {
    --hv-h: 380px;

    .hero-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "intro visual"
        "content visual";
      gap: 0 clamp(20px, 3vw, 40px);
    }
    .hero-intro {
      padding-top: clamp(8px, 3vh, 32px);
    }
    .hero-content {
      align-self: start;
      padding-bottom: 40px;
    }
    .hero-lead {
      padding-top: 8px;
    }
    /* لوجو الهيرو: أصغر عشان ما ينافسش العنوان + مسافة تفصله عن شارة الرؤية اللي فوقه */
    .hero-brand {
      width: clamp(190px, 18vw, 240px);
      margin-top: 26px;
      margin-bottom: 0;
    }
    .vision-badge {
      padding: 12px 14px;

      img {
        width: 96px;
      }
    }
  }

  @media (min-width: 641px) and (max-width: 980px) {
    --hv-h: clamp(300px, 44vw, 380px);

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      grid-template-areas:
        "eyebrow visual"
        "title visual"
        "content visual"
        "badge visual";
      grid-template-rows: auto auto auto 1fr;
      gap: 16px clamp(16px, 3vw, 32px);
    }
    .eyebrow {
      grid-area: eyebrow;
    }
    .hero-title {
      grid-area: title;
    }
    .hero-content {
      grid-area: content;
    }
    .vision-badge {
      grid-area: badge;
      align-self: start;
      justify-self: start;
      padding: 12px 14px;

      img {
        width: 88px;
      }
    }
    .hero-visual {
      grid-area: visual;
      align-self: end;
      max-width: none;
      margin-top: calc(var(--hv-h) * 0.3);
    }
    .hero-content .btn {
      flex: 1 1 100%;
    }
  }

  @media (max-width: 640px) {
    --hv-h: clamp(250px, 72vw, 330px);

    .hero-grid {
      gap: 18px;
    }
    .vision-badge {
      padding: 12px 14px;

      img {
        width: 84px;
      }
    }
    .hero-visual {
      max-width: 420px;
      width: 100%;
      /* بالظبط قد الجزء الطالع من القوس + هامش صغير */
      margin-top: calc(var(--hv-h) * 0.3 + 6px);
    }
    .hero-image {
      transform: scale(1.06);
    }
    .hero-visual::after {
      bottom: -24px;
      height: 70px;
    }
  }
}

/* =====================================================
   صفحة تواصل معنا: كارت النموذج + لوحة طرق التواصل
   ===================================================== */
.contact-page {
  padding-block: 0 clamp(60px, 8vw, 110px);
  background: linear-gradient(180deg, transparent, var(--if-surface) 30%);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  /* الكارتين طالعين فوق الهيرو شوية = عمق */
  margin-top: clamp(-90px, -7vw, -40px);
  position: relative;
  z-index: 2;
}

/* كارت النموذج */
.contact-card {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 32px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, transparent);
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 0 color-mix(in srgb, var(--if-royal) 14%, #e3eaf4),
    0 40px 70px -40px color-mix(in srgb, var(--if-deep) 55%, transparent);
}
.contact-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;

  h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    color: var(--if-deep);
  }
  p {
    margin: 6px 0 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--mut);
  }
}
.contact-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 30%;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    inset 0 -3px 0 #0b1c4a33,
    0 4px 0 var(--if-deep);
}

/* الحقول */
.contact-page .contact-form {
  gap: 18px;

  .cf-field {
    display: grid;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--if-deep);
  }
  input,
  textarea {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--if-royal) 12%, var(--line));
    background: color-mix(in srgb, var(--if-surface) 70%, #fff);
    color: var(--ink);
    font-weight: 500;
    transition:
      border-color 0.25s,
      background-color 0.25s,
      box-shadow 0.25s;

    &:hover {
      border-color: color-mix(in srgb, var(--if-royal) 28%, transparent);
    }
    &:focus {
      outline: none;
      background: #fff;
      border-color: var(--if-steel);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-teal) 18%, transparent);
    }
  }
  textarea {
    resize: vertical;
    min-height: 140px;
  }
  /* لو المستخدم كتب حاجة غلط وخرج من الحقل */
  input:user-invalid,
  textarea:user-invalid {
    border-color: #d9534f;
    box-shadow: 0 0 0 4px #d9534f1f;
  }
  .form-row {
    gap: 18px;
  }
}
/* أيقونة جوه الحقل */
.cf-input {
  position: relative;
  display: block;

  .icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 16px;
    translate: 0 -50%;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--if-royal) 45%, var(--mut));
    pointer-events: none;
    transition: color 0.25s;
  }
  input {
    padding-inline-start: 46px;
  }
  &:focus-within .icon {
    color: var(--if-steel);
  }
}

/* شرايح موضوع الاستفسار */
.cf-topics {
  margin: 0;
  padding: 0;
  border: 0;

  legend {
    margin-bottom: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--if-deep);
  }
}
.cf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cf-chip {
  position: relative;
  cursor: pointer;

  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 99px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--if-deep);
    background: color-mix(in srgb, var(--if-surface) 70%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--if-royal) 12%, var(--line));
    transition:
      background-color 0.25s,
      color 0.25s,
      border-color 0.25s,
      box-shadow 0.25s,
      translate 0.25s;
  }
  &:hover span {
    border-color: color-mix(in srgb, var(--if-royal) 30%, transparent);
  }
  input:checked + span {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(150deg, var(--if-royal), var(--if-steel));
    box-shadow:
      inset 0 1px 0 #ffffff40,
      0 3px 0 var(--if-deep);
    translate: 0 -2px;
  }
  input:focus-visible + span {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
}
.cf-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.contact-page .contact-form .form-success {
  margin: 0;
  color: var(--if-deep);
}

/* لوحة طرق التواصل */
.contact-info {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--if-deep), var(--if-royal) 70%, #2a63a3);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    inset 0 -3px 0 #0b1c4a66,
    0 6px 0 #0b1c4a,
    0 40px 70px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);

  h2 {
    margin: 14px 0 20px;
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: #fff;
  }
}
.ci-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ci-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  background: #ffffff10;
  border: 1px solid #ffffff22;
  box-shadow: inset 0 1px 0 #ffffff1f;
  transition:
    background-color 0.3s,
    color 0.3s,
    translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s;

  &:hover,
  &:focus-visible {
    background: #fff;
    color: var(--if-deep);
    translate: 0 -3px;
    box-shadow:
      inset 0 1px 0 #fff,
      0 4px 0 color-mix(in srgb, var(--if-teal) 55%, var(--if-deep)),
      0 16px 26px -14px #000a;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: 3px;
  }
  small {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--if-mint);
    transition: color 0.3s;
  }
  &:hover small {
    color: var(--if-steel);
  }
  b {
    display: block;
    margin-top: 2px;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }
  b[dir="ltr"] {
    text-align: end;
    unicode-bidi: isolate;
  }
  html[dir="rtl"] & b[dir="ltr"] {
    text-align: right;
  }
}
.ci-icon {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 30%;
  font-size: 1.2rem;
  color: var(--if-royal);
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--if-teal) 50%, #0b1c4a);
}
.ci-go {
  display: grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #ffffff38;
  font-size: 0.9rem;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;

  .ci-item:hover & {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--if-royal), var(--if-teal));
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
}
.ci-register {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #ffffff24;
  font-size: 0.9rem;
  color: #cfe0f3;
  text-decoration: none;

  b {
    color: var(--if-mint);
  }
  .icon {
    color: var(--if-mint);
    transition: translate 0.3s;
  }
  &:hover .icon {
    translate: -4px 0;
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
  html[dir="ltr"] &:hover .icon {
    translate: 4px 0;
  }
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .contact-card,
  .contact-info {
    border-radius: 24px;
  }
  .contact-card-head {
    flex-direction: column;
    gap: 12px;
  }
  .cf-actions .btn {
    width: 100%;
  }
}

/* =====================================================
   تفاصيل البرنامج: عمودين (المحتوى + فهرس ثابت وكارت تسجيل)
   ===================================================== */
.program-detail {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 80px) 0;

  .program-detail-main {
    counter-reset: pd;

    > section {
      padding: 0 0 clamp(48px, 6vw, 72px);
      scroll-margin-top: 110px;
    }
  }
}
/* عنوان القسم برقم مفرّغ + خط بلون البرنامج */
.pd-sec {
  counter-increment: pd;

  > h2 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
    color: var(--if-deep);

 
    html[dir="rtl"] &::after {
      background: linear-gradient(270deg, color-mix(in srgb, var(--ac, var(--if-teal)) 40%, transparent), transparent);
    }
  }
}
/* النظرة العامة: أول فقرة في كارت بارز */
.pd-sec:first-child > p:first-of-type {
  margin: 0;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  font-size: 1.08rem;
  line-height: 2;
  color: #2c3a55;
  border: 1px solid color-mix(in srgb, var(--ac, var(--if-royal)) 14%, var(--line));
  box-shadow: 0 20px 40px -32px color-mix(in srgb, var(--if-deep) 50%, transparent);
}
.pd-sec > p {
  color: #4a5872;
  line-height: 1.95;
}

/* كروت "لمن البرنامج" وما شابه: عمودين، كروت 3D مرقّمة */
.program-detail-main .services-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  counter-reset: card;

  .card {
    position: relative;
    counter-increment: card;
    padding: 22px 22px 22px;
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac, var(--if-royal)) 4%, #fff));
    border: 1px solid color-mix(in srgb, var(--ac, var(--if-royal)) 14%, var(--line));
    box-shadow:
      inset 0 1px 0 #fff,
      0 4px 0 color-mix(in srgb, var(--ac, var(--if-royal)) 22%, #dfe7f3),
      0 18px 30px -24px color-mix(in srgb, var(--if-deep) 50%, transparent);
    transition:
      translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.35s;

    &::before {
      content: counter(card, decimal-leading-zero);
      position: absolute;
      top: 16px;
      inset-inline-end: 18px;
      font-size: 1.6rem;
      font-weight: 800;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ac, var(--if-royal)) 40%, transparent);
    }
    &:hover {
      translate: 0 -4px;
      box-shadow:
        inset 0 1px 0 #fff,
        0 8px 0 color-mix(in srgb, var(--ac, var(--if-royal)) 32%, #dfe7f3),
        0 24px 36px -24px color-mix(in srgb, var(--if-deep) 55%, transparent);
    }
    h3 {
      margin: 0 0 8px;
      padding-inline-end: 40px;
      font-size: 1.08rem;
      color: var(--if-deep);
    }
    p {
      margin: 0;
      font-size: 0.93rem;
      line-height: 1.85;
      color: #51607a;
    }
  }
}

/* الخط الزمني: خطوات 3D */
.program-detail-main .timeline {
  &::before,
  .timeline-fill {
    inset-inline-start: 25px;
    width: 3px;
    border-radius: 3px;
  }
  .timeline-fill {
    background: linear-gradient(180deg, var(--ac, var(--if-teal)), var(--if-teal));
  }
  li {
    gap: 18px;
    padding: 9px 0;

    &::before {
      width: 52px;
      height: 52px;
      border-radius: 30%;
      color: var(--if-deep);
      background: #fff;
      border: 1.5px solid color-mix(in srgb, var(--ac, var(--if-royal)) 18%, var(--line));
      box-shadow: 0 3px 0 color-mix(in srgb, var(--ac, var(--if-royal)) 18%, #e3eaf4);
    }
    &.is-active::before {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(150deg, var(--ac, var(--if-royal)), var(--if-royal));
      box-shadow:
        inset 0 2px 0 #ffffff4d,
        0 4px 0 var(--if-deep);
    }
    > span {
      padding: 16px 20px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid color-mix(in srgb, var(--ac, var(--if-royal)) 12%, var(--line));
      box-shadow: 0 14px 24px -22px color-mix(in srgb, var(--if-deep) 50%, transparent);
    }
    &.is-active > span {
      border-color: color-mix(in srgb, var(--ac, var(--if-teal)) 45%, transparent);
      translate: -4px 0;
    }
    html[dir="ltr"] &.is-active > span {
      translate: 4px 0;
    }
  }
}

/* المخرجات/الأثر */
.program-detail-main .outcomes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));

  .card {
    border-radius: 22px;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac, var(--if-teal)) 5%, #fff));
    border: 1px solid color-mix(in srgb, var(--ac, var(--if-royal)) 14%, var(--line));
    box-shadow:
      inset 0 1px 0 #fff,
      0 4px 0 color-mix(in srgb, var(--ac, var(--if-royal)) 22%, #dfe7f3);

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: 30%;
      color: #fff;
      background: linear-gradient(150deg, var(--ac, var(--if-teal)), var(--if-royal));
      box-shadow:
        inset 0 2px 0 #ffffff4d,
        0 4px 0 var(--if-deep);
    }
    p {
      color: var(--if-deep);
    }
  }
}

/* الجانب: فهرس الصفحة + كارت التسجيل */
.program-detail-aside {
  display: grid;
  gap: 16px;
}
.pd-toc {
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--if-royal) 10%, #e3eaf4),
    0 24px 40px -32px color-mix(in srgb, var(--if-deep) 50%, transparent);

  ol {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
  }
  a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mut);
    text-decoration: none;
    transition:
      background-color 0.25s,
      color 0.25s;

    &:hover {
      color: var(--if-deep);
      background: color-mix(in srgb, var(--ac, var(--if-royal)) 7%, transparent);
    }
    &.is-current {
      color: var(--if-deep);
      font-weight: 700;
      background: color-mix(in srgb, var(--ac, var(--if-royal)) 10%, transparent);
    }
  }
  i {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--ac, var(--if-royal)) 80%, var(--if-deep));
    background: color-mix(in srgb, var(--ac, var(--if-royal)) 10%, #fff);
    transition:
      background 0.25s,
      color 0.25s;
  }
  a.is-current i {
    color: #fff;
    background: linear-gradient(150deg, var(--ac, var(--if-royal)), var(--if-royal));
  }
}
.pd-toc-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--if-steel);
}
.pd-cta {
  border-radius: 24px;

  h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
  }
  p {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #cfe0f3;
  }
  .btn {
    width: 100%;
  }
}
.pd-cta-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--if-mint);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #a6e3ea66;

  &:hover {
    text-decoration-color: currentColor;
  }
}
@media (max-width: 980px) {
  .program-detail {
    grid-template-columns: minmax(0, 1fr);

    .program-detail-aside {
      order: 0; /* على الموبايل: بعد المحتوى (الهيرو فيه زرار التسجيل أصلًا) */
    }
  }
  .pd-toc {
    display: none;
  }
}

/* =====================================================
   الأسئلة الشائعة (مشتركة): كروت 3D + فتح ناعم
   ===================================================== */
.faq-item {
  margin-bottom: 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--if-royal) 9%, #e6ecf5),
    0 16px 28px -26px color-mix(in srgb, var(--if-deep) 50%, transparent);
  overflow: hidden;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
  interpolate-size: allow-keywords;

  &::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
      content-visibility 0.4s allow-discrete;
  }
  &[open]::details-content {
    block-size: auto;
  }
  &:hover {
    border-color: color-mix(in srgb, var(--if-royal) 24%, transparent);
  }
  &[open] {
    border-color: color-mix(in srgb, var(--ac, var(--if-teal)) 40%, transparent);
    box-shadow:
      0 4px 0 color-mix(in srgb, var(--ac, var(--if-teal)) 30%, #dfe7f3),
      0 22px 36px -26px color-mix(in srgb, var(--if-deep) 55%, transparent);
  }
  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--if-deep);
    cursor: pointer;
    list-style: none;

    &:focus-visible {
      outline: 3px solid var(--if-royal);
      outline-offset: -3px;
      border-radius: 20px;
    }
  }
  /* زرار + بيلف ويبقى − */
  summary::after {
    content: "";
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:
      linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
      color-mix(in srgb, var(--if-royal) 8%, #fff);
    color: var(--if-royal);
    border: 0;
    font-size: 0;
    transition:
      rotate 0.4s cubic-bezier(0.3, 1.4, 0.5, 1),
      background-color 0.3s,
      color 0.3s;
  }
  &[open] summary::after {
    content: "";
    rotate: 135deg;
    color: #fff;
    background:
      linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
      linear-gradient(150deg, var(--ac, var(--if-teal)), var(--if-royal));
  }
  p {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 0.95rem;
    line-height: 1.9;
    color: #4a5872;
  }
}

/* صفحة الأسئلة الشائعة */
.faq-page {
  padding-block: clamp(48px, 6vw, 90px);
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.faq-list {
  counter-reset: faq;

  .faq-item summary::before {
    counter-increment: faq;
    content: counter(faq, decimal-leading-zero);
    flex: none;
    order: -1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--if-steel);
    background: color-mix(in srgb, var(--if-teal) 10%, #fff);
  }
  .faq-item summary {
    justify-content: flex-start;

    &::after {
      margin-inline-start: auto;
    }
  }
  .faq-item p {
    padding-inline-start: 72px;
  }
}
.faq-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.faq-count {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mut);
}
.faq-help {
  position: sticky;
  top: 110px;
  overflow: hidden;
  isolation: isolate;
  padding: 28px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--if-deep), var(--if-royal) 70%, #2a63a3);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 6px 0 #0b1c4a,
    0 40px 60px -36px color-mix(in srgb, var(--if-deep) 80%, transparent);

  h2 {
    margin: 16px 0 8px;
    font-size: 1.35rem;
    color: #fff;
  }
  p {
    margin: 0 0 22px;
    font-size: 0.92rem;
    line-height: 1.85;
    color: #cfe0f3;
  }
  .btn {
    width: 100%;
  }
}
.faq-help-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 30%;
  font-size: 1.35rem;
  color: var(--if-royal);
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--if-teal) 50%, #0b1c4a);
}
.faq-help-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-mint);
  text-decoration: none;

  .icon {
    transition: translate 0.3s;
  }
  &:hover .icon {
    translate: -4px 0;
  }
  html[dir="ltr"] & .icon {
    transform: rotate(180deg);
  }
  html[dir="ltr"] &:hover .icon {
    translate: 4px 0;
  }
}
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-help {
    position: static;
  }
}
@media (max-width: 520px) {
  .faq-list .faq-item p {
    padding-inline-start: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content {
    transition: none;
  }
}
/* عدد زوجي من الكروت (2 أو 4) = عمودين، عشان ما يفضلش كارت لوحده في صف */
.program-detail-main .services-grid:has(> .card:nth-child(2):last-child),
.program-detail-main .services-grid:has(> .card:nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
@media (min-width: 700px) {
  .program-detail-main .services-grid:has(> .card:nth-child(2):last-child),
  .program-detail-main .services-grid:has(> .card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* سطر السؤال: شبكة عشان النص ياخد كل المساحة الفاضية (بدل ما يتلف بدري على الموبايل) */
.faq-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.faq-list .faq-item summary {
  grid-template-columns: auto minmax(0, 1fr) auto;

  &::after {
    margin-inline-start: 0;
  }
}
@media (max-width: 520px) {
  .faq-item summary {
    gap: 10px;
    padding: 16px 14px;
    font-size: 0.95rem;
  }
  .faq-item summary::after {
    width: 28px;
    height: 28px;
  }
  .faq-list .faq-item summary::before {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .faq-item p {
    padding: 0 14px 18px;
  }
}

/* الهيدر: عنصر "قريبًا" (المدونة لحد ما الصفحة تتعمل) */
.header .nav-links .nav-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: color-mix(in srgb, var(--navy, var(--if-deep)) 55%, #fff);
  cursor: default;

  small {
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--if-steel);
    background: color-mix(in srgb, var(--if-teal) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--if-teal) 30%, transparent);
  }
}

/* =====================================================
   المدونة
   ===================================================== */
.blog-page {
  padding-block: clamp(48px, 6vw, 90px);
}

/* تصنيف (شارة صغيرة بلون التصنيف) */
.blog-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--if-deep);
  background: #ffffffeb;
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--ac) 40%, #dfe7f3),
    0 10px 18px -10px #0b1c4a66;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  .icon {
    color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
    font-size: 0.95rem;
  }
}

/* المقال المميّز */
.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 0 color-mix(in srgb, var(--ac) 30%, #dfe7f3),
    0 40px 70px -44px color-mix(in srgb, var(--if-deep) 60%, transparent);
}
.blog-featured-media {
  position: relative;
  min-height: 320px;
  overflow: hidden;

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 40%, color-mix(in srgb, var(--if-deep) 45%, transparent));
  }
  .blog-featured:hover & img {
    scale: 1.05;
  }
}
.blog-featured-body {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 44px);

  h2 {
    margin: 18px 0 12px;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.45;
    color: var(--if-deep);
    text-wrap: balance;
  }
  p {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.9;
    color: #4a5872;
  }
}
.blog-featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.blog-featured-badge {
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--if-royal), var(--if-steel));
  box-shadow: 0 3px 0 var(--if-deep);
}

/* شريط التصنيفات */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: clamp(48px, 6vw, 72px) 0 22px;
}
.blog-toolbar-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--if-deep);
}
/* شبكة المقالات */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 22px;
}
.blog-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--mut);
}

/* اقتراح موضوع */
.blog-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    linear-gradient(150deg, var(--if-deep), var(--if-royal) 65%, #2a63a3);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 6px 0 #0b1c4a,
    0 40px 60px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);

  > div {
    flex: 1 1 280px;
  }
  h2 {
    margin: 0 0 4px;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: #fff;
  }
  p {
    margin: 0;
    font-size: 0.92rem;
    color: #cfe0f3;
  }
}
.blog-suggest-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 30%;
  font-size: 1.35rem;
  color: var(--if-royal);
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--if-teal) 50%, #0b1c4a);
}

@media (max-width: 860px) {
  .blog-featured {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-featured-media {
    min-height: 220px;
  }
}
@media (max-width: 560px) {
  .blog-suggest .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
}

/* المدونة: تابات الفلتر بشكل cube-nav (اللزجة) */
.blog-filter-wrap {
  justify-content: flex-start;
}
.blog-filter-tabs {
  button[aria-pressed="true"] {
    color: #fff;
  }
  /* نقطة تحت التصنيف المختار (زي الوجه الحالي في cube-nav) */
  button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--if-mint);
  }
}
/* لو الناف أعرض من الشاشة بكتير: سكرول أفقي بدل التصغير */
.blog-filter-wrap.is-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* المدونة: كروت بصورة ركنها مقصوص وفيه زرار دائري */
.blog-grid {
  gap: clamp(26px, 3vw, 36px);
}
.blog-card {
  --notch-bg: #fff; /* لازم يطابق خلفية السكشن */
  display: flex;
  flex-direction: column;
  min-width: 0;

  &.is-out {
    display: none;
  }
  &.is-in {
    animation: blog-card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}
@keyframes blog-card-in {
  from {
    opacity: 0;
    translate: 0 18px;
    scale: 0.97;
  }
}
.blog-card-media {
  position: relative;
  height: clamp(220px, 22vw, 290px);
  border-radius: 24px;
  border-end-end-radius: 0;
  background: var(--notch-bg);
  overflow: hidden;
}
.blog-card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 24px;
  background: color-mix(in srgb, var(--ac) 14%, #eef3fa);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, transparent 45%, color-mix(in srgb, var(--if-deep) 30%, transparent));
  }
  .blog-card:hover & img {
    scale: 1.06;
  }
}
/* الركن المقصوص (ناحية نهاية السطر) */
.blog-card-notch {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 92px;
  height: 92px;
  background: var(--notch-bg);
  border-top-left-radius: 50%;

  /* الانحناءات اللي بتوصل الركن بالصورة */
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0 5px var(--notch-bg);
  }
  &::before {
    bottom: 6px;
    left: -20px;
  }
  &::after {
    top: -20px;
    right: 6px;
  }
}
html[dir="rtl"] .blog-card-notch {
  right: auto;
  left: -6px;
  border-top-left-radius: 0;
  border-top-right-radius: 50%;

  &::before,
  &::after {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
    box-shadow: -5px 5px 0 5px var(--notch-bg);
  }
  &::before {
    left: auto;
    right: -20px;
  }
  &::after {
    right: auto;
    left: 6px;
  }
}
.blog-card-action {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(150deg, var(--ac), var(--if-royal));
  transition:
    scale 0.35s cubic-bezier(0.3, 1.5, 0.5, 1),
    rotate 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);

}
a.blog-card-action:focus-visible {
  outline: 3px solid var(--if-teal);
  outline-offset: 3px;
}
.blog-card-body {
  padding: 16px 6px 4px;

  h3 {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    color: var(--if-deep);
  }
  p {
    margin: 10px 0 16px;
    font-size: 0.93rem;
    line-height: 1.85;
    color: #565f70;
  }
}
.blog-page {
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .blog-card.is-in {
    animation: none;
  }
}


/* المدونة: شريط أدوات فوق الشبكة (العنوان + العدد + التابات)، بيثبت تحت الهيدر وانت بتقرا */
.blog-toolbar {
  position: sticky;
  top: 86px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: clamp(48px, 6vw, 72px) calc(-1 * clamp(10px, 1.6vw, 18px)) 26px;
  padding: 12px clamp(10px, 1.6vw, 18px);
  border-radius: 22px;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;

  /* لما يثبت: خلفية زجاجية عشان الكروت اللي تحته ما تتداخلش معاه */
  &.is-stuck {
    background: #ffffffe6;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--if-royal) 8%, transparent),
      0 18px 30px -24px color-mix(in srgb, var(--if-deep) 50%, transparent);
  }
  .blog-filter-wrap {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
  }
}
.blog-toolbar-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.blog-results-count {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--if-steel);
  background: color-mix(in srgb, var(--if-teal) 10%, #fff);
  white-space: nowrap;

  b {
    font-variant-numeric: tabular-nums;
  }
}
@media (max-width: 1180px) {
  .blog-toolbar .blog-filter-wrap {
    flex-basis: 100%;
  }
}
@media (max-width: 720px) {
  .blog-toolbar {
    top: 76px;
    margin-inline: -16px;
    border-radius: 0;
    padding-inline: 16px;
  }
}

/* =====================================================
   المدونة: كارت المقال (نسخة محسّنة)
   صورة بركن مقصوص + تصنيف زجاجي فوق الصورة + عنوان سطرين + وصف 3 سطور + سطر الكاتب
   ===================================================== */
.blog-grid {
  align-items: stretch;
}
.blog-card {
  --notch-bg: #fff; /* لون الكارت نفسه عشان الركن المقصوص يبان مقطوع منه */
  position: relative;
  height: 100%;
  padding: 10px;
  border-radius: 30px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ac) 12%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--ac) 20%, #e3eaf4),
    0 24px 40px -34px color-mix(in srgb, var(--if-deep) 55%, transparent);
  transition:
    translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s,
    border-color 0.4s;

  &:hover {
    translate: 0 -6px;
    border-color: color-mix(in srgb, var(--ac) 30%, transparent);
    box-shadow:
      inset 0 1px 0 #fff,
      0 8px 0 color-mix(in srgb, var(--ac) 32%, #e3eaf4),
      0 32px 48px -30px color-mix(in srgb, var(--if-deep) 60%, transparent);
  }
  &:focus-within {
    outline: 3px solid var(--if-teal);
    outline-offset: 3px;
  }
}
.blog-card-media {
  height: clamp(200px, 19vw, 250px);
  border-radius: 22px;
  border-end-end-radius: 0;
}
.blog-card-image {
  border-radius: 22px;
}
/* التصنيف فوق الصورة */
.blog-card-media .blog-category {
  position: absolute;
  z-index: 2;
  top: 12px;
  inset-inline-start: 12px;
}
.blog-card-notch {
  width: 84px;
  height: 84px;
}
.blog-card-action {
  inset: 9px;
  font-size: 1.35rem;
}
.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 10px 4px;

  h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.5em);
    transition: color 0.3s;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 8px 0 0;
  }
  .blog-card:hover & h3 {
    color: var(--if-royal);
  }
}
.blog-card {
  display: flex;
  flex-direction: column;
}
.blog-card-body p {
  margin-bottom: 8px;
}

/* =====================================================
   تفاصيل المقال (blog-post)
   ===================================================== */
/* بيانات المقال في الهيرو */
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.blog-post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #cfe0f3;

  .icon {
    color: var(--if-mint);
  }
}
.page-hero .blog-post-title {
  max-width: 22ch;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.35;
  text-wrap: balance;
}

/* التخطيط: المقال + عمود جانبي ثابت */
.blog-post {
  padding-block: clamp(40px, 5vw, 72px);
}
.blog-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.blog-post-article {
  min-width: 0;
}
.blog-post-cover {
  margin: 0 0 clamp(28px, 4vw, 44px);
  overflow: hidden;
  aspect-ratio: 16 / 8;
  border-radius: 30px;
  background: color-mix(in srgb, var(--if-teal) 14%, #eef3fa);
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--if-teal) 25%, #dfe7f3),
    0 40px 60px -40px color-mix(in srgb, var(--if-deep) 60%, transparent);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* نص المقال: سطور مريحة للقراءة */
.blog-post-body {
  max-width: 70ch;
  font-size: 1.06rem;
  line-height: 2.05;
  color: #2f3b52;

  p {
    margin: 0 0 1.2em;
  }
}
.blog-post-lead {
  font-size: 1.18rem;
  line-height: 2;
  color: var(--if-deep);
  font-weight: 500;
  padding-inline-start: 18px;
  border-inline-start: 4px solid var(--if-teal);
}
.blog-post-section {
  margin-top: clamp(32px, 4vw, 48px);
  scroll-margin-top: 110px;

  h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.45;
    color: var(--if-deep);
  }
}
.blog-post-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 30%;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    0 3px 0 var(--if-deep);
}
.blog-post-list {
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;

  li {
    position: relative;
    padding-inline-start: 28px;
  }
  li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 0.85em;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    rotate: 45deg;
    background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  }
}
/* الخطوات المرقّمة */
.blog-post-steps {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 12px;

  li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--if-teal) 18%, #e3eaf4);
  }
  li::before {
    content: counter(step, decimal-leading-zero);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--if-steel);
    background: color-mix(in srgb, var(--if-teal) 12%, #fff);
  }
  b {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--if-deep);
  }
  span {
    font-size: 0.96rem;
    line-height: 1.85;
    color: #51607a;
  }
}
/* اقتباس بارز */
.blog-post-quote {
  position: relative;
  margin: 1.6em 0;
  padding: 26px 30px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    linear-gradient(150deg, var(--if-deep), var(--if-royal));
  box-shadow: 0 5px 0 #0b1c4a;

  &::before {
    content: "”";
    position: absolute;
    top: -6px;
    inset-inline-end: 22px;
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--if-mint);
    opacity: 0.6;
  }
  p {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    line-height: 1.7;
  }
}
/* الخلاصة */
.blog-post-summary {
  padding: clamp(20px, 3vw, 30px);
  border-radius: 26px;
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--if-mint) 30%, transparent), transparent 70%),
    color-mix(in srgb, var(--if-surface) 60%, #fff);
  border: 1px solid color-mix(in srgb, var(--if-teal) 22%, var(--line));

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
  }
  li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 600;
    color: var(--if-deep);
  }
  li::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 0.45em;
    border-radius: 50%;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat,
      linear-gradient(150deg, var(--if-teal), var(--if-royal));
  }
}
.blog-post-end {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
}
.blog-post-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--if-royal);

  .icon {
    rotate: 180deg;
    transition: translate 0.3s;
  }
  html[dir="ltr"] & .icon {
    rotate: 0deg;
  }
  &:hover .icon {
    translate: 4px 0;
  }
  html[dir="ltr"] &:hover .icon {
    translate: -4px 0;
  }
}

/* العمود الجانبي */
.blog-post-aside {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 16px;
}
.blog-post-aside-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--if-steel);
}
.blog-post-share {
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--if-royal) 10%, #e3eaf4);
}
.blog-post-share-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.blog-share {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  cursor: pointer;
  color: var(--if-royal);
  background: color-mix(in srgb, var(--if-royal) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--if-royal) 12%, transparent);
  transition:
    background 0.25s,
    color 0.25s,
    translate 0.25s;

  svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon {
    font-size: 1.2rem;
  }
  &:hover {
    color: #fff;
    background: linear-gradient(150deg, var(--if-royal), var(--if-teal));
    translate: 0 -2px;
  }
  &:focus-visible {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
}
.blog-share-status {
  display: block;
  min-height: 1.2em;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--if-steel);
}
.blog-post-cta {
  border-radius: 24px;

  h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
  }
  p {
    margin: 0 0 18px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #cfe0f3;
  }
  .btn {
    width: 100%;
  }
}

/* مقالات ذات صلة */
.blog-related {
  padding-block: clamp(48px, 6vw, 80px);
  background: linear-gradient(180deg, #fff, var(--if-surface));
}
.blog-related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;

  h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    color: var(--if-deep);
  }
}
.blog-related .blog-card {
  --notch-bg: #fff;
}

/* المقال المميّز في صفحة المدونة: العنوان لينك + زرار */
.blog-featured-title a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.4s;

  &:hover {
    background-size: 100% 2px;
  }
}
html[dir="rtl"] .blog-featured-title a {
  background-position: 100% 100%;
}
.blog-featured-cta {
  align-self: flex-start;
}

@media (max-width: 980px) {
  .blog-post-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-post-aside {
    position: static;
  }
  .blog-post-toc {
    display: none;
  }
}
@media (max-width: 560px) {
  .blog-post-cover {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }
  .blog-post-steps li {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 14px;

    &::before {
      width: 36px;
      height: 36px;
      border-radius: 12px;
    }
  }
  .blog-post-quote {
    padding: 22px;
  }
}
/* أقسام المقال جوه <section>: نلغي حشوة الأقسام العامة عشان المسافات تبقى مريحة */
.blog-post-body > .blog-post-section {
  padding: 0;
}
.blog-post-body > .blog-post-summary {
  padding: clamp(20px, 3vw, 30px);
}
/* كارت "جاهز تطبّق؟" في جنب المقال: خلفية الهوية الداكنة */
.blog-post-cta {
  padding: 24px;
  color: #fff;
  background:
    radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--if-teal) 50%, transparent), transparent 70%),
    linear-gradient(150deg, var(--if-royal), var(--if-steel));
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 5px 0 #0b1c4a,
    0 30px 50px -30px color-mix(in srgb, var(--if-deep) 70%, transparent);

  h3 {
    color: #fff;
  }
}

/* زرار الكارت: سهم مايل لبرّه بيودي على تفاصيل المقال */
a.blog-card-action {
  text-decoration: none;

  .icon {
    font-size: 1.75rem;
    stroke-width: 2.2;
    rotate: 45deg; /* عربي: السهم بيشاور لفوق-شمال (ناحية الركن) */
    transition: translate 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  html[dir="ltr"] & .icon {
    rotate: 135deg; /* إنجليزي: لفوق-يمين */
  }
  /* الهوفر: الزرار يكبر والسهم يطلع لبرّه شوية (بدل لفّ الدايرة) */
  .blog-card:hover & {
    rotate: 0deg;
    scale: 1.08;
  }
  .blog-card:hover & .icon,
  &:focus-visible .icon {
    translate: -3px -3px;
  }
  html[dir="ltr"] .blog-card:hover & .icon,
  html[dir="ltr"] &:focus-visible .icon {
    translate: 3px -3px;
  }
}

/* هوفر الكارت: السهم بيلف من المايل لأفقي — شمال في العربي، يمين في الإنجليزي */
a.blog-card-action .icon {
  transition:
    rotate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1),
    translate 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.blog-card:hover a.blog-card-action .icon,
a.blog-card-action:focus-visible .icon {
  rotate: 0deg; /* السهم أصلًا بيشاور شمال */
  translate: -3px 0;
}
html[dir="ltr"] .blog-card:hover a.blog-card-action .icon,
html[dir="ltr"] a.blog-card-action:focus-visible .icon {
  rotate: 180deg;
  translate: 3px 0;
}

/* =====================================================
   صفحة التسجيل (بتعيد استخدام تخطيط صفحة التواصل: contact-grid / contact-card / contact-info)
   ===================================================== */
/* أجزاء النموذج المرقّمة */
.reg-step {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 16px;

  legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--if-deep);

    i {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 10px;
      font-style: normal;
      font-size: 0.75rem;
      font-weight: 800;
      color: #fff;
      background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
      box-shadow: 0 3px 0 var(--if-deep);
    }
  }
  & + & {
    margin-top: 8px;
    padding-top: 22px;
  }
}

/* كروت اختيار البرنامج */
.reg-programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 10px;
}
.reg-program {
  position: relative;
  cursor: pointer;

  input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
}
.reg-program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--if-surface) 60%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--ac) 14%, var(--line));
  transition:
    border-color 0.25s,
    background-color 0.25s,
    box-shadow 0.25s,
    translate 0.25s;

  .reg-program:hover & {
    border-color: color-mix(in srgb, var(--ac) 45%, transparent);
    translate: 0 -2px;
  }
  .reg-program input:checked + & {
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 8%, #fff));
    border-color: color-mix(in srgb, var(--ac) 70%, transparent);
    box-shadow:
      0 4px 0 color-mix(in srgb, var(--ac) 40%, #dfe7f3),
      0 16px 26px -18px color-mix(in srgb, var(--ac) 70%, transparent);
    translate: 0 -2px;
  }
  .reg-program input:focus-visible + & {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
}
.reg-program-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 30%;
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
  background: color-mix(in srgb, var(--ac) 12%, #fff);
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;

  .reg-program input:checked + .reg-program-card & {
    color: #fff;
    background: linear-gradient(150deg, var(--ac), var(--if-royal));
    box-shadow:
      inset 0 2px 0 #ffffff4d,
      0 3px 0 var(--if-deep);
  }
}
.reg-program-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--if-deep);
}
/* علامة صح في الركن للمختار */
.reg-program-check {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ac) 30%, var(--line));
  background: #fff;
  transition:
    background 0.25s,
    border-color 0.25s,
    scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);

  .reg-program input:checked + .reg-program-card & {
    border-color: transparent;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat,
      linear-gradient(150deg, var(--ac), var(--if-royal));
    scale: 1.1;
  }
}

/* أرقام الجوال والبريد بتتكتب LTR بس الأيقونة تفضل في مكانها */
.register-page .cf-input input[dir="ltr"] {
  text-align: start;
}
html[dir="rtl"] .register-page .cf-input input[dir="ltr"] {
  text-align: right;
}

/* الموافقة */
.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--if-deep);
  background: color-mix(in srgb, var(--if-surface) 60%, #fff);
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  cursor: pointer;

  input {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 22px !important;
    height: 22px;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 1.5px solid color-mix(in srgb, var(--if-royal) 30%, var(--line)) !important;
    background: #fff !important;
    cursor: pointer;
    transition:
      background 0.2s,
      border-color 0.2s;

    &:checked {
      border-color: transparent !important;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
        linear-gradient(150deg, var(--if-teal), var(--if-royal)) !important;
    }
    &:focus-visible {
      outline: 3px solid var(--if-teal);
      outline-offset: 2px;
    }
  }
  a {
    color: var(--if-royal);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.register-page .cf-actions .btn {
  width: 100%;
  justify-content: center;
}

/* لوحة "ماذا يحدث بعد التسجيل" */
.reg-timeline {
  position: relative;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: next;
  display: grid;
  gap: 18px;

  /* خط بيوصل الخطوات */
  &::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    inset-inline-start: 17px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--if-mint), #ffffff22);
  }
  li {
    position: relative;
    counter-increment: next;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
  }
  li::before {
    content: counter(next);
    grid-row: span 2;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 800;
    color: var(--if-deep);
    background: linear-gradient(190deg, #fff, #d7eef2);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--if-teal) 50%, #0b1c4a);
  }
  b {
    font-size: 1rem;
    color: #fff;
  }
  span {
    margin-top: 2px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #cfe0f3;
  }
}

/* حقول بأيقونة (التواصل + التسجيل): مساحة الأيقونة لازم تغلب حشوة الحقول العامة */
.contact-page .contact-form .cf-input input {
  padding-inline-start: 46px;
}
/* الجوال والبريد مكتوبين LTR: الأيقونة على يمين الحقل في العربي، فالمساحة تبقى يمين */
html[dir="rtl"] .contact-page .contact-form .cf-input input[dir="ltr"] {
  padding-left: 16px;
  padding-right: 46px;
}

/* كروت البرامج: الخمسة في صف واحد على الديسكتوب */
@media (min-width: 700px) {
  .reg-programs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* موبايل: كروت أفقية مدمجة (أيقونة + اسم) في عمودين */
@media (max-width: 699px) {
  .reg-programs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reg-program:last-child {
    grid-column: 1 / -1;
  }
  .reg-program-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-inline-end: 38px;
  }
  .reg-program-icon {
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }
  .reg-program-name {
    font-size: 0.86rem;
  }
  .reg-program-check {
    top: 50%;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
  }
}

/* =====================================================
   الفوتر: زرار في عمود الهوية + بيانات تواصل بأيقونات + روابط قانونية في الشريط السفلي
   ===================================================== */
.footer {
  .footer-brand p {
    max-width: 38ch;
    line-height: 1.85;
  }
  .footer-contact {
    gap: 12px;

    a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: none;
    }
    .icon {
      flex: none;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      padding: 7px;
      border-radius: 10px;
      color: var(--if-royal);
      background: color-mix(in srgb, var(--if-teal) 10%, #fff);
      border: 1px solid color-mix(in srgb, var(--if-teal) 22%, transparent);
      transition:
        background 0.25s,
        color 0.25s;
    }
    a:hover .icon,
    a:focus-visible .icon {
      color: #fff;
      background: linear-gradient(150deg, var(--if-royal), var(--if-teal));
    }
  }
  .footer-bottom {
    align-items: center;
  }
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
  }
  @media (max-width: 520px) {
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}

/* =====================================================
   خدماتنا الاستشارية (organizations.html)
   ===================================================== */
.org-head {
  max-width: 680px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;

  h2 {
    margin: 14px 0 0;
    color: var(--if-deep);
  }
  .lead {
    margin: 12px auto 0;
  }
}

/* من نخدم */
.org-sectors {
  padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 64px);
}
.org-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
}
.org-sector {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--ac) 5%, #fff));
  border: 1px solid color-mix(in srgb, var(--ac) 14%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--ac) 22%, #dfe7f3),
    0 22px 36px -30px color-mix(in srgb, var(--if-deep) 55%, transparent);
  transition:
    translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s;

  &:hover {
    translate: 0 -5px;
    box-shadow:
      inset 0 1px 0 #fff,
      0 8px 0 color-mix(in srgb, var(--ac) 32%, #dfe7f3),
      0 28px 40px -28px color-mix(in srgb, var(--if-deep) 60%, transparent);
  }
  h3 {
    margin: 16px 0 8px;
    font-size: 1.12rem;
    color: var(--if-deep);
  }
  p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.85;
    color: #51607a;
  }
}
.org-sector-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 30%;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(150deg, var(--ac), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    inset 0 -3px 0 #0b1c4a33,
    0 4px 0 var(--if-deep);
  transition: rotate 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);

  .org-sector:hover & {
    rotate: -8deg;
  }
}

/* منهجية العمل: 4 خطوات متوصّلة بخط */
.org-method {
  padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 100px);
  background: linear-gradient(180deg, #fff, var(--if-surface));
}
.org-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;

  /* الخط اللي بيوصل الأرقام */
  &::before {
    content: "";
    position: absolute;
    top: 27px;
    inset-inline: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--if-royal), var(--if-teal));
    opacity: 0.35;
  }
}
.org-step {
  position: relative;
  text-align: center;

  h3 {
    margin: 16px 0 8px;
    font-size: 1.05rem;
    color: var(--if-deep);
  }
  p {
    margin: 0 auto;
    max-width: 26ch;
    font-size: 0.92rem;
    line-height: 1.85;
    color: #51607a;
  }
}
.org-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow:
    0 0 0 7px var(--if-surface),
    inset 0 2px 0 #ffffff4d,
    0 4px 0 7px color-mix(in srgb, var(--if-royal) 12%, var(--if-surface));
}

/* مجالات البرامج */
.org-areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin-top: clamp(36px, 5vw, 56px);
  padding: 18px 22px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--if-royal) 10%, #e3eaf4);

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
.org-areas-label {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--if-deep);
}
.org-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-deep);
  text-decoration: none;
  background: color-mix(in srgb, var(--ac) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent);
  transition:
    background 0.25s,
    color 0.25s,
    translate 0.25s;

  html[dir="rtl"] & {
    padding: 6px 8px 6px 14px;
  }
  &:hover,
  &:focus-visible {
    color: #fff;
    background: linear-gradient(150deg, var(--ac), var(--if-royal));
    translate: 0 -2px;
  }
}
.org-area-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
  background: #fff;
}

/* نموذج العرض: عنوان مجموعة الشرايح + أيقونات جوه الشرايح */
.cf-topics-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-deep);
}
.org-area-chips .cf-chip span {
  gap: 7px;

  .icon {
    font-size: 1rem;
  }
}
.org-area-error {
  margin: 8px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c0392b;
}

@media (max-width: 900px) {
  .org-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;

    &::before {
      display: none;
    }
  }
}
@media (max-width: 520px) {
  .org-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .org-areas {
    flex-direction: column;
  }
}
/* شرايح المجالات: النص الداخلي مش شريحة تانية */
.org-area-chips .cf-chip span span {
  all: unset;
}

/* =====================================================
   خدماتنا الاستشارية: كروت "من نخدم" بتتفرد مع السكرول (القسم بيثبت)
   ===================================================== */
.svc-track {
  position: relative;
  height: 240vh; /* طول السكرول اللي الحركة بتحصل فيه */
  padding: 0;
}
.svc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.svc-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.5vw, 40px);
  width: 100%;

  .org-head {
    margin-bottom: 0;
  }
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.svc-slot {
  position: relative;
  border-radius: 26px;
  will-change: transform;
  box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--if-deep) 60%, transparent);
}
.svc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(320px, 46vh, 440px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 22px 18px;
  border-radius: 26px;
  color: #fff;
  background: color-mix(in srgb, var(--ac) 40%, var(--if-deep));
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 5px 0 color-mix(in srgb, var(--ac) 45%, #0b1c4a);
}
.svc-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);

  .svc-card:hover & {
    scale: 1.2;
  }
}
/* تظليل بلون القطاع من تحت عشان الكلام يتقري */
.svc-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--if-deep) 85%, transparent) 92%),
    linear-gradient(180deg, color-mix(in srgb, var(--ac) 30%, transparent), transparent 40%);
  pointer-events: none;
}
.svc-icon {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 30%;
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 3px 0 color-mix(in srgb, var(--ac) 50%, #0b1c4a);
}
/* السهم: بيلف ناحية الركن مع الهوفر */
.svc-arrow {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(150deg, var(--ac), var(--if-royal));
  box-shadow:
    inset 0 1px 0 #ffffff40,
    0 3px 0 var(--if-deep);
  transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);

  svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    rotate: -90deg; /* عربي: بيشاور شمال */
    transition: rotate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[dir="ltr"] & svg {
    rotate: 90deg;
  }
  .svc-card:hover & svg,
  &:focus-visible svg {
    rotate: -45deg; /* لفوق-شمال (ناحية الركن) */
  }
  html[dir="ltr"] .svc-card:hover & svg,
  html[dir="ltr"] &:focus-visible svg {
    rotate: 45deg;
  }
  &:hover {
    scale: 1.06;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: 3px;
  }
}
/* الوصف بيطلع مع الهوفر */
.svc-reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  > div {
    overflow: hidden;
    min-height: 0;
  }
  p {
    margin: 0;
    padding-bottom: 8px;
    font-size: 0.92rem;
    line-height: 1.8;
    color: #ffffffdb;
    opacity: 0;
    translate: 0 8px;
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .svc-card:hover &,
  .svc-card:focus-within & {
    grid-template-rows: 1fr;
  }
  .svc-card:hover & p,
  .svc-card:focus-within & p {
    opacity: 1;
    translate: 0 0;
  }
}
.svc-name {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: #fff;
}

/* تابلت/موبايل + تقليل الحركة: من غير تثبيت، والوصف ظاهر على طول */
@media (max-width: 1000px), (prefers-reduced-motion: reduce) {
  .svc-track {
    height: auto;
    padding-block: clamp(56px, 7vw, 90px) clamp(40px, 5vw, 64px);
  }
  .svc-sticky {
    position: static;
    height: auto;
    overflow: visible;
  }
  .svc-slot {
    transform: none !important;
  }
  .svc-reveal {
    grid-template-rows: 1fr;

    p {
      opacity: 1;
      translate: 0 0;
    }
  }
}
@media (max-width: 1000px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .svc-card {
    height: 340px;
  }
}
@media (max-width: 560px) {
  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .svc-card {
    height: 300px;
  }
}

/* =====================================================
   المستشارون: لوحة "بطاقات تعريف" متعلّقة بشريط (lanyard) وبتتمرجح بهدوء
   ===================================================== */
.advisors-page {
  padding-block: clamp(48px, 6vw, 90px);
}

/* ---------- بطاقة التعريف (مشتركة) ---------- */
.advisor-badge {
  --c: var(--if-teal);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px; /* مكان الشريط */
  transform-origin: 50% 0;
  animation: badge-sway 6s ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);

  &:hover,
  &:focus-within {
    animation-play-state: paused;
  }
}
@keyframes badge-sway {
  0%,
  100% {
    rotate: -1.6deg;
  }
  50% {
    rotate: 1.6deg;
  }
}
/* الشريط: نازل من فوق بلون البرنامج */
.badge-lanyard {
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 70px;
  margin-left: -11px;
  border-radius: 0 0 4px 4px;
  background:
    repeating-linear-gradient(180deg, #ffffff26 0 2px, transparent 2px 7px),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, var(--if-deep)), var(--c) 50%, color-mix(in srgb, var(--c) 70%, var(--if-deep)));
  box-shadow: 0 2px 6px #0b1c4a33;

  /* نص الشريط (اسم الهوية) */
  i {
    position: absolute;
    inset: 6px 0;
    background: linear-gradient(180deg, transparent, #ffffff40 50%, transparent);
    opacity: 0.5;
  }
}
/* المشبك المعدني */
.badge-clip {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 2;
  width: 34px;
  height: 16px;
  margin-left: -17px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f4f7fb, #b8c4d3);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 5px #0b1c4a40;
}
.badge-body {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px 22px;
  border-radius: 24px;
  text-align: center;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 0 color-mix(in srgb, var(--c) 28%, #dfe7f3),
    0 30px 46px -30px color-mix(in srgb, var(--if-deep) 60%, transparent);
  transition:
    translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s;

  /* شريط الهوية فوق الكارت + فتحة الشريط */
  &::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 74px;
    background:
      radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%),
      linear-gradient(150deg, var(--if-deep), var(--if-royal));
  }
  &::after {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 44px;
    height: 8px;
    margin-left: -22px;
    border-radius: 8px;
    background: #ffffff38;
    box-shadow: inset 0 1px 2px #0b1c4a66;
  }
  .advisor-badge:hover & {
    translate: 0 -4px;
    box-shadow:
      inset 0 1px 0 #fff,
      0 9px 0 color-mix(in srgb, var(--c) 38%, #dfe7f3),
      0 36px 50px -30px color-mix(in srgb, var(--if-deep) 65%, transparent);
  }
  b {
    position: relative;
    display: block;
    margin-top: 14px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--if-deep);
  }
  small {
    position: relative;
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--mut);
  }
}
.badge-org {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #ffffffb3;
  direction: ltr;
}
.badge-photo {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  margin-top: 10px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 7px color-mix(in srgb, var(--c) 55%, transparent),
    0 14px 24px -12px #0b1c4a80;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
  }
}
/* مكان فاضي لمستشار قادم */
.badge-photo--empty {
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: color-mix(in srgb, var(--c) 75%, var(--if-deep));
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--c) 10%, #fff) 0 25%, #fff 0 50%) 0 0 / 18px 18px;
}
.badge-tag {
  position: relative;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--c) 75%, #0b1c4a);
  background: color-mix(in srgb, var(--c) 14%, #fff);
}
.advisor-badge.is-placeholder {
  b {
    color: color-mix(in srgb, var(--if-deep) 75%, #fff);
  }
  small {
    font-weight: 700;
    color: var(--if-steel);
  }
}

/* ---------- المستشارة التنفيذية ---------- */
.advisor-feature {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.advisor-badge--lead {
  .badge-photo {
    width: 132px;
    height: 132px;
  }
  .badge-body {
    padding-bottom: 26px;
  }
}
.advisor-feature-copy {
  min-width: 0;
}
.advisor-feature-quote {
  position: relative;
  margin: 18px 0 14px;
  padding-inline-start: 22px;
  border-inline-start: 4px solid var(--if-teal);

  p {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    font-weight: 800;
    line-height: 1.5;
    color: var(--if-deep);
    text-wrap: balance;
  }
}
.advisor-feature-text {
  max-width: 56ch;
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.95;
  color: #4a5872;
}

/* ---------- دور المستشارين ---------- */
.advisor-roles {
  margin-top: clamp(64px, 8vw, 110px);
}
/* لما يبقى أول حاجة في الصفحة (بعد ما اتشالت بطاقة المستشارة التنفيذية): من غير مسافة زيادة فوقه */
.advisor-roles:first-child {
  margin-top: 0;
}
.advisor-roles-head {
  max-width: 760px;
  margin-bottom: 26px;

  .lead {
    margin: 14px 0 0;
  }
}
.advisor-roles-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: role;

  li {
    position: relative;
    counter-increment: role;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--if-teal) 5%, #fff));
    border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--if-teal) 20%, #e3eaf4);

    /* رقم مفرّغ في الركن */
    &::after {
      content: counter(role, decimal-leading-zero);
      position: absolute;
      top: 18px;
      inset-inline-end: 20px;
      font-size: 2rem;
      font-weight: 800;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.2px color-mix(in srgb, var(--if-royal) 25%, transparent);
    }
  }
  b {
    margin-top: 8px;
    font-size: 1.1rem;
    color: var(--if-deep);
  }
  span:not(.role-icon) {
    font-size: 0.93rem;
    line-height: 1.85;
    color: #51607a;
  }
}
.role-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 30%;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow:
    inset 0 2px 0 #ffffff4d,
    0 4px 0 var(--if-deep);
}

/* ---------- لوحة المستشارين ---------- */
.advisor-board {
  margin-top: clamp(64px, 8vw, 110px);
}
.advisor-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;

  h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: var(--if-deep);
  }
  .tabs {
    margin: 0;
  }
}
/* ---------- كروت المستشارين: صورة على خلفية أشعة + كارتين مايلين وراها ----------
   ألوان الهوية: الأشعة أزرق ملكي/ستيل، الكارت الخلفي الأول تيل، والتاني أزرق غامق مخطط بلون التخصص (--c) */
.advisor-board {
  overflow-x: clip; /* الكروت المايلة بتطلع برا الكارت شوية: نمنع سكرول أفقي على الأطراف */
}
.advisors-grid.advisor-decks {
  /* أعمدة بعرض ثابت متوسّطة: كارتين (أو أي عدد قليل) يفضلوا في النص بدل ما يلزقوا في جنب */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 340px));
  justify-content: center;
  justify-items: center;
  gap: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 84px);
  padding: 40px clamp(16px, 3vw, 32px) 10px;

  .advisor-card {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    text-align: center;

    &:hover {
      translate: none;
    }
  }
}
.advisor-deck {
  --dx: 13%; /* قد إيه الكروت الخلفية طالعة على الجنب */
  --dy: 7%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  b {
    display: block;
    margin-top: 32px; /* بعيد عن طرف الكارت المخطط اللي نازل تحت الصورة */
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--if-deep);
  }
  small {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--mut);
  }
}
.deck-stack {
  position: relative;
  isolation: isolate;
  width: min(100%, 260px);
  aspect-ratio: 4 / 5;
}
.deck-back,
.deck-photo {
  border-radius: 16px;
  transition:
    rotate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.deck-back {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* الكارت التيل: طالع فوق ناحية اليمين */
.deck-back--a {
  inset: 4% 0 10%;
  rotate: 8deg;
  translate: var(--dx) calc(var(--dy) * -1);
  background: linear-gradient(160deg, var(--if-mint), var(--if-teal) 55%, var(--if-steel));
  box-shadow: 0 16px 30px -18px #0b1c4a99;
}
/* الكارت المخطط: طالع تحت ناحية الشمال (مكان الكارت المعدني في التصميم) */
/* الكارت التاني: بعناصر الهوية بدل الخطوط —
   تدرّج الهوية (ملكي ← تيل) + مربعات البيكسل (نفس توزيعة الهيرو والـ CTA) + علامة اللوجو (IF) كعلامة مائية */
.deck-back--b {
  inset: 12% 6% 2%;
  overflow: hidden;
  rotate: -11deg;
  /* طالع أكتر من الكارت التيل عشان علامة اللوجو والبيكسلات تبان على الطرف الشمال */
  translate: calc(var(--dx) * -1.5) var(--dy);
  /* الطبقات (من فوق لتحت):
     1) هالة ناعمة ورا علامة اللوجو  2+3) قَطع مايل زي قَطعة الـ F في اللوجو (شريط فاتح + خط مِنت رفيع)
     4) نقط دقيقة زي خلفية الهيرو  5) لمعة تيل في الركن  6) تدرّج الهوية */
  background:
    radial-gradient(circle at 11% 15%, #ffffff38, transparent 15%),
    linear-gradient(62deg, transparent 0 15%, #ffffff17 15% 25%, transparent 25%),
    linear-gradient(62deg, transparent 0 28%, #a6e3ea59 28% 29%, transparent 29%),
    radial-gradient(#ffffff1c 1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(90% 70% at 85% 100%, color-mix(in srgb, var(--if-teal) 70%, transparent), transparent 70%),
    linear-gradient(155deg, var(--if-deep) 0%, var(--if-royal) 45%, color-mix(in srgb, var(--c) 55%, var(--if-steel)) 100%);
  box-shadow:
    inset 1px 1px 0 #a6e3ea66, /* حافة مِنت من فوق/شمال = ضوء على الكارت */
    inset 0 0 0 1px #ffffff24,
    0 18px 34px -18px #0b1c4aa6;

  /* مربعات البيكسل: نفس الـ SVG بتاع .hero-pixels بلون المِنت */
  &::before {
    content: "";
    position: absolute;
    /* left/bottom فيزيائي (مش logical): الجزء الظاهر من الكارت دايمًا ناحية الشمال تحت */
    left: 5%;
    bottom: 4%;
    width: 38%;
    aspect-ratio: 377 / 324;
    opacity: 0.55;
    transition:
      translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.55s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 377 324'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23a6e3ea'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)'%3E%3Crect x='0' y='215.43' width='215.43' height='107.71'/%3E%3Crect x='161.57' y='107.72' width='107.71' height='107.71'/%3E%3Crect x='269.29' y='215.43' width='107.71' height='107.71'/%3E%3Crect x='269.29' y='0' width='107.71' height='107.71'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  }
  /* علامة اللوجو: الفافيكون كقناع بلون أبيض شفاف (بتاخد شكل الـ IF بالظبط) */
  &::after {
    content: "";
    position: absolute;
    top: 9%;
    left: 3.5%;
    width: 14%; /* على قد الجزء الظاهر من ورا الصورة بالظبط */
    aspect-ratio: 1;
    background: linear-gradient(160deg, #fff, var(--if-mint)); /* أبيض ← مِنت زي ألوان اللوجو */
    opacity: 0.62;
    transition: opacity 0.55s;
    -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAtuSURBVHhe7V17jCRFGT9ODRpEoyIgoHCGnHu7U1Uze4enJieJGLnjduoxM7t7XAwJiRCiovEP/8GLPBJFEqIhEmDdnanq7pm523vs3kXUEE3wHzVEOUHleAn4OMQXMdwa7+Du0uarnt6tqenZnffNzvYv+aV3uqurq79f1+urr3vXrYsRI0aMGDFixIgRI0aMGDFixIgRI8agQazfdpM8395bD0O5/e8gTF6ZzBSuTu7sE0JZWmbp6tTY1Lvs++w6rtgmzye8+IVkZu/TSMit9nEbKFPcRkRRYu6+jJk6hZk8i6k6c87I6pBHUETROYMzzpnkxL6zOON8zr7friGVm3oPEd5XsSg+Pzox56fGD/mEq2vsdCHI9Q9cRDLFcjK7zx+dOOQnM2WfcM8n3O0PighmTHrBNuvVMuf5qV0HfCzc6+377jhGxsoXE166g4jin8HwycxeH3PHJ6LoY5r/uJ0ekNiZ30AypedGJ+d1WsxUf5HXoYhgBuhUM+v4yclZHwvZPQFQ2r0KC+87RHj/CgxfNm4gECCqBgzl9l+AuXtsdPyQj5msvfl+oG34VgXoRhOUYMUE5sWHiSgugOGJKEXcQP0agKl8cPPk4f41PtA2fD3j91KAFHc+QXixTLh3GtpsIrzagi/eQHQNSGTyGzB3z0BbX3NOP9E2fj0RtPEtAbIdFiCZKV2HefGH0MSMjh/UHVRNgW3WEQAx+XWoNTXp+4224VsVINdGH4C5Iwj3fg6jlNT4geY6y3oCUHVE52Wn7zfahl9WgNrmRwuwCwRochS0NXv/OzH3bsaidDSVO+Cncvt9zJow/OINRPcBmKknQNCa9P1G2/BRxtcCWMavEaDBGoDZ996LeelrRHgvwuikbSMtCuBWCYCo+m3befeCtvG7KQAMJ4kovTI6MR+M4e3CtML6NaD/BbANv6wAVjNUMX5TAmAm9wXDwojCtMo6fcBgClD79DfVB2Cmnk1mIsby7bCuAPKpVSmAbfiopz9CAJRV2837jwSmhWORk6l22AMBYB6iR2h6sNABjtfhRIWTEdx1UPt8gu1BP3XjEjff9CMf5VTavP9IYCqfWU0CJLN7/dT4QR8xtYCYegIzeRgxdRBTNQdEle0S5Xwt1Rxi8lB1GjWHmZyPpFBzFmFfSL0PZYHOIZxVczin5vF4aXaEq4+a9x8JxOQfyGpogrirvaaEF5/F3L0N59RlZt6rFghqQJ8LAHnBnIQI936Yq5h5rnogpvq6BoDfKJWb9QlTt5p5DQy6KUD78wDHh4khooWvmPkMFHrbBzQjgPTBcYeodM08Bg69FaDxJgiaHcyc58/JwnYvoYehfSYAtPvJTOms3YQNJPpxHgB+KUxnvmmeO7DATPVuJryiN1TqWSli6lfr1vnmqdHYs+c8ks1ftGlcXjIkHrk0oGdtl1g/XRTNc4Lf8LdJIWbX20VqGj0VYIUaoM8RpZOJMfkx8zwbifQ0SoriI4R7xzBz/oOpOhESUbmgyeRC+Ns8bqbTWxakDYlZsA+2mAdEXC6Ef2OhTuCMC9vXIZDMLlvTwEw+2y8CQNOz0pAT0fwXSab8Zug+D0TzOkMd6xOyGDBrMVf0k+N7tSMOpX9wlV2+ptEfAsjAv0Plz8z0NjCVk0FAQIfLC7Q9oMt5QbMe/H2qIzUAUflcx2+ongB1+gAYhRHhvTE85nzYTG9iw3bvQkTVP6LO7wht468gABLqTZRz268BiMkX9KzVLlA7bFIAeKoTtHCzmdYGZoUJiMqwz+0IbcPXE6CyBgDhhyijTiYzMx+xy9k0MJUvdksAe024tgmC2a6OkDtspjOBqZOELaKFu7sW0mIbPsr4hgiBAE5nBEBMvtQtAWpqgCVAJSD39U075CVmuhDJscIWTNXT8Hci7dwTiBVxvXZpG7+uCMHKF3TEKOO8sXls6gN2mZsGpvIvMAKoKVQ7rOuMMwVwgo43nd9lpgkBbmfCvZcwla/Cb8zkPUE8acT12qVt+EjjLy1BJid04O1TDc1VVgJi8q+9F6DiaEsXyuZxE4gV1JbdP/YRk7+H310TwDb8sgJADVD+6O7DsN57l13mloCYOt4zASqdMCwrEu6+tik3/T7zeAiUzt+iI65BLCqf0fuouvvcC6B8Ml72YSKWEt6ldrlbAqbq1W4JYPcBEJgFXk4dcTc2PWYeC4GZJEQUT8H5IBSsV8B+LUA3+gDb8MsJkPWCpz+jbrHL3TJ6KQCm6uiW3T+B2e60uT8EuJ4Jc58LQiKlFqCqBpxDAUiupI2PReE+u9xtoacCMPlHwkt/v2a7d6G5PwQsvgRDzeDdgaAGVPqAdCN9gFP7qtFKtF9DqnodydNuh9Eb532SK5/Awr3dLnPbQFT2RoA9e86DIS+iM5GxMomxwq2B8ZeCgStN0O/guO6EI2oAGBFqDEzSgrd0wvNhawYWh7+N/VVPvRNw8amHv51TJOsdI9ny/Q2FmLSCXtWADdsfuBClnZuqrx4gkVYIvKD2fKRKgJoaEAxjMXffwtx9FDPnyyNMXkvSapjQ/CZCvU1Lfxu/Qy7ut46Hv7NqmEzuvRIeHLu8HUV3BAiqd4IVEvb1bGxMz7wbc++FsN0384muAVKLG4SpFEtYuCN2nqsKmKq/dVoAyA8x+d+RsemL7evZwEzOmu2+yao+QM8DgmaGiNKbiHuRtWnVoRsCwPgdMfWkfS0bKJ1f9pWligB6GEqounvz5BEw/ukEnbnBzmvVohsC6FkuU9+2r2UC0fx1ekK2zLXtGnDN5x/zcTp/m53XqkanBdAv8XHvzHLLignuXY6F988o17TJagHU9zFTv7HzWvXotACVSLY5+zohtm27822Yub8IfPu17b5JLQANO2F1H0438MbJakNHR0HcDcbiFR9+FDBTUzrsxD43gmYNQEx+ZuACcwGdqwGLHk7PvkYITPO366Fkg6+8mp3wwKJTAoTrukla/pB9DUCCFXYEnW7jiz9rRYCONEHQrCTShS/Z+QNgQkZEaSFwFSzf7ps0m6CBRfsCSO2HwVQ+bucNwDc8fBnhpVeiZrorca0I0FYTFMxMiwvwIQ4776FrH7yAcO/JRkY8UVwrTVDrAvDgBYoEndlt5wtxk5g5j9VzMzTCWIAVuBm+eEXlg3aeAMzUbKPDzXqMBajLMJ5HPR7lrsVMSf05sprzmuPa6QOa+oBSEEIOH/bYyJz31+THnXzw5Dc21l+Oa0MA1owAsE67DzyS/x6+YXqoJi/uFIInv33jA9eOAA01QbISDl7+30h6+lNVmQixHjO30uZ3xvjANSKAfG3lGgDGL/sQl4/T01UOMRhqYu492m6HG0XTGTewWFmAypOfKb81ks7vNM9NbH/gciK8Xy+3qNIO4xpQic1JZsonEzund5jnJbgaTYrSy3phvMVx/kpc4wJIP5WdhQ73BKJT15nnIOrmkqK0ELzL2x3jA0GAMDp6YBEtQPDKEBGl4yNjU1vM9Ei4d4Ffp1nHWiuE4S6m6qfm9QcOUcNQHRgrSkcTOx9a9O9g8dAHifCOQGfb0LdDO8DgpT15R3WJBwzmTBgMC+N4wr0jEK8TpkmIwmeJKP0pKjKtW9TrBtw9OcwKV1SXeMAAL0BALCQ0KbrKc+/exYNCrCfM+xYcC+P6bUN1ixCCgmjhG1WFHUQgJo9XmpwTCSoXvZqwrkt48ZdBk2P3Ed0j1EIwPnzNsbqkAwpM5dlkpnw0wR7RYYSp1C1vR8y7k4jiaR2LqYNWI6KKO01R0q5tGHlh7n7XLufAAlF572Vbg2gDlJZbYWIF3xEN3h2uRAx3lbpDP4u5dxyL4r4R7nzaLuOawTB3hpLZvZ+ENdwoQiAs0N7fLGvyyXkb4R872OWJESNGjBgxYsSIESNGjBgxYsSIESNGjJbxf2F7q2W3qm/GAAAAAElFTkSuQmCC") no-repeat center / contain;
    mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAtuSURBVHhe7V17jCRFGT9ODRpEoyIgoHCGnHu7U1Uze4enJieJGLnjduoxM7t7XAwJiRCiovEP/8GLPBJFEqIhEmDdnanq7pm523vs3kXUEE3wHzVEOUHleAn4OMQXMdwa7+Du0uarnt6tqenZnffNzvYv+aV3uqurq79f1+urr3vXrYsRI0aMGDFixIgRI0aMGDFixIgRI8agQazfdpM8395bD0O5/e8gTF6ZzBSuTu7sE0JZWmbp6tTY1Lvs++w6rtgmzye8+IVkZu/TSMit9nEbKFPcRkRRYu6+jJk6hZk8i6k6c87I6pBHUETROYMzzpnkxL6zOON8zr7friGVm3oPEd5XsSg+Pzox56fGD/mEq2vsdCHI9Q9cRDLFcjK7zx+dOOQnM2WfcM8n3O0PighmTHrBNuvVMuf5qV0HfCzc6+377jhGxsoXE166g4jin8HwycxeH3PHJ6LoY5r/uJ0ekNiZ30AypedGJ+d1WsxUf5HXoYhgBuhUM+v4yclZHwvZPQFQ2r0KC+87RHj/CgxfNm4gECCqBgzl9l+AuXtsdPyQj5msvfl+oG34VgXoRhOUYMUE5sWHiSgugOGJKEXcQP0agKl8cPPk4f41PtA2fD3j91KAFHc+QXixTLh3GtpsIrzagi/eQHQNSGTyGzB3z0BbX3NOP9E2fj0RtPEtAbIdFiCZKV2HefGH0MSMjh/UHVRNgW3WEQAx+XWoNTXp+4224VsVINdGH4C5Iwj3fg6jlNT4geY6y3oCUHVE52Wn7zfahl9WgNrmRwuwCwRochS0NXv/OzH3bsaidDSVO+Cncvt9zJow/OINRPcBmKknQNCa9P1G2/BRxtcCWMavEaDBGoDZ996LeelrRHgvwuikbSMtCuBWCYCo+m3befeCtvG7KQAMJ4kovTI6MR+M4e3CtML6NaD/BbANv6wAVjNUMX5TAmAm9wXDwojCtMo6fcBgClD79DfVB2Cmnk1mIsby7bCuAPKpVSmAbfiopz9CAJRV2837jwSmhWORk6l22AMBYB6iR2h6sNABjtfhRIWTEdx1UPt8gu1BP3XjEjff9CMf5VTavP9IYCqfWU0CJLN7/dT4QR8xtYCYegIzeRgxdRBTNQdEle0S5Xwt1Rxi8lB1GjWHmZyPpFBzFmFfSL0PZYHOIZxVczin5vF4aXaEq4+a9x8JxOQfyGpogrirvaaEF5/F3L0N59RlZt6rFghqQJ8LAHnBnIQI936Yq5h5rnogpvq6BoDfKJWb9QlTt5p5DQy6KUD78wDHh4khooWvmPkMFHrbBzQjgPTBcYeodM08Bg69FaDxJgiaHcyc58/JwnYvoYehfSYAtPvJTOms3YQNJPpxHgB+KUxnvmmeO7DATPVuJryiN1TqWSli6lfr1vnmqdHYs+c8ks1ftGlcXjIkHrk0oGdtl1g/XRTNc4Lf8LdJIWbX20VqGj0VYIUaoM8RpZOJMfkx8zwbifQ0SoriI4R7xzBz/oOpOhESUbmgyeRC+Ns8bqbTWxakDYlZsA+2mAdEXC6Ef2OhTuCMC9vXIZDMLlvTwEw+2y8CQNOz0pAT0fwXSab8Zug+D0TzOkMd6xOyGDBrMVf0k+N7tSMOpX9wlV2+ptEfAsjAv0Plz8z0NjCVk0FAQIfLC7Q9oMt5QbMe/H2qIzUAUflcx2+ongB1+gAYhRHhvTE85nzYTG9iw3bvQkTVP6LO7wht468gABLqTZRz268BiMkX9KzVLlA7bFIAeKoTtHCzmdYGZoUJiMqwz+0IbcPXE6CyBgDhhyijTiYzMx+xy9k0MJUvdksAe024tgmC2a6OkDtspjOBqZOELaKFu7sW0mIbPsr4hgiBAE5nBEBMvtQtAWpqgCVAJSD39U075CVmuhDJscIWTNXT8Hci7dwTiBVxvXZpG7+uCMHKF3TEKOO8sXls6gN2mZsGpvIvMAKoKVQ7rOuMMwVwgo43nd9lpgkBbmfCvZcwla/Cb8zkPUE8acT12qVt+EjjLy1BJid04O1TDc1VVgJi8q+9F6DiaEsXyuZxE4gV1JbdP/YRk7+H310TwDb8sgJADVD+6O7DsN57l13mloCYOt4zASqdMCwrEu6+tik3/T7zeAiUzt+iI65BLCqf0fuouvvcC6B8Ml72YSKWEt6ldrlbAqbq1W4JYPcBEJgFXk4dcTc2PWYeC4GZJEQUT8H5IBSsV8B+LUA3+gDb8MsJkPWCpz+jbrHL3TJ6KQCm6uiW3T+B2e60uT8EuJ4Jc58LQiKlFqCqBpxDAUiupI2PReE+u9xtoacCMPlHwkt/v2a7d6G5PwQsvgRDzeDdgaAGVPqAdCN9gFP7qtFKtF9DqnodydNuh9Eb532SK5/Awr3dLnPbQFT2RoA9e86DIS+iM5GxMomxwq2B8ZeCgStN0O/guO6EI2oAGBFqDEzSgrd0wvNhawYWh7+N/VVPvRNw8amHv51TJOsdI9ny/Q2FmLSCXtWADdsfuBClnZuqrx4gkVYIvKD2fKRKgJoaEAxjMXffwtx9FDPnyyNMXkvSapjQ/CZCvU1Lfxu/Qy7ut46Hv7NqmEzuvRIeHLu8HUV3BAiqd4IVEvb1bGxMz7wbc++FsN0384muAVKLG4SpFEtYuCN2nqsKmKq/dVoAyA8x+d+RsemL7evZwEzOmu2+yao+QM8DgmaGiNKbiHuRtWnVoRsCwPgdMfWkfS0bKJ1f9pWligB6GEqounvz5BEw/ukEnbnBzmvVohsC6FkuU9+2r2UC0fx1ekK2zLXtGnDN5x/zcTp/m53XqkanBdAv8XHvzHLLignuXY6F988o17TJagHU9zFTv7HzWvXotACVSLY5+zohtm27822Yub8IfPu17b5JLQANO2F1H0438MbJakNHR0HcDcbiFR9+FDBTUzrsxD43gmYNQEx+ZuACcwGdqwGLHk7PvkYITPO366Fkg6+8mp3wwKJTAoTrukla/pB9DUCCFXYEnW7jiz9rRYCONEHQrCTShS/Z+QNgQkZEaSFwFSzf7ps0m6CBRfsCSO2HwVQ+bucNwDc8fBnhpVeiZrorca0I0FYTFMxMiwvwIQ4776FrH7yAcO/JRkY8UVwrTVDrAvDgBYoEndlt5wtxk5g5j9VzMzTCWIAVuBm+eEXlg3aeAMzUbKPDzXqMBajLMJ5HPR7lrsVMSf05sprzmuPa6QOa+oBSEEIOH/bYyJz31+THnXzw5Dc21l+Oa0MA1owAsE67DzyS/x6+YXqoJi/uFIInv33jA9eOAA01QbISDl7+30h6+lNVmQixHjO30uZ3xvjANSKAfG3lGgDGL/sQl4/T01UOMRhqYu492m6HG0XTGTewWFmAypOfKb81ks7vNM9NbH/gciK8Xy+3qNIO4xpQic1JZsonEzund5jnJbgaTYrSy3phvMVx/kpc4wJIP5WdhQ73BKJT15nnIOrmkqK0ELzL2x3jA0GAMDp6YBEtQPDKEBGl4yNjU1vM9Ei4d4Ffp1nHWiuE4S6m6qfm9QcOUcNQHRgrSkcTOx9a9O9g8dAHifCOQGfb0LdDO8DgpT15R3WJBwzmTBgMC+N4wr0jEK8TpkmIwmeJKP0pKjKtW9TrBtw9OcwKV1SXeMAAL0BALCQ0KbrKc+/exYNCrCfM+xYcC+P6bUN1ixCCgmjhG1WFHUQgJo9XmpwTCSoXvZqwrkt48ZdBk2P3Ed0j1EIwPnzNsbqkAwpM5dlkpnw0wR7RYYSp1C1vR8y7k4jiaR2LqYNWI6KKO01R0q5tGHlh7n7XLufAAlF572Vbg2gDlJZbYWIF3xEN3h2uRAx3lbpDP4u5dxyL4r4R7nzaLuOawTB3hpLZvZ+ENdwoQiAs0N7fLGvyyXkb4R872OWJESNGjBgxYsSIESNGjBgxYsSIESNGjJbxf2F7q2W3qm/GAAAAAElFTkSuQmCC") no-repeat center / contain;
  }
}
/* الصورة: خلفية أشعة طالعة من ورا الراس (زي التصميم بس بالأزرق) */
.deck-photo {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    repeating-conic-gradient(from 4deg at 50% 38%, #ffffff24 0 9deg, transparent 9deg 24deg),
    radial-gradient(circle at 50% 38%, var(--if-steel), var(--if-royal) 62%, var(--if-deep));
  box-shadow:
    inset 0 0 0 1px #ffffff26,
    0 26px 44px -24px color-mix(in srgb, var(--if-deep) 80%, transparent);

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
  }
}
.deck-photo--empty {
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 8vw, 5rem);
  color: #ffffffb3;
}
/* hover: الكروت الخلفية بتتفرد أكتر والصورة بتطلع لفوق */
.advisor-deck:hover,
.advisor-deck:focus-within {
  .deck-back--a {
    rotate: 12deg;
    translate: calc(var(--dx) * 1.35) calc(var(--dy) * -1.4);
  }
  .deck-back--b {
    rotate: -15deg;
    translate: calc(var(--dx) * -1.9) calc(var(--dy) * 1.3);

    /* علامة اللوجو بتنوّر والبيكسلات بتطلع لفوق شوية */
    &::after {
      opacity: 0.95;
    }
    &::before {
      opacity: 0.75;
      translate: 0 -6%;
    }
  }
  .deck-photo {
    translate: 0 -6px;
  }
}
.advisor-deck.is-placeholder b {
  color: color-mix(in srgb, var(--if-deep) 75%, #fff);
}

/* زرار "عرض السيرة": ::after بيغطي الكارت كله فالضغط على الصورة أو الاسم يفتح النافذة */
.advisor-deck {
  position: relative;
}
.deck-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--if-royal) 22%, transparent);
  border-radius: 99px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--if-royal);
  background: #fff;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .icon {
    font-size: 1rem;
    transition: translate 0.3s;
  }
  html[dir="ltr"] & .icon {
    rotate: 180deg;
  }
  &:focus-visible {
    outline: 3px solid var(--if-teal);
    outline-offset: 3px;
  }
}
.advisor-deck:hover .deck-open,
.deck-open:focus-visible {
  color: #fff;
  background: var(--if-royal);

  .icon {
    translate: -3px 0;
  }
}
html[dir="ltr"] .advisor-deck:hover .deck-open .icon {
  translate: 3px 0;
}

/* ---------- نافذة سيرة المستشار ---------- */
html.dialog-open {
  overflow: hidden;
}
.advisor-modal {
  width: min(920px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: var(--if-text);
  background: #fff;
  box-shadow: 0 40px 80px -30px #0b1c4acc;
  overflow: auto;

  &::backdrop {
    background: color-mix(in srgb, var(--if-deep) 70%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  &[open] {
    animation: am-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
@keyframes am-in {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 0.97;
  }
}
.am-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
/* العمود الجانبي: نفس كارت الصورة على خلفية الهوية */
.am-side {
  display: grid;
  place-items: start center; /* الصورة فوق جنب الاسم، مش في نص عمود طويل */
  padding: 64px 40px 52px;
  background:
    radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--if-teal) 35%, transparent), transparent 70%),
    linear-gradient(160deg, var(--if-deep), var(--if-royal));
  overflow: hidden;

  .deck-stack {
    width: min(100%, 210px);
  }
}
.am-body {
  padding: clamp(28px, 4vw, 44px);

  h3 {
    margin: 12px 0 6px;
    font-size: clamp(1.3rem, 2.4vw, 1.65rem);
    line-height: 1.4;
    color: var(--if-deep);
  }
  h4 {
    margin: 24px 0 12px;
    font-size: 1rem;
    color: var(--if-royal);
  }
}
.am-position {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--if-steel);
}
.am-bio {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.95;
  color: #4a5872;
}
.am-highlights {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--if-text);
  }
  .icon {
    flex-shrink: 0;
    margin-top: 0.2em;
    padding: 4px;
    width: 1.35em;
    height: 1.35em;
    border-radius: 50%;
    color: #fff;
    background: var(--if-teal);
  }
}
.am-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--if-deep);
  background: var(--if-surface);
  cursor: pointer;
  transition: background 0.3s;

  &:hover,
  &:focus-visible {
    background: color-mix(in srgb, var(--if-teal) 20%, #fff);
  }
  &:focus-visible {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
}
@media (max-width: 720px) {
  .am-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .am-side {
    padding: 40px 24px 32px;

    .deck-stack {
      width: min(60%, 180px);
    }
  }
  .am-close {
    color: #fff;
    background: #ffffff26;
  }
}
@media (prefers-reduced-motion: reduce) {
  .advisor-modal[open] {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck-back,
  .deck-photo {
    transition: none;
  }
}

/* ---------- انضم كمستشار ---------- */
.advisor-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(56px, 7vw, 90px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--if-teal) 45%, transparent), transparent 70%),
    linear-gradient(150deg, var(--if-deep), var(--if-royal) 65%, #2a63a3);
  box-shadow:
    inset 0 1px 0 #ffffff33,
    0 6px 0 #0b1c4a,
    0 40px 60px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);

  > div {
    flex: 1 1 300px;
  }
  h2 {
    margin: 0 0 4px;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    color: #fff;
  }
  p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.8;
    color: #cfe0f3;
  }
}
.advisor-join-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 30%;
  font-size: 1.4rem;
  color: var(--if-royal);
  background: linear-gradient(190deg, #fff, #d7eef2);
  box-shadow:
    inset 0 2px 0 #fff,
    0 4px 0 color-mix(in srgb, var(--if-teal) 50%, #0b1c4a);
}

@media (max-width: 860px) {
  .advisor-feature {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .advisor-badge--lead {
    width: min(100%, 300px);
  }
  .advisor-roles-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .advisor-board-head .tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
}
@media (max-width: 560px) {
  .advisors-grid.advisor-decks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 22px;
    padding-inline: 10px;
  }
  .advisor-deck {
    --dx: 8%;
    --dy: 5%;

    /* أصغر من عرض العمود عشان الكروت المايلة ما تتقصش على أطراف الشاشة */
    .deck-stack {
      width: 82%;
    }
    b {
      margin-top: 22px;
      font-size: 0.92rem;
    }
    small {
      font-size: 0.8rem;
    }
  }
  .badge-body {
    padding: 0 10px 16px;

    b {
      font-size: 0.9rem;
    }
  }
  .badge-photo {
    width: 78px;
    height: 78px;
  }
  .advisor-join .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .advisor-badge {
    animation: none;
  }
}

/* بطاقة المستشار: اللوجو الأبيض في شريط الهوية بدل النص */
.badge-org {
  display: block;
  line-height: 0;

  img {
    display: block;
    width: 108px;
    height: auto;
    opacity: 0.92;
  }
}
@media (max-width: 560px) {
  .badge-org img {
    width: 84px;
  }
}

/* =====================================================
   عرض "المروحة" (نفس طريقة svc-grid): القسم بيثبت والكروت بتتفرد مع السكرول
   مستخدم في: دور المستشارين
   ===================================================== */
/* القسم بياخد طوله الطبيعي ويثبت تحت الهيدر، ومسافة السكرول بتاعة الحركة
   جاية من ::after بعده — كده مفيش فراغ فاضي فوق أو تحت المحتوى مهما كان طول الشاشة */
.fan-track {
  --fan-top: clamp(88px, 11vh, 120px); /* تحت الهيدر الثابت */
  --fan-scroll: 80vh; /* قد إيه بنسكرل والقسم ثابت */
  position: relative;
}
.fan-track::after {
  content: "";
  display: block;
  height: var(--fan-scroll);
}
.fan-sticky {
  position: sticky;
  top: var(--fan-top);
  display: flex;
  flex-direction: column;
}
.fan-grid > * {
  will-change: transform;
}
/* تابلت/موبايل + تقليل الحركة: عرض عادي */
@media (max-width: 1000px), (prefers-reduced-motion: reduce) {
  .fan-track::after {
    display: none;
  }
  .fan-sticky {
    position: static;
  }
  .fan-grid > * {
    transform: none !important;
  }
}

/* =====================================================
   البريلودر ("الصَّهر"): مربعات الهوية بتتشكّل + لوجو + عدّاد
   والخروج: 5 شرايح بألوان الهوية بتطلع لفوق بالتتابع وتكشف الصفحة
   ===================================================== */
html.is-loading {
  overflow: hidden;
}
html.no-preload .preloader {
  display: none;
}
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: all;
}
/* الشرايح: هي الخلفية، وهي اللي بتفتح في الآخر */
.pl-stripes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  i {
    display: block;
    height: 100%;
    margin-inline-end: -1px; /* يمنع خطوط رفيعة بين الشرايح */
    /* حافة سفلية بلون مختلف لكل شريحة (ملكي → تيل) تبان وهي طالعة */
    background:
      linear-gradient(0deg, var(--edge) 0 4px, transparent 4px),
      radial-gradient(120% 60% at 50% 40%, color-mix(in srgb, var(--if-teal) 18%, transparent), transparent 70%),
      linear-gradient(180deg, var(--if-deep), #13265a);
    transition: translate 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  }
  i:nth-child(1) {
    --edge: var(--if-royal);
  }
  i:nth-child(2) {
    --edge: color-mix(in srgb, var(--if-royal) 70%, var(--if-steel));
  }
  i:nth-child(3) {
    --edge: var(--if-steel);
  }
  i:nth-child(4) {
    --edge: color-mix(in srgb, var(--if-steel) 50%, var(--if-teal));
  }
  i:nth-child(5) {
    --edge: var(--if-teal);
  }
}
.pl-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transition:
    opacity 0.4s,
    scale 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

/* شبكة 3×3: المربعات بتنوّر بالتتابع على مسار ثعباني */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 7px;
  perspective: 400px;

  i {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(150deg, var(--if-royal), var(--if-steel));
    box-shadow:
      inset 0 1px 0 #ffffff40,
      0 3px 0 #0b1c4a;
    opacity: 0.35;
    animation: pl-forge 1.35s cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
    animation-delay: calc(var(--d) * 0.1s);
  }
}
@keyframes pl-forge {
  0%,
  100% {
    opacity: 0.35;
    scale: 0.82;
    rotate: x 0deg;
  }
  30% {
    opacity: 1;
    scale: 1;
    rotate: x 180deg;
    background: linear-gradient(150deg, var(--if-mint), var(--if-teal));
    box-shadow:
      inset 0 1px 0 #ffffff80,
      0 3px 0 color-mix(in srgb, var(--if-teal) 60%, #0b1c4a),
      0 0 18px color-mix(in srgb, var(--if-mint) 55%, transparent);
  }
  60% {
    opacity: 0.6;
    scale: 0.92;
    rotate: x 180deg;
  }
}
.pl-logo {
  display: block;
  width: 200px;
  height: auto;
  opacity: 0.95;
}
.pl-meta {
  display: flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pl-count {
  min-width: 3ch;
  text-align: end;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--if-mint);
}
.pl-unit {
  font-size: 1rem;
  font-weight: 800;
  color: var(--if-mint);
}
.pl-bar {
  width: 200px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: #ffffff1f;

  b {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--if-teal), var(--if-mint));
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  html[dir="rtl"] & b {
    transform-origin: 100% 50%;
  }
}

/* الخروج: المحتوى بيختفي، والشرايح بتطلع لفوق واحدة ورا التانية */
.preloader.is-done {
  pointer-events: none;

  &::before {
    opacity: 0;
  }
  .pl-center {
    opacity: 0;
    scale: 0.9;
  }
  .pl-stripes i {
    translate: 0 -101%;
  }
  .pl-stripes i:nth-child(1) {
    transition-delay: 0.25s;
  }
  .pl-stripes i:nth-child(2) {
    transition-delay: 0.32s;
  }
  .pl-stripes i:nth-child(3) {
    transition-delay: 0.39s;
  }
  .pl-stripes i:nth-child(4) {
    transition-delay: 0.46s;
  }
  .pl-stripes i:nth-child(5) {
    transition-delay: 0.53s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pl-grid i {
    animation: none;
    opacity: 0.8;
  }
  .pl-stripes i {
    transition: none;
  }
  .preloader.is-done {
    opacity: 0;
    transition: opacity 0.3s;

    .pl-stripes i {
      translate: none;
    }
  }
}

/* =====================================================
   البحث عن وظيفة (jobs.blade.php)
   هيرو + خطوات + لوحة وظايف بفلترة وبحث + نموذج تقديم برفع CV
   ===================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- الهيرو ---------- */
.jobs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 18px;
    background: #ffffff14;
    border: 1px solid #ffffff2e;
    backdrop-filter: blur(6px);
  }
  b {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1;
    color: #fff;
  }
  span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--if-mint);
  }
}

/* ---------- الخطوات: مكوّن org-steps نفسه، بس 3 خطوات بدل 4 ---------- */
.jobs-method {
  padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
}
.org-steps.jobs-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
  margin-inline: auto;

  /* الخط بيبدأ وينتهي عند مراكز الدواير (كل عمود 1/3 → المركز عند 1/6) */
  &::before {
    inset-inline: calc(100% / 6);
  }
}

/* تابلت: نفضل 3 أعمدة بالخط (2 أعمدة كانت هتسيب الخطوة التالتة لوحدها) بس أضيق */
@media (max-width: 900px) {
  .org-steps.jobs-steps {
    gap: 14px;

    &::before {
      display: block;
    }
    .org-step h3 {
      font-size: 0.98rem;
    }
    .org-step p {
      font-size: 0.86rem;
    }
  }
}

/* موبايل: تايملاين رأسي — الرقم على جنب والنص جنبه، وخط رأسي بيوصل الدواير */
@media (max-width: 680px) {
  .org-steps.jobs-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 520px;

    &::before {
      display: block;
      top: 28px;
      bottom: 28px;
      inset-inline: 27px auto;
      width: 2px;
      height: auto;
      background: linear-gradient(180deg, var(--if-royal), var(--if-teal));
    }
    .org-step {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      column-gap: 16px;
      align-items: start;
      padding-bottom: 26px;
      text-align: start;

      &:last-child {
        padding-bottom: 0;
      }
    }
    .org-step-num {
      grid-row: span 2;
      margin: 0;
    }
    .org-step h3 {
      margin: 6px 0 4px;
      font-size: 1rem;
    }
    .org-step p {
      max-width: none;
      margin: 0;
      font-size: 0.9rem;
    }
  }
}

/* ---------- لوحة الوظايف ---------- */
/* بتكمّل نفس خلفية "كيف تعمل" (أبيض ← رمادي فاتح) من غير خط فاصل */
.jobs-board {
  scroll-margin-top: 90px;
  padding-top: clamp(24px, 3vw, 40px);
  background: var(--if-surface);
}

/* لوحة البحث والفلاتر: نفس شكل لوحة "مجالات البرامج" (أبيض + bevel تحت) */
.jobs-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 24px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--if-royal) 10%, var(--line));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--if-royal) 10%, #e3eaf4);
}
.jobs-search {
  position: relative;

  .icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 18px;
    translate: 0 -50%;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--if-royal) 45%, var(--mut));
    pointer-events: none;
    transition: color 0.25s;
  }
  input {
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    padding-inline-start: 48px;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    border-radius: 16px;
    border: 1.5px solid color-mix(in srgb, var(--if-royal) 12%, var(--line));
    background: color-mix(in srgb, var(--if-surface) 70%, #fff);
    transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;

    &:hover {
      border-color: color-mix(in srgb, var(--if-royal) 28%, transparent);
    }
    &:focus {
      outline: none;
      background: #fff;
      border-color: var(--if-steel);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-teal) 18%, transparent);
    }
  }
  &:focus-within .icon {
    color: var(--if-steel);
  }
}

/* شرايح التخصص: نفس شرايح org-area (أيقونة في دايرة بيضا + لون التخصص)،
   والمختارة بتفضل بالتدرّج اللي بيظهر مع الـ hover هناك */
.jobs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jobs-filter {
  --ac: var(--if-royal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  /* الأيقونة والعدد في الطرفين، فالحشو صغير ومتساوي */
  padding: 6px 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-deep);
  background: color-mix(in srgb, var(--ac) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, translate 0.25s, box-shadow 0.25s, border-color 0.25s;

  i {
    min-width: 24px;
    padding: 2px 7px;
    font-style: normal;
    font-size: 0.74rem;
    text-align: center;
    border-radius: 99px;
    color: color-mix(in srgb, var(--ac) 85%, var(--if-deep));
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--ac) 18%, transparent);
  }
  &:hover {
    translate: 0 -2px;
    border-color: color-mix(in srgb, var(--ac) 45%, transparent);
  }
  &:focus-visible {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
  &.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(150deg, var(--ac), var(--if-royal));
    box-shadow: inset 0 1px 0 #ffffff40, 0 3px 0 var(--if-deep);
    translate: 0 -2px;

    i {
      color: #fff;
      background: #ffffff2e;
      border-color: transparent;
    }
  }
}
.jobs-filter-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--ac) 80%, var(--if-deep));
  background: #fff;
}

/* مربعات اللوجو في ركن كل كارت بلون التخصص (نفس موتيف الهيرو والـ CTA) */
.job-card-pixels {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 64px;
  height: auto;
  fill: var(--c);
  opacity: 0.09;
  pointer-events: none;
  transition: opacity 0.35s, translate 0.35s;

  html[dir="rtl"] & {
    scale: -1 1;
  }
  .job-card:hover &,
  .job-card:focus-within & {
    opacity: 0.18;
    translate: 0 -3px;
  }
}

.jobs-count {
  margin: 0 0 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mut);
}
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.job-card {
  --c: var(--if-teal);

  &[hidden] {
    display: none;
  }
  article {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 22px 18px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--if-royal) 10%, transparent);
    box-shadow:
      0 4px 0 color-mix(in srgb, var(--c) 22%, #e3eaf4),
      0 24px 40px -32px color-mix(in srgb, var(--if-deep) 60%, transparent);
    transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s;
  }
  &:hover article,
  &:focus-within article {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--c) 40%, transparent);
    box-shadow:
      0 8px 0 color-mix(in srgb, var(--c) 30%, #e3eaf4),
      0 30px 50px -30px color-mix(in srgb, var(--if-deep) 70%, transparent);
  }
  &.is-picked article {
    border-color: var(--c);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 4px 0 var(--c);
  }
}
.job-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.job-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 30%;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c));
  box-shadow: inset 0 2px 0 #ffffff4d, 0 3px 0 color-mix(in srgb, var(--c) 60%, var(--if-deep));
}
.job-card-org {
  display: grid;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--mut);

  small {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c);
  }
}
.job-card-new {
  margin-inline-start: auto;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 99px;
  color: #fff;
  background: var(--if-teal);
}
.job-card-title {
  margin: 16px 0 12px;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--if-deep);
}
.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mut);

  li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .icon {
    color: color-mix(in srgb, var(--c) 80%, var(--mut));
  }
}
.job-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;

  li {
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    border-radius: 8px;
    color: var(--if-deep);
    background: var(--if-surface);
  }
}
.job-card-apply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding: 12px 0 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--if-royal);
  background: none;
  border: 0;
  border-top: 1px dashed var(--line);
  cursor: pointer;

  .arrow-circle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  &:hover .arrow-circle,
  &:focus-visible .arrow-circle {
    color: #fff;
    background: var(--c);
    border-color: var(--c);
    transform: translateX(-4px);
  }
  html[dir="ltr"] &:hover .arrow-circle,
  html[dir="ltr"] &:focus-visible .arrow-circle {
    transform: translateX(4px);
  }
  &:focus-visible {
    outline: none;
  }
}
.jobs-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  border-radius: 24px;
  background: #fff;
  border: 1.5px dashed color-mix(in srgb, var(--if-royal) 18%, var(--line));

  &[hidden] {
    display: none;
  }
  b {
    font-size: 1.1rem;
    color: var(--if-deep);
  }
  p {
    max-width: 46ch;
    margin: 0 0 10px;
    color: var(--mut);
  }
}
.jobs-empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--if-royal);
  background: var(--if-surface);
}

/* ---------- نموذج التقديم ---------- */
.jobs-apply {
  scroll-margin-top: 70px;

  .contact-grid {
    margin-top: 0;
  }
}
.jobs-errors {
  padding: 14px 18px;
  border-radius: 16px;
  color: #8a1c1c;
  background: #fdecec;
  border: 1px solid #f3b4b4;
  font-size: 0.9rem;

  ul {
    margin: 6px 0 0;
    padding-inline-start: 18px;
  }
}
.jobs-form.is-sent .jobs-errors {
  display: none;
}
.jobs-field-label {
  margin: 6px 0 -6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--if-deep);
}
/* ---------- التخصص: كروت reg-program (زي صفحة التسجيل) بس أفقية ومضغوطة ---------- */
.reg-programs.jobs-specs {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: 8px;

  .reg-program-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    padding-inline-end: 38px; /* مكان علامة الصح */
  }
  .reg-program-icon {
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }
  .reg-program-name {
    font-size: 0.88rem;
  }
  .reg-program-check {
    top: 50%;
    width: 20px;
    height: 20px;
    translate: 0 -50%;
  }
}

/* ---------- سنوات الخبرة: نفس الكروت + مؤشر أعمدة بيمتلي مع الخبرة ---------- */
.reg-programs.jobs-exp {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;

  .reg-program-card {
    gap: 10px;
    padding: 12px;
  }
  .reg-program-name {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .reg-program-check {
    top: 10px;
    inset-inline-end: 10px;
    width: 20px;
    height: 20px;
  }
}
.jobs-exp-text {
  display: grid;
  gap: 2px;

  small {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--mut);
    transition: color 0.25s;
  }
  .reg-program input:checked + .reg-program-card & small {
    color: color-mix(in srgb, var(--if-teal) 70%, var(--if-deep));
  }
}
.jobs-exp-meter {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;

  i {
    width: 6px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--if-royal) 10%, #fff);
    transition: background 0.25s, scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
    transform-origin: bottom;
  }
  i:nth-child(1) { height: 30%; }
  i:nth-child(2) { height: 47%; }
  i:nth-child(3) { height: 64%; }
  i:nth-child(4) { height: 82%; }
  i:nth-child(5) { height: 100%; }
  i.is-on {
    background: color-mix(in srgb, var(--if-teal) 45%, #fff);
  }
  .reg-program:hover & i.is-on {
    background: color-mix(in srgb, var(--if-teal) 70%, #fff);
  }
  .reg-program input:checked + .reg-program-card & i.is-on {
    background: linear-gradient(180deg, var(--if-teal), var(--if-royal));
    scale: 1 1.08;
  }
}

/* تابلت: الخبرة 3 + 2 */
@media (max-width: 760px) {
  .reg-programs.jobs-exp {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr));
  }
}
/* موبايل صغير: كل خيار سطر — المؤشر على جنب والنص جنبه */
@media (max-width: 420px) {
  .reg-programs.jobs-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .reg-program-card {
      padding-inline-end: 30px;
    }
    .reg-program-icon {
      width: 32px;
      height: 32px;
    }
    .reg-program-check {
      inset-inline-end: 8px;
      width: 18px;
      height: 18px;
    }
  }
  .reg-programs.jobs-exp {
    grid-template-columns: minmax(0, 1fr);

    .reg-program-card {
      flex-direction: row;
      align-items: center;
      gap: 14px;
      padding-inline-end: 40px;
    }
    .reg-program-check {
      top: 50%;
      translate: 0 -50%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-exp-meter i {
    transition: none;
  }
}

/* الوظيفة المختارة */
.jobs-picked {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--if-teal) 9%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--if-teal) 45%, transparent);
  transition: background-color 0.3s, border-color 0.3s;

  &.is-flash {
    animation: jobs-flash 0.9s ease;
  }
  &[data-empty] {
    background: color-mix(in srgb, var(--if-surface) 70%, #fff);
    border-style: dashed;
    border-color: color-mix(in srgb, var(--if-royal) 18%, var(--line));
  }
}
@keyframes jobs-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--if-teal) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.jobs-picked-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  background: var(--if-teal);

  [data-empty] & {
    color: var(--if-royal);
    background: #fff;
  }
}
.jobs-picked-text {
  display: grid;
  flex: 1;
  min-width: 0;

  small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mut);
  }
  b {
    font-size: 0.95rem;
    color: var(--if-deep);
  }
}
.jobs-picked-clear {
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  color: var(--if-deep);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;

  &:hover,
  &:focus-visible {
    color: #fff;
    background: #d9534f;
    border-color: #d9534f;
  }
  [data-empty] & {
    display: none;
  }
}
.jobs-picked-browse {
  flex: none;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--if-steel);
  text-decoration: underline;
  text-underline-offset: 4px;

  .jobs-picked:not([data-empty]) & {
    display: none;
  }
}

/* منطقة رفع السيرة الذاتية */
.cv-drop {
  position: relative;
  display: block;
  border-radius: 20px;
  border: 2px dashed color-mix(in srgb, var(--if-royal) 22%, var(--line));
  background: color-mix(in srgb, var(--if-surface) 70%, #fff);
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;

  /* الـ input مغطّي المساحة كلها: الضغط والسحب والإفلات شغالين بشكل طبيعي */
  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  &:hover,
  &.is-drag {
    border-color: var(--if-steel);
    background: color-mix(in srgb, var(--if-teal) 8%, #fff);
  }
  &.is-drag {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--if-teal) 18%, transparent);
  }
  &:focus-within {
    border-color: var(--if-steel);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-teal) 18%, transparent);
  }
  &.is-error {
    border-color: #d9534f;
    background: #fdf3f3;
  }
  &.has-file {
    border-style: solid;
    border-color: color-mix(in srgb, var(--if-teal) 55%, transparent);
    background: color-mix(in srgb, var(--if-teal) 7%, #fff);
  }
}
.cv-drop-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 18px;
  text-align: center;
  pointer-events: none;

  b {
    font-size: 0.95rem;
    color: var(--if-deep);
  }
  u {
    color: var(--if-steel);
    text-underline-offset: 4px;
  }
  small {
    font-size: 0.8rem;
    color: var(--mut);
  }
  .has-file & {
    display: none;
  }
}
.cv-drop-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow: 0 4px 0 var(--if-deep);

  .is-drag & {
    animation: cv-bob 0.8s ease-in-out infinite alternate;
  }
}
@keyframes cv-bob {
  to { translate: 0 -5px; }
}
.cv-drop-file {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;

  .has-file & {
    display: flex;
  }
}
.cv-file-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 8px 16px 8px 8px;
  color: #fff;
  background: var(--if-royal);
}
.cv-file-info {
  display: grid;
  flex: 1;
  min-width: 0;

  b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--if-deep);
  }
  small {
    justify-self: start;
    font-size: 0.8rem;
    color: var(--mut);
  }
}
.cv-file-remove {
  position: relative;
  z-index: 2; /* فوق الـ input */
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  color: var(--if-deep);
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;

  &:hover,
  &:focus-visible {
    color: #fff;
    background: #d9534f;
    border-color: #d9534f;
  }
}
.cv-error {
  margin: -6px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #b42318;

  &[hidden] {
    display: none;
  }
}

/* ---------- موبايل ---------- */
@media (max-width: 860px) {
  /* الفلاتر سطر واحد بيتسحب أفقي بدل ما تاخد 3 سطور */
  .jobs-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * clamp(14px, 2vw, 20px));
    padding: 4px clamp(14px, 2vw, 20px) 6px;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
  .jobs-filter {
    flex: none;
  }
  .jobs-picked {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .job-card article,
  .jobs-filter {
    transition: none;
  }
  .cv-drop-icon,
  .jobs-picked.is-flash {
    animation: none !important;
  }
}

/* ---------- سكشن الوظايف في الرئيسية ---------- */
.jobs-teaser {
  padding-block: clamp(56px, 7vw, 90px);
}
/* الكارت: 3 طبقات —
   ::before = صورة الفريق (بتقرّب ببطء مع الـ hover)
   ::after  = تدرّج بألوان الهوية: غامق ناحية النص وبيخف ناحية الدكاترة
   المحتوى فوقهم */
.jobs-teaser-card {
  /* المحتوى في النص: التدرّج أغمق في المنتصف ورا النص، وبيخف ناحية الأطراف عشان الصورة تبان */
  --jt-shade:
    radial-gradient(
      ellipse 62% 78% at 50% 50%,
      color-mix(in srgb, var(--if-deep) 94%, transparent) 0%,
      color-mix(in srgb, var(--if-royal) 82%, transparent) 55%,
      color-mix(in srgb, var(--if-royal) 45%, transparent) 100%
    );
  --jt-pos: center 30%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(400px, 42vw, 520px);
  padding: clamp(28px, 4.5vw, 60px);
  border-radius: 36px;
  color: #fff;
  /* الصورة فيها حواف شفافة: لون أزرق تحتها بنفس لون اللبس */
  background: #2b63b3;
  box-shadow: 0 8px 0 var(--if-deep), 0 40px 70px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);

  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  &::before {
    z-index: -2;
    background-image: url("../images/nurse-doctor-team-ready-work-day.png");
    background-image: image-set(
      url("../images/nurse-doctor-team-ready-work-day.webp") type("image/webp"),
      url("../images/nurse-doctor-team-ready-work-day.png") type("image/png")
    );
    background-size: cover;
    background-position: var(--jt-pos);
    background-repeat: no-repeat;
    transform-origin: var(--jt-pos);
    transition: scale 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  &::after {
    z-index: -1;
    background: var(--jt-shade);
  }
  &:hover::before,
  &:focus-within::before {
    scale: 1.06;
  }
}
.jobs-teaser-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin-inline: auto;

  h2 {
    margin: 0 0 12px;
    color: #fff;
    text-wrap: balance;
  }
  p {
    margin: 0 0 22px;
    max-width: 56ch;
    line-height: 1.9;
    color: #e3f5f8;
    text-wrap: pretty;
  }
}
/* 3 تطمينات قصيرة قبل الأزرار */
.jobs-teaser-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;

  li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 99px;
    background: #ffffff14;
    border: 1px solid #ffffff2e;
    backdrop-filter: blur(6px);
  }
  html[dir="rtl"] & li {
    padding: 7px 10px 7px 14px;
  }
  .icon {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    color: var(--if-deep);
    background: var(--if-mint);
  }
}
.jobs-teaser-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
}
/* موبايل: الصورة فوق والنص تحتها، والتدرّج بيبدأ من نص الكارت بدل ما يغطّي الصورة كلها */
@media (max-width: 860px) {
  .jobs-teaser-card,
  html[dir="ltr"] .jobs-teaser-card {
    --jt-shade: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--if-deep) 55%, transparent) 26%,
      color-mix(in srgb, var(--if-deep) 94%, transparent) 46%,
      var(--if-deep) 100%
    );
    --jt-pos: 70% top;
    align-items: flex-end;
    min-height: 0;
    padding-top: clamp(200px, 52vw, 300px);

    &::before {
      bottom: auto;
      height: clamp(280px, 75vw, 420px);
    }
  }
  .jobs-teaser-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-teaser-card::before {
    transition: none;
  }
  .jobs-teaser-card:hover::before,
  .jobs-teaser-card:focus-within::before {
    scale: 1;
  }
}

/* =====================================================
   البحث عن وظيفة — تحسينات UX: أخطاء جنب الحقول، حالة الإرسال،
   رسالة نجاح بدل النموذج، حالة "لا نتائج"، زرار عائم للموبايل
   ===================================================== */


/* خطأ جنب الحقل نفسه */
.cf-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #b42318;

  &::before {
    content: "!";
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 50%;
    color: #fff;
    background: #d92d20;
  }
}
.jobs-form input[aria-invalid="true"] {
  border-color: #d9534f;
  background: #fffafa;
  box-shadow: 0 0 0 4px #d9534f1f;
}
.jobs-errors {
  outline: none;

  &:focus-visible {
    box-shadow: 0 0 0 4px #d9534f33;
  }
}

/* تنبيه إعادة إرفاق الملف بعد خطأ */
.cv-reattach {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 12px;
  color: #7a4a00;
  background: #fff6e5;
  border: 1px solid #f5d79e;
}

/* زرار الإرسال: سبينر وهو بيبعت */
.jobs-submit {
  .jobs-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    border-inline-end-color: transparent;
    animation: jobs-spin 0.8s linear infinite;
  }
  &.is-busy {
    cursor: progress;
    opacity: 0.85;

    .btn-arrow {
      display: none;
    }
    .jobs-spinner {
      display: inline-block;
    }
  }
}
@keyframes jobs-spin {
  to { rotate: 1turn; }
}

/* رسالة النجاح بدل النموذج */
.jobs-done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(8px, 2vw, 20px) 0;
  text-align: center;
  outline: none;

  h2 {
    margin: 6px 0 0;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    color: var(--if-deep);
  }
  > p {
    max-width: 46ch;
    margin: 0;
    line-height: 1.8;
    color: var(--mut);
  }
}
.jobs-done-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  font-size: 2rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--if-teal) 14%, transparent), 0 5px 0 var(--if-deep);
  animation: jobs-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes jobs-pop {
  from { scale: 0.4; opacity: 0; }
}
.jobs-done-next {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 14px 0 10px;
  padding: 0;
  list-style: none;
  text-align: start;

  li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--if-deep);
    background: color-mix(in srgb, var(--if-surface) 70%, #fff);
    border: 1px solid var(--line);
  }
  b {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
    border-radius: 8px;
    color: #fff;
    background: var(--if-royal);
  }
}
.jobs-done-actions,
.jobs-empty-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

/* زرار نصّي ثانوي (مسح الفلاتر / العودة للوظائف) */
.jobs-empty-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--if-royal);
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--if-royal) 25%, var(--line));
  border-radius: 31px;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s;

  &:hover {
    border-color: var(--if-royal);
    background: color-mix(in srgb, var(--if-royal) 6%, #fff);
  }
  &:focus-visible {
    outline: 3px solid var(--if-teal);
    outline-offset: 2px;
  }
}

/* زرار عائم للموبايل */
.jobs-fab {
  display: none;
}
@media (max-width: 860px) {
  .jobs-fab {
    position: fixed;
    z-index: 40;
    inset-block-end: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 22px;
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
    color: #fff;
    border-radius: 99px;
    background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
    box-shadow: 0 4px 0 var(--if-deep), 0 16px 30px -10px #050d26b3;
    translate: -50% 140%;
    opacity: 0;
    pointer-events: none;
    transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s;

    &.is-shown {
      translate: -50% 0;
      opacity: 1;
      pointer-events: auto;
    }
    &:focus-visible {
      outline: 3px solid var(--if-mint);
      outline-offset: 3px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-fab,
  .jobs-done-icon {
    transition: none;
    animation: none;
  }
  .jobs-submit .jobs-spinner {
    animation-duration: 2.4s;
  }
}

/* المحتوى فوق مربعات اللوجو */
.job-card article > :not(.job-card-pixels) {
  position: relative;
  z-index: 1;
}

/* =====================================================
   أيقونات السوشيال في الفوتر
   - مربعات بنفس شكل أيقونات "تواصل معنا" + سُمك 3D زي باقي أزرار الموقع
   - مع الـ hover/focus بتتلوّن بلون المنصة نفسها (عشان تتعرف بسرعة) ويظهر اسمها فوقها
   ملاحظة: لازم ".footer .footer-social" — قاعدة ".footer ul" العامة (grid + خط تحت اللينك)
   كانت أقوى وبتبوّظ الصف والخلفية
   ===================================================== */
.footer .footer-social-wrap {
  display: grid;
  gap: 12px;
}
.footer .footer-social-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--if-royal);
}
.footer .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    --brand: var(--if-royal);
    --brand-ink: #fff;
  }
  a {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    font-size: 1.2rem;
    color: var(--if-royal);
    /* بنلغي الخط اللي تحت لينكات الفوتر العادية */
    background: color-mix(in srgb, var(--if-teal) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--if-teal) 22%, transparent);
    box-shadow:
      inset 0 1px 0 #fff,
      0 3px 0 color-mix(in srgb, var(--if-royal) 16%, #e3eaf4);
    transition:
      background-color 0.25s,
      color 0.25s,
      border-color 0.25s,
      translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.3s;

    .icon {
      transition: scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
    }
    &:hover,
    &:focus-visible {
      color: var(--brand-ink);
      background: var(--brand);
      border-color: transparent;
      translate: 0 -3px;
      box-shadow:
        inset 0 1px 0 #ffffff40,
        0 4px 0 color-mix(in srgb, var(--brand) 55%, #000),
        0 12px 20px -10px color-mix(in srgb, var(--brand) 70%, transparent);

      .icon {
        scale: 1.08;
      }
    }
    &:active {
      translate: 0 0;
      box-shadow: inset 0 1px 0 #ffffff40, 0 1px 0 color-mix(in srgb, var(--brand) 55%, #000);
    }
    &:focus-visible {
      outline: 3px solid var(--if-teal);
      outline-offset: 3px;
    }
  }
}
/* اسم المنصة فوق الأيقونة (للي بيستخدم الماوس أو الكيبورد؛ قارئ الشاشة بيقرا aria-label) */
.footer-social-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  border-radius: 8px;
  background: var(--if-deep);
  box-shadow: 0 8px 16px -8px #050d2699;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s;

  /* السهم الصغير */
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-top-color: var(--if-deep);
  }
  .footer-social a:hover &,
  .footer-social a:focus-visible & {
    opacity: 1;
    translate: -50% 0;
  }
}
/* الأجهزة اللمس: مفيش hover، فمش محتاجين التلميح */
@media (hover: none) {
  .footer-social-tip {
    display: none;
  }
}
@media (max-width: 520px) {
  .footer .footer-social {
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer .footer-social a,
  .footer .footer-social a .icon,
  .footer-social-tip {
    transition: none;
  }
}

/* =====================================================
   المسؤولية الاجتماعية ومبادرات إمباكت (الرئيسية) — "موجة" كروت
   خلفية غامقة بالهوية، هيدر من جزئين، وكروت طايرة على موجة بتتحرك لوحدها
   وتتسحب (الحركة في site.js: ini-wave). من غير JS الكروت بتظهر صف عادي بيتسكرل أفقي
   ===================================================== */
.initiatives {
  --ini-bg: #14285a;
  --ini-h1: #f2f7ff;
  --ini-h2: var(--if-mint);
  --ini-accent: var(--if-mint);
  --ini-copy: #c3d3ea;
  --ini-card: #eaf1f8;
  --ini-card-text: var(--if-deep);
  --ini-card-muted: #5b6b86;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 96px) 0 clamp(40px, 5vw, 64px);
  color: var(--ini-h1);
  background:
    radial-gradient(50% 60% at 85% 0%, color-mix(in srgb, var(--if-teal) 22%, transparent), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--if-royal) 40%, transparent), transparent 70%),
    var(--ini-bg);
}

/* ---------- الهيدر: عنوان كبير + عمود تفاصيل مفصول بخط ---------- */
.ini-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 72px) 8px;
}
.ini-title {
  margin: 0;
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  line-height: 1.12;

  /* كل سطر سطر لوحده (والقناع بتاع حركة العناوين بياخد السطر كامل) */
  .ini-h-a,
  .ini-h-b,
  .word-mask {
    display: block;
  }
  .ini-h-a {
    font-weight: 800;
    color: var(--ini-h1);
  }
  /* السطر التاني: تدرّج أبيض ← منت وأخف (بدل الإيتاليك اللي ما ينفعش في العربي) */
  .ini-h-b {
    width: fit-content;
    font-weight: 400;
    color: transparent;
    background: linear-gradient(90deg, #fff, var(--ini-accent) 70%);
    -webkit-background-clip: text;
    background-clip: text;

    html[dir="rtl"] & {
      background: linear-gradient(270deg, #fff, var(--ini-accent) 70%);
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
  html[lang="en"] & {
    letter-spacing: -0.03em; /* للإنجليزي بس؛ بيكسر اتصال الحروف العربي */
  }
}
.ini-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 4px 10px;
  padding-inline-start: clamp(20px, 2.4vw, 32px);
  border-inline-start: 1px solid #ffffff26;

  p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--ini-copy);
  }
}
.ini-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ini-accent);

  html[lang="en"] & {
    letter-spacing: 0.1em;
  }
}
.ini-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ini-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ini-accent) 22%, transparent);
  animation: ini-pulse 2.4s ease-in-out infinite;
}
@keyframes ini-pulse {
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ini-accent) 0%, transparent); }
}
/* زرار الشراكة: زرار الموقع الأساسي (.btn) — بس مايتمدّش بعرض العمود */
.ini-detail .ini-cta-btn {
  align-self: flex-start;
  margin-top: 4px;
}
/* ---------- الهيدر الموحّد: الشارة ← العنوان ← الوصف ---------- */
.ini-intro {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
.ini-head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
/* الوصف تحت العنوان مباشرة */
.ini-lead {
  max-width: 62ch;
  margin: 4px 0 0;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.9;
  color: var(--ini-copy);
}
/* قيم التعهّد: شرايح زجاجية صغيرة */
.ini-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    padding: 6px 14px;
    border: 1px solid #ffffff2e;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #e6f4f7;
    background: linear-gradient(160deg, #ffffff1a, #ffffff08);
  }
}

/* ---------- بلوكات السكشن: هيدر مرقّم (01 / 02) ---------- */
.ini-block {
  max-width: 1440px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 clamp(20px, 5vw, 72px);
}
.ini-block-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 24px);
  max-width: 820px;

  h3 {
    margin: 0 0 8px;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.35;
    color: #fff;
  }
  p {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--ini-copy);
  }
}
/* رقم البلوك: مفرّغ بحدود منت (نفس روح أرقام دور المستشارين) */
.ini-block-num {
  flex: none;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.4px color-mix(in srgb, var(--ini-accent) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ---------- تركيز الانتباه: الكارت اللي في النص واضح والباقي أهدى ----------
   is-center بيتحط من site.js (نفس الكارت اللي العدّاد بيشاور عليه) */
.ini-wave.is-ready .ini-card {
  opacity: 0.84;
  transition:
    background 0.4s,
    color 0.4s,
    box-shadow 0.4s,
    transform 0.4s ease-out,
    opacity 0.5s;
}
.ini-wave.is-ready .is-center .ini-card,
.ini-wave.is-ready .is-hov .ini-card {
  opacity: 1;
}
.ini-wave.is-ready .is-center .ini-card {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ini-accent) 55%, transparent),
    0 26px 50px -24px #00000080;
}
.ini-wave:focus-visible .is-center .ini-card {
  box-shadow:
    0 0 0 3px var(--ini-accent),
    0 26px 50px -24px #00000080;
}

/* ---------- تلميح التصفّح جنب أزرار التحكم ---------- */
.ini-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ini-copy);

  .icon {
    font-size: 1rem;
    color: var(--ini-accent);
    animation: ini-nudge 2.2s ease-in-out infinite;
  }
}
@keyframes ini-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: -5px 0; }
}
html[dir="ltr"] .ini-hint .icon {
  rotate: 180deg;
}
@media (max-width: 600px) {
  .ini-hint {
    display: none; /* على الموبايل السحب بالصباع بديهي، والمساحة ضيقة */
  }
}
@media (prefers-reduced-motion: reduce) {
  .ini-hint .icon {
    animation: none;
  }
  .ini-wave.is-ready .ini-card {
    transition: none;
  }
}

/* ---------- هيكل الكارت: أيقونة + عنوان ← وصف ← (تحت) الشارة + شريط النوع ---------- */
.ini-card {
  --kind: var(--if-royal); /* لون النوع: ملكي للمبادرة */
  gap: 18px;

  &.is-commit {
    --kind: var(--if-teal); /* تيل للالتزام */
  }
}
/* نقطة ملوّنة جوه الشارة بلون النوع */
/* نقطة بيضا جوه الشارة المصمتة */
.ini-kind::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
/* العنوان بياخد مساحته، والأيقونة أصغر شوية */
.ini-who {
  align-items: flex-start;
  gap: 14px;
}
.ini-av {
  width: 44px;
  height: 44px;
  border-radius: 14px; /* مربع مدوّر بدل دايرة: أقرب لأيقونات باقي الموقع */
}
.ini-name {
  padding-top: 8px;
}

/* ---------- شارة نوع الكارت في الموجة: التزام / مبادرة ---------- */
/* الشارة نزلت لآخر الكارت (order + margin-top:auto) — كل الكروت شاراتها على نفس الخط،
   والقمة بقت للأيقونة والعنوان بس */
.ini-kind {
  order: 10;
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* شارة مصمتة بلون النوع + كلام أبيض أكبر وأتقل: تتقري من أول نظرة */
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  background: var(--if-royal);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--if-royal) 70%, transparent);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;

  /* على خلفية الـ hover الغامقة: الشارة بتقلب أبيض بكلام ملوّن */
  .ini-slot.is-hov & {
    color: var(--if-deep);
    background: #fff;
    box-shadow: none;
  }
}
/* كروت الالتزام: شارة تيل + أيقونة تيل عشان تتفرق عن المبادرات من أول نظرة */
.ini-card.is-commit {
  .ini-kind {
    color: #fff;
    background: color-mix(in srgb, var(--if-teal) 85%, var(--if-deep)); /* تيل أغمق شوية: تباين أحسن مع الأبيض */
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--if-teal) 70%, transparent);
  }
  .ini-av {
    color: color-mix(in srgb, var(--if-teal) 85%, var(--if-deep));
    background: color-mix(in srgb, var(--if-teal) 14%, transparent);
  }
}
.ini-slot.is-hov .ini-card.is-commit {
  .ini-kind {
    color: color-mix(in srgb, var(--if-teal) 75%, var(--if-deep));
    background: #fff;
    box-shadow: none;
  }
  .ini-av {
    color: #fff;
    background: #ffffff26;
  }
}
/* كروت الالتزام مالهاش وسم: من غير سطر فاضي تحت العنوان */
.ini-role:empty {
  display: none;
}

/* ---------- دعم المبادرات: الهيدر قبل الموجة ---------- */
.ini-support-head + .ini-wave {
  margin-top: 8px;
}

@media (max-width: 1099px) {
  .ini-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .ini-detail {
    max-width: 620px;
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ini-dot {
    animation: none;
  }
}

/* ---------- الموجة ---------- */
.ini-wave {
  position: relative;
  max-width: 1440px;
  height: 480px; /* على قد الكروت (300px) + مدى الموجة — مفيش فراغ تحتها قبل أزرار التحكم */
  margin: 32px auto 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  /* الأطراف بتتلاشى */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 min(180px, 16%), #000 calc(100% - min(180px, 16%)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 min(180px, 16%), #000 calc(100% - min(180px, 16%)), transparent);

  &.is-drag {
    cursor: grabbing;
  }
  &:focus-visible {
    outline: 3px solid var(--ini-accent);
    outline-offset: -3px;
  }
}
.ini-slot {
  position: absolute;
  top: 0;
  left: 0;
  width: min(336px, 78vw);
  will-change: transform;
}
.ini-card {
  position: relative;
  min-height: 300px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow: hidden;
  border-radius: 20px;
  color: var(--ini-card-text);
  background: var(--ini-card);
  box-shadow: 0 20px 42px -24px #00000059;
  transform: perspective(1000px);
  transition: background 0.4s, color 0.4s, box-shadow 0.4s, transform 0.4s ease-out;

  .ini-slot.is-hov & {
    color: #fff;
    background: linear-gradient(155deg, var(--if-royal), color-mix(in srgb, var(--if-teal) 80%, var(--if-royal)));
    box-shadow:
      inset 0 2px 7px #ffffff22,
      0 9px 18px -8px #050d2647,
      0 32px 56px -18px #050d26ad;
  }
}
.ini-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 56px; /* مكان الرقم اللي في الركن */
}

.ini-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--if-royal);
  background: color-mix(in srgb, var(--if-royal) 10%, transparent);
  transition: background 0.4s, color 0.4s;

  .ini-slot.is-hov & {
    color: #fff;
    background: #ffffff1f;
  }
}
/* العنوان هو أول حاجة العين تشوفها (كان أصغر من الوصف) */
.ini-name {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.45;
  color: inherit;
  text-wrap: balance;
}
.ini-role {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--ini-card-muted);
  transition: color 0.4s;

  .ini-slot.is-hov & {
    color: #d6e9f2;
  }
}
/* رقم المبادرة: مفرّغ كبير في الركن فوق (كان علامة اقتباس في النص وكان سايب فراغ) */
.ini-q {
  position: absolute;
  top: 22px;
  inset-inline-end: 24px;
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  /* لون الحدود صريح (currentColor هنا = transparent) */
  -webkit-text-stroke: 1.4px var(--ini-card-text);
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s;

  .ini-slot.is-hov & {
    -webkit-text-stroke-color: #fff;
    opacity: 0.5;
  }
}
/* الوصف تحت العنوان مباشرة (كان margin:auto بيزقّه لتحت ويسيب فراغ في نص الكروت القصيرة) */
.ini-text {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ini-card-muted);
  transition: color 0.4s;

  .ini-slot.is-hov & {
    color: #e3eef8;
  }

  html[lang="en"] & {
    letter-spacing: -0.02em;
  }
}
/* لمعة بتتبع الماوس */
.ini-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(ellipse at var(--x, 25%) var(--y, 30%), #ffffff38, transparent 62%);

  .ini-slot.is-hov & {
    opacity: 1;
  }
}

/* من غير JS: صف كروت عادي بيتسكرل أفقي */
.ini-wave:not(.is-ready) {
  display: flex;
  gap: 24px;
  height: auto;
  padding: 24px clamp(20px, 5vw, 72px);
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;

  .ini-slot {
    position: static;
    flex: none;
  }
}

@media (max-width: 809px) {
  .ini-wave {
    height: 420px;
  }
  .ini-card {
    min-height: 280px;
    padding: 24px;
  }
  .ini-text {
    font-size: 0.93rem;
  }
  .ini-name {
    font-size: 1.04rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ini-card {
    transition: none;
  }
}

/* ---------- موجة المبادرات: شريط التحكم ---------- */
.initiatives {
  /* + pattern الهوية خفيف فوق الخلفية */
  background-image:
    radial-gradient(50% 60% at 85% 0%, color-mix(in srgb, var(--if-teal) 22%, transparent), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--if-royal) 40%, transparent), transparent 70%);
}
.ini-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  max-width: 1440px;
  margin: 8px auto 0;
  padding: 0 clamp(20px, 5vw, 72px);

  &[hidden] {
    display: none;
  }
}
.ini-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 200px;
  max-width: 420px;
  margin-inline-start: auto;
}
.ini-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ini-copy);
  font-variant-numeric: tabular-nums;

  b {
    color: #fff;
  }
}
.ini-bar {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: #ffffff26;
  overflow: hidden;

  i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(100% / 6);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--if-teal), var(--ini-accent));
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}
.ini-nav {
  display: flex;
  gap: 10px;
}
.ini-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
  color: #fff;
  border-radius: 50%;
  border: 1px solid #ffffff40;
  background: #ffffff10;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, translate 0.25s;

  &:hover {
    color: var(--if-deep);
    background: var(--ini-accent);
    border-color: transparent;
  }
  &:active {
    translate: 0 2px;
  }
  &:focus-visible {
    outline: 3px solid var(--ini-accent);
    outline-offset: 3px;
  }
  /* أيقونة #arrow بتشاور لقدّام في اتجاه القراءة؛ "السابق" معكوس */
  &[data-ini="prev"] .icon {
    transform: rotate(180deg);
  }
  html[dir="ltr"] &[data-ini="prev"] .icon {
    transform: none;
  }
  html[dir="ltr"] &[data-ini="next"] .icon {
    transform: rotate(180deg);
  }
}
@media (max-width: 600px) {
  .ini-progress {
    margin-inline-start: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ini-bar i {
    transition: none;
  }
}

/* =====================================================
   شركاء النجاح (الرئيسية)
   لوحة كبيرة: صورة clients.jpg + overlay بألوان الهوية، كارت معلومات أبيض،
   وعمودين شعارات بيتحركوا رأسي عكس بعض (CSS بس) والأطراف بتتلاشى
   ===================================================== */
.partners {
  padding-block: clamp(48px, 6vw, 90px);
}
.partners-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: clamp(480px, 44vw, 560px);
  padding: 0 clamp(20px, 4vw, 56px);
  border-radius: 36px;
  background: #1f3a7a url("../images/clients.jpg") center / cover no-repeat;
  box-shadow: 0 8px 0 var(--if-deep), 0 40px 70px -40px color-mix(in srgb, var(--if-deep) 80%, transparent);

  /* الـ overlay: تدرّج الهوية فوق الصورة الأبيض والأسود */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--if-deep) 88%, transparent), color-mix(in srgb, var(--if-teal) 72%, transparent)),
      var(--plus-pattern);
    mix-blend-mode: normal;
  }
}

/* كارت المعلومات */
.partners-info {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 28px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 0 color-mix(in srgb, var(--if-royal) 14%, #e3eaf4),
    0 30px 50px -30px #050d26b3;

  h2 {
    margin: 0 0 12px;
    color: var(--if-deep);
  }
  p {
    margin: 0 0 26px;
    line-height: 1.9;
    color: var(--mut);
  }
}

/* عمودين الشعارات */
.partners-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  height: clamp(480px, 44vw, 560px);
  overflow: hidden;
  /* فوق وتحت بيتلاشوا */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);

  &:hover .partners-track {
    animation-play-state: paused;
  }
}
.partners-col {
  overflow: hidden;
}
.partners-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px; /* نفس الـ gap عشان اللفّة تبقى متصلة */
  animation: partners-up 26s linear infinite;

  .is-reverse & {
    animation-name: partners-down;
    animation-duration: 30s;
  }
}
@keyframes partners-up {
  from { translate: 0 0; }
  to { translate: 0 -50%; }
}
@keyframes partners-down {
  from { translate: 0 -50%; }
  to { translate: 0 0; }
}
.partner-card {
  display: grid;
  place-items: center;
  height: 140px;
  padding: 18px 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--if-royal) 14%, #e3eaf4), 0 18px 30px -20px #050d2699;
  transition: translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);

  &:hover {
    translate: 0 -4px;
  }
  img {
    max-width: 78%;
    max-height: 72px;
    object-fit: contain;
  }
}
/* كارت مؤقت لحد ما الشعارات الحقيقية توصل */
.partner-ph {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--if-royal) 45%, var(--mut));

  img {
    width: 54px;
    max-height: none;
    opacity: 0.35;
    filter: grayscale(1);
  }
}

@media (max-width: 900px) {
  .partners-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(20px, 4vw, 36px);
  }
  .partners-logos {
    height: 380px;
    gap: 14px;
  }
  .partners-track {
    gap: 14px;
    padding-bottom: 14px;
  }
  .partner-card {
    height: 112px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

/* =====================================================
   الهيرو: صورة المستشارة التنفيذية جوه القوس
   الصورة ليها خلفية (علم + لافتة)، فبتتقص على شكل القوس كإطار بدل ما تبقى مقصوصة حرّة.
   على يسارها شريط غامق (من سكرين شوت)، فالـ object-position مايل يمين يبعد عنه
   ===================================================== */
.hero .hero-visual--leader {
  max-width: 440px;
}
.hero-leader {
  position: relative;
  width: 100%;
  height: var(--hv-h, 410px);
  margin: 0;
}
.hero-leader-frame {
  position: absolute;
  /* نفس شكل القوس (طالع فوق بـ 28%) بس جوّاه بهامش = القوس بيبان كإطار حواليها */
  inset: calc(-28% + 12px) 12px 0;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--if-deep);
  box-shadow: inset 0 0 0 1px #ffffff40;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 16%;
  }
  /* تحت الصورة بيغمق ناحية الكارت عشان الاسم يتقري */
  &::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--if-deep) 80%, transparent));
    pointer-events: none;
  }
}
/* كارت الاسم: زجاجي أبيض فوق أسفل الصورة */
.hero-leader-card {
  position: absolute;
  inset-inline: 28px;
  bottom: 22px;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffffeb, #ffffffcc);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--if-royal) 18%, transparent), 0 24px 40px -20px #050d26b3;

  small {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--if-steel);
  }
  b {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--if-deep);
  }
  a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--if-royal);
    transition: gap 0.25s, color 0.25s;

    &:hover,
    &:focus-visible {
      gap: 10px;
      color: var(--if-teal);
    }
    html[dir="ltr"] & .icon {
      transform: rotate(180deg);
    }
  }
}
@media (max-width: 640px) {
  .hero .hero-visual--leader {
    max-width: 360px;
  }
  .hero-leader-card {
    inset-inline: 16px;
    bottom: 14px;
    padding: 10px 14px;

    b {
      font-size: 0.86rem;
    }
  }
}

/* =====================================================
   زرار السوشيال العائم (كل الصفحات)
   - ثابت في نص الصفحة رأسيًا، على "بداية" السطر: يمين في العربي، شمال في الإنجليزي
   - لما يتفتح: قرص زجاجي بيكبر من الزرار، والأيقونات بتتفرد على قوس دايري ناحية جوه الصفحة
     (الزاوية والمكان محسوبين بـ cos/sin من ترتيب الأيقونة --i وعددهم --n)
   ===================================================== */
/* الزرار نص دايرة لازق في حافة الشاشة (بياخد 29px بس من عرض الصفحة)،
   ومركز القوس والقرص = نقطة على الحافة نفسها، فكله بيطلع من الحافة كنص دايرة */
.social-fab {
  --btn: 58px;       /* قطر الدايرة — الظاهر منها النص */
  --item: 46px;
  --R: 104px;        /* نص قطر القوس */
  --arc: 156deg;     /* فتحة القوس (من الحافة فبتاخد نص دايرة تقريبًا) */
  --dir: 1;          /* ناحية جوه الصفحة: يمين في الإنجليزي */
  position: fixed;
  top: 50%;
  inset-inline-start: 0;
  z-index: 45;
  width: calc(var(--btn) / 2);
  height: var(--btn);
  translate: 0 -50%;

  html[dir="rtl"] & {
    --dir: -1;       /* في العربي الزرار يمين، فجوه = شمال */
  }
}

/* القرص الزجاجي ورا الأيقونات: مركزه على الحافة، فنصه بس اللي بيبان */
.social-fab-disc {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: calc((var(--R) + var(--item) / 2 + 22px) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent calc(100% - 2px), #ffffff59 calc(100% - 1px), transparent),
    radial-gradient(closest-side, color-mix(in srgb, var(--if-deep) 92%, transparent), color-mix(in srgb, var(--if-royal) 86%, transparent));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 60px -20px #050d26b3;
  /* مركزه على الحافة: شمال في الإنجليزي (-50%) ويمين في العربي (+50%) */
  translate: calc(-50% * var(--dir)) -50%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  transition: scale 0.5s cubic-bezier(0.2, 0.9, 0.2, 1.05), opacity 0.3s;

  .social-fab.is-open & {
    scale: 1;
    opacity: 1;
  }
}

/* الأيقونات على القوس */
.social-fab-menu {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    /* زاوية كل أيقونة: من -arc/2 لـ +arc/2 بالتساوي */
    --a: calc(var(--arc) / -2 + var(--i) * var(--arc) / max(var(--n) - 1, 1));
    /* مركز الأيقونة وهي مقفولة = النقطة اللي على الحافة (مركز نص الدايرة) */
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: var(--item);
    height: var(--item);
    margin-block-start: calc(var(--item) / -2);
    margin-inline-start: calc(var(--item) / -2);
    translate: 0 0;
    scale: 0.3;
    opacity: 0;
    visibility: hidden;
    transition:
      translate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) calc((var(--n) - var(--i)) * 25ms),
      scale 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) calc((var(--n) - var(--i)) * 25ms),
      opacity 0.25s calc((var(--n) - var(--i)) * 25ms),
      visibility 0s 0.5s;

    .social-fab.is-open & {
      translate: calc(cos(var(--a)) * var(--R) * var(--dir)) calc(sin(var(--a)) * var(--R));
      scale: 1;
      opacity: 1;
      visibility: visible;
      /* الفتح: واحدة ورا التانية */
      transition:
        translate 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 45ms + 60ms),
        scale 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 45ms + 60ms),
        opacity 0.3s calc(var(--i) * 45ms + 60ms),
        visibility 0s;
    }
  }
  a {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    color: var(--if-royal);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--if-royal) 22%, #dfe7f3), 0 10px 18px -8px #050d2699;
    transition: background 0.25s, color 0.25s, scale 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.25s;

    &:hover,
    &:focus-visible {
      color: var(--brand-ink);
      background: var(--brand);
      scale: 1.12;
      box-shadow: 0 3px 0 color-mix(in srgb, var(--brand) 55%, #000), 0 12px 22px -8px color-mix(in srgb, var(--brand) 80%, transparent);
    }
    &:focus-visible {
      outline: 3px solid var(--if-mint);
      outline-offset: 3px;
    }
  }
}
/* اسم المنصة فوق الأيقونة */
.social-fab-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--if-deep);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 16px -8px #050d2699;
  translate: -50% 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s;

  .social-fab-menu a:hover &,
  .social-fab-menu a:focus-visible & {
    opacity: 1;
    translate: -50% 0;
  }
}

/* الزرار الأساسي: تدرّج الهوية + سُمك 3D زي أزرار الموقع + نبضة خفيفة تلفت النظر */
.social-fab-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 1.2rem;
  color: #fff;
  border: 1px solid #ffffff45;
  border-inline-start: 0;
  /* نص دايرة: الركنين اللي ناحية جوه الصفحة مدوّرين، واللي على الحافة مستقيمين */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
  background: linear-gradient(150deg, var(--if-teal), var(--if-royal));
  box-shadow:
    inset 0 1px 0 #ffffff66,
    inset 0 -3px 0 #0b1c4a59,
    0 10px 22px -8px #050d26b3;
  cursor: pointer;
  transform-origin: 0 50%;
  transition: scale 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.25s;

  html[dir="rtl"] & {
    transform-origin: 100% 50%;
  }

  .icon {
    grid-area: 1 / 1;
    transition: opacity 0.25s, rotate 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), scale 0.45s;
  }
  .social-fab-ico-close {
    opacity: 0;
    rotate: -90deg;
    scale: 0.5;
  }
  .social-fab.is-open & {
    .social-fab-ico-open { opacity: 0; rotate: 90deg; scale: 0.5; }
    .social-fab-ico-close { opacity: 1; rotate: 0deg; scale: 1; }
  }
  /* hover: بيطلع من الحافة شوية (بيكبر من ناحية الحافة) */
  &:hover,
  .social-fab.is-open & {
    scale: 1.12;
  }
  &:active {
    scale: 1.04;
  }
  &:focus-visible {
    outline: 3px solid var(--if-mint);
    outline-offset: 3px;
  }
  /* النبضة: حلقة بتكبر وتختفي — بتقف أول ما الزرار يتفتح مرة */
  &::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 2px solid var(--if-teal);
    border-inline-start: 0;
    transform-origin: inherit;
    animation: social-fab-pulse 2.6s ease-out infinite;
    pointer-events: none;
  }
  .social-fab.was-opened &::after {
    animation: none;
    opacity: 0;
  }
}
@keyframes social-fab-pulse {
  0% { scale: 1; opacity: 0.7; }
  70%, 100% { scale: 1.7 1.4; opacity: 0; }
}

@media (max-width: 640px) {
  .social-fab {
    --btn: 50px;
    --item: 40px;
    --R: 88px;
  }
  .social-fab-menu a {
    font-size: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-fab-disc,
  .social-fab-menu li,
  .social-fab-menu a,
  .social-fab-btn,
  .social-fab-btn .icon {
    transition: none !important;
  }
  .social-fab-btn::after {
    animation: none;
  }
}
@media print {
  .social-fab {
    display: none;
  }
}