/* ==========================================================================
   الأولى لتحصيل الديون | طبقة الحركة (Motion Layer)
   --------------------------------------------------------------------------
   يُحمّل بعد aloula.css فقط لو «تفعيل الحركة» مفعّل (الأولى › الإعدادات › العرض).
   إيقافه يعيد الموقع لشكله الساكن دون أي كسر. لا يُحمّل داخل محرر Elementor
   حتى لا تختفي العناصر أثناء التحرير.
   ========================================================================== */

/* 1) متغيرات الحركة
   ------------------------------------------------------------------------ */
:root {
  /* المدد */
  --m-fast: 240ms;
  --m-base: 620ms;
  --m-slow: 1000ms;
  --m-stagger: 90ms;

  /* منحنيات التسارع */
  --m-ease: cubic-bezier(.22, .68, .36, 1);
  --m-out: cubic-bezier(.16, 1, .3, 1);       /* Expo Out: إحساس هادئ وفاخر */
  --m-spring: cubic-bezier(.34, 1.42, .64, 1);

  /* المسافات */
  --m-rise: 30px;
  --m-shift: 40px;

  /* اتجاه المحور الأفقي: RTL = 1 (يبدأ من اليمين) */
  --m-dir: 1;
}
[dir="ltr"] { --m-dir: -1; }

/* 2) محرّك الظهور عند التمرير (Scroll Reveal)
   يقابل: Elementor > Advanced > Motion Effects > Entrance Animation
   ------------------------------------------------------------------------ */

/* العناصر القادمة من اليمين تتجاوز حافة الصفحة قبل ظهورها، فيظهر شريط تمرير أفقي.
   نستخدم clip لا hidden: hidden يصنع حاوية تمرير جديدة فيتعطّل الهيدر الـ sticky.
   في Elementor: Site Settings > Layout > Prevent horizontal scroll. */
html, body { overflow-x: clip; }
/* ملاحظة مهمة: ممنوع استخدام clip-path لإخفاء عنصر مُراقَب.
   IntersectionObserver بيحسب المساحة الظاهرة بعد القص، فالعنصر المقصوص بالكامل
   مساحته صفر ومابيتحسبش إنه دخل الشاشة أبداً، فيفضل مخفي للأبد.
   الإخفاء هنا بالـ opacity والـ transform بس. */
.js-motion [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--m-base) var(--m-out),
    transform var(--m-base) var(--m-out),
    filter var(--m-base) var(--m-out);
  transition-delay: calc(var(--m-delay, 0ms) + var(--i, 0) * var(--m-step, var(--m-stagger)));
}

.js-motion [data-reveal="up"]      { transform: translate3d(0, var(--m-rise), 0); }
.js-motion [data-reveal="down"]    { transform: translate3d(0, calc(var(--m-rise) * -1), 0); }
.js-motion [data-reveal="start"]   { transform: translate3d(calc(var(--m-shift) * var(--m-dir)), 0, 0); }
.js-motion [data-reveal="end"]     { transform: translate3d(calc(var(--m-shift) * var(--m-dir) * -1), 0, 0); }
.js-motion [data-reveal="scale"]   { transform: scale(.9); }
.js-motion [data-reveal="pop"]     { transform: scale(.72); }
.js-motion [data-reveal="zoom"]    { transform: scale(1.06); }
.js-motion [data-reveal="rise"]    { transform: translate3d(0, calc(var(--m-rise) * 1.6), 0) scale(.96); }
.js-motion [data-reveal="tilt"]    { transform: perspective(1200px) rotateX(9deg) translate3d(0, var(--m-rise), 0); transform-origin: 50% 100%; }
.js-motion [data-reveal="blur"]    { transform: translate3d(0, 18px, 0); filter: blur(10px); }
.js-motion [data-reveal="fade"]    { transform: none; }

.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.js-motion [data-reveal].is-armed { will-change: opacity, transform; }
.js-motion [data-reveal].is-done  { will-change: auto; transition-delay: 0ms; }

/* 3) مكتبة الـ Keyframes
   ------------------------------------------------------------------------ */
@keyframes m-float      { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
/* نسخة تستخدم خاصية translate المستقلة، حتى يبقى transform متاحاً للميلان والبارالاكس */
@keyframes m-float-y    { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes m-drift      { 0% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(5%, -6%, 0) scale(1.08); } 66% { transform: translate3d(-4%, 5%, 0) scale(.95); } 100% { transform: translate3d(0, 0, 0) scale(1); } }
@keyframes m-breathe    { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .75; transform: scale(1.1); } }
@keyframes m-ring       { 0% { transform: scale(.85); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes m-sheen      { 0% { transform: translateX(calc(-170% * var(--m-dir))); } 100% { transform: translateX(calc(170% * var(--m-dir))); } }
@keyframes m-draw       { to { stroke-dashoffset: 0; } }
@keyframes m-fill-x     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-pop        { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes m-fade-up    { from { opacity: 0; transform: translate3d(0, var(--m-rise), 0); } to { opacity: 1; transform: none; } }
@keyframes m-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-bob        { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes m-skyline    { from { background-position-x: 0; } to { background-position-x: -1600px; } }

/* 4) دخول الصفحة
   ------------------------------------------------------------------------ */
.js-motion .topbar      { animation: m-fade-in var(--m-base) var(--m-ease) both; }
.js-motion .site-header { animation: m-fade-in var(--m-base) 60ms var(--m-ease) both; }

/* 5) الهيدر: تصغير عند التمرير + شريط تقدّم القراءة
   يقابل: Elementor > Theme Builder > Header > Sticky + Effects Offset
   ------------------------------------------------------------------------ */
.site-header { transition: box-shadow var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease); }
.site-header__inner { transition: height var(--m-fast) var(--m-ease); }
.brand img { transition: height var(--m-fast) var(--m-ease); }

.is-scrolled .site-header {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 10px 30px rgba(20, 2, 8, .08);
}
.is-scrolled .site-header__inner { height: calc(var(--header-h) - 16px); }
.is-scrolled .brand img { height: 42px; }

/* الشريط العلوي يخرج من الشاشة طبيعياً مع التمرير: الهيدر كله sticky بإزاحة
   سالبة بارتفاع الشريط (aloula.css › 21.10)، كما في التصميم الساكن تماماً.
   (نسخة HTML كانت تطويه بالهامش، وهذا كان سيتعارض مع الإزاحة هنا.) */

.scroll-progress {
  position: absolute; inset-inline: 0; bottom: -3px; height: 3px; z-index: 2;
  background: linear-gradient(to left, var(--c-primary), #C8355A);
  transform: scaleX(var(--m-progress, 0));
  transform-origin: 100% 50%;
  pointer-events: none;
}
[dir="ltr"] .scroll-progress { transform-origin: 0 50%; }

/* روابط القائمة: خط سفلي ينزلق */
.nav a { position: relative; transition: color var(--m-fast) var(--m-ease); }
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px;
  background: var(--c-primary); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--m-fast) var(--m-out);
}
[dir="ltr"] .nav a::after { transform-origin: 0 50%; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { border-bottom-color: transparent; }

.icon-btn { transition: border-color var(--m-fast), color var(--m-fast), transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast); }
.icon-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(138, 18, 48, .18); }
.menu-toggle { transition: transform var(--m-fast) var(--m-spring), background-color var(--m-fast); }
.menu-toggle:active { transform: scale(.9); }
.menu-toggle[aria-expanded="true"] { transform: rotate(90deg); }

.mobile-nav { animation: m-fade-in 220ms var(--m-ease) both; }
.mobile-nav .container > * { animation: m-fade-up 420ms var(--m-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }

/* 6) الأزرار: لمعة عابرة + دفع الأيقونة + ضغطة
   ------------------------------------------------------------------------ */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--m-fast), color var(--m-fast), border-color var(--m-fast),
              transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast) var(--m-ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .34) 50%, transparent 65%);
  transform: translateX(calc(-170% * var(--m-dir)));
}
.btn:hover { transform: translateY(-3px); }
.btn:hover::before { animation: m-sheen 750ms var(--m-ease); }
.btn:active { transform: translateY(-1px) scale(.985); }
.btn--primary:hover { box-shadow: 0 14px 30px rgba(138, 18, 48, .32); }
.btn--dark:hover { box-shadow: 0 14px 30px rgba(40, 40, 44, .3); }
.btn--outline:hover, .btn--ghost-light:hover, .btn--light:hover { box-shadow: 0 12px 26px rgba(20, 2, 8, .16); }
.btn .icon { transition: transform var(--m-fast) var(--m-spring); }
.btn:hover .icon { transform: translateX(calc(4px * var(--m-dir))) scale(1.08); }

.text-link { transition: color var(--m-fast); }
.text-link:hover { text-underline-offset: 8px; }

/* 7) الهيرو: خلفية حيّة + دخول متدرّج + بطاقة تقرير عائمة
   ------------------------------------------------------------------------ */
.hero__visual { isolation: isolate; }
.hero__aurora, .hero__orb, .hero__mesh { position: absolute; pointer-events: none; z-index: 0; }

.hero__aurora {
  inset: -30%;
  background:
    radial-gradient(38% 42% at 25% 30%, rgba(200, 53, 90, .5), transparent 62%),
    radial-gradient(34% 38% at 78% 22%, rgba(138, 18, 48, .6), transparent 60%),
    radial-gradient(45% 50% at 60% 82%, rgba(86, 10, 28, .85), transparent 65%);
  filter: blur(22px);
  animation: m-drift 22s ease-in-out infinite;
}
.hero__orb { border-radius: 50%; }
.hero__orb--a {
  width: 320px; height: 320px; inset-inline-end: -90px; top: -70px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .16), transparent 68%);
  animation: m-float 9s ease-in-out infinite;
}
.hero__orb--b {
  width: 240px; height: 240px; inset-inline-start: -70px; bottom: -60px;
  background: radial-gradient(circle at 60% 40%, rgba(227, 174, 187, .22), transparent 70%);
  animation: m-float 12s ease-in-out infinite reverse;
}
.hero__mesh {
  inset: 0;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 75%);
  animation: m-breathe 14s ease-in-out infinite;
}
.hero__stage { z-index: 1; }
.hero__stage::before {
  content: ""; position: absolute; inset: 6% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent 72%);
  animation: m-breathe 8s ease-in-out infinite;
  pointer-events: none;
}

/* رسم القوس */
.js-motion .hero__arc path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.hero__stage.is-in .hero__arc path { animation: m-draw 2.4s .5s var(--m-out) forwards; }

/* دخول محتوى الهيرو */
.js-motion .hero__content > *, .js-motion .hero__stage:not(.is-in) { opacity: 0; } /* البطاقة صارت في قسم التقارير: تتحرك عند دخولها الشاشة */
.is-ready .hero__content > * { animation: m-fade-up 900ms var(--m-out) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
/* العنوان المقسّم لكلمات يتحرك بكلماته، فلا نحرّك الكتلة كلها فوقه */
.js-motion .hero__content > .has-split { opacity: 1; }
.is-ready .hero__content > .has-split { animation: none; }
.hero__stage { transition: transform 420ms var(--m-out); }
.js-motion .hero__stage.is-in { animation: m-hero-card 1100ms 380ms var(--m-out) both; }
@keyframes m-hero-card {
  from { opacity: 0; translate: 0 46px; scale: .94; rotate: -1.5deg; }
  to   { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}

/* تقسيم العنوان لكلمات (التقسيم بالمسافات فقط حتى لا ينكسر تشكيل الحروف العربية) */
.split-word { display: inline-block; }
.js-motion .has-split .split-word { opacity: 0; transform: translate3d(0, .55em, 0) rotate(2deg); }
.is-ready .has-split .split-word {
  animation: m-word-in 760ms var(--m-out) both;
  animation-delay: calc(var(--i, 0) * 45ms + 160ms);
}
@keyframes m-word-in {
  from { opacity: 0; transform: translate3d(0, .55em, 0) rotate(2deg); }
  to   { opacity: 1; transform: none; }
}

.report { animation: m-float-y 7s 1.6s ease-in-out infinite; transition: box-shadow var(--m-base) var(--m-ease); }
.report:hover { box-shadow: 0 40px 80px rgba(20, 2, 8, .46); }

/* شريط النسبة */
.progress__bar { transform-origin: 100% 50%; }
[dir="ltr"] .progress__bar { transform-origin: 0 50%; }
.js-motion .progress__bar { transform: scaleX(0); }
.js-motion .progress__track.is-in .progress__bar { animation: m-fill-x 1.4s var(--m-out) forwards; }

/* خطوات التقرير */
.js-motion .hero__stage:not(.is-in) .timeline li { opacity: 0; }
.js-motion .hero__stage.is-in .timeline li { animation: m-step-in 620ms var(--m-out) both; animation-delay: calc(var(--i, 0) * 140ms + 700ms); }
@keyframes m-step-in {
  from { opacity: 0; transform: translate3d(calc(14px * var(--m-dir)), 0, 0); }
  to   { opacity: 1; transform: none; }
}
.timeline .is-current .dot::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--c-primary);
  animation: m-ring 2.4s var(--m-out) infinite;
}

/* 8) عناوين الأقسام: خط علوي ينمو
   ------------------------------------------------------------------------ */
.section-head { position: relative; }
.section-head::before {
  content: ""; position: absolute; inset-inline-start: 0; top: -18px;
  width: 56px; height: 3px; border-radius: 999px; background: var(--c-primary);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 700ms var(--m-out) 120ms;
}
[dir="ltr"] .section-head::before { transform-origin: 0 50%; }
.section-head.is-in::before { transform: scaleX(1); }
.section--dark .section-head::before { background: var(--c-icon-on-dark); }

/* 9) السجل التجاري: عدّادات + بطاقات
   يقابل: Elementor > Counter Widget
   ------------------------------------------------------------------------ */
.record { transition: transform var(--m-fast) var(--m-out), box-shadow var(--m-fast) var(--m-out); }
.record:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 2, 8, .1); z-index: 1; position: relative; }
.record--link .icon { transition: transform var(--m-fast) var(--m-spring); }
.record--link:hover .icon { transform: translate(calc(3px * var(--m-dir)), -3px); }
[data-count] { font-variant-numeric: tabular-nums; }

/* 10) قائمة الخدمات: كنس الخلفية + دوران الأيقونة
   ------------------------------------------------------------------------ */
.service-row { position: relative; overflow: hidden; transition: background-color var(--m-fast) var(--m-ease); }
.service-row::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px;
  background: var(--c-primary); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 420ms var(--m-out);
}
.service-row:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
.service-row .icon-box { transition: transform 420ms var(--m-spring), background-color var(--m-fast), color var(--m-fast); }
.service-row:hover .icon-box { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: var(--c-primary); color: #fff; }
.service-row h3 { transition: color var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-out); }
.service-row:hover h3 { color: var(--c-primary); transform: translateX(calc(4px * var(--m-dir))); }
.service-row__chev { transition: transform 420ms var(--m-spring); }
.service-row:hover .service-row__chev { transform: translateX(calc(-8px * var(--m-dir))); }

/* 11) آلية العمل: الخط يُرسم والأرقام تنبثق
   ------------------------------------------------------------------------ */
.steps::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform 1.6s var(--m-out) 200ms; }
[dir="ltr"] .steps::before { transform-origin: 0 50%; }
.steps.is-in::before { transform: scaleX(1); }

.step__num { position: relative; transition: transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast); }
.step__num::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--c-primary); opacity: 0;
}
.step:hover .step__num { transform: scale(1.12) rotate(-6deg); box-shadow: 0 10px 24px rgba(138, 18, 48, .3); }
.step:hover .step__num::after { animation: m-ring 1.4s var(--m-out) infinite; }
.js-motion .step.is-in .step__num { animation: m-pop 620ms var(--m-spring) both; animation-delay: calc(var(--i, 0) * 120ms + 180ms); }
.step h3 { transition: color var(--m-fast); }
.step:hover h3 { color: var(--c-primary); }

.branch { transition: transform var(--m-fast) var(--m-out), box-shadow var(--m-fast) var(--m-out), border-color var(--m-fast); }
.branch:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(138, 18, 48, .14); }
.branch > .icon { transition: transform 500ms var(--m-spring); }
.branch:hover > .icon { transform: rotate(-10deg) scale(1.1); }

/* 12) القطاعات (القسم الداكن)
   ------------------------------------------------------------------------ */
.sector-grid li {
  position: relative; overflow: hidden;
  transition: transform var(--m-fast) var(--m-out), border-color var(--m-fast), background-color var(--m-fast), box-shadow var(--m-fast);
}
.sector-grid li::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, .1), transparent 60%);
  opacity: 0; transition: opacity var(--m-fast) var(--m-ease);
}
.sector-grid li:hover {
  transform: translateY(-5px);
  border-color: rgba(227, 174, 187, .6);
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}
.sector-grid li:hover::before { opacity: 1; }
.sector-grid .icon { transition: transform 460ms var(--m-spring), color var(--m-fast); }
.sector-grid li:hover .icon { transform: scale(1.18) rotate(-8deg); color: #fff; }

/* 13) الالتزامات والميثاق
   ------------------------------------------------------------------------ */
.pledge { position: relative; border-top-color: transparent; }
.pledge::before {
  content: ""; position: absolute; inset-inline-start: 0; top: -2px; height: 2px; width: 100%;
  background: var(--c-primary); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 900ms var(--m-out) 120ms;
}
[dir="ltr"] .pledge::before { transform-origin: 0 50%; }
.pledge.is-in::before { transform: scaleX(1); }

.charter li { transition: background-color var(--m-fast) var(--m-ease), padding-inline var(--m-fast) var(--m-out); }
.charter li:hover { background: var(--c-tint); }
.check-dot { transition: transform 420ms var(--m-spring), background-color var(--m-fast), color var(--m-fast); }
.charter li:hover .check-dot, .facts li:hover .check-dot { transform: scale(1.2) rotate(-10deg); background: var(--c-primary); color: #fff; }
.js-motion .charter li.is-in .check-dot { animation: m-pop 520ms var(--m-spring) both; animation-delay: calc(var(--i, 0) * 90ms + 140ms); }
.js-motion .facts li.is-in .check-dot { animation: m-pop 520ms var(--m-spring) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }

/* 14) شريط المدينين
   ------------------------------------------------------------------------ */
.round-icon { position: relative; transition: transform 500ms var(--m-spring); }
.round-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-primary); opacity: .5;
  animation: m-ring 3s var(--m-out) infinite;
}
.debtors:hover .round-icon { transform: scale(1.06) rotate(-6deg); }

/* 15) البطاقات والصور
   ------------------------------------------------------------------------ */
/* الصور: تستقر داخل إطارها بدل ما تظهر فجأة.
   نستخدم خاصية scale المستقلة (مش transform) عشان تتعايش مع translate بتاع البارالاكس.
   ‎--photo-scale‎ هو مقاس الراحة: 1 للصور العادية، و1.14 لصور البارالاكس اللي محتاجة هامش. */
.photo img { --photo-scale: 1; }
.photo--parallax img { --photo-scale: 1.14; }
.photo img {
  transform: none;
  scale: var(--photo-scale);
  transition: scale 1.4s var(--m-out);
}
.js-motion .photo[data-reveal]:not(.is-in) img { scale: calc(var(--photo-scale) + .16); }
.photo:hover img { scale: calc(var(--photo-scale) + .06); }
.photo__label { transition: transform var(--m-fast) var(--m-out), background-color var(--m-fast); }
.photo:hover .photo__label { transform: translateY(-4px); background: var(--c-primary); }

.cell, .svc, .side-card, .statement, .model, .channels, .record-card, .org__card, .goals li, .form-card, .charter, .service-list, .map {
  transition: transform var(--m-fast) var(--m-out), box-shadow var(--m-fast) var(--m-out), border-color var(--m-fast);
}
.cell:hover, .side-card:hover, .statement:hover, .model:hover, .record-card:hover, .org__card:hover {
  transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20, 2, 8, .1);
}
.cell:hover, .model:hover { z-index: 1; position: relative; }
.cell .icon-box, .svc .icon-box, .org__card .icon { transition: transform 460ms var(--m-spring), background-color var(--m-fast), color var(--m-fast); }
.cell:hover .icon-box, .svc:hover .icon-box { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: var(--c-primary); color: #fff; }
.org__card:hover .icon { transform: scale(1.2) rotate(-8deg); }
.svc h3 { transition: color var(--m-fast); }
.svc:hover h3 { color: var(--c-primary); }
.goals li { position: relative; border-top-color: transparent; }
.aloula .goals .elementor-icon-list-item { border-top-color: transparent; } /* نفس أولوية قاعدة الجسر في aloula.css */
.goals li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: -2px; height: 2px; width: 100%;
  background: var(--c-primary); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 700ms var(--m-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}
[dir="ltr"] .goals li::before { transform-origin: 0 50%; }
.goals li.is-in::before { transform: scaleX(1); }

/* 16) النماذج
   ------------------------------------------------------------------------ */
.input { transition: border-color var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast) var(--m-out), background-color var(--m-fast); }
.field:focus-within label, .field:focus-within .label { color: var(--c-primary); }
.field label, .field .label { transition: color var(--m-fast); }
.input:focus { transform: translateY(-2px); }
.field__error { animation: m-shake 420ms var(--m-ease) both; }
@keyframes m-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
.segmented button { transition: background-color var(--m-fast) var(--m-ease), color var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast) var(--m-spring); }
.segmented button:active { transform: scale(.96); }
.dropzone { transition: border-color var(--m-fast), background-color var(--m-fast), transform var(--m-fast) var(--m-out); }
.dropzone.is-dragover { transform: scale(1.015); }
.dropzone__icon { transition: transform 460ms var(--m-spring); }
.dropzone:hover .dropzone__icon { transform: translateY(-4px) scale(1.08); }
.dropzone.is-dragover .dropzone__icon { animation: m-bob 1s ease-in-out infinite; }
.file-chip { animation: m-chip-in 420ms var(--m-out) both; transition: border-color var(--m-fast), background-color var(--m-fast); }
.file-chip:hover { border-color: var(--c-primary); }
@keyframes m-chip-in {
  from { opacity: 0; transform: translate3d(calc(20px * var(--m-dir)), 0, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.form-success:not([hidden]) { animation: m-success 620ms var(--m-spring) both; }
@keyframes m-success {
  0% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
  100% { opacity: 1; transform: none; }
}
.form-success .icon { animation: m-pop 620ms 160ms var(--m-spring) both; }

/* 17) الأسئلة الشائعة: فتح وإغلاق سلس
   يقابل: Elementor > Accordion Widget
   ------------------------------------------------------------------------ */
.faq summary { transition: color var(--m-fast), padding-inline var(--m-fast) var(--m-out); }
.faq summary:hover { color: var(--c-primary); padding-inline-start: 8px; }
.faq__icon { transition: background-color var(--m-fast), color var(--m-fast), transform 420ms var(--m-spring); }
.faq summary:hover .faq__icon { transform: scale(1.12); }
.faq details[open] .faq__icon { transform: rotate(180deg); }
.faq details[open] summary { color: var(--c-primary); }
.faq .faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--m-out); }
.faq .faq__body > div { overflow: hidden; }
.faq details[open] .faq__body { grid-template-rows: 1fr; }
.faq details[open].is-closing .faq__body { grid-template-rows: 0fr; }
.faq details[open].is-closing .faq__icon { transform: none; }

/* 18) شريط الدعوة للإجراء: أفق المدينة يتحرك
   ------------------------------------------------------------------------ */
.cta-band::after { animation: m-skyline 90s linear infinite; }
.cta-band { position: relative; }
.cta-band::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(40% 45% at 20% 30%, rgba(200, 53, 90, .35), transparent 62%);
  animation: m-drift 26s ease-in-out infinite;
}

/* 19) الفوتر والعناصر العائمة
   ------------------------------------------------------------------------ */
.footer-links a, .contact-list a { display: inline-block; transition: color var(--m-fast), transform var(--m-fast) var(--m-out); }
.footer-links a:hover { transform: translateX(calc(-5px * var(--m-dir))); }
.social a { transition: background-color var(--m-fast), color var(--m-fast), transform var(--m-fast) var(--m-spring), border-color var(--m-fast); }
.social a:hover { transform: translateY(-5px) scale(1.08); }
.mini-record div { transition: background-color var(--m-fast); }

.fab-wa { transition: transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast), background-color var(--m-fast), color var(--m-fast); }
.fab-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--c-wa, #25D366); opacity: .6;
  animation: m-ring 2.8s var(--m-out) infinite;
  pointer-events: none;
}
.fab-wa:hover { transform: scale(1.1) rotate(-6deg); background: var(--c-wa-dark, #1DA851); color: #fff; }
.action-bar a { transition: transform var(--m-fast) var(--m-spring), background-color var(--m-fast), border-color var(--m-fast); }
.action-bar a:active { transform: scale(.95); }

/* زر العودة للأعلى مع حلقة تقدّم */
.to-top {
  position: fixed; inset-inline-start: 24px; bottom: 92px; z-index: 41;
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--c-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.85);
  transition: opacity var(--m-fast) var(--m-ease), transform var(--m-fast) var(--m-spring), visibility var(--m-fast), background-color var(--m-fast), color var(--m-fast);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-primary); color: #fff; transform: translateY(-3px); }
.to-top .icon { width: 22px; height: 22px; position: relative; z-index: 1; transform: rotate(90deg); }
[dir="ltr"] .to-top .icon { transform: rotate(-90deg); }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.5; }
.to-top__ring .bg { stroke: rgba(138, 18, 48, .16); }
.to-top__ring .bar {
  stroke: var(--c-primary); stroke-linecap: round;
  stroke-dasharray: 151; stroke-dashoffset: calc(151 - 151 * var(--m-progress, 0));
  transition: stroke-dashoffset 120ms linear;
}
.to-top:hover .to-top__ring .bar { stroke: #fff; }
.to-top:hover .to-top__ring .bg { stroke: rgba(255, 255, 255, .3); }

/* 20) دليل الواجهة
   ------------------------------------------------------------------------ */
.swatch { transition: transform var(--m-fast) var(--m-out), box-shadow var(--m-fast) var(--m-out); }
.swatch:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(20, 2, 8, .12); }
.icon-sheet li { transition: transform var(--m-fast) var(--m-spring), border-color var(--m-fast), color var(--m-fast); }
.icon-sheet li:hover { transform: translateY(-4px); border-color: var(--c-primary); color: var(--c-secondary); }
.icon-sheet li:hover .icon { animation: m-pop 460ms var(--m-spring); }

/* 21) أدوات عامة: موجة الضغط والبارالاكس
   ------------------------------------------------------------------------ */

/* موجة الضغط (Ripple) — تحتاج الحاوية position:relative و overflow:hidden */
.icon-btn, .action-bar a, .segmented button { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .22; scale: 0;
  animation: m-ripple 620ms var(--m-out) forwards;
}
@keyframes m-ripple { to { scale: 1; opacity: 0; } }

/* البارالاكس: الـ JS يكتب ‎--m-shift-y‎ فقط، والـ CSS يقرّر كيف يستعمله
   يقابل: Elementor > Motion Effects > Scrolling Effects > Vertical Scroll */
/* العنصر نفسه يتحرك */
[data-parallax]:not(.photo--parallax) { translate: 0 var(--m-shift-y, 0); }

/* الصورة تتحرك داخل إطارها الثابت (الإطار مكبّر مسبقاً حتى لا تظهر فجوات) */
/* هامش التكبير (‎--photo-scale: 1.14‎) لازم يغطي أقصى إزاحة (‎±40px‎) فلا تظهر فجوة */
.photo--parallax img { translate: 0 var(--m-shift-y, 0); }

/* 21.5) نفس الحركات على عناصر Elementor
   الزر والأيقونة والقائمة في Elementor يقعون داخل غلاف العنصر، فنكرر هنا
   حركات .btn و .icon-btn و .check-dot على عناصرهم الداخلية.
   ------------------------------------------------------------------------ */
.a-btn .elementor-button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--m-fast), color var(--m-fast), border-color var(--m-fast),
              transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast) var(--m-ease);
}
.a-btn .elementor-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .34) 50%, transparent 65%);
  transform: translateX(calc(-170% * var(--m-dir)));
}
.a-btn .elementor-button:hover { transform: translateY(-3px); }
.a-btn .elementor-button:hover::before { animation: m-sheen 750ms var(--m-ease); }
.a-btn .elementor-button:active { transform: translateY(-1px) scale(.985); }
.a-btn--primary .elementor-button:hover { box-shadow: 0 14px 30px rgba(138, 18, 48, .32); }
.a-btn--dark .elementor-button:hover { box-shadow: 0 14px 30px rgba(40, 40, 44, .3); }
.a-btn--outline .elementor-button:hover,
.a-btn--ghost-light .elementor-button:hover,
.a-btn--light .elementor-button:hover { box-shadow: 0 12px 26px rgba(20, 2, 8, .16); }
.a-btn .elementor-button-icon { transition: transform var(--m-fast) var(--m-spring); }
.a-btn .elementor-button:hover .elementor-button-icon { transform: translateX(calc(4px * var(--m-dir))) scale(1.08); }

.a-icon-btn .elementor-icon { position: relative; overflow: hidden; transition: border-color var(--m-fast), color var(--m-fast), transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast); }
.a-icon-btn .elementor-icon:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(138, 18, 48, .18); }

.charter li .elementor-icon-list-icon,
.facts li .elementor-icon-list-icon { transition: transform 420ms var(--m-spring), background-color var(--m-fast), color var(--m-fast); }
.charter li:hover .elementor-icon-list-icon,
.facts li:hover .elementor-icon-list-icon { transform: scale(1.2) rotate(-10deg); background: var(--c-primary); color: #fff; }
.js-motion .charter li.is-in .elementor-icon-list-icon { animation: m-pop 520ms var(--m-spring) both; animation-delay: calc(var(--i, 0) * 90ms + 140ms); }
.js-motion .facts li.is-in .elementor-icon-list-icon { animation: m-pop 520ms var(--m-spring) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }

.elementor-form .elementor-button { position: relative; overflow: hidden; transition: background-color var(--m-fast), transform var(--m-fast) var(--m-spring), box-shadow var(--m-fast); }
.elementor-form .elementor-button:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(138, 18, 48, .32); }

@media (hover: none) {
  .a-btn .elementor-button:hover, .a-icon-btn .elementor-icon:hover, .elementor-form .elementor-button:hover { transform: none; }
  .a-btn .elementor-button:hover::before { animation: none; }
}

/* 22) استجابة
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --m-rise: 22px; --m-shift: 28px; --m-base: 540ms; --m-stagger: 70ms; }
  .hero__orb--a { width: 220px; height: 220px; }
  .hero__orb--b { width: 170px; height: 170px; }
  .is-scrolled .site-header__inner { height: calc(var(--header-h) - 10px); }
  .is-scrolled .brand img { height: 36px; }
}

@media (max-width: 767px) {
  :root { --m-rise: 18px; --m-shift: 20px; --m-base: 480ms; --m-stagger: 60ms; }
  .hero__mesh { background-size: 44px 44px; }
  .report { animation: none; }
  .to-top { inset-inline-start: auto; inset-inline-end: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .is-scrolled .brand img { height: 32px; }
  .section-head::before { top: -12px; width: 44px; }
}

/* الأجهزة اللمسية: نلغي تأثيرات المرور التي تسبب حالة "عالقة" */
@media (hover: none) {
  .btn:hover, .cell:hover, .side-card:hover, .statement:hover, .model:hover,
  .record:hover, .record-card:hover, .org__card:hover, .sector-grid li:hover,
  .branch:hover, .icon-btn:hover, .social a:hover, .swatch:hover { transform: none; }
  .btn:hover::before { animation: none; }
}

/* 22) احترام تفضيل تقليل الحركة (إلزامي)
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-motion [data-reveal],
  .js-motion .hero__content > *,
  .js-motion .hero__stage,
  .js-motion .timeline li,
  .js-motion .has-split .split-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .js-motion .progress__bar { transform: scaleX(1) !important; }
  .js-motion .hero__arc path { stroke-dashoffset: 0 !important; }
  .steps::before, .pledge::before, .section-head::before, .goals li::before { transform: scaleX(1) !important; }
  .hero__stage { transform: none !important; }
  [data-parallax], .photo--parallax img { translate: 0 !important; }
  .hero__aurora, .hero__orb, .hero__mesh, .cta-band::before, .cta-band::after,
  .timeline .is-current .dot::before, .round-icon::after, .fab-wa::after, .ripple { animation: none !important; }
  .ripple { display: none; }
}

/* اللغات LTR (الإنجليزية والهندية): شريط التقدم يبدأ من اليسار، ولمعة البطاقات من اليسار */
[dir="ltr"] .scroll-progress { transform-origin: 0 50%; background: linear-gradient(to right, var(--c-primary), #C8355A); }
[dir="ltr"] .sector-grid li::before { background: linear-gradient(to right, rgba(255, 255, 255, .1), transparent 60%); }