/* ══════════════════════════════════════════════════════════════
   PALM PROPERTIES DEVELOPMENT — نظام التصميم
   كل الألوان مسحوبة من ملف اللوجو نفسه. غيّر :root وبس.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ══ ألوان الهوية — مستخرجة من بكسلات اللوجو ══
     #193762 كحلي (الاسم) · #2064AE أزرق (للتطوير)
     #076633 أخضر (خلفية النخلة) · #FCD916 أصفر (سعف النخلة) */
  --navy:   #193762;  --navy-d:#0F2544;  --navy-l:#E8ECF5;
  --blue:   #2064AE;  --blue-d:#174E88;  --blue-l:#E5EDF8;
  --sky:    #4A93D9;                     --sky-l:  #EAF3FC;
  --green:  #076633;  --green-d:#054C26; --green-l:#E2EFE8;
  --leaf:   #2C8B52;                     --leaf-l: #E9F4ED;
  --gold:   #FCD916;  --gold-s:#D4A800;  --gold-d:#8A6B00;  --gold-l:#FFF8D9;
  /* الأصفر بيتقرا وحش على أبيض:
     --gold للخلفيات · --gold-s للأيقونات · --gold-d للنصوص */

  /* اللون الأساسي للتفاعل = أزرق اللوجو */
  --brand:   var(--blue);
  --brand-d: var(--blue-d);
  --brand-l: var(--blue-l);

  /* لون وظيفي واحد من بره اللوجو — للأخطاء بس */
  --alert:  #C2452D;  --alert-l:#FBEAE6;

  /* النصوص والأسطح — كلها درجات من الكحلي */
  --ink:   #122744;
  --ink-2: #34455F;
  --mut:   #6B7C94;
  --bg:    #F2F5FA;
  --bg-2:  #E9EFF7;
  --card:  #FFFFFF;
  --line:  #DCE4F0;

  --r-s:  12px;
  --r:    18px;
  --r-l:  26px;
  --r-xl: 34px;

  /* الظلال مسحوبة على الكحلي مش على الأسود */
  --sh-1: 0 1px 2px rgba(25,55,98,.05), 0 10px 24px -14px rgba(25,55,98,.22);
  --sh-2: 0 4px 12px rgba(25,55,98,.07), 0 26px 50px -22px rgba(25,55,98,.30);
  --sh-3: 0 10px 24px rgba(25,55,98,.09), 0 44px 80px -32px rgba(25,55,98,.38);

  --nav-h:   80px; /* الشريط الأبيض */
  --nav-h-s: 68px; /* ارتفاعه بعد ما تنزل بالاسكرول */
  --top-h:   40px; /* شريط المعلومات الكحلي */
  --wrap:  1220px;
  --gap:   26px;
  --sec-y: clamp(72px, 9vw, 128px);

  --ease: cubic-bezier(.22,.8,.28,1);
  --fast: .22s var(--ease);

  --f-ar: 'Tajawal', system-ui, sans-serif;
  --f-en: 'Plus Jakarta Sans', system-ui, sans-serif;
}
html[lang="en"]{ --f-ar: var(--f-en) }


/* ══════════ الأساسيات ══════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-block-start:calc(var(--nav-h) + var(--top-h) + 22px); -webkit-text-size-adjust:100% }

body{
  font-family:var(--f-ar);
  background:var(--bg);
  color:var(--ink-2);
  font-size:16.5px; line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ color:var(--ink); line-height:1.24; font-weight:800; letter-spacing:-.01em }
a{ color:inherit; text-decoration:none }
img,video{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,textarea{ font:inherit; color:inherit }
ul{ list-style:none }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px }
::selection{ background:var(--blue); color:#fff }

.en{ font-family:var(--f-en); font-variant-numeric:tabular-nums }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto }
@media (max-width:600px){
  .wrap{ width:calc(100% - 32px) }
  /* مسافات الأقسام أقصر على الموبايل — بتقلل التمرير كتير */
  :root{ --sec-y:60px; --gap:18px }
}
@media (max-width:400px){ .wrap{ width:calc(100% - 26px) } }


/* ══════════ شريط تقدّم القراءة ══════════ */
.scroll-progress{ position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:120; pointer-events:none }
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--navy),var(--blue) 40%,var(--green) 75%,var(--gold));
  border-end-end-radius:3px;
}


/* ══════════════════════════════════════════════════════════════
   الهيدر — الشريط الأبيض فوق والكحلي تحته، والاتنين بيفضلوا ظاهرين.
   لمّا تنزل بالاسكرول: الأبيض بيبقى كحلي واللوجو بيبقى أبيض.
   ══════════════════════════════════════════════════════════════ */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:100 }

/* ── الشريط الأبيض (فوق) ── */
.mainbar{
  background:var(--card);
  border-block-end:1px solid var(--line);
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow var(--fast);
}
.nav.stuck .mainbar{
  background:var(--navy-d);
  border-block-end-color:rgba(255,255,255,.1);
  box-shadow:0 8px 34px -14px rgba(15,37,68,.6);
}
/* من غير gap — عشان آخر عنصر في القايمة يقف على حرف الشريط بالظبط
   زي زر اللغة اللي تحته في الشريط الكحلي */
.mb-in{ display:flex; align-items:center; height:var(--nav-h); transition:height var(--fast) }
.nav.stuck .mb-in{ height:var(--nav-h-s) }

/* ── اللوجو — نسختين فوق بعض بتتبدّلوا مع الاسكرول ──
   الملفات مقصوصة على حدود الرسمة بالظبط (مفيش فراغ شفاف جواها)،
   فالارتفاع المكتوب هنا = ارتفاع الرسمة اللي بتتشاف فعلاً. */
.brand{
  position:relative; display:flex; align-items:center; flex-shrink:0;
}
.brand img{
  height:40px; width:auto; display:block;
  transition:height var(--fast), opacity .35s var(--ease);
}
.brand .lg-dark{
  position:absolute; inset-block-start:50%; inset-inline-start:0;
  transform:translateY(-50%); opacity:0;
}
.nav.stuck .brand img{ height:34px }
.nav.stuck .brand .lg-light{ opacity:0 }
.nav.stuck .brand .lg-dark{ opacity:1 }
html[lang="ar"] .only-en, html[lang="en"] .only-ar{ display:none }

/* ── الروابط ── */
.nav-links{ display:flex; align-items:stretch; gap:2px; margin-inline-start:auto }
/* آخر رابط بيقف على الحرف من غير padding */
.nav-links > .nav-item:last-child > a,
.nav-links > .nav-item:has(+ .drawer-extra) > a{ padding-inline-end:0 }
.nav-links > .nav-item:last-child > a::after,
.nav-links > .nav-item:has(+ .drawer-extra) > a::after{ inset-inline:14px 0 }
.nav-item{ position:relative; display:flex }
.nav-item > a{
  position:relative; display:flex; align-items:center; gap:7px;
  height:var(--nav-h); padding-inline:17px;
  font-size:15.2px; font-weight:600; color:var(--ink-2);
  transition:color var(--fast), height var(--fast);
}
.nav.stuck .nav-item > a{ height:var(--nav-h-s) }
.nav-item > a::after{
  content:''; position:absolute; inset-block-end:-1px; inset-inline:14px;
  height:3px; border-radius:3px 3px 0 0; background:var(--blue);
  transform:scaleX(0); transition:transform .3s var(--ease), background var(--fast);
}
.nav-item > a:hover{ color:var(--navy) }
.nav-item > a:hover::after{ transform:scaleX(.45) }
.nav-item > a.active{ color:var(--navy); font-weight:700 }
.nav-item > a.active::after{ transform:scaleX(1) }

/* ألوان الروابط لمّا الشريط يبقى كحلي */
.nav.stuck .nav-item > a{ color:rgba(255,255,255,.72) }
.nav.stuck .nav-item > a:hover,
.nav.stuck .nav-item > a.active{ color:#fff }
.nav.stuck .nav-item > a::after{ background:var(--gold) }

/* سهم القايمة المنسدلة — حدود فيزيائية عشان مايتقلبش في RTL */
.caret{
  width:6px; height:6px; flex-shrink:0;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); margin-bottom:3px; opacity:.55;
  transition:transform .25s var(--ease);
}
.nav-item.has-drop:hover .caret{ transform:rotate(45deg) translate(2px,2px) }

/* ── القايمة المنسدلة ── */
.drop{
  position:absolute; inset-block-start:100%; inset-inline-start:0; z-index:5;
  min-width:272px; padding:8px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; transform:translateY(9px);
  transition:opacity var(--fast), transform var(--fast), visibility var(--fast);
}
.nav-item.has-drop:hover .drop,
.nav-item.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none }
.drop a{
  display:block; padding:11px 14px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:var(--ink-2);
  transition:background var(--fast), color var(--fast);
}
.drop a:hover{ background:var(--bg-2); color:var(--blue) }

.nav-act{ display:flex; align-items:center; gap:12px; flex-shrink:0 }

.nav-tel{ display:flex; align-items:center; gap:11px; padding-inline-start:16px; border-inline-start:1px solid var(--line) }
.nav-tel i{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--blue-l); display:grid; place-items:center; transition:var(--fast);
}
.nav-tel svg{ width:18px; height:18px; fill:var(--blue) }
.nav-tel:hover i{ background:var(--blue) }
.nav-tel:hover svg{ fill:#fff }
.nav-tel b{ display:block; font-size:12px; color:var(--mut); font-weight:600; line-height:1.35 }
.nav-tel span{ display:block; font-size:14.5px; color:var(--navy); font-weight:800; font-family:var(--f-en); line-height:1.35 }
.nav.stuck .nav-tel{ border-inline-start-color:rgba(255,255,255,.16) }
.nav.stuck .nav-tel b{ color:rgba(255,255,255,.6) }
.nav.stuck .nav-tel span{ color:#fff }

.nav-act .lang-btn{
  display:none;
  width:42px; height:42px; padding:0; border-radius:12px;
  border:1px solid var(--line);
}
.nav-act .lang-btn img{ width:26px; height:17.5px }
.nav-act .lang-btn:hover{ background:var(--bg-2); border-color:var(--navy) }
.nav.stuck .nav-act .lang-btn{ border-color:rgba(255,255,255,.3) }
.nav.stuck .nav-act .lang-btn:hover{ background:rgba(255,255,255,.1); border-color:#fff }

/* زر القايمة — تلات شرط عادية من غير صندوق، ومساحة لمس 44px
   والهامش السالب بيخلّي الأيقونة نفسها محاذية لحرف الشريط */
.burger{
  display:none; width:44px; height:44px;
  border:0; background:none; border-radius:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
  margin-inline-end:-12px;
}
.burger i{
  display:block; width:19px; height:1.5px; border-radius:2px;
  background:var(--navy); transition:var(--fast);
}
.nav.stuck .burger i{ background:#fff }
/* المسافة بين مركزَي الشرطة = 1.5 + 4 = 5.5px */
body.menu .burger i:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
body.menu .burger i:nth-child(2){ opacity:0; transform:scaleX(.4) }
body.menu .burger i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

/* ── الشريط الكحلي (تحت) — ثابت مابيتطويش ── */
.infobar{
  height:var(--top-h);
  background:var(--navy-d); color:rgba(255,255,255,.7);
  font-size:13px;
  border-block-end:1px solid rgba(255,255,255,.08);
}
.tb-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--top-h) }
.tb-left{ display:flex; align-items:center; gap:28px; min-width:0 }
.tb-i{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:color var(--fast) }
.tb-i svg{ width:14px; height:14px; fill:var(--gold); flex-shrink:0 }
a.tb-i:hover{ color:#fff }
.tb-right{ display:flex; align-items:center; gap:16px; flex-shrink:0 }
.tb-right .tb-social{ padding-inline-end:16px; border-inline-end:1px solid rgba(255,255,255,.16) }
.tb-social{ display:flex; align-items:center; gap:15px }
.tb-social a{ display:grid; place-items:center; opacity:.68; transition:var(--fast) }
.tb-social a svg{ width:15px; height:15px; fill:currentColor }
.tb-social a:hover{ opacity:1; color:var(--gold) }

/* مبدّل اللغة — علم بدل النص. الإطار بيفضل هو اللي بيدّي شكل الزر
   عشان العلم نفسه مايتلونش عند الهوفر. */
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:27px; padding-inline:6px; border-radius:8px;
  border:1px solid rgba(255,255,255,.28);
  transition:var(--fast);
}
.lang-btn img{ display:block; width:24px; height:16px; border-radius:2.5px }
.lang-btn:hover{ border-color:var(--gold); background:rgba(255,255,255,.08) }

.nav-scrim{
  position:fixed; inset:0; z-index:-1;
  background:rgba(15,37,68,.48); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:var(--fast);
}
body.menu .nav-scrim{ opacity:1; visibility:visible }

.drawer-extra{ display:none }

@media (max-width:1080px){ .nav-tel{ display:none } }
@media (max-width:980px){
  /* الشريط الكحلي بيفضل ظاهر — بس أقصر شوية وبخط أصغر */
  :root{ --top-h:36px }
  .infobar{ font-size:12.5px }
  .tb-in{ gap:12px }
  .tb-left{ gap:16px; overflow:hidden }
  .tb-right{ gap:12px }
  .tb-right .tb-social{ padding-inline-end:12px }
  .tb-social{ gap:13px }

  .brand, .nav-act{ position:relative; z-index:2 }

  /* الدراور بيبدأ تحت الهيدر مش وراه — عشان اللوجو مايختفيش
     لما الشريط يبقى كحلي واللوجو أبيض */
  .nav-links{
    position:fixed;
    inset-block-start:calc(var(--nav-h) + var(--top-h)); inset-block-end:0; inset-inline-end:0;
    width:min(84vw, 330px);
    background:var(--card);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:2px;
    padding:20px 20px 34px;
    box-shadow:var(--sh-3);
    transform:translateX(var(--dx, 110%));
    transition:transform .38s var(--ease), inset-block-start var(--fast);
    overflow-y:auto; overscroll-behavior:contain;
    margin-inline-start:0;
  }
  .nav.stuck .nav-links{ inset-block-start:calc(var(--nav-h-s) + var(--top-h)) }
  html[dir="rtl"] .nav-links{ --dx:-110% }
  body.menu .nav-links{ --dx:0 }

  .nav-item{ display:block }
  .nav-item > a{
    height:auto; padding:14px 16px; font-size:16.5px; border-radius:12px;
    border-block-end:1px solid var(--line);
  }
  /* إلغاء قاعدة الديسكتوب اللي بتشيل padding آخر رابط */
  .nav-links > .nav-item:last-child > a,
  .nav-links > .nav-item:has(+ .drawer-extra) > a{ padding-inline-end:16px }
  .nav-links > .nav-item:last-child > a::after,
  .nav-item > a::after{ display:none }
  .nav-item > a.active{ color:var(--blue); background:var(--blue-l); border-color:transparent }
  .nav.stuck .nav-item > a{ color:var(--ink-2) }
  .nav.stuck .nav-item > a.active{ color:var(--blue) }
  .caret{ display:none }

  /* المنسدلة بتبان مفتوحة جوه الدراور */
  .drop{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:4px 0 10px;
    background:none; border:0; box-shadow:none;
  }
  .drop a{
    padding:10px 16px 10px 30px; font-size:14.5px; color:var(--mut);
    border-radius:8px;
  }
  html[dir="rtl"] .drop a{ padding:10px 30px 10px 16px }
  .drop a::before{
    content:''; display:inline-block;
    width:5px; height:5px; border-radius:50%; background:var(--gold-s);
    margin-inline-end:9px; vertical-align:middle;
  }

  /* القايمة بقت دراور خارج الصف — فالأزرار محتاجة تروح للحرف بنفسها */
  .nav-act{ margin-inline-start:auto }
  .burger{ display:flex }

  .drawer-extra{ display:block; margin-block-start:22px; padding-block-start:22px; border-block-start:1px solid var(--line) }
  .dx-line{ display:flex; align-items:center; gap:11px; padding-block:9px; font-size:14.5px; color:var(--mut) }
  .dx-line svg{ width:17px; height:17px; fill:var(--blue); flex-shrink:0 }
  .dx-social{ display:flex; gap:8px; margin-block-start:16px }
  .dx-social a{
    width:38px; height:38px; border-radius:12px; background:var(--bg-2);
    display:grid; place-items:center; color:var(--ink-2); transition:var(--fast);
  }
  .dx-social a svg{ width:16px; height:16px; fill:currentColor }
  .dx-social a:hover{ background:var(--blue); color:#fff }
}
@media (max-width:420px){
  :root{ --nav-h:64px; --nav-h-s:58px }
  .brand img{ height:34px }
  .nav.stuck .brand img{ height:30px }
  .nav-act{ gap:8px }
  .nav-act .lang-btn{ width:40px; height:40px }
  .burger{ width:42px; height:42px; margin-inline-end:-11px }
  .burger i{ width:18px }
}


/* ══════════════════════════════════════════════════════════════
   الأزرار — مربّعة الحواف بلون صلب، والحركة في السهم بس
   ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  border-radius:12px;
  font-size:15.5px; font-weight:700;
  background:var(--navy); color:#fff;
  box-shadow:0 1px 2px rgba(25,55,98,.08), 0 6px 16px -8px rgba(25,55,98,.30);
  transition:background var(--fast), color var(--fast), box-shadow var(--fast), border-color var(--fast), transform .1s var(--ease);
}
/* السهم بيتّجه مع اتجاه القراءة */
.btn::after{
  content:'→'; font-family:var(--f-en); font-size:17px; line-height:1;
  transition:transform .28s var(--ease);
}
html[dir="rtl"] .btn::after{ content:'←' }
/* الهوفر أصفر في كل الأزرار — النص بيبقى كحلي لأن الأبيض مايتقراش على الأصفر */
.btn:hover{ background:var(--gold); color:var(--navy); box-shadow:0 2px 4px rgba(138,107,0,.12), 0 10px 22px -10px rgba(212,168,0,.65) }
.btn:hover::after{ transform:translateX(4px) }
html[dir="rtl"] .btn:hover::after{ transform:translateX(-4px) }
.btn:active{ transform:translateY(1px) }

/* الزر الأساسي — أزرق اللوجو */
.btn.primary{
  background:var(--blue);
  box-shadow:0 1px 2px rgba(32,100,174,.1), 0 6px 16px -8px rgba(32,100,174,.45);
}
.btn.primary:hover{ background:var(--gold); color:var(--navy) }

/* الزر الثانوي — أبيض بإطار */
.btn.ghost{
  background:var(--card); color:var(--navy);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn.ghost:hover{
  background:var(--gold); color:var(--navy);
  border-color:var(--gold);
  box-shadow:0 6px 16px -10px rgba(212,168,0,.6);
}

.btn.full{ display:flex; width:100% }

/* زر الهيدر الصغير — نفس الشكل من غير سهم */
.btn-sm{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:10px;
  font-size:14.5px; font-weight:700;
  background:var(--navy); color:#fff;
  transition:background var(--fast);
}
.btn-sm:hover{ background:var(--blue) }


/* ══════════ عناصر متكرّرة ══════════ */
.sec{ padding-block:var(--sec-y) }
.sec.alt{ background:var(--bg-2) }

.eye{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 12px; border-radius:100px;
  background:var(--blue-l); color:var(--blue-d);
  font-size:13.5px; font-weight:700;
  margin-block-end:18px;
}
.eye::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor }
.eye.n{    background:var(--navy-l);  color:var(--navy) }
.eye.g{    background:var(--green-l); color:var(--green) }
.eye.gold{ background:var(--gold-l);  color:var(--gold-d) }

.title{ font-size:clamp(29px, 4vw, 48px); font-weight:800 }
.title em{
  font-style:normal;
  /* الجراديانت متقصوص على النص، وصندوق الخلفية بيقف عند حدود الخط نفسه —
     فالهمزة اللي فوق (ؤ / أ) وذيول الحروف تحت بتتقص. البادينج الرأسي
     بيوسّع صندوق الرسم من غير ما يلمس التخطيط، لأن العنصر inline. */
  padding-block:.3em .2em;
  background:linear-gradient(100deg,var(--navy),var(--blue) 55%,var(--green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:clamp(16px, 1.5vw, 18px); color:var(--mut); max-width:62ch }

.head{ margin-block-end:clamp(38px, 5vw, 54px) }
/* مودِفاير اختياري لو حبيت رأس قسم في النص — مش مستعمل حالياً،
   كل رؤوس الأقسام على اليمين (بداية اتجاه القراءة) */
.head.center{ text-align:center; max-width:800px; margin-inline:auto }
.head.center .lede{ margin-inline:auto }

@media (max-width:600px){
  .title{ font-size:clamp(25px, 7.2vw, 32px) }
  .lede{ font-size:15.5px; line-height:1.8 }
  .head{ margin-block-end:30px }
  .eye{ font-size:12.5px; padding:6px 13px 6px 10px; margin-block-end:14px }
}


/* ══════════ الظهور التدريجي ══════════ */
html.anim .reveal{ opacity:0; transform:translateY(24px) }
html.anim .reveal.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease) }
html.anim .reveal:nth-child(2){ transition-delay:.07s }
html.anim .reveal:nth-child(3){ transition-delay:.14s }
html.anim .reveal:nth-child(4){ transition-delay:.21s }
html.anim .reveal:nth-child(5){ transition-delay:.28s }
html.anim .reveal:nth-child(6){ transition-delay:.35s }


/* ══════════ 1 · الرئيسية ══════════ */
.hero{
  position:relative; overflow:hidden;
  padding-block:calc(var(--nav-h) + var(--top-h) + 60px) clamp(60px, 8vw, 100px);
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(56% 50% at 84% 4%,  rgba(32,100,174,.20), transparent 62%),
    radial-gradient(48% 44% at 10% 14%, rgba(25,55,98,.13),   transparent 60%),
    radial-gradient(42% 40% at 66% 88%, rgba(7,102,51,.12),   transparent 62%),
    radial-gradient(36% 36% at 2% 88%,  rgba(252,217,22,.18), transparent 60%);
}
/* شبكة رفيعة جداً بتدي إحساس ورق هندسي */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(25,55,98,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,55,98,.05) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(72% 70% at 50% 38%, #000, transparent);
  -webkit-mask-image:radial-gradient(72% 70% at 50% 38%, #000, transparent);
}

.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 64px); align-items:center }
.hero h1{ font-size:clamp(36px, 5.6vw, 64px); letter-spacing:-.028em; margin-block-end:22px }
.hero h1 em{
  font-style:normal;
  padding-block:.3em .2em;   /* نفس سبب .title em — منع قص الهمزة والذيول */
  background:linear-gradient(100deg,var(--blue) 0%,var(--navy) 45%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-acts{ display:flex; gap:13px; flex-wrap:wrap; margin-block-start:34px }

/* الفيديو + إطار ذهبي مزحلق وراه */
.hero-media{ position:relative }
.hm-frame{
  position:absolute; inset:0; pointer-events:none;
  transform:translate(var(--fx, -22px), 22px);
  border:1.5px solid rgba(252,217,22,.85);
  border-radius:var(--r-xl);
}
html[dir="rtl"] .hm-frame{ --fx:22px }
.hm-shot{
  position:relative;
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-3);
  background:var(--navy-l);
}
.hm-shot video{ width:100%; aspect-ratio:4/3.2; object-fit:cover }

/* شريط المسارات التلاتة تحت الهيرو */
.hero-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-block-start:clamp(46px, 6vw, 72px);
  border-block-start:1px solid var(--line);
}
.hero-strip a{
  display:flex; align-items:center; gap:14px;
  padding:24px 22px;
  border-inline-start:1px solid var(--line);
  transition:background var(--fast);
}
.hero-strip a:first-child{ border-inline-start:0; padding-inline-start:0 }
.hero-strip a:hover{ background:rgba(255,255,255,.55) }
.hero-strip .n{
  flex-shrink:0;
  font-family:var(--f-en); font-size:12px; font-weight:800; letter-spacing:.1em;
  color:var(--gold-d);
}
.hero-strip b{ font-size:15.5px; color:var(--ink); font-weight:700; line-height:1.45; transition:color var(--fast) }
.hero-strip .ar{
  margin-inline-start:auto; flex-shrink:0;
  font-family:var(--f-en); font-style:normal; font-size:16px; color:var(--mut);
  transition:transform var(--fast), color var(--fast);
}
.hero-strip .ar::before{ content:'→' }
html[dir="rtl"] .hero-strip .ar::before{ content:'←' }
.hero-strip a:hover b{ color:var(--blue) }
.hero-strip a:hover .ar{ color:var(--blue); transform:translateX(var(--ax, 4px)) }
html[dir="rtl"] .hero-strip a:hover .ar{ --ax:-4px }

@media (max-width:900px){
  .hero{ padding-block:calc(var(--nav-h) + var(--top-h) + 38px) 50px }
  .hero-grid{ grid-template-columns:1fr; gap:30px }
  .hero-media{ order:-1 }
  .hm-shot video{ aspect-ratio:16/10 }
  .hm-frame{ display:none }
  .hero-strip{ grid-template-columns:1fr; margin-block-start:40px }
  .hero-strip a{
    border-inline-start:0; padding:17px 0;
    border-block-end:1px solid var(--line);
  }
  .hero-strip a:last-child{ border-block-end:0 }
  .hero-strip a:hover{ background:none }
}
@media (max-width:600px){
  .hero{ padding-block:calc(var(--nav-h) + var(--top-h) + 28px) 42px }
  .hero h1{ font-size:clamp(29px, 8.4vw, 38px) }
  .hero-acts{ gap:10px; margin-block-start:26px }
  .hero-acts .btn{ flex:1 1 auto; justify-content:center; padding:14px 18px; font-size:15px }
  .hero-strip .n{ font-size:11px }
  .hero-strip b{ font-size:15px }
}


/* ══════════════════════════════════════════════════════════════
   ترويسة الصفحات الداخلية — نفس خلفية الهيرو بس أقصر
   ══════════════════════════════════════════════════════════════ */
.pbanner{
  position:relative; overflow:hidden;
  padding-block:calc(var(--nav-h) + var(--top-h) + 52px) clamp(44px, 5.5vw, 68px);
  border-block-end:1px solid var(--line);
}
.pbanner::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(52% 60% at 88% 0%,  rgba(32,100,174,.18), transparent 62%),
    radial-gradient(44% 52% at 6% 10%,  rgba(25,55,98,.11),   transparent 60%),
    radial-gradient(40% 50% at 62% 96%, rgba(7,102,51,.11),   transparent 62%),
    radial-gradient(30% 40% at 24% 96%, rgba(252,217,22,.15), transparent 62%);
}
.pbanner::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(25,55,98,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25,55,98,.05) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(76% 80% at 50% 40%, #000, transparent);
  -webkit-mask-image:radial-gradient(76% 80% at 50% 40%, #000, transparent);
}

/* مسار التنقّل */
.crumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-block-end:16px; font-size:13.5px; color:var(--mut);
}
.crumb a{ transition:color var(--fast) }
.crumb a:hover{ color:var(--blue) }
.crumb i{ font-style:normal; opacity:.45 }
.crumb b{ color:var(--navy); font-weight:700 }

.pbanner h1{ font-size:clamp(31px, 4.6vw, 52px); letter-spacing:-.022em }
.pbanner h1 em{
  font-style:normal;
  padding-block:.3em .2em;   /* نفس سبب .title em — منع قص الهمزة والذيول */
  background:linear-gradient(100deg,var(--blue) 0%,var(--navy) 45%,var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pbanner p{ margin-block-start:14px; max-width:62ch; font-size:16.5px; color:var(--mut); line-height:1.85 }

@media (max-width:900px){ .pbanner{ padding-block:calc(var(--nav-h) + var(--top-h) + 36px) 44px } }
@media (max-width:600px){
  .pbanner{ padding-block:calc(var(--nav-h) + var(--top-h) + 26px) 34px }
  .pbanner h1{ font-size:clamp(26px, 7.4vw, 34px) }
  .pbanner p{ font-size:15.5px; line-height:1.8 }
  .crumb{ font-size:12.5px; margin-block-end:12px }
}


/* ══════════ دعوة بسيطة في آخر القسم ══════════ */
.sec-cta{
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; text-align:center;
  margin-block-start:clamp(40px, 5vw, 60px);
  padding-block-start:clamp(32px, 4vw, 44px);
  border-block-start:1px solid var(--line);
}
/* عرض محدود عشان السطر الطويل يتقسم بدل ما يمتد ويزقّ الزر للجنب */
.sec-cta p{ font-size:17px; color:var(--ink); font-weight:600; max-width:62ch }
@media (max-width:600px){
  .sec-cta{ flex-direction:column; gap:16px }
  .sec-cta p{ font-size:15.5px }
  .sec-cta .btn{ width:100%; justify-content:center }
}

/* ══════════ بلوك دعوة أكبر — بعنوان وسطر تحته ══════════
   بيقفل الرئيسية وصفحة من نحن. الماركب:
   <div class="cta-block reveal"><h3>…</h3><p>…</p><a class="btn primary">…</a></div> */
.cta-block{
  position:relative; overflow:hidden;
  margin-block-start:clamp(44px, 5.5vw, 66px);
  padding:clamp(32px, 4vw, 50px) clamp(26px, 4vw, 48px);
  border-radius:var(--r-l);
  background:var(--navy-d);
  text-align:center;
}
.cta-block::before{
  content:''; position:absolute; inset-block-start:-55%; inset-inline-start:-8%;
  width:44%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(252,217,22,.18), transparent 68%);
}
.cta-block::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, transparent, #000 70%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 70%);
}
.cta-block > *{ position:relative; z-index:1 }
.cta-block h3{ color:#fff; font-size:clamp(23px, 3vw, 32px); margin-block-end:12px }
.cta-block p{
  max-width:56ch; margin-inline:auto;
  color:rgba(255,255,255,.72); font-size:16px; line-height:1.85;
}
.cta-block .btn{ margin-block-start:26px }
@media (max-width:600px){
  .cta-block{ padding:30px 22px; border-radius:var(--r) }
  .cta-block p{ font-size:15px }
  .cta-block .btn{ width:100%; justify-content:center; margin-block-start:22px }
}
/* الزر جوه الكارت الكحلي = نفس الأزرق بتاع باقي الموقع، والهوفر أصفر زيهم.
   الظل بس أقوى شوية عشان يفصله عن الخلفية الكحلية. */
.cta-block .btn.primary{ box-shadow:0 10px 26px -12px rgba(0,0,0,.85) }


/* ══════════════════════════════════════════════════════════════
   2 · من نحن — رأس بعنوان والكلام تحته، بعده الرؤية والرسالة كبار،
   وتحتهم أربع نقاط بخطوط فاصلة رفيعة (بدل ستة كروت متشابهة)
   ══════════════════════════════════════════════════════════════ */
/* عمود واحد — العنوان فوق والكلام تحته على طول المقاسات */
.sec-head{
  display:grid; gap:clamp(20px, 2.2vw, 28px); justify-items:start;
  padding-block-end:30px; margin-block-end:clamp(32px, 4.5vw, 48px);
  border-block-end:1px solid var(--line);
}

/* الرؤية والرسالة — جنب بعض بنفس الارتفاع بالظبط */
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:stretch }
.pillar{
  position:relative; overflow:hidden;
  border-radius:var(--r-l);
  padding:clamp(28px, 3.2vw, 42px);
}
.pillar > *{ position:relative; z-index:1 }
.pillar .lbl{
  display:block; margin-block-end:18px;
  font-size:19px; font-weight:800; letter-spacing:.08em;
}
.pillar p{ font-size:clamp(15px, 1.35vw, 17px); line-height:1.8; font-weight:500 }

.pillar.dark{ background:var(--navy-d); color:#fff }
.pillar.dark .lbl{ color:var(--gold) }
.pillar.dark p{ color:rgba(255,255,255,.9) }
/* وهج ذهبي في الركن — علامة الاقتباس اتشالت */
.pillar.dark::after{
  content:''; position:absolute; inset-block-start:-45%; inset-inline-end:-18%;
  width:58%; aspect-ratio:1; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(252,217,22,.17), transparent 68%);
}

/* نسخة فاتحة — مش مستعملة دلوقتي (الرؤية والرسالة الاتنين كحلي).
   لو عايز ترجّع كارت أبيض، بدّل dark بـ light في الـHTML وبس. */
.pillar.light{ background:var(--card); border:1px solid var(--line) }
.pillar.light .lbl{ color:var(--blue) }
.pillar.light p{ color:var(--ink) }

@media (max-width:860px){ .pillars{ grid-template-columns:1fr } }

/* ── الأربع نقاط — رقم ضخم مفرّغ ورا كل واحدة، وبتتلوّن عند الهوفر ── */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-block-start:clamp(38px, 5vw, 60px);
  border-block-start:1px solid var(--line);
}
.fact{
  position:relative; overflow:hidden;
  padding:34px 24px 30px;
  border-inline-start:1px solid var(--line);
  border-radius:var(--r);
  transition:background var(--fast), transform var(--fast), box-shadow var(--fast);
}
/* أول وآخر خانة لازم كلامهم يبقى محاذي لحواف القسم بالظبط */
.fact:first-child{ border-inline-start:0; padding-inline-start:0 }
.fact:last-child{ padding-inline-end:0 }

/* الرقم المفرّغ */
.fact .n{
  position:absolute; z-index:0; pointer-events:none;
  inset-block-start:4px; inset-inline-end:10px;
  font-family:var(--f-en); font-size:78px; font-weight:800; line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--fc, var(--blue));
  opacity:.15;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.fact > *:not(.n){ position:relative; z-index:1 }

/* شرطة لون فوق العنوان بتطول مع الهوفر */
.fact h3{ font-size:17px; margin-block-end:10px }
.fact h3::before{
  content:''; display:block;
  width:26px; height:3px; border-radius:3px;
  background:var(--fc, var(--blue));
  margin-block-end:15px;
  transition:width .35s var(--ease);
}
.fact p{ font-size:14.5px; color:var(--mut); line-height:1.75 }

.fact:hover{ background:var(--card); transform:translateY(-5px); box-shadow:var(--sh-1) }
.fact:hover .n{ opacity:.42; transform:translateY(-5px) scale(1.04) }
.fact:hover h3::before{ width:48px }

@media (max-width:900px){
  .facts{ grid-template-columns:1fr 1fr }
  .fact{ padding-inline:20px }
  .fact:nth-child(odd){ border-inline-start:0; padding-inline-start:0 }
  .fact:nth-child(even){ padding-inline-end:0 }
  .fact:nth-child(n+3){ margin-block-start:24px; padding-block-start:30px; border-block-start:1px solid var(--line) }
}
@media (max-width:560px){
  .facts{ grid-template-columns:1fr }
  .fact{ border-inline-start:0; padding-inline:0 }
  .fact:nth-child(n+2){ margin-block-start:18px; padding-block-start:28px; border-block-start:1px solid var(--line) }
  .fact .n{ font-size:62px; inset-inline-end:2px }
  .pillar{ padding:26px 22px }
}


/* ══════════ 3 · خدماتنا ══════════ */
.srv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.srv{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.srv:hover{ transform:translateY(-8px); box-shadow:var(--sh-3); border-color:transparent }
/* شريط لون فوق الكارت */
.srv::before{
  content:''; position:absolute; inset-block-start:0; inset-inline:0; z-index:3;
  height:4px; background:var(--sc, var(--blue));
}
.srv figure{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2) }
.srv figure img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.srv:hover figure img{ transform:scale(1.06) }
.srv figure::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,37,68,.38) 0%, transparent 55%);
}
.srv .num{
  position:absolute; inset-block-end:16px; inset-inline-start:18px; z-index:2;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:14px;
  background:var(--sc, var(--blue)); color:var(--sc-fg, #fff);
  font-family:var(--f-en); font-size:15px; font-weight:800;
  box-shadow:0 10px 22px -8px rgba(15,37,68,.6);
}
.srv .in{ padding:26px 28px 30px }
.srv h3{ font-size:20px; margin-block-end:12px }
.srv p{ font-size:14.8px; color:var(--mut); line-height:1.85 }

/* "اعرف المزيد" تحت كل خدمة — بلون الكارت نفسه، والسهم بيتحرك مع الهوفر */
.srv .more{
  display:inline-flex; align-items:center; gap:8px;
  margin-block-start:16px;
  font-size:14.5px; font-weight:700; color:var(--sc, var(--blue));
  transition:gap var(--fast);
}
.srv .more::after{
  content:'→'; font-family:var(--f-en); font-size:15px; line-height:1;
  transition:transform .28s var(--ease);
}
html[dir="rtl"] .srv .more::after{ content:'←' }
.srv:hover .more::after{ transform:translateX(4px) }
html[dir="rtl"] .srv:hover .more::after{ transform:translateX(-4px) }
/* الكارت الأصفر — الأصفر مايتقراش على أبيض، فبنستعمل درجته الغامقة للنص */
.srv[style*="--gold"] .more{ color:var(--gold-d) }

@media (max-width:980px){ .srv-grid{ grid-template-columns:1fr; gap:18px } }
@media (max-width:600px){
  .srv figure{ aspect-ratio:16/9 }
  .srv .in{ padding:22px 20px 26px }
  .srv .num{ width:40px; height:40px; font-size:14px; inset-block-end:12px; inset-inline-start:14px }
  .srv h3{ font-size:18.5px }
  .srv p{ font-size:14.5px; line-height:1.8 }
  .srv .more{ margin-block-start:14px; font-size:14px }
  /* على اللمس مفيش hover — نخلّي الشريط اللوني ظاهر على طول */
  .srv::before{ transform:scaleX(1) }
}
/* أي جهاز باللمس: نلغي حركات الـhover اللي مالهاش معنى */
@media (hover:none){
  .srv:hover{ transform:none; box-shadow:var(--sh-1) }
  .srv:hover figure img{ transform:none }
  .fact:hover{ transform:none; box-shadow:none; background:none }
  .val:hover, .ct-social a:hover{ transform:none }
}


/* ══════════════════════════════════════════════════════════════
   4 · تواصل معنا — القسم كله صورة بطبقة كحلية، والفورم كارت فوقها
   ══════════════════════════════════════════════════════════════ */
/* أقصر من باقي الأقسام — كان طويل زيادة */
/* ══════════════════════════════════════════════════════════════
   صفحة التواصل — عمود واحد متمركز

   تلات كتل فوق بعض حوالين محور واحد: كروت القنوات، كارت النموذج،
   السوشيال. مفيش أعمدة غير متساوية — فمافيش فراغ جانبي ممكن يبان
   مكسور، والتخطيط بيشتغل بنفس الشكل سواء القنوات كارت واحد أو أربعة.
   ══════════════════════════════════════════════════════════════ */
.ct-sec{ padding-block:clamp(38px, 4.8vw, 70px) }

/* أضيق من --wrap: سطر الفورم الطويل مابيتقراش كويس */
.ct-col{ width:min(100%, 880px); margin-inline:auto }


/* ── ١ · كروت القنوات ──
   flex مش grid: الكارت الواحد بيقف بعرضه الطبيعي في النص، مش
   بيتشدّ على عرض الصف كله زي ما grid بتعمل. */
.ct-chan{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:14px;
  margin-block-end:clamp(24px, 3vw, 38px);
}
.ct-ch{
  flex:1 1 250px; max-width:340px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-radius:var(--r);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:border-color var(--fast), box-shadow var(--fast), transform .3s var(--ease);
}
a.ct-ch:hover{
  border-color:var(--cc, var(--blue));
  box-shadow:var(--sh-2);
  transform:translateY(-3px);
}
.ct-ch > i{
  width:42px; height:42px; flex-shrink:0;
  border-radius:12px; display:grid; place-items:center;
  background:var(--cc-l, var(--blue-l));
}
.ct-ch > i svg{ width:18px; height:18px; fill:var(--cc, var(--blue)) }
.ct-ch b{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mut);
}
.ct-ch span{
  display:block; margin-block-start:3px;
  font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.45;
  overflow-wrap:anywhere;   /* الإيميل الطويل مايكسرش الكارت */
}


/* ── ٢ · كارت النموذج ── */
.ct-card{
  padding:clamp(28px, 3.6vw, 52px);
  border-radius:var(--r-xl);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.ct-card h2{ text-align:center; font-size:clamp(24px, 2.7vw, 32px) }
.ct-card h2 em{ font-style:normal; color:var(--blue) }
.ct-lead{
  margin:12px auto 0; max-width:52ch; text-align:center;
  font-size:15.5px; line-height:1.8; color:var(--mut);
}
/* خط فاصل بين التعريف والحقول */
.ct-form{
  margin-block-start:clamp(24px, 3vw, 34px);
  padding-block-start:clamp(22px, 2.6vw, 30px);
  border-block-start:1px solid var(--line);
}


/* ── ٣ · السوشيال ── */
.ct-follow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-block-start:clamp(24px, 3vw, 38px);
}
.ct-follow > b{ font-size:13px; font-weight:700; color:var(--mut) }

/* الأيقونات: النسخة الأساسية بيضا على شفّاف (الفوتر كحلي)،
   وفي صفحة التواصل بتتقلب لنسخة فاتحة. */
.ct-social{ display:flex; gap:9px }
.ct-social a{
  width:42px; height:42px; border-radius:11px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
  color:#fff; transition:var(--fast);
}
.ct-social a svg{ width:17px; height:17px; fill:currentColor }
.ct-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy); transform:translateY(-3px) }

.ct-follow .ct-social a{ background:var(--card); border-color:var(--line); color:var(--navy) }
.ct-follow .ct-social a:hover{ background:var(--navy); border-color:var(--navy); color:#fff }


/* ── الحقول ── */
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.fld{ position:relative; display:block; margin-block-end:16px }
.fld > span{
  display:block; margin-block-end:8px;
  font-size:13.5px; font-weight:700; color:var(--navy);
  transition:color var(--fast);
}
.fld input, .fld textarea, .fld select{
  width:100%; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--bg); font-size:15px; color:var(--ink);
  transition:var(--fast); resize:vertical;
}
.fld input::placeholder, .fld textarea::placeholder{ color:var(--mut); opacity:.7 }
.fld input:focus, .fld textarea:focus, .fld select:focus{
  outline:0; border-color:var(--green); background:var(--card);
  box-shadow:0 0 0 4px var(--green-l);
}

/* القايمة المنسدلة — سهم مرسوم بالـCSS */
.fld select{ appearance:none; -webkit-appearance:none; padding-inline-end:42px; cursor:pointer }
.fld select:invalid{ color:var(--mut) }
.fld.sel::after{
  content:''; position:absolute;
  inset-block-end:21px; inset-inline-end:18px;
  width:8px; height:8px;
  border-right:2px solid var(--mut); border-bottom:2px solid var(--mut);
  transform:rotate(45deg); pointer-events:none;
}

.fld.err input, .fld.err textarea, .fld.err select{ border-color:var(--alert); box-shadow:0 0 0 4px var(--alert-l) }
.fld.err > span{ color:var(--alert) }
.ct-form .btn{ margin-block-start:8px }
.f-note{ margin-block-start:14px; font-size:14.5px; font-weight:600; color:var(--green); text-align:center; min-height:22px }
.f-note.bad{ color:var(--alert) }

@media (max-width:600px){
  .ct-card{ padding:26px 20px 30px; border-radius:var(--r-l) }
  .ct-lead{ font-size:15px }
  .ct-ch{ flex:1 1 100%; max-width:none }
  .f-row{ grid-template-columns:1fr; gap:0 }
}


/* ══════════════════════════════════════════════════════════════
   الفوتر — كحلي، يقفل الصفحة زي ما الشريط العلوي بيفتحها
   ══════════════════════════════════════════════════════════════ */
.foot{
  position:relative; overflow:hidden;
  background:var(--navy-d);
  border-block-start:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.62);
  /* أقصر من الأول — البيانات قليلة فمافيش داعي لفوتر طويل */
  padding-block:clamp(38px, 4.4vw, 58px) 0;
}
.foot::before{
  content:''; position:absolute; inset-block-start:-30%; inset-inline-end:-10%;
  width:42%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(252,217,22,.13), transparent 68%);
}

/* أربع أعمدة: الهوية · خارطة الموقع · خدماتنا · بيانات التواصل */
.foot-grid{
  position:relative; display:grid;
  grid-template-columns:1.7fr .85fr 1.2fr .95fr;
  gap:clamp(26px, 3vw, 44px);
}

/* اللوجو بنسخته البيضا — الملف مقصوص على حدود الرسمة،
   فحرفه اليمين بيقع على نفس خط الفقرة وسطر الحقوق تحت بالظبط */
.foot-plate{ display:block; margin-block-end:20px }
.foot-plate img{ height:clamp(42px, 3.8vw, 52px); width:auto }
.foot-p{ font-size:14px; color:rgba(255,255,255,.6); line-height:1.75 }

.foot h4{ color:var(--gold); font-size:15px; font-weight:800; letter-spacing:.05em; margin-block-end:16px }
.foot-grid > div > a:not(.foot-plate):not(.btn){
  display:block; font-size:14.5px; color:rgba(255,255,255,.66);
  padding-block:6px; transition:var(--fast);
}
.foot-grid > div > a:not(.foot-plate):not(.btn):hover{ color:#fff; transform:translateX(var(--fx,3px)) }
html[dir="rtl"] .foot-grid > div > a:not(.foot-plate):not(.btn):hover{ --fx:-3px }

/* السوشيال جوه الفوتر — جوه عمود بيانات التواصل */
.foot .ct-social{ margin-block-start:4px }
.foot .ct-social a{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); color:#fff;
}
.foot .ct-social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy) }

/* زر التواصل تحت السوشيال — ذهبي عشان يبان على الكحلي */
.foot-btn{
  margin-block-start:20px;
  padding:12px 22px; font-size:14.5px;
  background:var(--gold); color:var(--navy);
  box-shadow:0 8px 22px -12px rgba(138,107,0,.9);
}
.foot-btn:hover{ background:#fff; color:var(--navy) }

.foot-bar{
  position:relative;
  margin-block-start:34px; padding-block:20px;
  border-block-start:1px solid rgba(255,255,255,.13);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.45);
}

/* عمودين — الهوية بتاخد الصف كله عشان الفقرة ماتتزنقش */
@media (max-width:1040px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:30px 36px }
  .foot-brand{ grid-column:1 / -1 }
}
@media (max-width:560px){
  .foot{ padding-block:36px 0 }
  .foot-grid{ grid-template-columns:1fr; gap:26px }
  .foot-p{ max-width:none; font-size:14px }
  .foot h4{ font-size:14px; margin-block-end:10px }
  .foot-grid > div > a:not(.foot-plate):not(.btn){ padding-block:8px }
  .foot-btn{ display:flex; width:100%; margin-block-start:18px }
  .foot-bar{
    justify-content:center; text-align:center;
    margin-block-start:28px; gap:8px; font-size:12.5px; line-height:1.7;
  }
}


/* ══════════ الأزرار العائمة ══════════ */
.wa{
  position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 12px 28px -10px rgba(37,211,102,.9);
  transition:var(--fast);
}
.wa svg{ width:28px; height:28px; fill:#fff }
.wa:hover{ transform:translateY(-4px) scale(1.05) }

.to-top{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:90;
  width:46px; height:46px; border-radius:12px;
  background:rgba(15,37,68,.92); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center;
  box-shadow:0 10px 26px -12px rgba(15,37,68,.8);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:var(--fast);
}
.to-top.on{ opacity:1; visibility:visible; transform:none }
.to-top:hover{ background:var(--blue); border-color:var(--blue) }
/* حدود فيزيائية (top/left) مش منطقية — عشان السهم يفضل لفوق
   في العربي والإنجليزي. المنطقية كانت بتقلبه لجنب في RTL. */
.to-top i{
  width:9px; height:9px;
  border-top:2px solid #fff; border-left:2px solid #fff;
  transform:rotate(45deg); margin-top:3px;
}
@media (max-width:600px){
  .wa{ width:50px; height:50px; inset-block-end:18px; inset-inline-start:18px }
  .to-top{ width:42px; height:42px; inset-block-end:18px; inset-inline-end:18px }
}


/* ══════════ احترام تقليل الحركة ══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; scroll-behavior:auto !important }
  html.anim .reveal{ opacity:1; transform:none }
}