/* ==========================================================================
   Components — أكاديمية النبراس
   مبدأ عام: أسطح مسطّحة، حدود شعرية، ظل شبه معدوم، وصور PNG بلا إطار.
   ========================================================================== */

/* ==========================================================================
   1. الأزرار — مسطّحة، هادئة، بلا تدرّج ولا ظل
   ========================================================================== */
.btn{
  --btn-bg:var(--purple-600);
  --btn-fg:#fff;
  --btn-bg-hover:var(--purple-700);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.74rem 1.5rem;
  min-height:46px;
  font-family:var(--font);
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn:hover{background:var(--btn-bg-hover)}
.btn:active{opacity:.82}
.btn__icon{flex:none;width:1.05em;height:1.05em}

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--purple-900);
  --btn-bg-hover:var(--lav-100);
  border-color:var(--lav-300);
}
.btn--ghost:hover{border-color:var(--purple-300)}

.btn--quiet{
  --btn-bg:var(--lav-100);
  --btn-fg:var(--purple-900);
  --btn-bg-hover:var(--lav-200);
}

.btn--on-deep{
  --btn-bg:#fff;
  --btn-fg:var(--purple-900);
  --btn-bg-hover:#F3EBFA;
}
.btn--ghost-on-deep{
  --btn-bg:transparent;
  --btn-fg:#fff;
  --btn-bg-hover:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.38);
}
.btn--ghost-on-deep:hover{border-color:rgba(255,255,255,.6)}

.btn--sm{padding:.5rem 1.05rem;min-height:38px;font-size:.92rem}
.btn--lg{padding:.95rem 2rem;min-height:54px;font-size:1.06rem}
.btn--block{width:100%}

/* رابط نصي بسهم — البديل الهادئ للزر الثانوي */
.link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:700;
  color:var(--purple-600);
  transition:color var(--t-fast) var(--ease);
}
.link svg{width:.95em;height:.95em;flex:none;transition:transform var(--t-base) var(--ease-out)}
.link:hover{color:var(--purple-900)}
.link:hover svg{transform:translateX(-3px)}
.section--deep .link{color:var(--purple-300)}
.section--deep .link:hover{color:#fff}

/* ==========================================================================
   2. الشارات
   ========================================================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .85rem;
  font-size:.82rem;
  font-weight:700;
  line-height:1.35;
  border-radius:var(--r-pill);
  background:var(--lav-100);
  color:var(--purple-700);
  border:1px solid var(--lav-300);
}
.badge--solid{background:var(--purple-600);color:#fff;border-color:transparent}
.badge--light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.26)}
.badge__dot{width:.42rem;height:.42rem;border-radius:50%;background:currentColor;flex:none}

/* ==========================================================================
   3. الترويسة
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:rgba(251,249,254,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-block-end:1px solid transparent;
  transition:background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.site-header.is-scrolled{
  background:rgba(251,249,254,.92);
  border-block-end-color:rgba(217,199,236,.7);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--header-h);
}

.brand{display:inline-flex;align-items:center;gap:.6rem;flex:none}
.brand__logo{height:clamp(34px,3.4vw,42px);width:auto}
.brand__text{display:none;flex-direction:column;line-height:1.25}
.brand__name{font-weight:700;font-size:.98rem;color:var(--purple-900);letter-spacing:-.015em}
.brand__tag{font-size:.7rem;color:var(--ink-soft);font-weight:400}

.nav{display:none}
.nav__list{display:flex;align-items:center;gap:.1rem}
.nav__link{
  display:inline-flex;
  align-items:center;
  padding:.45rem .8rem;
  font-size:.95rem;
  font-weight:400;
  color:var(--ink-body);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.nav__link:hover{color:var(--purple-900);background:rgba(242,234,250,.9)}
.nav__item.current-menu-item > .nav__link,
.nav__item.current_page_item > .nav__link{color:var(--purple-700);font-weight:700}

.site-header__actions{display:flex;align-items:center;gap:.5rem;flex:none}
.site-header__cta{display:none}

/* زر القائمة */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;flex:none;
  border-radius:var(--r-sm);
  border:1px solid var(--lav-300);
  background:rgba(255,255,255,.7);
  transition:background-color var(--t-fast) var(--ease);
}
.nav-toggle:hover{background:var(--lav-100)}
.nav-toggle__box{display:block;width:18px;height:12px;position:relative}
.nav-toggle__bar{
  position:absolute;inset-inline:0;height:1.8px;border-radius:2px;
  background:var(--purple-900);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast) var(--ease);
}
.nav-toggle__bar:nth-child(1){top:0}
.nav-toggle__bar:nth-child(2){top:5px}
.nav-toggle__bar:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ==========================================================================
   4. درج الجوال
   ========================================================================== */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;pointer-events:none}
.drawer.is-open{visibility:visible;pointer-events:auto}
.drawer__backdrop{
  position:absolute;inset:0;
  background:rgba(58,28,96,.32);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t-base) var(--ease);
}
.drawer.is-open .drawer__backdrop{opacity:1}
.drawer__panel{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:min(88vw,360px);
  display:flex;flex-direction:column;
  background:var(--grad-soft);
  /* مخفي بدفعه لليسار، فيدخل من اليسار إلى اليمين عند الفتح */
  transform:translateX(-100%);
  transition:transform var(--t-slow) var(--ease-out);
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem var(--gutter);
  min-height:var(--header-h);
  border-block-end:1px solid var(--lav-300);
}
.drawer__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--lav-300);color:var(--purple-900);
  transition:background-color var(--t-fast) var(--ease);
}
.drawer__close:hover{background:var(--lav-100)}
.drawer__close svg{width:16px;height:16px}
.drawer__body{flex:1;overflow-y:auto;padding:1rem var(--gutter) 2rem}
.drawer__foot{
  padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
  border-block-start:1px solid var(--lav-300);
  display:flex;flex-direction:column;gap:.6rem;
}
.mnav{display:flex;flex-direction:column}
.mnav__item{border-block-end:1px solid rgba(217,199,236,.6)}
.mnav__item:last-child{border-block-end:0}
.mnav__link{
  display:block;padding:.95rem .2rem;
  font-size:1.05rem;font-weight:700;color:var(--purple-900);
  transition:color var(--t-fast) var(--ease);
}
.mnav__link:hover{color:var(--purple-600)}
.mnav__item.current-menu-item > .mnav__link{color:var(--purple-600)}

/* ==========================================================================
   5. الصور — PNG شفافة: بلا إطار، بلا ظل، بلا قصّ
   ========================================================================== */
.media{
  display:block;
  margin:0;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  background:none;
  border-radius:0;
  box-shadow:none;
}
.media--center{margin-inline:auto}
.media--sm{max-width:320px}
.media--md{max-width:460px}
.media--lg{max-width:600px}

/* هالة لافندر خفيفة خلف الـPNG — تعطي عمقًا بلا إطار */
.media--halo{position:relative;isolation:isolate}
.media--halo::before{
  content:"";
  position:absolute;
  inset:6% 6% 10%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(190,163,222,.34) 0%,rgba(233,220,245,.18) 45%,transparent 72%);
  filter:blur(28px);
}

/* ==========================================================================
   6. الهيرو
   ========================================================================== */
.hero{padding-block:clamp(2.25rem,5vw,4rem) clamp(2rem,4.5vw,3.75rem)}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero__body{display:flex;flex-direction:column;gap:1.15rem}
.hero__title{margin:0;line-height:68px}
.hero__text{margin:0;max-width:42ch}
/*
  النبذة التعريفية في الهيرو: نص طويل (عدة أسطر)، فيأخذ حجمًا أصغر قليلًا من
  t-lead مع سطر أوسع قليلًا، ليبقى مقروءًا ولا يدفع أزرار الحجز أسفل الطية.
*/
.hero__intro{
  max-width:52ch;
  font-size:clamp(1rem,.96rem + .3vw,1.15rem);
  line-height:1.8;
  color:var(--ink-soft);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:.4rem}
/* شريط النقاط داخل عمود النص أسفل الأزرار؛ يلتف بحرّية لأن العمود أضيق من الحاوية. */
.hero__points{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.35rem;
  margin-block-start:.6rem;
  padding-block-start:1.25rem;
  border-block-start:1px solid rgba(217,199,236,.75);
}
.hero__point{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.92rem;font-weight:400;color:var(--ink-soft);
}
.hero__point svg{width:1.05rem;height:1.05rem;flex:none;color:var(--purple-500)}

/* ترويسة الصفحات الداخلية */
.page-head{padding-block:clamp(2.25rem,5vw,3.75rem) clamp(1.5rem,3vw,2.5rem)}
.page-head__inner{max-width:58ch}
.page-head--center .page-head__inner{margin-inline:auto;text-align:center}
.page-head__title{margin:0}
/* عنوان أصغر يسع سطرًا واحدًا — يقلّل ارتفاع العمود ليوازي الصورة */
.page-head--s .page-head__title,
.about-hero__title{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.35rem);text-wrap:balance}
.about-hero__title{margin:0}
.page-head__text{margin:.9rem 0 0}
.page-head__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:1.5rem}
.page-head--center .page-head__actions{justify-content:center}


/* ==========================================================================
   7. الخدمات
   ========================================================================== */
.svc{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  padding:clamp(1.5rem,3vw,2rem);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,199,236,.7);
  border-radius:var(--r-lg);
  transition:border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             transform var(--t-base) var(--ease-out);
}
.svc:hover{
  border-color:var(--purple-300);
  background:rgba(255,255,255,.94);
  transform:translateY(-2px);
}
/* صور الأقسام PNG/WebP مفرّغة الخلفية فعليًا — لا حاجة لأي مزج */
.svc__media{margin-block:.35rem 1rem}
.svc__media img{max-height:240px;margin-inline:auto;width:auto}
.svc__title{margin:0;font-size:1.22rem}
.svc__audience{font-size:.88rem;font-weight:700;color:var(--purple-600)}
.svc__text{margin:0;font-size:.97rem;color:var(--ink-soft)}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.2rem}
.svc__foot{margin-block-start:auto;padding-block-start:1rem}

.tag{
  display:inline-flex;align-items:center;
  padding:.28rem .7rem;
  font-size:.82rem;font-weight:400;
  border-radius:var(--r-pill);
  background:var(--lav-100);
  color:var(--purple-700);
}

/* صفّ خدمة كبير (صفحة الخدمات) */
.svc-row{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
  padding-block:clamp(1.75rem,3.5vw,2.5rem);
  border-block-start:1px solid rgba(217,199,236,.6);
}
.svc-row:first-of-type{border-block-start:0;padding-block-start:0}
.svc-row__body{display:flex;flex-direction:column;gap:1rem;min-width:0}
.svc-row__title{margin:0}
.svc-row__media img{max-height:clamp(320px,38vw,520px);width:auto;margin-inline:auto}

/* ==========================================================================
   8. بطاقات المزايا
   ========================================================================== */
.card{
  display:flex;flex-direction:column;gap:.55rem;
  padding:clamp(1.35rem,2.5vw,1.75rem);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,199,236,.7);
  border-radius:var(--r-lg);
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.card:hover{border-color:var(--purple-300);background:rgba(255,255,255,.94)}
.card__icon{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--r-sm);
  background:var(--lav-100);
  color:var(--purple-600);
  margin-block-end:.35rem;
}
.card__icon svg{width:21px;height:21px}
.card__title{margin:0;font-size:1.08rem}
.card__text{margin:0;font-size:.95rem;color:var(--ink-soft)}

.section--deep .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.section--deep .card:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26)}
.section--deep .card__icon{background:rgba(255,255,255,.12);color:#fff}
.section--deep .card__title{color:#fff}
.section--deep .card__text{color:rgba(246,241,251,.72)}

/* قائمة صح */
.checks{display:flex;flex-direction:column;gap:.7rem}
/*
  صفّ أفقي مضغوط: خطّ أصغر وأيقونة أصغر وفجوات أضيق ليسع الثلاثة سطرًا واحدًا.
  white-space:nowrap على العنصر يمنع كسر العبارة نفسها — فإن ضاق العرض
  تنزل العبارة كاملة لا نصفها.
*/
.checks--row{flex-direction:row;flex-wrap:wrap;gap:.5rem .9rem}
.checks--row .checks__item{font-size:.78rem;gap:.4rem;align-items:center;white-space:nowrap}
.checks--row .checks__icon{inline-size:17px;block-size:17px;margin-block-start:0}
.checks--row .checks__icon svg{inline-size:10px;block-size:10px}
.checks__item{display:flex;align-items:flex-start;gap:.65rem;font-weight:400}
.checks__icon{
  display:grid;place-items:center;flex:none;
  width:22px;height:22px;margin-block-start:.18rem;
  border-radius:50%;
  background:var(--lav-100);color:var(--purple-600);
}
.checks__icon svg{width:12px;height:12px}
.section--deep .checks__icon{background:rgba(255,255,255,.14);color:#fff}

/* ==========================================================================
   9. الإشارة الضوئية
   ========================================================================== */
.signals{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.8vw,1.15rem)}

/*
  بطاقة حالة: شريط لوني على حافة القراءة، شارة اللون في الأعلى،
  ومؤشر ثلاثي يترجم شدّة الحالة بصريًا. كل لون البطاقة مشتق من --dot،
  فتبقى الثلاث متطابقة في البنية ومختلفة في اللون فقط.
*/
.signal{
  --dot:var(--purple-600);
  --dot-ink:var(--purple-900);
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.3rem,2.5vw,1.7rem);
  padding-inline-start:clamp(1.6rem,3vw,2.05rem);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--dot) 8%,transparent) 0%,transparent 58%),
    rgba(255,255,255,.82);
  border:1px solid color-mix(in srgb,var(--dot) 24%,var(--lav-300));
  border-radius:var(--r-lg);
}
/* شريط الحافة الابتدائية — يمين في العربية بحكم الخصائص المنطقية */
.signal::before{
  content:"";
  position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:4px;
  background:var(--dot);
}
.signal--green{--dot:var(--signal-green);--dot-ink:var(--signal-green-ink)}
.signal--amber{--dot:var(--signal-amber);--dot-ink:var(--signal-amber-ink)}
.signal--red{--dot:var(--signal-red);--dot-ink:var(--signal-red-ink)}

.signal__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}

.signal__chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .72rem;
  font-size:.8rem;font-weight:700;line-height:1;
  color:var(--dot-ink);
  background:color-mix(in srgb,var(--dot) 13%,var(--white));
  border:1px solid color-mix(in srgb,var(--dot) 34%,transparent);
  border-radius:var(--r-pill);
}
.signal__dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--dot)}

/* المؤشر: ترجمة بصرية لشدّة الحالة — ثلاث ممتلئة = إتقان كامل */
.signal__meter{display:flex;gap:3px}
.signal__meter i{
  inline-size:16px;block-size:4px;border-radius:2px;
  background:color-mix(in srgb,var(--dot) 18%,transparent);
}
.signal--green .signal__meter i{background:var(--dot)}
.signal--amber .signal__meter i:nth-child(-n+2){background:var(--dot)}
.signal--red .signal__meter i:nth-child(1){background:var(--dot)}

.signal__title{margin:.35rem 0 0;font-size:clamp(1.15rem,2vw,1.3rem);color:var(--purple-900)}
.signal__text{margin:0;font-size:.95rem;line-height:1.75;color:var(--ink-soft)}
/* ==========================================================================
   9.5 قيم الأكاديمية — لوح واحد مقسّم بفواصل، لا خمس بطاقات منفصلة
   ========================================================================== */
/*
  الفواصل مصنوعة من gap:1px فوق خلفية اللوح، فتُرسم الخطوط تلقائيًا بين
  الأعمدة بلا حدود مفردة ولا حساب :first-child. ولهذا خلفية الخلية معتمة
  (--paper) لا شفافة، وإلا ظهر لون اللوح خلالها.

  عدد الأعمدة 1 أو 5 فقط — كلاهما يقسم الخمسة تمامًا، فلا تبقى خلية فارغة
  يظهر فيها لون اللوح عاريًا.
*/
.values{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:rgba(217,199,236,.85);
  border:1px solid rgba(217,199,236,.85);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.value{
  position:relative;
  display:flex;align-items:center;gap:1rem;
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.1rem,2.4vw,1.5rem);
  background:var(--paper);
  transition:background-color var(--t-base) var(--ease);
}
/* شريط علوي ينمو من جهة القراءة عند المرور */
.value::before{
  content:"";
  position:absolute;
  inset-block-start:0;inset-inline:0;
  block-size:3px;
  background:var(--purple-600);
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--t-base) var(--ease-out);
}
.value:hover{background:var(--white)}
.value:hover::before{transform:scaleX(1)}

.value__icon{
  display:grid;place-items:center;flex:none;
  inline-size:56px;block-size:56px;
  border-radius:50%;
  background:var(--grad-lav);
  border:1px solid var(--lav-300);
  color:var(--purple-700);
  transition:transform var(--t-base) var(--ease-out),
             background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.value__icon svg{inline-size:24px;block-size:24px}
.value:hover .value__icon{
  background:var(--grad-deep);
  border-color:transparent;
  color:var(--white);
  transform:translateY(-3px) scale(1.06);
}
.value__name{
  margin:0;
  font-size:clamp(1rem,1.7vw,1.08rem);
  line-height:1.35;
  color:var(--purple-900);
  transition:color var(--t-base) var(--ease);
}
.value:hover .value__name{color:var(--purple-700)}


/* ==========================================================================
   10. الخطوات
   ========================================================================== */
/*
  خط زمني: مسار واحد متصل يُرسم على <ol> نفسها لا مقطّعًا على كل خطوة،
  لأن العقدة صارت متوسّطة رأسيًا مقابل بطاقتها — ومع التوسيط لا يمكن حساب
  بداية المقطع ونهايته من CSS (يعتمدان على ارتفاع البطاقة).

  طرفا المسار شفّافان في التدرّج نفسه فلا يبرز خيط فوق أول عقدة ولا تحت آخرها،
  والعقد دوائر معتمة فوقه (z-index) تقطعه بصريًا عند كل خطوة.

  الحالة الافتراضية هي النهائية المرئية؛ الحركة animation عند .is-revealed
  فلو تعطّل IntersectionObserver يبقى القسم صحيحًا.
*/
.steps{
  --node:42px;
  --gutter-step:clamp(.9rem,2vw,1.25rem);
  --rail-x:calc(var(--node) / 2 - 1px);
  list-style:none;margin:0;padding:0;
  position:relative;
  max-inline-size:56rem;
  margin-inline:auto;
}
.steps::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:var(--rail-x);
  inline-size:2px;
  background:linear-gradient(180deg,
    rgba(188,165,216,0) 0%,
    var(--purple-400) 7%,
    rgba(188,165,216,.35) 93%,
    rgba(188,165,216,0) 100%);
  transform-origin:50% 0;
}
/* :has غير مدعومة في متصفحات قديمة — حينها يظهر المسار ثابتًا وهو السلوك الصحيح */
.steps:has(.step.is-revealed)::before{animation:rail-draw 900ms var(--ease-out) backwards}

.step{
  position:relative;
  display:grid;
  grid-template-columns:var(--node) minmax(0,1fr);
  gap:0 var(--gutter-step);
  padding-block-end:clamp(1.1rem,2.4vw,1.6rem);
}
.step:last-child{padding-block-end:0}

/* العقدة المرقّمة — متوسّطة رأسيًا مقابل بطاقتها */
.step__node{
  position:relative;z-index:1;
  /* grid-row صريح: بدونه تُدفع البطاقة إلى صفّ جديد حين يكون عمودها
     قبل موضع مؤشّر التوزيع التلقائي (الخطوات الفردية على سطح المكتب). */
  grid-column:1;grid-row:1;align-self:center;
  inline-size:var(--node);block-size:var(--node);
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--purple-300);
  color:var(--purple-700);
  font-size:.95rem;font-weight:800;
  direction:ltr;
}
.step.is-revealed .step__node{animation:node-pop 460ms var(--ease-out) backwards}
/* نبضة واحدة عند الظهور */
.step__node::after{
  content:"";
  position:absolute;inset:-6px;
  border-radius:50%;
  border:2px solid var(--purple-400);
  opacity:0;
}
.step.is-revealed .step__node::after{animation:node-ping 1.4s var(--ease-out) .3s 1}

/* بطاقة المحتوى */
.step__card{
  grid-column:2;grid-row:1;
  padding:clamp(.85rem,1.8vw,1.1rem) clamp(1rem,2vw,1.3rem);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,199,236,.65);
  border-radius:var(--r-lg);
}
.step__title{margin:0 0 .25rem;font-size:clamp(1.02rem,1.8vw,1.12rem);color:var(--purple-900)}
.step__text{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-soft)}

/* ==========================================================================
   11. الأسعار — بنية مستوحاة من بوسترات الأكاديمية
   ========================================================================== */
.ptabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;
  padding:.3rem;
  margin-inline:auto;
  margin-block-end:clamp(2rem,4vw,3rem);
  background:rgba(255,255,255,.72);
  border:1px solid var(--lav-300);
  border-radius:var(--r-pill);
  width:fit-content;max-width:100%;
}
.ptab{
  position:relative;
  padding:.58rem 1.2rem;
  font-size:.94rem;font-weight:700;
  color:var(--ink-soft);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.ptab:hover{color:var(--purple-900);background:var(--lav-100)}
.ptab[aria-selected="true"]{background:var(--purple-600);color:#fff}
.ptab[aria-selected="true"]:hover{background:var(--purple-700)}

.ppanel[hidden]{display:none}
.ppanel:not([hidden]){animation:panelIn 420ms var(--ease-out) both}
@keyframes panelIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.ppanel__head{text-align:center;margin-block-end:clamp(1.75rem,3vw,2.5rem)}
.ppanel__title{margin:0 0 .4rem;font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem)}

.pgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(.7rem,1.3vw,1rem);
  justify-content:center;
}

/* ---------- بطاقة الباقة ---------- */
.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  /* حشو علوي موحّد في كل البطاقات ليتسع للشارة ويبقى المحتوى متحاذيًا */
  padding:clamp(2.6rem,3.6vw,3.1rem) clamp(1.35rem,2.2vw,1.75rem) clamp(1.5rem,2.4vw,1.85rem);
  background:
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(251,249,254,.92) 100%);
  border:1px solid rgba(217,199,236,.85);
  border-radius:var(--r-xl);
  overflow:hidden;
  /* سياق تكديس: بدونه يهرب ::before ذو z-index:-1 خلف خلفية البطاقة فيختفي القوس */
  isolation:isolate;
}

/* قوس ضوئي خفيف أعلى البطاقة — مستوحى من أقواس البوسترات */
.plan::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(ellipse 130% 72% at 50% 0%,rgba(190,163,222,.22) 0%,rgba(233,220,245,.08) 46%,transparent 74%);
  pointer-events:none;
}

/* شارة الباقة المميزة */
.plan__tag{
  position:absolute;
  top:1rem;inset-inline-end:1rem;
  padding:.3rem .75rem;
  font-size:.72rem;font-weight:700;letter-spacing:-.005em;
  color:var(--purple-700);
  background:var(--lav-200);
  border-radius:var(--r-pill);
}

/* ---- الرأس: الاسم + فاصل زخرفي ---- */
.plan__head{display:flex;flex-direction:column;align-items:center;gap:.85rem;width:100%}
.plan__name{
  margin:0;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--purple-700);
}
.plan__rule{display:flex;align-items:center;gap:.55rem;width:min(190px,72%)}
.plan__rule-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--lav-300),transparent);
}
.plan__rule-gem{
  flex:none;width:6px;height:6px;
  background:var(--purple-400);
  transform:rotate(45deg);
  border-radius:1px;
}

/* ---- السعر: العنصر المهيمن ---- */
.plan__price{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  margin-block:clamp(1.35rem,2.6vw,1.9rem) clamp(1.35rem,2.6vw,1.9rem);
}
.plan__figure{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:.4rem;
  margin:0;
}
.plan__amount{
  font-size:clamp(3.1rem,2.4rem + 2.6vw,4.15rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--purple-900);
  direction:ltr;
  font-variant-numeric:tabular-nums lining-nums;
}
.plan__cur{font-size:1.25rem;font-weight:700;color:var(--purple-600);letter-spacing:-.01em}
.plan__period{font-size:.82rem;color:var(--ink-soft);letter-spacing:.01em}

/* ---- لوحة الإحصاءات: خانتان بفاصل شعري ---- */
.plan__stats{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  width:100%;
  margin:0;
  padding-block:1.05rem;
  background:rgba(242,234,250,.62);
  border:1px solid rgba(217,199,236,.55);
  border-radius:var(--r-md);
}
.plan__stats::before{
  content:"";
  grid-column:2;grid-row:1;
  grid-row:1;
  width:1px;height:62%;
  justify-self:center;
  background:var(--lav-300);
}
.plan__stat{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding-inline:.5rem}
.plan__stat:first-of-type{grid-column:1}
.plan__stat:last-of-type{grid-column:3}
.plan__stat-value{
  margin:0;
  font-size:1.45rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--purple-800);
  direction:ltr;
  font-variant-numeric:tabular-nums lining-nums;
}
.plan__stat-value--text{font-size:1.12rem;direction:rtl;letter-spacing:-.01em}
.plan__stat-label{
  font-size:.78rem;
  font-weight:400;
  color:var(--ink-soft);
  letter-spacing:.01em;
}

.plan__cta{margin-block-start:clamp(1.25rem,2.4vw,1.6rem)}


/* ==========================================================================
   الباقة المميزة — نفس البطاقة الفاتحة تمامًا، والفارق شارة فقط
   ========================================================================== */
.plan--featured{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(251,249,254,.92) 100%);
  border-color:rgba(217,199,236,.85);
}

/* ---------- شريط المزايا أسفل الباقات ---------- */
.perks{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem clamp(1.25rem,3vw,2.5rem);
  margin-block-start:clamp(1.75rem,3vw,2.5rem);
  padding:1.1rem clamp(1.1rem,2.5vw,1.75rem);
  background:rgba(242,234,250,.8);
  border:1px solid rgba(217,199,236,.7);
  border-radius:var(--r-lg);
}
.perks__item{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.95rem;font-weight:700;color:var(--purple-900);
}
.perks__icon{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;border-radius:50%;
  background:#fff;color:var(--purple-600);
  transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease);
}
.perks__icon svg{width:15px;height:15px}
.perks__item:hover .perks__icon{transform:scale(1.08);background:var(--purple-600);color:#fff}
/* ---------- معاينة الأسعار في الرئيسية ---------- */
.pprev{display:grid;grid-template-columns:1fr;gap:clamp(.9rem,1.8vw,1.15rem)}

/*
  البطاقة رابط كامل: شارة المرحلة، ثم السعر، ثم حقائق الباقة خلف فاصل شعري،
  وسطر انتقال مثبّت في الأسفل (margin-block-start:auto) فتتساوى البطاقات
  مهما اختلف طول النصوص داخلها.
*/
.pprev__card{
  position:relative;
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1.4rem,2.6vw,1.75rem);
  background:linear-gradient(180deg,rgba(242,234,250,.6) 0%,rgba(255,255,255,.88) 44%);
  border:1px solid rgba(217,199,236,.75);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
/* وهج بنفسجي خفيف في زاوية البداية — نفس إحساس تدرّجات البوسترات */
.pprev__card::before{
  content:"";
  position:absolute;
  inset-block-start:-56px;inset-inline-start:-40px;
  inline-size:150px;block-size:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(126,87,171,.20) 0%,rgba(126,87,171,0) 70%);
  pointer-events:none;
}
.pprev__card:hover{
  transform:translateY(-4px);
  border-color:var(--purple-300);
  box-shadow:var(--shadow-lift);
}

/* شارة المرحلة */
.pprev__stage{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  padding:.34rem .8rem;
  font-size:.82rem;font-weight:700;line-height:1;
  color:var(--purple-900);
  background:rgba(255,255,255,.9);
  border:1px solid var(--lav-300);
  border-radius:var(--r-pill);
}

/* السعر */
.pprev__amount{display:block}
.pprev__from{display:block;font-size:.8rem;color:var(--ink-soft);margin-block-end:.2rem}
.pprev__price{
  display:flex;align-items:baseline;gap:.35rem;
  font-size:clamp(2rem,3.6vw,2.35rem);font-weight:800;color:var(--purple-700);
  direction:ltr;font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.03em;line-height:1;
  transition:color var(--t-base) var(--ease);
}
.pprev__card:hover .pprev__price{color:var(--purple-900)}
.pprev__cur{font-size:.82rem;font-weight:700;color:var(--ink-soft);letter-spacing:0}
.pprev__period{display:block;font-size:.8rem;color:var(--ink-soft);margin-block-start:.35rem}

/* حقائق الباقة خلف فاصل شعري */
.pprev__meta{
  display:flex;flex-direction:column;gap:.5rem;
  padding-block-start:.9rem;
  border-block-start:1px solid rgba(217,199,236,.7);
}
.pprev__fact{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-body)}
.pprev__fact svg{inline-size:15px;block-size:15px;flex:none;color:var(--purple-600)}

/* سطر الانتقال — مثبّت أسفل البطاقة */
.pprev__go{
  display:flex;align-items:center;gap:.35rem;
  margin-block-start:auto;
  font-size:.88rem;font-weight:700;color:var(--purple-700);
}
.pprev__go svg{
  inline-size:16px;block-size:16px;flex:none;
  transition:transform var(--t-base) var(--ease-out);
}
/* السهم يشير لليسار أصلًا (RTL)، فالانزلاق لليسار هو اتجاه التقدّم */
.pprev__card:hover .pprev__go svg{transform:translateX(-4px)}

/* ==========================================================================
   12. الأسئلة الشائعة
   ========================================================================== */
.faq{display:flex;flex-direction:column;gap:.6rem}
.faq__item{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(217,199,236,.7);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.faq__item.is-open{border-color:var(--purple-300);background:#fff}
.faq__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;
  padding:1.05rem clamp(1.05rem,2.2vw,1.45rem);
  text-align:start;
  font-family:var(--font);
  font-size:1.02rem;font-weight:700;color:var(--purple-900);
  line-height:1.5;
  transition:color var(--t-fast) var(--ease);
}
.faq__trigger:hover{color:var(--purple-600)}
.faq__icon{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--lav-100);color:var(--purple-600);
  transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease);
}
.faq__icon svg{width:12px;height:12px}
.faq__item.is-open .faq__icon{transform:rotate(180deg);background:var(--purple-600);color:#fff}
.faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.faq__panel > div{overflow:hidden}
.faq__item.is-open .faq__panel{grid-template-rows:1fr}
.faq__answer{padding:0 clamp(1.05rem,2.2vw,1.45rem) 1.25rem;color:var(--ink-soft)}
.faq__answer > * + *{margin-block-start:.75rem}

/* ==========================================================================
   13. CTA والعروض
   ========================================================================== */
/*
  صندوق الحجز: لم يعد شريطًا بعرض الشاشة — صار بطاقة داخل الحاوية،
  تحمل هي class section--deep فترث ألوان النص الفاتحة وأنماط الأزرار الجاهزة.
  على سطح المكتب ينقسم الصندوق: النص في جهة والأزرار في الأخرى.
*/
.cta{
  position:relative;
  overflow:hidden;
  padding:clamp(1.85rem,4.5vw,3.25rem);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 48px rgba(58,28,96,.22);
}
/* وهجان ناعمان في الزاويتين — نفس إحساس تدرّجات البوسترات */
.cta::before,
.cta::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cta::before{
  inline-size:320px;block-size:320px;
  inset-block-start:-145px;inset-inline-start:-95px;
  background:radial-gradient(circle,rgba(188,165,216,.30) 0%,rgba(188,165,216,0) 70%);
}
.cta::after{
  inline-size:270px;block-size:270px;
  inset-block-end:-135px;inset-inline-end:-75px;
  background:radial-gradient(circle,rgba(142,107,189,.34) 0%,rgba(142,107,189,0) 70%);
}

.cta__inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.35rem,3vw,2.25rem);
}
.cta__body{
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  text-align:center;max-width:52ch;
}
.cta__title{margin:0}
.cta__text{margin:0}
.cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}

.offers{display:grid;grid-template-columns:1fr;gap:1rem}
.offer{
  display:flex;flex-direction:column;gap:.6rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,199,236,.7);
}
.offer__icon{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--lav-100);color:var(--purple-600);
  margin-block-end:.25rem;
}
.offer__icon svg{width:21px;height:21px}
.offer__title{margin:0;font-size:1.15rem}
.offer__text{margin:0;color:var(--ink-soft);font-size:.96rem}

/* ==========================================================================
   14. النماذج
   ========================================================================== */
.form-card{
  padding:clamp(1.5rem,3vw,2.5rem);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(217,199,236,.8);
  border-radius:var(--r-xl);
}
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.label{font-size:.9rem;font-weight:700;color:var(--purple-900)}
.label__req{color:var(--signal-red);margin-inline-start:.1rem}
.hint{font-size:.8rem;color:var(--ink-soft)}
.control{
  width:100%;
  padding:.78rem 1rem;
  min-height:48px;
  font-family:var(--font);font-size:1rem;
  color:var(--ink-body);
  background:rgba(255,255,255,.9);
  border:1px solid var(--lav-300);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.control::placeholder{color:var(--ink-soft);opacity:.7}
.control:focus{
  outline:none;background:#fff;
  border-color:var(--purple-500);
  box-shadow:0 0 0 3px rgba(126,87,171,.14);
}
.control[aria-invalid="true"]{border-color:var(--signal-red)}
textarea.control{min-height:120px;resize:vertical;line-height:1.65}
select.control{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237B6B91'%3E%3Cpath d='M8 11.5 2.5 6l1.1-1.1L8 9.3l4.4-4.4L13.5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 1rem center;
  background-size:14px;
  padding-inline-start:2.4rem;
}
.control--ltr{direction:ltr;text-align:end;font-variant-numeric:lining-nums}
.error{font-size:.82rem;font-weight:700;color:var(--signal-red)}
.form-actions{display:flex;flex-direction:column;gap:.7rem;margin-block-start:1.35rem}
.form-consent{font-size:.83rem;color:var(--ink-soft);text-align:center}
.honeypot{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:1rem 1.2rem;
  border-radius:var(--r-md);
  margin-block-end:1.35rem;
  font-weight:400;
}
.alert svg{width:1.3rem;height:1.3rem;flex:none;margin-block-start:.1rem}
.alert--success{background:rgba(78,156,120,.1);color:#2F6F53;border:1px solid rgba(78,156,120,.26)}
.alert--error{background:rgba(192,106,92,.1);color:#96473A;border:1px solid rgba(192,106,92,.26)}

/*
  معلومات التواصل — أبسط صورة: عنوان فرعي، ثم عناصر كلٌّ منها وسم صغير
  وقيمة تحته على محاذاة بداية السطر (اليمين في العربية)، وفاصل رقيق بين
  العنصرين. الأيقونات صغيرة وهادئة، بلا بطاقات أو حركة زائدة.
  قيم الهاتف والبريد لاتينية، فتُعزل باتجاه LTR لتبقى صحيحة (علامة + قبل
  الرقم) مع تثبيت محاذاتها إلى اليمين كما بقية القيم.
*/
.cinfo__title{
  margin:0 0 .9rem;
  font-size:.9rem;
  font-weight:800;
  color:var(--purple-600);
}
.cinfo__list{margin:0;padding:0;list-style:none}
.cinfo__item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding-block:.8rem;
  border-block-start:1px solid rgba(217,199,236,.6);
}
.cinfo__item:first-child{
  padding-block-start:0;
  border-block-start:0;
}
.cinfo__icon{
  display:grid;
  place-items:center;
  flex:none;
  inline-size:36px;
  block-size:36px;
  margin-block-start:.1rem;
  border-radius:var(--r-sm);
  background:var(--lav-100);
  color:var(--purple-600);
}
.cinfo__icon svg{inline-size:19px;block-size:19px}
.cinfo__icon--whatsapp{color:var(--signal-green-ink);background:#E7F7EF}
.cinfo__icon--mail{color:var(--purple-700);background:var(--lav-100)}
.cinfo__icon--clock{color:var(--signal-amber-ink);background:#FFF7D9}
.cinfo__icon--pin{color:var(--signal-red-ink);background:#FCEAE8}
.cinfo__body{min-width:0;flex:1}
.cinfo__label{
  display:block;
  font-size:.8rem;
  color:var(--ink-soft);
}
.cinfo__value{
  display:block;
  margin-block-start:.15rem;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.6;
  color:var(--purple-900);
  overflow-wrap:anywhere;
  transition:color var(--t-base) var(--ease);
}
a.cinfo__value:hover{
  color:var(--purple-600);
  text-decoration:underline;
  text-underline-offset:.2em;
}
/* القيم اللاتينية: اتجاه LTR صحيح، ومحاذاة يمين كما بقية القيم */
.cinfo__value--ltr{
  direction:ltr;
  unicode-bidi:isolate;
  text-align:right;
}

/* ==========================================================================
   15. التذييل
   ========================================================================== */
.site-footer{
  position:relative;
  overflow:hidden;
  /* تدرّج مركّب: وهج بنفسجي فاتح من جهة البداية فوق التدرّج العميق */
  background:
    radial-gradient(120% 85% at 88% 0%,rgba(142,107,189,.42) 0%,rgba(142,107,189,0) 58%),
    radial-gradient(90% 70% at 5% 100%,rgba(90,51,144,.45) 0%,rgba(90,51,144,0) 60%),
    var(--grad-deep);
  color:rgba(246,241,251,.74);
  padding-block:clamp(2.5rem,5vw,3.75rem) 0;
  border-block-start:1px solid rgba(255,255,255,.08);
}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3rem);
  padding-block-end:clamp(2rem,4vw,3rem);
}
.site-footer__brand{display:flex;flex-direction:column;gap:1rem;max-width:38ch}
.footer-logo img{height:clamp(44px,5vw,54px);width:auto}
.site-footer__desc{margin:0;font-size:.95rem;line-height:1.75}

/* عنوان العمود مع خط قصير تحته */
.site-footer h3{
  position:relative;
  margin:0 0 1.15rem;padding-block-end:.6rem;
  font-size:1rem;font-weight:700;color:#fff;
}
.site-footer h3::after{
  content:"";position:absolute;
  inset-block-end:0;inset-inline-start:0;
  inline-size:28px;block-size:2px;border-radius:2px;
  background:var(--purple-300);
}

/* الروابط في عمودين */
.flinks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 1.25rem;
}
.flinks a{font-size:.95rem;color:rgba(246,241,251,.74)}
.flinks a:hover{color:#fff}

.fcontact{display:flex;flex-direction:column;gap:.85rem}
.fcontact__row{display:flex;align-items:center;gap:.65rem;font-size:.95rem}
.fcontact__icon{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);color:rgba(246,241,251,.9);
}
.fcontact__icon svg{width:17px;height:17px}
.fcontact__value{display:block;direction:ltr;unicode-bidi:isolate;font-weight:700;color:#fff}
.socials{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.25rem}
.social{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.09);color:rgba(246,241,251,.85);
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.social:hover{background:rgba(255,255,255,.2);color:#fff}
.social svg{width:18px;height:18px}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;
  padding-block:1.25rem;
  border-block-start:1px solid rgba(255,255,255,.1);
  font-size:.85rem;color:rgba(246,241,251,.55);
}
.site-footer__bottom p{margin:0}
.site-footer__dev{
  color:rgba(246,241,251,.8);
  font-weight:700;
  direction:ltr;unicode-bidi:isolate;
  border-block-end:1px solid rgba(255,255,255,.25);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.site-footer__dev:hover{color:#fff;border-color:rgba(255,255,255,.7)}

/* ==========================================================================
   16. زر واتساب العائم — بنفسجي ليبقى داخل لوحة البوسترات
   ========================================================================== */
/*
  مغلق: دائرة بالأيقونة وحدها. عند المرور/التركيز يتمدّد فيظهر «تواصل معنا».
  التمدّد عبر max-inline-size لا width، لأن width:auto لا يقبل الانتقال.
  box-sizing:border-box عام في reset.css فالحشو يُقصّ مع العرض عند الإغلاق.
  مرفوع عن الحافة بما يكفي ليكشف سطر «تم التطوير من» في أسفل التذييل.
*/
.wa{
  --wa-size:52px;
  --wa-icon:24px;
  position:fixed;
  inset-inline-end:clamp(1rem,3vw,1.5rem);
  bottom:calc(clamp(3.5rem,6vw,4.25rem) + env(safe-area-inset-bottom));
  z-index:var(--z-float);
  /* مقاس صريح: الارتفاع = العرض الأدنى، والحشو الجانبي محسوب من فرق
     المقاس والأيقونة — فتخرج دائرة مضبوطة والأيقونة في مركزها تمامًا. */
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  min-inline-size:var(--wa-size);
  block-size:var(--wa-size);
  padding-block:0;
  padding-inline:calc((var(--wa-size) - var(--wa-icon)) / 2);
  background:var(--purple-600);color:#fff;
  border-radius:var(--r-pill);
  box-shadow:0 6px 22px rgba(58,28,96,.22);
  font-weight:700;font-size:.94rem;
}
.wa:hover{background:var(--purple-700)}
.wa svg{inline-size:var(--wa-icon);block-size:var(--wa-icon);flex:none}
/*
  المسافة هامش لا حشو: الحشو الجانبي يظل شاغلًا عرضًا حتى مع max-inline-size:0
  فيخرج الزر بيضاويًا. الهامش يصفر تمامًا ويقبل الانتقال، فتبقى الدائرة دائرة.
*/
.wa__label{
  /* easeOutCubic — أنعم من --ease-out الأقرب للأُسّي، فلا يبدو الفتح قفزة */
  --wa-ease:cubic-bezier(.33,1,.68,1);
  display:block;
  max-inline-size:0;
  margin-inline-start:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  /* الإغلاق: النص يخفت أولًا ثم يُطوى العرض بعده بقليل */
  transition:max-inline-size 380ms var(--wa-ease) 60ms,
             margin-inline-start 380ms var(--wa-ease) 60ms,
             opacity 180ms var(--ease);
}
.wa:hover .wa__label,
.wa:focus-visible .wa__label{
  max-inline-size:7rem;
  margin-inline-start:.55rem;
  opacity:1;
  /* الفتح: العرض يبدأ فورًا والنص يظهر بعد أن ينفتح الطريق */
  transition:max-inline-size 440ms var(--wa-ease),
             margin-inline-start 440ms var(--wa-ease),
             opacity 260ms var(--ease) 130ms;
}

/* ==========================================================================
   17. متفرقات
   ========================================================================== */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-block-start:2.5rem}
.pagination .page-numbers{
  display:grid;place-items:center;
  min-width:42px;height:42px;padding-inline:.7rem;
  border-radius:var(--r-sm);
  border:1px solid var(--lav-300);
  font-weight:700;background:rgba(255,255,255,.7);
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.pagination .page-numbers:hover{background:var(--lav-100);color:var(--purple-700)}
.pagination .page-numbers.current{background:var(--purple-600);color:#fff;border-color:transparent}

.e404{text-align:center;max-width:48ch;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.e404__code{
  font-size:clamp(4rem,11vw,7.5rem);font-weight:800;line-height:.95;direction:ltr;
  color:var(--lav-300);letter-spacing:-.04em;
}

.search-form{display:flex;gap:.5rem}
.search-form .control{flex:1}

.note{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:1.1rem 1.35rem;
  background:rgba(242,234,250,.7);
  border:1px dashed var(--lav-300);
  border-radius:var(--r-md);
  color:var(--ink-soft);font-size:.94rem;
}
.note svg{width:1.3rem;height:1.3rem;flex:none;color:var(--purple-600)}

.post-card{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(217,199,236,.7);
  border-radius:var(--r-lg);overflow:hidden;height:100%;
  transition:border-color var(--t-base) var(--ease);
}
.post-card:hover{border-color:var(--purple-300)}
.post-card__media img{width:100%;height:auto}
.post-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1.35rem;flex:1}
.post-card__meta{font-size:.82rem;color:var(--ink-soft)}
.post-card__title{margin:0;font-size:1.1rem}
.post-card__excerpt{margin:0;color:var(--ink-soft);font-size:.94rem}
.post-card__more{margin-block-start:auto;padding-block-start:.75rem}

/* ==========================================================================
   18. تصحيحات محاذاة داخل الحاويات العمودية
   الشارة عنصر inline-flex، لكنها تتمدّد داخل flex-column لأن الافتراضي stretch.
   ========================================================================== */
.hero__body > .badge,
.split__body > .badge,
.plan__foot > .badge{align-self:flex-start}

/* ==========================================================================
   19. الهوفر والحركة — سلوك موحّد عبر الموقع
   القاعدة: رفع خفيف + تلوين الحد + ظهور ظل، بلا قفزات مبالغ فيها.
   ========================================================================== */

/* ---------- «كيف نعمل»: تفاعل الخط الزمني ---------- */
.step__card{
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease);
}
.step__node{
  transition:transform 460ms var(--ease-out),
             opacity 320ms var(--ease),
             background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.step:hover .step__card{
  transform:translateY(-3px);
  background:#fff;
  border-color:var(--purple-300);
  box-shadow:var(--shadow-card);
}
.step:hover .step__node{
  background:var(--purple-600);
  border-color:var(--purple-600);
  color:#fff;
}
.step__title{transition:color var(--t-base) var(--ease)}
.step:hover .step__title{color:var(--purple-700)}

/* ---------- بلاطة الخدمة ---------- */
.svc{overflow:hidden}
.svc:hover{box-shadow:var(--shadow-lift)}
.svc__media img{transition:transform var(--t-slow) var(--ease-out)}
.svc:hover .svc__media img{transform:scale(1.05) translateY(-3px)}
.svc__title{transition:color var(--t-base) var(--ease)}
.svc:hover .svc__title{color:var(--purple-700)}
.svc .tag{transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.svc:hover .tag{background:var(--lav-200)}

/* ---------- صفّ الخدمة الكبير ---------- */
.svc-row__media img{transition:transform var(--t-slow) var(--ease-out)}
.svc-row:hover .svc-row__media img{transform:translateY(-6px)}

/* ---------- بطاقة عامة ---------- */
.card{
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.card__icon{transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.card:hover .card__icon{transform:scale(1.07);background:var(--purple-600);color:#fff}
.section--deep .card:hover{box-shadow:none}
.section--deep .card:hover .card__icon{background:#fff;color:var(--purple-700)}

/* ---------- الإشارة الضوئية ---------- */
.signal{
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.signal::before{transition:inline-size var(--t-base) var(--ease-out)}
.signal:hover,
.signal.is-active{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--dot) 45%,transparent);
  box-shadow:var(--shadow-card);
}
.signal:hover::before,
.signal.is-active::before{inline-size:7px}

/* ---------- العروض ---------- */
.offer{
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease);
}
.offer:hover{transform:translateY(-3px);border-color:var(--purple-300);background:#fff;box-shadow:var(--shadow-card)}
.offer__icon{transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.offer:hover .offer__icon{transform:scale(1.07);background:var(--purple-600);color:#fff}

/* ---------- الأسئلة الشائعة ---------- */
.faq__item{transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.faq__item:hover{border-color:var(--purple-300);background:rgba(255,255,255,.92)}
.faq__item.is-open{box-shadow:var(--shadow-card)}
.faq__trigger:hover .faq__icon{background:var(--purple-600);color:#fff}

/* ---------- الأزرار: رفع خفيف جدًا ---------- */
.btn{transition:background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease-out),
                box-shadow var(--t-base) var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* ---------- عناصر القائمة ---------- */
.nav__link{position:relative}
.nav__link::after{
  content:"";
  position:absolute;
  inset-inline:.8rem;bottom:.18rem;height:2px;border-radius:2px;
  background:var(--purple-600);
  transform:scaleX(0);
  transform-origin:100% 50%;
  transition:transform var(--t-base) var(--ease-out);
}
.nav__item.current-menu-item > .nav__link::after,
.nav__item.current_page_item > .nav__link::after{transform:scaleX(1)}
.mnav__link{transition:color var(--t-fast) var(--ease),padding-inline-start var(--t-base) var(--ease-out)}
.mnav__link:hover{padding-inline-start:.4rem}

/* ---------- روابط التذييل ---------- */
.flinks a{transition:color var(--t-fast) var(--ease),padding-inline-start var(--t-base) var(--ease-out)}
.flinks a:hover{padding-inline-start:.35rem}
.social{transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out)}
.social:hover{transform:translateY(-2px)}
.fcontact__icon{transition:background-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out)}
.fcontact__row:hover .fcontact__icon{background:rgba(255,255,255,.18);transform:scale(1.06)}

/* ---------- واتساب العائم ---------- */
.wa{transition:background-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease)}
.wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(58,28,96,.3)}

/* ---------- الشعار ---------- */
.brand__logo{transition:transform var(--t-base) var(--ease-out)}
.brand:hover .brand__logo{transform:scale(1.05)}

/* ---------- الحقول ---------- */
.control{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.control:hover:not(:focus){border-color:var(--purple-300)}

.tag{transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}

/* ---------- هوفر بطاقة الباقة ---------- */
.plan{
  transition:transform var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.plan::before{transition:opacity var(--t-base) var(--ease)}
.plan:hover{
  transform:translateY(-5px);
  border-color:var(--purple-300);
  box-shadow:var(--shadow-lift);
}
.plan:hover::before{opacity:.55}

.plan__amount{transition:color var(--t-base) var(--ease)}
.plan:hover .plan__amount{color:var(--purple-700)}

.plan__stats{transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.plan:hover .plan__stats{background:rgba(233,220,245,.72);border-color:var(--lav-300)}

.plan__rule-gem{transition:transform var(--t-base) var(--ease-out),background-color var(--t-base) var(--ease)}
.plan:hover .plan__rule-gem{transform:rotate(135deg) scale(1.15)}

/* ---------- احترام تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .step:hover .step__card,.svc:hover,.card:hover,.signal:hover,.signal.is-active,.offer:hover,
  .plan:hover,.pprev__card:hover,.btn:hover,
  .social:hover,.wa:hover{transform:none}
  .svc:hover .svc__media img,
  .svc-row:hover .svc-row__media img,
  .card:hover .card__icon,
  .offer:hover .offer__icon,
  .perks__item:hover .perks__icon,
  .brand:hover .brand__logo{transform:none}
  .ppanel:not([hidden]){animation:none}
  /* الخط الزمني: يظهر مكتملًا بلا رسم ولا نبض */
  .steps:has(.step.is-revealed)::before,
  .step.is-revealed .step__node,
  .step.is-revealed .step__node::after{animation:none}
}


/* ==========================================================================
   20. Contact Form 7 — إلباسه ثوب القالب
   CF7 يخرج ماركب خاصًّا به، فنستهدف أصنافه ونعيد استخدام أنماط .control
   نفسها بدل أنماط موازية، حتى يبقى مظهر الحقول واحدًا عبر الموقع.
   ========================================================================== */
.cf7__head{margin-block-end:1.5rem}
.cf7__title{margin:0 0 .4rem;font-size:clamp(1.2rem,2.2vw,1.45rem);color:var(--purple-900)}
.cf7__text{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* CF7 يلفّ كل شيء في <form>؛ نصفّر هوامشه الافتراضية */
.cf7 .wpcf7-form p{margin:0}
.cf7 .cf7-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.cf7 .cf7-field{display:flex;flex-direction:column;gap:.4rem}
.cf7 .cf7-field--full{grid-column:1/-1}
.cf7 .cf7-field > label{font-size:.9rem;font-weight:700;color:var(--purple-900)}
.cf7 .cf7-req{color:var(--signal-red);margin-inline-start:.1rem}

/* الحقول — نفس مظهر .control */
.cf7 .wpcf7-form-control-wrap{display:block}
.cf7 input[type="text"],
.cf7 input[type="tel"],
.cf7 input[type="email"],
.cf7 select,
.cf7 textarea{
  inline-size:100%;
  padding:.78rem 1rem;
  min-block-size:48px;
  font-family:var(--font);font-size:1rem;
  color:var(--ink-body);
  background:rgba(255,255,255,.9);
  border:1px solid var(--lav-300);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.cf7 textarea{min-block-size:auto;resize:vertical}
.cf7 .ltr input,
.cf7 input.ltr{direction:ltr;unicode-bidi:isolate;text-align:start}
.cf7 ::placeholder{color:var(--ink-soft);opacity:.7}
.cf7 input:hover:not(:focus),
.cf7 select:hover:not(:focus),
.cf7 textarea:hover:not(:focus){border-color:var(--purple-300)}
.cf7 input:focus,
.cf7 select:focus,
.cf7 textarea:focus{
  outline:none;
  border-color:var(--purple-500);
  box-shadow:0 0 0 3px rgba(142,107,189,.18);
}

/* زر الإرسال — نفس .btn--lg */
.cf7 .cf7-actions{margin-block-start:1.35rem}
.cf7 .wpcf7-submit{
  inline-size:100%;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.6rem;min-block-size:52px;
  font-family:var(--font);font-size:1rem;font-weight:700;
  color:var(--white);
  background:var(--purple-600);
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color var(--t-base) var(--ease),
             transform var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease);
}
.cf7 .wpcf7-submit:hover{
  background:var(--purple-700);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
.cf7 .wpcf7-submit:disabled{opacity:.6;cursor:default;transform:none}

/* رسائل التحقق والنتيجة — بمظهر .alert */
.cf7 .wpcf7-not-valid-tip{
  font-size:.82rem;font-weight:700;color:var(--signal-red);
  margin-block-start:.15rem;
}
.cf7 .wpcf7-not-valid{border-color:var(--signal-red)}
.cf7 .wpcf7-response-output{
  margin:1.35rem 0 0;
  padding:1rem 1.2rem;
  border-radius:var(--r-md);
  border:1px solid rgba(217,199,236,.8);
  font-size:.95rem;
}
.cf7 .wpcf7-mail-sent-ok{
  background:color-mix(in srgb,var(--signal-green) 10%,transparent);
  border-color:color-mix(in srgb,var(--signal-green) 30%,transparent);
  color:var(--signal-green-ink);
}
.cf7 .wpcf7-validation-errors,
.cf7 .wpcf7-mail-sent-ng,
.cf7 .wpcf7-spam-blocked,
.cf7 .wpcf7-acceptance-missing{
  background:color-mix(in srgb,var(--signal-red) 10%,transparent);
  border-color:color-mix(in srgb,var(--signal-red) 30%,transparent);
  color:var(--signal-red-ink);
}
/* مؤشّر الإرسال */
.cf7 .wpcf7-spinner{margin-inline-start:.5rem}

/* فاصل «أو» قبل زر واتساب */
.cf7__alt{margin-block-start:1.1rem}
.cf7__alt-sep{
  display:flex;align-items:center;gap:.75rem;
  margin-block-end:.8rem;
  font-size:.85rem;color:var(--ink-soft);
}
.cf7__alt-sep::before,
.cf7__alt-sep::after{
  content:"";flex:1;block-size:1px;
  background:rgba(217,199,236,.8);
}
.cf7 .form-consent{margin-block-start:1rem}