/* =====================================================================
   صناعة الحلال — التنسيقات
   الملف مرتب بنفس ترتيب سكاشن index.html، وكل سكشن يحمل
   تنسيقات الموبايل الخاصة به في نهايته.

   00. المتغيرات
   01. الأساسيات
   02. عناصر مشتركة (عنوان السكشن، الأزرار، السلايدر)
   03. الهيدر
   04. الهيرو
   05. مسار البرنامج
   06. من واقع معاملاتك
   07. لمن صُمّم البرنامج
   08. الدورات
   09. تجربة التعلّم
   10. الفريق العلمي
   11. خطة الدراسة
   12. منحة العمرة
   13. الاشتراك
   14. الأسئلة الشائعة
   15. الخاتمة
   16. الفوتر
   17. الأدوات العائمة
   18. الحركة
   ===================================================================== */


/* ---------- 00. المتغيرات ---------- */
:root {
  --navy: #0A2136;
  --navy-2: #103B56;
  --ink: #24384B;
  --muted: #3E5266;
  --muted-2: #536B7D;
  --blue: #00699E;
  --blue-dark: #005780;
  --blue-bright: #0094DA;
  --cyan: #6FCBF2;
  --sky: #EAF6FD;
  --mist: #F4F8FB;
  --line: #DBE7F0;
  --gold: #D9BA7C;
  --gold-soft: #E3C98F;
  --gold-deep: #7A5A1E;
  --on-navy: #C9D8E4;
  --font-head: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 5vw, 64px);
  --shadow-sm: 0 7px 22px rgba(10, 33, 54, .05);
  --shadow-md: 0 16px 34px rgba(10, 33, 54, .1);
}


/* ---------- 01. الأساسيات ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.8;
}
main section[id] { scroll-margin-top: 62px; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.sprite { display: none; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-solid { display: block; width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 560px) {
  body { font-size: 15.5px; line-height: 1.75; }
}


/* ---------- 02. عناصر مشتركة ---------- */
.container { max-width: 1240px; margin-inline: auto; }
.container--narrow { max-width: 1120px; }
.container--text { max-width: 900px; }

.section { padding: clamp(46px, 5.4vw, 76px) var(--gutter); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #fff; }

/* عنوان السكشن */
.section-head { max-width: 780px; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.section-head h2 { margin-bottom: 10px; font-size: clamp(26px, 3.15vw, 39px); line-height: 1.43; }
.section-head p { color: var(--muted); }
.section--navy .section-head p { color: var(--on-navy); }
.section-head--start { max-width: 820px; margin-inline: 0 auto; text-align: right; }

/* الشارة أعلى العنوان */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  margin-bottom: 14px;
  padding: 5px 15px;
  border: 1px solid rgba(111, 203, 242, .58);
  border-radius: 999px;
  background: linear-gradient(105deg, #0A2943, #075D88 58%, #087EAE);
  box-shadow: 0 7px 18px rgba(0, 57, 88, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.eyebrow::before { content: ""; flex: none; width: 20px; height: 2px; border-radius: 2px; background: var(--gold); }

/* الأزرار */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(0, 105, 158, .2); }
.btn--primary:hover { background: var(--blue-dark); }
.btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn--sm { min-height: 38px; padding: 6px 14px; border-radius: 9px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn--gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }
.btn--gold:hover { filter: brightness(1.06); }
.btn--outline { border-color: var(--blue); color: var(--blue); }
.btn--outline:hover { background: var(--sky); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* إطار الصورة مشترك: كارت المحاضر وكارت الدورة والهيرو.
   لو صورة لم تُحمَّل يظهر أول حرف من الاسم (data-initial) بهوية الموقع. */
.avatar { display: block; flex: none; padding: 3px; border-radius: 50%; background: linear-gradient(145deg, var(--gold), var(--blue-bright)); }
.avatar img { display: block; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: cover; }
.avatar.is-missing::before, .avatar--mark::before {
  content: attr(data-initial);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy), var(--blue));
  color: var(--gold-soft);
  font-family: var(--font-head);
  font-size: 1.6em;
  font-weight: 600;
}
/* أفاتار بهوية الموقع لمن لا تُعرض صورته: حرف ذهبي على كحلي مع لمعة وحلقة */
.avatar--mark { position: relative; background: linear-gradient(145deg, var(--gold-soft), var(--gold) 45%, var(--blue-bright)); }
.avatar--mark::before {
  background:
    radial-gradient(circle at 30% 22%, rgba(111, 203, 242, .45), transparent 52%),
    radial-gradient(circle at 75% 85%, rgba(217, 186, 124, .25), transparent 45%),
    linear-gradient(150deg, var(--navy) 20%, var(--navy-2) 60%, var(--blue));
  box-shadow: inset 0 0 0 4px rgba(227, 201, 143, .22);
  font-size: 2.1em;
  line-height: 1;
}
.avatar--mark::after { content: ""; position: absolute; inset: 22%; border: 1px dashed rgba(227, 201, 143, .35); border-radius: 50%; pointer-events: none; }
.course__avatar.avatar--mark::after { display: none; }

/* السلايدر المشترك: الدورات والفريق */
.slider { --slider-gap: 18px; --slider-count: 3; }
.slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--slider-gap);
  margin: -6px -4px 0;
  padding: 6px 4px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * {
  flex: 0 0 calc((100% - (var(--slider-count) - 1) * var(--slider-gap)) / var(--slider-count));
  min-width: 0;
  scroll-snap-align: start;
}
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.slider__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(0, 105, 158, .2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(10, 33, 54, .08);
  color: var(--blue);
  transition: background-color .22s ease, color .22s ease, opacity .22s ease;
}
.slider__arrow:hover:not(:disabled) { background: var(--blue); color: #fff; }
.slider__arrow:disabled { opacity: .3; cursor: not-allowed; }
.slider__dots { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 28px; }
.slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #B8CCD8; transition: width .3s var(--ease), background .3s ease; }
.slider__dot[aria-current="true"] { width: 24px; background: linear-gradient(90deg, var(--gold), var(--blue-bright)); }

@media (max-width: 980px) {
  .slider { --slider-count: 2; }
}
@media (max-width: 650px) {
  .slider { --slider-gap: 12px; }
  .slider__track { margin-inline: calc(var(--gutter) * -1); padding-inline: 8vw; scroll-padding-inline: 8vw; }
  .slider__track > * { flex-basis: 84vw; max-width: 340px; scroll-snap-align: center; }
  .slider__arrow { display: none; }
}

@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* الموبايل: كل عناوين السكاشن في المنتصف */
@media (max-width: 760px) {
  .section { padding-block: 40px; }
  .section-head,
  .section-head--start { margin-inline: auto; text-align: center; }
  .section-head h2 { font-size: clamp(24px, 7vw, 30px); }
  .section-head p { font-size: 14.5px; }
  .eyebrow { min-height: 30px; margin-bottom: 10px; padding: 4px 12px; font-size: 12px; }
}


/* ---------- 03. الهيدر ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #E3EDF3;
  background: #fff;
  box-shadow: 0 4px 18px rgba(10, 33, 54, .06);
}
.header__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  max-width: 1240px;
  min-height: 66px;
  margin: auto;
  padding: 4px clamp(14px, 4vw, 36px);
  transition: min-height .3s var(--ease);
}
.header__brand { display: block; width: 84px; height: 56px; transition: width .3s var(--ease), height .3s var(--ease); }
.header__brand img { width: 100%; height: 100%; object-fit: contain; }
.header.is-compact .header__inner { min-height: 50px; }
.header.is-compact .header__brand { width: 66px; height: 42px; }

.nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 10px; border-radius: 10px; color: var(--navy); white-space: nowrap; font-size: 14.5px; font-weight: 600; transition: background-color .22s ease, color .22s ease; }
.nav__icon { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--sky); color: var(--blue); transition: background-color .22s ease, color .22s ease; }
.nav__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__link:hover, .nav__link[aria-current="location"] { background: #EDF7FC; color: var(--blue-dark); }
.nav__link:hover .nav__icon, .nav__link[aria-current="location"] .nav__icon { background: var(--blue); color: #fff; }
.header.is-compact .nav__link { font-size: 13.5px; }
.header.is-compact .nav__icon { width: 22px; height: 22px; }
/* رابط الصفحة الأخرى: مميز بإطار ذهبي حتى لا يُخلط بروابط الأقسام */
.nav__link--page { margin-inline-start: 4px; border: 1px solid #E5D3AC; background: #FBF6EC; color: var(--gold-deep); }
.nav__link--page .nav__icon { background: #fff; color: var(--gold-deep); }
.nav__link--page:hover { border-color: var(--gold); background: #F7EEDB; color: var(--navy); }
.nav__link--page:hover .nav__icon { background: var(--gold); color: var(--navy); }
.nav__cta { display: none; } /* زر الاشتراك داخل القائمة المنسدلة فقط */
.nav-backdrop { display: none; }

.header__actions { display: flex; align-items: center; gap: 8px; }
.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 16px;
  border-radius: 11px;
  background: linear-gradient(115deg, #0A2943, #08638F 40%, #137EAC 75%, #2C92BA);
  box-shadow: 0 6px 18px rgba(0, 105, 158, .18);
  color: #fff;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform .22s ease;
}
.header__cta:hover { transform: translateY(-2px); }

.menu-toggle { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--mist); color: var(--navy); transition: background-color .22s ease, color .22s ease; }
.menu-toggle__icon { display: grid; align-content: space-between; width: 19px; height: 15px; }
.menu-toggle__icon span { display: block; height: 2px; border-radius: 4px; background: currentColor; transition: transform .28s var(--ease), opacity .2s ease; }
.menu-toggle[aria-expanded="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.menu-toggle[aria-expanded="true"] span span:first-child { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span span:last-child { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 971px) and (max-width: 1240px) {
  .nav__link { gap: 5px; padding: 6px; font-size: 13px; }
  .nav__icon { width: 22px; height: 22px; border-radius: 7px; }
  .nav__icon svg { width: 13px; height: 13px; }
}
@media (min-width: 971px) and (max-width: 1060px) {
  .nav__icon { display: none; }
}

/* القائمة المنسدلة في الموبايل والتابلت */
@media (max-width: 970px) {
  .header__inner { grid-template-columns: 1fr auto; }
  .menu-toggle { display: grid; }
  .nav-backdrop { display: block; position: fixed; z-index: 90; inset: 0; background: rgba(10, 33, 54, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    max-height: calc(100dvh - 86px);
    padding: 10px;
    overflow-y: auto;
    border-top: 3px solid var(--gold);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(10, 33, 54, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.98);
    transform-origin: top center;
    transition: opacity .22s ease, visibility .22s ease, transform .3s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link, .header.is-compact .nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 12px;
    color: var(--navy);
    font-size: 15px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .3s ease, transform .35s var(--ease), background-color .2s ease;
  }
  .nav.is-open .nav__link { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms); }
  .nav__link:nth-child(2) { --i: 1; }
  .nav__link:nth-child(3) { --i: 2; }
  .nav__link:nth-child(4) { --i: 3; }
  .nav__link:nth-child(5) { --i: 4; }
  .nav__link:nth-child(6) { --i: 5; }
  .nav__link:nth-child(7) { --i: 6; }
  .nav__link::after { content: "‹"; margin-inline-start: auto; color: #9DB5C5; font-size: 20px; line-height: 1; }
  .nav__icon, .header.is-compact .nav__icon { width: 38px; height: 38px; border-radius: 11px; }
  .nav__icon svg { width: 20px; height: 20px; }
  .nav__cta { display: inline-flex; margin-top: 7px; }
}
@media (max-width: 560px) {
  .header__cta { display: none; }
}


/* ---------- 04. الهيرو ---------- */
.hero { padding-inline: var(--gutter); background: #0B2940; color: #fff; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); /* الكمبيوتر: المحتوى يمينًا والصورة يسارًا */
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  max-width: 1240px;
  margin-inline: auto;
  padding-block: clamp(24px, 2.8vw, 38px);
}
.hero__title { margin-bottom: 14px; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.36; letter-spacing: -.012em; text-wrap: balance; }
.hero__title span { color: var(--gold-soft); }
.hero__summary { display: grid; gap: 2px; max-width: 720px; margin-bottom: 18px; line-height: 1.8; }
.hero__summary span:first-child { color: #F0F5F8; font-size: clamp(15px, 1.2vw, 16.5px); font-weight: 500; }
.hero__summary span:last-child { color: var(--on-navy); font-size: clamp(14px, 1.1vw, 15px); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.hero__note { margin-bottom: 12px; color: var(--on-navy); font-size: 13.5px; line-height: 1.7; }
.hero__note span { color: var(--gold-soft); font-weight: 700; }

.hero__scholars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero__scholars p { color: var(--on-navy); font-size: 13.5px; line-height: 1.6; }
.hero__avatars { display: flex; padding-inline-start: 9px; }
.hero__avatars img { width: 36px; height: 36px; margin-inline-start: -9px; border: 2px solid #0B2940; border-radius: 50%; object-fit: cover; }

/* إطار الفيديو */
.hero__media {
  position: relative;
  width: 100%;
  max-width: 430px;
  justify-self: center;
  padding: 5px;
  border-radius: 26px;
  background: linear-gradient(145deg, var(--gold-soft), var(--blue-bright) 55%, var(--gold));
  box-shadow: 0 22px 46px rgba(0, 0, 0, .34), 0 0 0 7px rgba(217, 186, 124, .1);
}
.hero__video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 21px; background: var(--navy); object-fit: cover; }
.hero__video-toggle { position: absolute; bottom: 16px; left: 16px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(10, 33, 54, .62); color: #fff; opacity: .75; transition: opacity .2s ease, background-color .2s ease; }
.hero__video-toggle:hover, .hero__video-toggle:focus-visible { background: var(--blue); opacity: 1; }
.hero__video-toggle svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero__icon-play { display: none; }
.hero__video-toggle.is-paused .hero__icon-play { display: block; }
.hero__video-toggle.is-paused .hero__icon-pause { display: none; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 22px 34px; justify-items: center; text-align: center; }
  .hero__media { order: -1; max-width: 340px; } /* الموبايل: الفيديو أولًا */
  .hero__summary { margin-inline: auto; }
  .hero__actions, .hero__scholars { justify-content: center; }
  .hero .eyebrow { margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(25px, 7.4vw, 31px); line-height: 1.42; }
  .hero__title br { display: none; }
  .hero__summary span:first-child { font-size: 14.5px; }
  .hero__summary span:last-child { font-size: 13.5px; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__note { font-size: 12.5px; }
  .hero__scholars { flex-direction: column; gap: 6px; }
}


/* ---------- 05. مسار البرنامج ---------- */
.path { padding: 24px var(--gutter); border-block: 1px solid var(--line); background: var(--mist); }
.path__inner { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1240px; margin-inline: auto; }
.path__heading span { display: block; margin-bottom: 3px; color: var(--blue); font-size: 12px; font-weight: 600; }
.path__heading h2 { margin-bottom: 4px; font-size: 22px; line-height: 1.5; }
.path__heading p { color: #688092; font-size: 12px; }
.path__content { display: grid; gap: 11px; min-width: 0; }
.path__track { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; }
.path__step {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 76px;
  padding: 13px 15px;
  border: 1px solid #CFE0EA;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 33, 54, .045);
}
.path__step--link { transition: transform .25s ease, border-color .25s ease; }
.path__step--link:hover { transform: translateY(-3px); border-color: var(--cyan); }
.path__step--current:hover { box-shadow: 0 12px 26px rgba(10, 33, 54, .22); }
.path__step--current { border-color: var(--navy); background: var(--navy); color: #fff; transition: box-shadow .25s ease; }
.path__num { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sky); color: var(--blue); font-size: 13px; font-weight: 700; }
.path__step--current .path__num { background: var(--blue); color: #fff; }
.path__copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.path__copy strong { font-size: 14px; font-weight: 600; line-height: 1.5; }
.path__copy small { color: #698295; font-size: 12px; line-height: 1.5; }
.path__step--current small { color: var(--on-navy); }
.path__status { flex: none; padding: 4px 8px; border-radius: 20px; background: rgba(111, 203, 242, .15); color: #A9E1FA; font-size: 10px; }
.path__open { flex: none; color: var(--blue); font-size: 19px; }
.path__connector { position: relative; display: grid; place-items: center; height: 2px; background: #B8D2E0; }
.path__connector::after { content: "←"; position: absolute; padding: 0 5px; background: var(--mist); color: var(--blue); font-size: 20px; line-height: 1; }

@media (max-width: 1000px) {
  .path__inner { grid-template-columns: 1fr; gap: 16px; }
  .path__heading { text-align: center; }
}
/* مخفي في الموبايل */
@media (max-width: 760px) {
  .path { display: none; }
}


/* ---------- 06. من واقع معاملاتك ---------- */
.tx__board { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); gap: 18px; max-width: 1040px; margin-inline: auto; }
.tx__tabs { display: grid; align-content: start; gap: 8px; }
.tx__tab {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.tx__tab:hover { border-color: var(--cyan); background: #F7FCFF; }
.tx__tab[aria-selected="true"]:hover { background: var(--navy); }
.tx__tab-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, #F0FAFF, #DFF2FB); color: var(--blue); transition: background .2s ease, color .2s ease; }
.tx__tab-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tx__tab[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 18px rgba(10, 33, 54, .16); }
.tx__tab[aria-selected="true"] .tx__tab-icon { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); }

.tx__panels { display: grid; gap: 18px; align-content: space-between; padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: var(--shadow-md); }
.tx__panel { animation: fade-up .32s var(--ease) both; }
.tx__panel h3 { margin-bottom: 18px; font-size: clamp(19px, 2vw, 25px); line-height: 1.6; }

/* كارت الدورة: رابط واضح بزر ذهبي بدل الخط تحت النص */
.tx__course { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid rgba(111, 203, 242, .28); border-radius: 14px; background: rgba(255, 255, 255, .06); transition: background-color .2s ease, border-color .2s ease; }
.tx__course:hover { border-color: var(--gold); background: rgba(217, 186, 124, .1); }
.tx__course-info { display: grid; gap: 3px; min-width: 0; }
.tx__course small { color: var(--gold-soft); font-size: 12.5px; }
.tx__course strong { font-family: var(--font-head); font-size: 16px; font-weight: 600; line-height: 1.5; }
.tx__teacher { display: flex; align-items: center; gap: 8px; margin-top: 5px; color: #E4EDF3; font-size: 13.5px; font-weight: 500; }
.tx__avatar { width: 38px; height: 38px; padding: 2px; font-size: 10px; }
.tx__avatar img { border-width: 1px; }
.tx__go { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: transform .2s ease; }
.tx__go .icon { width: 16px; height: 16px; }
.tx__course:hover .tx__go { transform: translateY(-2px); }

.tx__topics { margin-top: 14px; color: var(--on-navy); font-size: 14px; line-height: 1.8; }
.tx__topics strong { color: #fff; font-weight: 600; }
.tx__cta { justify-self: start; }

@media (max-width: 760px) {
  .tx__board { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tx__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx__tab { min-height: 54px; gap: 8px; padding: 7px; font-size: 13px; }
  .tx__tab-icon { width: 32px; height: 32px; border-radius: 9px; }
  .tx__tab-icon svg { width: 17px; height: 17px; }
  .tx__panels { gap: 14px; padding: 20px 14px; border-radius: 16px; text-align: center; }
  .tx__panel h3 { margin-bottom: 14px; font-size: 17.5px; line-height: 1.65; }
  .tx__course { flex-direction: column; padding: 13px; }
  .tx__course-info { justify-items: center; }
  .tx__course strong { font-size: 14.5px; }
  .tx__go { justify-content: center; width: 100%; padding-block: 9px; }
  .tx__topics { font-size: 13px; }
  .tx__cta { justify-self: stretch; }
}


/* ---------- 07. لمن صُمّم البرنامج ---------- */
.audience { padding-top: 0; }
.audience__stage { position: relative; height: 560px; max-width: 960px; margin-inline: auto; }

/* خطوط الربط المتدفقة */
.audience__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.audience__lines path { stroke: #A9CEE0; stroke-width: 1.5; stroke-dasharray: 5 8; vector-effect: non-scaling-stroke; animation: audience-flow 2.6s linear infinite; }

/* المركز */
.audience__hub { position: absolute; top: 55.4%; left: 50%; width: 214px; height: 214px; translate: -50% -50%; }
.audience__ring { position: absolute; inset: -14px; border: 1.5px dashed rgba(0, 105, 158, .28); border-radius: 50%; animation: audience-spin 34s linear infinite; }
.audience__ring::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--gold); }
.audience__core {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #137EAC, #06466D 62%, var(--navy));
  box-shadow: 0 18px 40px rgba(0, 87, 128, .28), 0 0 0 8px rgba(0, 105, 158, .07);
  color: #fff;
  text-align: center;
  animation: audience-breathe 5s ease-in-out infinite;
}
.audience__core img { width: 76px; height: 76px; margin-bottom: 6px; padding: 8px; border-radius: 50%; background: #fff; object-fit: contain; }
.audience__core strong { font-family: var(--font-head); font-size: 19px; font-weight: 600; line-height: 1.4; }
.audience__core small { color: #CFE3EE; font-size: 12px; }

/* البطاقات حول المركز */
.audience__node {
  position: absolute;
  width: 218px;
  padding: 14px 14px 13px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(10, 33, 54, .04);
  text-align: center;
  translate: -50% -50%;
  animation: audience-float 7s ease-in-out infinite;
  transition: box-shadow .25s ease, scale .25s ease;
}
.audience__node:hover { box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 148, 218, .35); scale: 1.03; }
.audience__node--1 { top: 16%; left: 50%; }
.audience__node--2 { top: 33.9%; left: 83.3%; animation-delay: -1.4s; }
.audience__node--3 { top: 84%; left: 75%; animation-delay: -2.8s; }
.audience__node--4 { top: 84%; left: 25%; animation-delay: -4.2s; }
.audience__node--5 { top: 33.9%; left: 16.7%; animation-delay: -5.6s; }
.audience__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%; background: var(--sky); color: var(--blue); transition: background-color .25s ease, color .25s ease; }
.audience__node:hover .audience__icon { background: var(--blue); color: #fff; }
.audience__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.audience__node h3 { margin-bottom: 3px; font-size: 14.5px; line-height: 1.5; }
.audience__node p { color: var(--muted-2); font-size: 12.5px; line-height: 1.6; }

.audience__note { width: fit-content; max-width: 100%; margin: 26px auto 0; padding: 9px 18px; border: 1px solid #CFE7F2; border-radius: 12px; background: var(--sky); color: var(--blue-dark); font-size: 13.5px; text-align: center; }

@keyframes audience-flow { to { stroke-dashoffset: -26; } }
@keyframes audience-spin { to { transform: rotate(360deg); } }
@keyframes audience-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes audience-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ظهور متتابع للبطاقات */
.motion .audience__stage .audience__node,
.motion .audience__stage .audience__hub { opacity: 0; scale: .9; transition: opacity .6s var(--ease), scale .6s var(--ease); }
.motion .audience__stage.is-in .audience__node,
.motion .audience__stage.is-in .audience__hub { opacity: 1; scale: 1; }
.motion .audience__stage.is-in .audience__node--1 { transition-delay: .12s; }
.motion .audience__stage.is-in .audience__node--2 { transition-delay: .22s; }
.motion .audience__stage.is-in .audience__node--3 { transition-delay: .32s; }
.motion .audience__stage.is-in .audience__node--4 { transition-delay: .42s; }
.motion .audience__stage.is-in .audience__node--5 { transition-delay: .52s; }

@media (max-width: 900px) {
  .audience__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto; max-width: 480px; }
  .audience__lines { display: none; }
  .audience__hub { position: relative; top: auto; left: auto; grid-column: 1 / -1; justify-self: center; width: 136px; height: 136px; margin: 12px 0 14px; translate: none; }
  .audience__ring { inset: -9px; }
  .audience__core img { width: 44px; height: 44px; margin-bottom: 2px; padding: 5px; }
  .audience__core strong { font-size: 13.5px; }
  .audience__core small { font-size: 9.5px; }
  .audience__node { position: static; width: auto; padding: 12px 10px; border-radius: 14px; translate: none; animation: none; }
  .audience__node--5 { grid-column: 1 / -1; }
  .audience__icon { width: 32px; height: 32px; margin-bottom: 4px; animation: audience-float 4.5s ease-in-out infinite; }
  .audience__node--2 .audience__icon { animation-delay: -.9s; }
  .audience__node--3 .audience__icon { animation-delay: -1.8s; }
  .audience__node--4 .audience__icon { animation-delay: -2.7s; }
  .audience__node--5 .audience__icon { animation-delay: -3.6s; }
  .audience__icon svg { width: 17px; height: 17px; }
  .audience__node h3 { font-size: 13px; }
  .audience__node p { font-size: 11.5px; line-height: 1.55; }
  .audience__note { margin-top: 16px; font-size: 12.5px; }
}


/* ---------- 08. محتوى البرنامج وكروت الدورات ---------- */
/* كل الدورات معروضة كجزء من البرنامج، بلا أسعار ولا أزرار شراء منفردة */
.program__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 860px; margin: 0 auto clamp(22px, 3vw, 32px); padding: 0; list-style: none; }
.program__facts li { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.program__facts b { color: var(--blue); font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.1; }
.program__facts span { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.program__group + .program__group { margin-top: 22px; }
.program__group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; font-size: 18px; }
.program__group-title::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.program__group-title span { color: var(--muted-2); font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.program__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.program__item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid #DCE8F0; border-radius: 14px; background: #fff; transition: border-color .22s ease, box-shadow .22s ease; }
.program__item:hover { border-color: #A9D6EA; box-shadow: var(--shadow-sm); }
.program__thumb { flex: none; width: 92px; height: 62px; border-radius: 9px; object-fit: cover; object-position: top; background: var(--sky); }
.program__copy { display: grid; min-width: 0; line-height: 1.45; }
.program__copy small { color: var(--blue); font-family: var(--font-head); font-size: 11.5px; font-weight: 600; }
.program__copy strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.program__copy span { overflow: hidden; color: var(--muted-2); white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; }
.program__item--free { border-color: #CDE7F4; background: linear-gradient(100deg, #fff, var(--sky)); }
.program__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 26px; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; box-shadow: var(--shadow-md); }
.program__cta-copy { display: grid; gap: 2px; }
.program__cta-copy strong { font-family: var(--font-head); font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; }
.program__cta-copy strong b { color: var(--gold-soft); font-size: 1.3em; }
.program__cta-copy span { color: var(--on-navy); font-size: 13.5px; }
.program__cta-copy s { color: #9FB4C3; }
.program__alt { margin-top: 14px; color: var(--muted-2); font-size: 14px; text-align: center; }
.program__alt a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 105, 158, .3); text-underline-offset: 4px; }
.program__alt a:hover { text-decoration-color: currentColor; }

/* كارت الدورة: الكارت كله قابل للنقر عبر رابط الزر */
.course {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #D9E6EE;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}
.course:hover { transform: translateY(-4px); border-color: #78C1E3; box-shadow: var(--shadow-md); }
.course:hover .course__cover { filter: saturate(1.08); }
.course__cover { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sky); transition: filter .28s ease; }
.course__body { display: flex; flex: 1; flex-direction: column; padding: 14px 16px 12px; }
.course__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin-bottom: 6px; font-size: 12.5px; }
.course__meta b { color: var(--blue); font-family: var(--font-head); font-weight: 600; }
.course__meta span { color: var(--muted-2); }
.course h3 { margin-bottom: 2px; font-size: 18px; line-height: 1.5; }
.course__lecturer { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 3px 0 10px; padding: 3px 3px 3px 13px; border-radius: 999px; background: var(--sky); }
.course__avatar { width: 34px; height: 34px; padding: 2px; font-size: 9px; }
.course__avatar img { border-width: 1px; }
.course__lecturer span:last-child { color: var(--blue-dark); font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.3; }
.course__desc { margin-bottom: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.course__topics { display: flex; flex-wrap: wrap; gap: 5px; margin: auto 0 0; padding: 0; list-style: none; }
.course__topics li { padding: 2px 9px; border-radius: 7px; background: var(--mist); color: #4E6476; font-size: 12px; line-height: 1.7; }

/* شريط السعر المميز أسفل الكارت */
.course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid #E8D9B8;
  background: linear-gradient(100deg, #FBF6EC, #F7EEDB);
}
/* مدة الدورة وعدد دروسها */
.course__stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.course__stats li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 10px; border: 1px solid #E5D3AC; border-radius: 9px; background: #fff; color: var(--navy); white-space: nowrap; font-family: var(--font-head); font-size: 13px; font-weight: 600; line-height: 1.4; }
.course__stats .icon { width: 15px; height: 15px; color: var(--gold-deep); stroke-width: 1.9; }
.course__link { flex: none; margin-inline-start: auto; white-space: nowrap; }
.course--free .course__foot { border-top-color: #BFE3F5; background: linear-gradient(100deg, var(--sky), #DDF1FB); }
.course--free .course__stats li { border-color: #BFE3F5; }
.course--free .course__stats .icon { color: var(--blue); }
.course__meta .course__free { padding: 1px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-family: var(--font-head); font-size: 12px; font-weight: 600; }
.course__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.course__link:hover { transform: none; }

@media (max-width: 1100px) {
  .program__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .program__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .program__facts b { font-size: 24px; }
  .program__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .program__thumb { width: 76px; height: 52px; }
  .program__cta { justify-content: center; padding: 16px; text-align: center; }
  /* كارت الدورة في الموبايل: مختصر بلا وصف */
  .course__desc { display: none; }
  .course__cover { aspect-ratio: 16 / 9; object-position: top; }
  .course__body { padding: 10px 12px 10px; align-items: center; text-align: center; }
  .course__meta { justify-content: center; }
  .course h3 { font-size: 15.5px; }
  .course__lecturer { margin: 2px auto 8px; }
  .course__avatar { width: 30px; height: 30px; }
  .course__lecturer span:last-child { font-size: 13px; }
  .course__topics { justify-content: center; gap: 4px; }
  .course__topics li { padding: 1px 7px; font-size: 11px; }
  .course__foot { gap: 6px; padding: 8px 10px; }
  .course__stats { gap: 4px; }
  .course__stats li { gap: 4px; padding: 3px 7px; font-size: 11.5px; }
  .course__stats .icon { width: 13px; height: 13px; }
}


/* ---------- 09. تجربة التعلّم ---------- */
.learning__road { position: relative; display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.learning__road::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  right: 50%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(111, 203, 242, .15), var(--cyan) 22%, var(--gold) 78%, rgba(217, 186, 124, .15));
  transform: translateX(50%);
}
.learning__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; min-height: 130px; }
.learning__node { grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 56px; height: 56px; border: 5px solid var(--navy); border-radius: 50%; outline: 2px solid var(--cyan); background: #087DB6; color: #fff; font-family: var(--font-head); font-size: 14px; font-weight: 700; transition: outline-color .25s ease; }
.learning__card { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 13px 28px rgba(0, 0, 0, .16); color: var(--navy); transition: transform .28s var(--ease), box-shadow .28s ease; }
.learning__step:nth-child(even) .learning__card { grid-column: 3; }
.learning__step:hover .learning__card { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0, 0, 0, .26); }
.learning__step:hover .learning__node { outline-color: var(--gold); }
.learning__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #C9E6F2; border-radius: 15px; background: linear-gradient(145deg, #F0FAFF, #E4F4FB); color: var(--blue); }
.learning__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.learning__card h3 { margin-bottom: 5px; font-size: 18px; line-height: 1.5; }
.learning__card p { color: var(--muted-2); font-size: 14px; line-height: 1.8; }

@media (max-width: 760px) {
  .learning__road { gap: 10px; max-width: 420px; margin-inline: auto; }
  .learning__road::before { top: 20px; bottom: 80px; }
  .learning__step { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; }
  .learning__node { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-width: 4px; font-size: 12px; margin-bottom: -14px; z-index: 1; }
  .learning__card, .learning__step:nth-child(even) .learning__card { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; width: 100%; padding: 22px 16px 15px; border-radius: 15px; text-align: center; }
  .learning__icon { display: none; }
  .learning__card h3 { font-size: 15.5px; margin-bottom: 2px; }
  .learning__card p { font-size: 13px; line-height: 1.7; }
}


/* ---------- 10. الفريق العلمي ---------- */
.member {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 16px 20px 22px;
  border: 1px solid #D5E5EE;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(10, 33, 54, .055);
  text-align: center;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s var(--ease);
}
.member::before { content: ""; position: absolute; inset: 0 0 auto; height: 72px; background: linear-gradient(115deg, var(--navy), var(--blue)); }
.member:hover { transform: translateY(-4px); border-color: #8DCAE5; box-shadow: 0 14px 34px rgba(10, 33, 54, .09); }
.member__photo { position: relative; width: 108px; height: 108px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(10, 33, 54, .2); font-size: 24px; }
.member h3 { color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.45; }
.member h3::after { content: ""; display: block; width: 36px; height: 3px; margin: 7px auto 9px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--blue-bright)); }
.member p { color: var(--muted-2); font-size: 13.5px; line-height: 1.75; }


/* ---------- 11. خطة الدراسة ---------- */
.study__track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 clamp(26px, 3vw, 40px); padding: 0; list-style: none; }
/* الخط الواصل بين الخطوات */
.study__track::before { content: ""; position: absolute; top: 58px; inset-inline: 16%; height: 2px; background: linear-gradient(90deg, var(--blue-bright), var(--gold)); }
.study__step { position: relative; display: grid; justify-items: center; gap: 2px; padding: 24px 16px 20px; border: 1px solid #E0E9EE; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); text-align: center; transition: transform .28s var(--ease), border-color .28s ease; }
.study__step:hover { transform: translateY(-4px); border-color: #A9D6EA; }
.study__icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 8px; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(145deg, var(--navy), var(--blue)); box-shadow: 0 8px 18px rgba(0, 87, 128, .22), 0 0 0 2px var(--gold); color: var(--gold-soft); }
.study__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.study__step small { color: var(--blue); font-size: 12px; font-weight: 600; }
.study__step strong { font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.study__step > span:last-child { color: #52697B; font-size: 13.5px; line-height: 1.6; }

.study__certs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(26px, 4vw, 56px); padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--mist); }
.study__certs-copy h3 { margin-bottom: 16px; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.48; }
.study__certs-copy ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.study__certs-copy li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; transition: transform .25s var(--ease), box-shadow .25s ease; }
.study__certs-copy li:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.study__mini { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #FBF6EC; color: #A8823C; }
.study__mini svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.study__certs-copy li div { display: grid; }
.study__certs-copy strong { font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.study__certs-copy li span:not(.study__mini) { color: #52697B; font-size: 13.5px; }

/* إطار الشهادة: حد ذهبي على خلفية كحلية */
.study__certificate { margin: 0; text-align: center; }
.study__frame { position: relative; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: var(--shadow-md); transition: transform .3s var(--ease), box-shadow .3s ease; }
.study__frame:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(10, 33, 54, .18); }
.study__frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold); border-radius: 9px; pointer-events: none; }
.study__frame img { position: relative; width: 100%; border-radius: 4px; background: #fff; }
.study__certificate figcaption { margin-top: 9px; color: var(--muted-2); font-size: 12.5px; }

@media (max-width: 760px) {
  .study__track { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 420px; margin-inline: auto; }
  .study__track::before { display: none; }
  .study__step { padding: 14px; }
  .study__icon { width: 54px; height: 54px; margin-bottom: 4px; }
  .study__icon svg { width: 23px; height: 23px; }
  .study__step strong { font-size: 15.5px; }
  .study__step > span:last-child { font-size: 13px; }
  .study__certs { grid-template-columns: minmax(0, 1fr); padding: 18px 14px; border-radius: 18px; text-align: center; }
  .study__certs-copy li { text-align: start; }
  .study__frame { padding: 10px; }
  .study__frame::before { inset: 4px; }
}


/* ---------- 12. منحة العمرة ---------- */
.journey { padding-top: 0; }
.journey__card { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); align-items: center; gap: clamp(26px, 4vw, 60px); overflow: hidden; padding: clamp(26px, 4vw, 52px); border: 1px solid rgba(217, 186, 124, .4); border-radius: 26px; background: radial-gradient(circle at 12% 20%, #17567B, transparent 55%), linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 18px 42px rgba(10, 33, 54, .18); color: #fff; }
.journey__content h2 { margin-bottom: 10px; font-size: clamp(25px, 3vw, 38px); line-height: 1.4; }
.journey__lead { margin-bottom: 18px; color: #C8DCE8; font-size: 15.5px; }
.journey__subtitle { margin-bottom: 9px; color: var(--gold-soft); font-size: 15px; }
.journey__conditions { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.journey__conditions li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(111, 203, 242, .18); border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 14.5px; line-height: 1.55; transition: border-color .22s ease, background-color .22s ease; }
.journey__conditions li:hover { border-color: rgba(217, 186, 124, .55); background: rgba(255, 255, 255, .09); }
.journey__conditions span { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--navy); font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.journey__notice { margin-top: 12px; color: #A9C2D2; font-size: 12.5px; line-height: 1.7; }

/* الصورة قابلة للنقر، في إطار على شكل قوس */
.journey__visual { position: relative; display: block; justify-self: center; width: min(100%, 300px); transition: transform .3s var(--ease); }
.journey__visual:hover { transform: translateY(-5px); }
.journey__arch { display: block; padding: 16px 14px 12px; border: 2px solid var(--gold); border-radius: 160px 160px 18px 18px; background: linear-gradient(180deg, #fff, #E9F5FC); box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 0 6px rgba(217, 186, 124, .14); }
.journey__arch img { width: 100%; }
.journey__badge { position: absolute; bottom: -8px; inset-inline-start: -12px; display: grid; justify-items: center; padding: 8px 16px; border-radius: 14px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow: 0 10px 22px rgba(0, 0, 0, .28); color: var(--navy); line-height: 1.25; }
.journey__badge b { font-family: var(--font-head); font-size: 25px; font-weight: 700; }
.journey__badge small { font-size: 11.5px; font-weight: 600; }

@media (max-width: 820px) {
  .journey__card { grid-template-columns: minmax(0, 1fr); padding: 26px 16px; border-radius: 20px; text-align: center; }
  .journey__visual { grid-row: 1; width: min(100%, 190px); }
  .journey__content .eyebrow { margin-inline: auto; }
  .journey__content h2 { font-size: clamp(22px, 6.4vw, 28px); }
  .journey__lead { font-size: 14px; }
  .journey__conditions li { font-size: 13px; text-align: start; }
  .journey__cta { width: 100%; }
  .journey__badge { padding: 5px 11px; }
  .journey__badge b { font-size: 19px; }
  .journey__badge small { font-size: 10px; }
}


/* ---------- 13. الاشتراك ---------- */
.prices-pending [data-price] { visibility: hidden; } /* حتى تُحدَّد دولة الزائر */

/* خلفية حية: إضاءة هادئة وحلقتان تدوران ببطء */
.pricing { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 8%, rgba(0, 148, 218, .28), transparent 42%), radial-gradient(circle at 10% 92%, rgba(217, 186, 124, .16), transparent 40%), var(--navy); }
.pricing::before, .pricing::after { content: ""; position: absolute; border: 1.5px dashed rgba(111, 203, 242, .16); border-radius: 50%; pointer-events: none; animation: pricing-spin 80s linear infinite; }
.pricing::before { top: -180px; right: -160px; width: 460px; height: 460px; }
.pricing::after { bottom: -200px; left: -170px; width: 520px; height: 520px; border-color: rgba(217, 186, 124, .16); animation-direction: reverse; }
.pricing__shell { position: relative; z-index: 1; max-width: 980px; }

/* جدول المقارنة */
.compare { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 22px 48px rgba(0, 0, 0, .3); color: var(--navy); }
.compare table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 12px 18px; border-bottom: 1px solid #E8EFF4; font-size: 14.5px; font-weight: 500; line-height: 1.5; text-align: center; vertical-align: middle; }
.compare tfoot td { border-bottom: 0; padding-block: 16px 18px; }
.compare__main { background: #FDF9F0; box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
.compare thead .compare__main { box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold), inset 0 4px 0 var(--gold); }
.compare tfoot .compare__main { box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold), inset 0 -2px 0 var(--gold); }

/* عناوين الصفوف على اليمين */
.compare tbody th { background: var(--mist); text-align: right; }
.compare tbody tr td, .compare tbody tr th { transition: background-color .2s ease; }
.compare tbody tr:hover td:not(.compare__main) { background: #F7FBFD; }
.compare tbody tr:hover td.compare__main { background: #FBF3E2; }
.compare tbody tr:hover th { background: var(--sky); }
.compare tbody th > span { display: flex; align-items: center; gap: 10px; color: var(--navy); font-family: var(--font-head); font-size: 14px; font-weight: 600; line-height: 1.4; }
.compare__ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--blue)); color: var(--gold-soft); }
.compare__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.compare thead th { padding-block: 20px 14px; vertical-align: top; }
.compare thead th > * { display: block; }
.compare .compare__corner { background: var(--mist); vertical-align: middle; text-align: right; }
.compare__corner b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.compare__corner small { color: var(--muted-2); font-size: 13px; font-weight: 400; line-height: 1.6; }
.compare__badge { width: fit-content; margin: 0 auto 8px; padding: 2px 11px; border-radius: 999px; background: #EEF3F7; color: var(--muted-2); font-size: 12px; font-weight: 600; }
.compare__main .compare__badge { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); }
.compare thead strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.compare thead .compare__price { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 2px; }
.compare__price b { font-family: var(--font-head); font-size: clamp(30px, 3.6vw, 40px); font-weight: 700; line-height: 1.25; color: var(--navy); }
.compare__main .compare__price b { font-size: clamp(42px, 5.2vw, 58px); background: linear-gradient(115deg, var(--navy), var(--blue) 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.compare__price s { color: #8598A7; font-size: 15px; }
.compare thead small { color: var(--muted-2); font-size: 13px; font-weight: 400; }

/* الأرقام بألوان الهوية */
.compare__total { color: var(--blue); font-family: var(--font-head); font-size: 20px; font-weight: 700; }
.compare__other { color: var(--gold-deep); font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.compare__num { color: var(--blue); font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.compare__save { display: inline-block; padding: 2px 12px; border-radius: 8px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); font-family: var(--font-head); font-weight: 700; animation: compare-pulse 2.8s ease-in-out infinite; }
.compare__yes { width: 24px; height: 24px; vertical-align: middle; fill: var(--sky); stroke: var(--blue); }
.compare__no { color: #A9BBCB; }
@keyframes pricing-spin { to { transform: rotate(360deg); } }
@keyframes compare-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 186, 124, .55); } 50% { box-shadow: 0 0 0 7px rgba(217, 186, 124, 0); } }

/* الأزرار: لمعة خفيفة على زر البرنامج */
.compare .btn { min-height: 50px; padding-inline: 12px; }
.compare__main .btn { position: relative; overflow: hidden; }
.compare__main .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); animation: compare-shine 3.6s ease-in-out infinite; }
@keyframes compare-shine { 0%, 55% { left: -45%; } 100% { left: 120%; } }
.compare__hint { display: block; margin-top: 7px; color: var(--muted-2); font-size: 11.5px; font-weight: 400; }

/* ماذا يحدث بعد الاختيار */
.pricing__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.pricing__steps li { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid rgba(111, 203, 242, .2); border-radius: 14px; background: rgba(255, 255, 255, .05); transition: border-color .22s ease, background-color .22s ease; }
.pricing__steps li:hover { border-color: rgba(217, 186, 124, .5); background: rgba(255, 255, 255, .08); }
.pricing__steps b { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.pricing__steps strong { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.pricing__steps span { display: block; color: var(--on-navy); font-size: 13px; line-height: 1.6; }

.pricing__note { margin-top: 14px; color: #AFC4D3; font-size: 13px; text-align: center; }

/* كروت المساعدة */
.pricing__help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.help-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(111, 203, 242, .28); border-radius: 15px; background: linear-gradient(120deg, rgba(0, 105, 158, .32), rgba(255, 255, 255, .04)); transition: transform .22s var(--ease), border-color .22s ease; }
.help-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.help-card__icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #229ED9; }
.help-card__icon svg { width: 22px; height: 22px; }
.help-card--student .help-card__icon { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy); }
.help-card--student .help-card__icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.help-card__copy { flex: 1; min-width: 0; }
.help-card__copy strong { display: block; color: #fff; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; }
.help-card__copy small { display: block; color: var(--on-navy); font-size: 12.5px; line-height: 1.5; }
.help-card__go { flex: none; padding: 6px 12px; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.help-card:hover .help-card__go { background: var(--gold); color: var(--navy); }

/* الموبايل: عمودان، وعنوان كل صف فوق قيمتيه في المنتصف */
@media (max-width: 760px) {
  .compare { border-radius: 16px; }
  .compare table, .compare thead, .compare tbody, .compare tfoot { display: block; }
  .compare caption { display: none; }
  .compare tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare .compare__corner { display: none; }
  .compare th, .compare td { padding: 9px 8px; font-size: 13px; }
  .compare tbody th { grid-column: 1 / -1; padding: 6px 8px; border-bottom: 0; }
  .compare tbody th > span { justify-content: center; gap: 7px; font-size: 12.5px; }
  .compare__ico { width: 24px; height: 24px; border-radius: 7px; }
  .compare__ico svg { width: 14px; height: 14px; }
  .compare tbody td { display: flex; align-items: center; justify-content: center; min-height: 42px; padding-block: 6px; }
  .compare thead th { padding: 14px 6px 12px; }
  .compare__badge { padding: 1px 8px; font-size: 10.5px; }
  .compare thead strong { font-size: 15px; }
  .compare thead .compare__price { gap: 5px; }
  .compare__price b { font-size: 25px; }
  .compare__main .compare__price b { font-size: 36px; }
  .compare__price s { font-size: 12.5px; }
  .compare thead small { font-size: 11.5px; }
  .compare__main, .compare thead .compare__main, .compare tfoot .compare__main { box-shadow: none; }
  .compare__total { font-size: 18px; }
  .compare__other, .compare__num { font-size: 15px; }
  .compare tfoot td { padding: 11px 7px 12px; }
  .compare .btn { min-height: 46px; padding-inline: 6px; font-size: 13.5px; }
  .compare__hint { font-size: 10.5px; line-height: 1.4; }
  .pricing__steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pricing__steps li { padding: 10px 12px; }
  .pricing__note { font-size: 12.5px; }
  .pricing__help { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pricing::before, .pricing::after { display: none; }
}


/* ---------- 14. الأسئلة الشائعة ---------- */
.faq__list { display: grid; gap: 12px; }
.faq__item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; }
.faq__item:hover { border-color: #A9D6EA; box-shadow: var(--shadow-sm); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 16px 20px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sky); color: var(--blue); font-size: 22px; line-height: 1; }
.faq__item[open] summary::after { content: "−"; background: var(--blue); color: #fff; }
.faq__item p { padding: 0 20px 18px; color: var(--ink); animation: fade-up .28s var(--ease) both; }

@media (max-width: 760px) {
  .faq__list { gap: 9px; }
  .faq__item summary { padding: 12px 14px; font-size: 14.5px; gap: 12px; }
  .faq__item summary::after { width: 28px; height: 28px; font-size: 19px; }
  .faq__item p { padding: 0 14px 14px; font-size: 14px; }
}


/* ---------- 15. الخاتمة ---------- */
.closing { padding: clamp(34px, 4vw, 52px) var(--gutter); background: var(--navy); color: #fff; text-align: center; }
.closing__inner { max-width: 720px; margin-inline: auto; }
.closing h2 { margin-bottom: 8px; font-size: clamp(24px, 3vw, 36px); line-height: 1.42; }
.closing p { margin-bottom: 18px; color: var(--on-navy); font-size: 15.5px; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 560px) {
  .closing__actions { flex-direction: column; }
  .closing p { font-size: 14px; }
}


/* ---------- 16. الفوتر ---------- */
.footer { padding: 12px var(--gutter) 10px; border-top: 1px solid rgba(111, 203, 242, .18); background: var(--navy); color: #fff; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1240px; margin-inline: auto; }
.footer__brand { display: flex; align-items: center; gap: 8px; }
.footer__brand a { display: block; width: 72px; height: 42px; padding: 4px; border-radius: 8px; background: #fff; }
.footer__brand img { width: 100%; height: 100%; object-fit: contain; }
.footer__divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .25); }
.footer__socials { display: flex; gap: 7px; }
.footer__social { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--blue); transition: transform .22s ease, background-color .22s ease; }
.footer__social:hover { background: var(--sky); transform: translateY(-2px); }
/* روابط الصفحتين: البرنامج الكامل والدورات المنفردة */
.footer__pages { display: flex; gap: 8px; }
.footer__page { display: grid; padding: 6px 14px; border: 1px solid rgba(217, 186, 124, .45); border-radius: 11px; background: rgba(255, 255, 255, .04); line-height: 1.35; transition: background-color .22s ease, border-color .22s ease; }
.footer__page b { color: var(--gold-soft); font-family: var(--font-head); font-size: 14px; font-weight: 600; }
.footer__page small { color: var(--on-navy); font-size: 11.5px; }
.footer__page:hover { border-color: var(--gold); background: rgba(217, 186, 124, .12); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; max-width: 1240px; margin: 8px auto 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .09); color: #9FB8CA; font-size: 12px; }
.footer__links { display: flex; gap: 12px; }
.footer__links a { color: #D5E5F0; }
.footer__links a:hover { color: var(--cyan); }

@media (max-width: 560px) {
  .footer__inner, .footer__bottom { flex-direction: column; justify-content: center; }
  .footer { padding-bottom: 14px; }
}


/* ---------- 17. الأدوات العائمة ---------- */
.scroll-line { position: fixed; z-index: 130; inset: 0 0 auto; height: 3px; pointer-events: none; }
.scroll-line span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--blue-bright), var(--cyan)); transition: width .14s linear; }

/* أزرار التواصل العائمة: واتساب وتيليجرام بهوية الموقع */
.contact-float { position: fixed; z-index: 120; right: clamp(12px, 2.2vw, 26px); bottom: 16px; display: grid; gap: 8px; transition: bottom .25s ease; }
.contact-float__link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--navy); box-shadow: 0 6px 16px rgba(10, 33, 54, .28); color: var(--gold-soft); transition: transform .22s ease, background-color .22s ease, color .22s ease; }
.contact-float__link .icon-solid { width: 19px; height: 19px; }
.contact-float__link:hover, .contact-float__link:focus-visible { transform: translateY(-2px); background: var(--blue); color: #fff; }
/* اسم الوسيلة يظهر بجانب الزر عند المرور */
.contact-float__link::before { content: attr(data-label); position: absolute; right: calc(100% + 8px); top: 50%; padding: 4px 10px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .2s ease, transform .2s ease; }
.contact-float__link:hover::before, .contact-float__link:focus-visible::before { opacity: 1; transform: translate(0, -50%); }

.to-top { --scroll-pct: 0%; position: fixed; z-index: 120; left: clamp(12px, 2.2vw, 26px); bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 3px; border: 0; border-radius: 50%; background: conic-gradient(var(--blue-bright) var(--scroll-pct), rgba(10, 33, 54, .18) 0); box-shadow: 0 6px 17px rgba(10, 33, 54, .15); color: #fff; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, bottom .25s ease; }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top__center { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--navy); }
.to-top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* شريط الاشتراك الثابت في الموبايل */
.buy-bar { display: none; }
@media (max-width: 760px) {
  .buy-bar { position: fixed; z-index: 110; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 2px solid var(--gold); background: var(--navy); box-shadow: 0 -8px 22px rgba(10, 33, 54, .22); color: #fff; transform: translateY(110%); transition: transform .3s var(--ease); }
  .buy-bar.is-visible { transform: none; }
  .buy-bar__copy { display: grid; line-height: 1.3; }
  .buy-bar__copy small { color: var(--on-navy); font-size: 11.5px; }
  .buy-bar__copy b { color: var(--gold-soft); font-family: var(--font-head); font-size: 19px; font-weight: 700; }
  .buy-bar__copy s { margin-inline-start: 5px; color: #91A9B9; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; }
  .buy-bar__btn { flex: none; padding: 9px 18px; border-radius: 10px; background: var(--blue); font-size: 14px; font-weight: 600; }
  .has-buy-bar .contact-float, .has-buy-bar .to-top { bottom: 76px; }
}

.toast { position: fixed; z-index: 180; bottom: 95px; left: 50%; max-width: calc(100vw - 32px); padding: 11px 18px; border: 1px solid var(--cyan); border-radius: 12px; background: var(--navy); box-shadow: 0 10px 28px rgba(10, 33, 54, .18); color: #fff; font-size: 14px; text-align: center; transform: translateX(-50%); }


/* ---------- 18. صفحة الدورات المنفردة (courses.html) ---------- */
/* رأس الصفحة: العنوان والسعر الموحد، وبجانبه صندوق المقارنة قبل الاختيار */
.page-hero { padding-inline: var(--gutter); background: linear-gradient(135deg, #0B2940, var(--navy) 55%, #0E3550); color: #fff; }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(22px, 4vw, 56px); max-width: 1240px; margin-inline: auto; padding-block: clamp(30px, 4vw, 52px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--on-navy); font-size: 13px; }
.crumbs a { color: var(--cyan); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: #fff; font-weight: 600; }
.page-hero h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 46px); line-height: 1.35; }
.page-hero__copy > p { max-width: 560px; margin-bottom: 18px; color: var(--on-navy); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.85; }
.unit-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border: 1px solid rgba(217, 186, 124, .5); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.unit-price__label { color: var(--on-navy); font-size: 13.5px; font-weight: 600; }
.unit-price__value { display: inline-flex; align-items: baseline; gap: 8px; }
.unit-price__value b { color: var(--gold-soft); font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; }
.unit-price__value s { color: #9FB4C3; font-size: 16px; }
.unit-price__off { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 700; }

.choice { padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgba(0, 0, 0, .28); color: var(--navy); }
.choice h2 { margin-bottom: 10px; font-size: 17px; }
.choice__row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); }
.choice__row + .choice__row { margin-top: 8px; }
.choice__row strong { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 600; }
.choice__row span { display: block; color: var(--muted-2); font-size: 13px; line-height: 1.7; }
.choice__row b { color: var(--blue); font-family: var(--font-head); }
.choice__row s { color: #8FA6B6; }
.choice__mark { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--sky); color: var(--blue); font-family: var(--font-head); font-weight: 700; }
.choice__row--best { border-color: #E5D3AC; background: #FBF6EC; }
.choice__row--best .choice__mark { background: var(--gold); color: var(--navy); }
.choice .btn { margin-top: 12px; }

/* شبكة الكروت */
.catalog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.catalog__head h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.45; }
.catalog__notice { display: flex; align-items: center; gap: 8px; max-width: 470px; padding: 9px 13px; border: 1px solid #E5D3AC; border-radius: 12px; background: #FBF6EC; color: var(--gold-deep); font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.catalog__notice .icon { width: 18px; height: 18px; }
.catalog__notice--free { border-color: #BFE3F5; background: var(--sky); color: var(--blue-dark); }
.catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.catalog__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.catalog__head:has(+ .catalog__grid--two) { max-width: 860px; margin-inline: auto; }
.catalog .course { scroll-margin-top: 90px; }
.catalog .course:target { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 186, 124, .45), var(--shadow-md); }

/* البرنامج الكامل أوفر */
.upsell__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(22px, 4vw, 56px); }
.upsell__copy h2 { margin-bottom: 10px; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.45; }
.upsell__copy p { color: var(--on-navy); }
.upsell__math { padding: 18px; border: 1px solid rgba(111, 203, 242, .25); border-radius: 20px; background: rgba(255, 255, 255, .05); }
.upsell__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed rgba(255, 255, 255, .15); color: var(--on-navy); }
.upsell__row s { color: #9FB4C3; font-family: var(--font-head); font-size: 20px; }
.upsell__row--main { color: #fff; font-weight: 600; }
.upsell__row--main b { color: var(--gold-soft); font-family: var(--font-head); font-size: 30px; }
.upsell__save { margin: 10px 0 12px; color: var(--cyan); font-family: var(--font-head); font-weight: 600; text-align: center; }

/* المساعدة على خلفية فاتحة */
.help .help-card { border-color: var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.help .help-card__icon { background: var(--sky); }
.help .help-card:last-child .help-card__icon { color: #1FA855; }
.help .help-card__copy strong { color: var(--navy); }
.help .help-card__copy small { color: var(--muted-2); }
.help .help-card__go { background: var(--sky); color: var(--blue); }

@media (max-width: 1100px) {
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .page-hero__inner, .upsell__inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero__copy { text-align: center; }
  .page-hero__copy > p { margin-inline: auto; }
  .crumbs { justify-content: center; }
}
@media (max-width: 760px) {
  .footer__pages { width: 100%; justify-content: center; }
  .catalog__head { justify-content: center; text-align: center; }
  .catalog__head .eyebrow { justify-content: center; }
  .catalog__grid, .catalog__grid--two { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; gap: 14px; }
  .catalog .course__desc { display: block; font-size: 13.5px; }
  .unit-price { justify-content: center; }
  .unit-price__value b { font-size: 30px; }
}


/* ---------- 19. الحركة ---------- */
/* الصنف motion يضيفه main.js؛ بدون JavaScript يظهر كل شيء عاديًا. */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}