@charset "utf-8";
/* ==========================================================================
   ICG — المجموعة الاستشارية للتأمين
   نظام تصميم واحد. عربي (RTL). وضع فاتح فقط.
   قواعد ثابتة:
   1) مفيش أقسام مقلوبة — النص دايمًا var(--ink*) على خلفية فاتحة.
   2) كل المسافات من سلّم واحد (--s-1 … --s-7). ممنوع أرقام عشوائية.
   3) كل حركة لها نفس منحنى التسارع، وكلها تتوقف مع prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. الرموز (Design tokens) ---------- */
:root{
  /* الأسطح */
  --bg:#FFFFFF;
  --bg-2:#F6F9F7;          /* أقسام متبادلة */
  --bg-3:#EFF4F1;          /* أعمق شوية */
  --card:#FFFFFF;

  /* الحبر */
  --ink:#101A15;
  --ink-2:#3D4C45;
  /* ink-3 و ink-4 معايرين على 4.5:1 فوق --bg و --bg-2 — متفتّحهمش */
  --ink-3:#5E6E66;
  --ink-4:#6B7A73;

  /* الهوية */
  --brand:#00713F;
  --brand-2:#00854A;
  --brand-deep:#004D2B;
  --brand-soft:#EDF5F0;
  --brand-tint:#F6FAF8;
  --brand-on:#FFFFFF;

  /* القسم الأخضر الغامق — الاستثناء الوحيد المقصود لقاعدة «مفيش أقسام مقلوبة».
     الأزواج دي متحقّق منها: 11.2:1 و 7:1 فوق --brand-ink. */
  --brand-ink:#053B22;
  --brand-ink-2:#07301D;
  --on-ink:#EAF3EE;
  --on-ink-2:#A9C7B7;

  /* الحدود */
  --line:#E7EDEA;
  --line-2:#D6E0DA;

  /* الظلال — ناعمة ومتدرّجة، الاحترافية في الهدوء مش في القوة */
  --sh-1:0 1px 2px rgba(16,26,21,.04), 0 1px 1px rgba(16,26,21,.03);
  --sh-2:0 2px 4px rgba(16,26,21,.03), 0 8px 20px rgba(16,26,21,.05);
  --sh-3:0 4px 8px rgba(16,26,21,.04), 0 18px 40px rgba(16,26,21,.07);
  --sh-4:0 8px 16px rgba(16,26,21,.05), 0 32px 64px rgba(16,26,21,.09);
  --sh-brand:0 10px 24px color-mix(in srgb, var(--brand) 22%, transparent);

  /* الأنصاف الأقطار */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:28px; --r-full:999px;

  /* التخطيط */
  --maxw:1200px;
  --gut:clamp(22px, 5vw, 64px);

  /* سلّم المسافات — كل فراغ في الموقع بيطلع من هنا */
  --s-1:8px;
  --s-2:14px;
  --s-3:22px;
  --s-4:clamp(28px, 3.4vw, 40px);
  --s-5:clamp(40px, 5vw, 64px);
  --s-6:clamp(56px, 7vw, 92px);
  /* قسمان متجاوران = ضعف الرقم ده. 100 × 2 = 200px راحة على الديسكتوب. */
  --s-7:clamp(58px, 6.6vw, 100px);
  --sec:var(--s-7);

  /* سلّم الخط — سائل بالكامل، مفيش قفزات على الشاشات الوسيطة */
  --t-hero:clamp(2.05rem, 1.1rem + 3.9vw, 4.05rem);
  --t-h2:clamp(1.55rem, 1.1rem + 1.85vw, 2.5rem);
  --t-h3:clamp(1.12rem, 1rem + .5vw, 1.36rem);
  --t-h4:clamp(.78rem, .74rem + .16vw, .84rem);
  --t-lede:clamp(1.04rem, .97rem + .38vw, 1.24rem);
  --t-body:clamp(1rem, .97rem + .16vw, 1.07rem);
  --t-sm:.92rem;

  /* الحركة */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --d-fast:.2s;
  --d:.34s;
  --d-slow:.72s;

  color-scheme:light;
  accent-color:var(--brand);
}

/* ---------- 2. الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:clamp(88px,11vw,116px);
}

body{
  margin:0; direction:rtl;
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  font-size:var(--t-body); line-height:1.9; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","calt";
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0; font-weight:700; color:var(--ink);
  line-height:1.28; letter-spacing:-.018em; text-wrap:balance;
}
h1{font-size:var(--t-hero); line-height:1.13; letter-spacing:-.028em}
h2{font-size:var(--t-h2); line-height:1.22; letter-spacing:-.022em}
h3{font-size:var(--t-h3); line-height:1.45; letter-spacing:-.012em}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit; color:inherit}
b,strong{font-weight:700}
::selection{background:color-mix(in srgb,var(--brand) 20%,transparent); color:var(--ink)}

/* التركيز — للكيبورد فقط. مطلوب لإتاحة الوصول، ممنوع شيله. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); width:100%}
.sec{padding-block:var(--sec)}
.sec.alt{background:var(--bg-2); border-block:1px solid var(--line)}
.sec.tight{padding-block:var(--s-6)}

.skip{
  position:absolute; inset-inline-start:-9999px; top:12px; z-index:200;
  background:var(--brand); color:var(--brand-on);
  padding:14px 22px; border-radius:var(--r-sm); font-weight:600;
  box-shadow:var(--sh-3);
}
.skip:focus{inset-inline-start:12px}

/* ---------- 3. الحركة ---------- */
/* الظهور عند التمرير. مربوط بـ html.js — لو الجافاسكريبت وقع يفضل
   المحتوى ظاهر بدل ما الصفحة تطلع فاضية. */
.js .rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--d-slow) var(--ease-out) var(--rvd,0ms),
             transform var(--d-slow) var(--ease-out) var(--rvd,0ms);
  will-change:opacity, transform;
}
/* أنواع الظهور — لازم تتعرّف قبل قاعدة .in، وقاعدة .in لازم تبقى بنفس
   الوزن على الأقل، وإلا العنصر يفضل مزحزح أو مصغّر بعد ما يظهر. */
.js .rv[data-rv="fade"]{transform:none}
.js .rv[data-rv="scale"]{transform:scale(.965)}
.js .rv[data-rv="start"]{transform:translateX(28px)}
.js .rv[data-rv="end"]{transform:translateX(-28px)}
.js .rv.in,
.js .rv.in[data-rv]{opacity:1; transform:none; will-change:auto}

/* دخول الواجهة عند تحميل الصفحة — CSS خالص، من غير انتظار المراقب */
@keyframes riseIn{from{opacity:0; transform:translateY(26px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheen{to{transform:translateX(-260%)}}
@keyframes pulseDot{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(.72); opacity:.55}
}
@keyframes accBody{from{opacity:0; transform:translateY(-8px)}}
@keyframes drawIn{from{opacity:0; transform:translateY(-12px)}}

.js .hero .txt > *{animation:riseIn .82s var(--ease-out) both}
.js .hero .txt > *:nth-child(1){animation-delay:.06s}
.js .hero .txt > *:nth-child(2){animation-delay:.14s}
.js .hero .txt > *:nth-child(3){animation-delay:.22s}
.js .hero .txt > *:nth-child(4){animation-delay:.30s}
.js .hero .txt > *:nth-child(5){animation-delay:.38s}
.js .hero .shot{animation:riseIn 1s var(--ease-out) .2s both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1 !important; transform:none !important; transition:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- 4. عناصر مشتركة ---------- */
.eyebrow{
  display:inline-flex; width:fit-content; align-items:center; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; line-height:1;
  color:var(--brand); background:var(--brand-soft);
  padding:9px 16px; border-radius:var(--r-full);
  border:1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex:0 0 auto;
  animation:pulseDot 2.8s var(--ease-soft) infinite;
}

.lede{font-size:var(--t-lede); color:var(--ink-2); line-height:1.95; max-width:62ch}
.muted{color:var(--ink-2)}

.head{display:grid; gap:var(--s-3); margin-block-end:var(--s-5); max-width:68ch}
.head p{color:var(--ink-2); font-size:var(--t-lede); line-height:1.95}
/* خط رفيع تحت العنوان يكبر مع الظهور */
.head h2{position:relative; padding-block-end:var(--s-2)}
.head h2::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0;
  height:3px; width:0; border-radius:2px;
  background:linear-gradient(to left, var(--brand), color-mix(in srgb,var(--brand) 25%,transparent));
  transition:width 1s var(--ease-out) .15s;
}
.rv.in .head h2::after,.head.rv.in h2::after{width:64px}
.js .head:not(.rv) h2::after{width:64px}

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:.96rem; font-weight:600; line-height:1;
  padding:16px 30px; border-radius:var(--r-sm);
  border:1px solid transparent; background:var(--brand); color:var(--brand-on);
  box-shadow:var(--sh-1); cursor:pointer; text-align:center;
  transition:background var(--d-fast) var(--ease), box-shadow var(--d) var(--ease),
             transform var(--d) var(--ease), border-color var(--d-fast), color var(--d-fast);
}
/* لمعة خفيفة تمر على الزر عند المرور — لمسة واحدة، مش أكتر */
.btn::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:100%;
  width:55%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:translateX(0);
}
.btn:hover::before{animation:sheen .85s var(--ease-soft)}
.btn:hover{background:var(--brand-2); box-shadow:var(--sh-brand); transform:translateY(-2px)}
.btn:active{transform:translateY(0); box-shadow:var(--sh-1)}
.btn.soft{background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1)}
.btn.soft:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-tint); box-shadow:var(--sh-2)}
.btn.soft::before{display:none}
.btn.sm{padding:12px 22px; font-size:.9rem}
.btn.block{width:100%}
.btn i{font-style:normal; transition:transform var(--d) var(--ease)}
.btn:hover i{transform:translateX(-5px)}
.btns{display:flex; flex-wrap:wrap; gap:var(--s-2)}

/* ---------- 5. الصور ---------- */
.shot{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-3); background:var(--bg-2);
  aspect-ratio:4/3; isolation:isolate;
}
.shot.wide{aspect-ratio:16/9}
.shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.shot:hover img{transform:scale(1.045)}
/* الطبقة الخضراء الموحّدة — بتخلّي صور من مصادر مختلفة تبان جلسة تصوير واحدة */
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(200deg,
    color-mix(in srgb, var(--brand) 24%, transparent) 0%,
    color-mix(in srgb, var(--brand) 5%, transparent) 45%,
    transparent 70%);
  mix-blend-mode:multiply;
}

.imgsplit{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:center}
.imgsplit .txt{display:grid; gap:var(--s-3); align-content:start}
@media (max-width:880px){ .imgsplit{grid-template-columns:1fr; gap:var(--s-5)} }

/* ---------- 6. الترويسة ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-block-end:1px solid transparent;
  transition:border-color var(--d) var(--ease), box-shadow var(--d) var(--ease),
             background var(--d) var(--ease);
}
header.site.scrolled{
  border-block-end-color:var(--line);
  box-shadow:0 1px 24px rgba(16,26,21,.05);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
}
.bar{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  height:clamp(70px,8.5vw,88px);
  transition:height var(--d) var(--ease);
}
header.site.scrolled .bar{height:clamp(62px,7vw,72px)}

/* شريط تقدّم القراءة */
.prog{
  position:absolute; inset-block-end:-1px; inset-inline-start:0;
  height:2px; width:0; z-index:2;
  background:linear-gradient(to left, var(--brand), var(--brand-2));
  transition:width .12s linear;
}

.brand{flex:0 0 auto; display:flex; align-items:center}
.brand img{
  height:clamp(32px,4.6vw,42px); width:auto;
  transition:height var(--d) var(--ease);
}
header.site.scrolled .brand img{height:clamp(28px,3.8vw,34px)}

nav.main{display:flex; gap:2px; margin-inline-start:auto}
nav.main a{
  position:relative;
  font-size:.94rem; font-weight:500; color:var(--ink-2);
  padding:10px 15px; border-radius:var(--r-xs); white-space:nowrap;
  transition:color var(--d-fast) var(--ease);
}
/* خط يمتد من المنتصف بدل تغيير الخلفية — أهدأ وأنضف */
nav.main a::after{
  content:""; position:absolute; inset-block-end:2px;
  inset-inline:15px; height:2px; border-radius:2px;
  background:var(--brand);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--d) var(--ease);
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a[aria-current]{color:var(--brand); font-weight:600}
nav.main a[aria-current]::after{transform:scaleX(1)}

.hside{display:flex; align-items:center; gap:10px; margin-inline-start:auto}
@media (min-width:1051px){ .hside{margin-inline-start:0} }

.icobtn{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color var(--d-fast), color var(--d-fast),
             background var(--d-fast), transform var(--d-fast) var(--ease);
}
.icobtn:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-tint)}
.icobtn:active{transform:scale(.94)}
.icobtn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
#menuBtn{display:none}
#menuBtn .x{display:none}
#menuBtn[aria-expanded="true"] .bars{display:none}
#menuBtn[aria-expanded="true"] .x{display:block}

/* «اتصل بنا» بقت الطريق الوحيد لصفحة الاتصال على الديسكتوب — فلازم تفضل ظاهرة
   لحد ما القائمة الجانبية تشتغل (1050)، مش تختفي قبلها بـ130 بيكسل. */
.hcta{display:inline-flex}
@media (max-width:1050px){
  .hcta{display:none}
  nav.main{display:none}
  #menuBtn{display:grid}
}

/* قائمة الموبايل — تظهر بتلاشٍ وانزلاق، والروابط ورا بعضها */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:clamp(84px,13vw,108px) var(--gut) var(--s-5);
  overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden; opacity:0;
  transition:opacity var(--d) var(--ease), visibility 0s linear var(--d);
}
.drawer.open{visibility:visible; opacity:1; transition:opacity var(--d) var(--ease)}
.drawer nav{display:grid; gap:4px; max-width:var(--maxw); margin-inline:auto}
.drawer nav a{
  font-size:1.16rem; font-weight:600; padding:17px 20px; border-radius:var(--r-sm);
  color:var(--ink); border:1px solid transparent;
  opacity:0; transform:translateY(16px);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out),
             background var(--d-fast), color var(--d-fast);
}
.drawer.open nav a{opacity:1; transform:none}
.drawer.open nav a:nth-child(1){transition-delay:.06s}
.drawer.open nav a:nth-child(2){transition-delay:.11s}
.drawer.open nav a:nth-child(3){transition-delay:.16s}
.drawer.open nav a:nth-child(4){transition-delay:.21s}
.drawer.open nav a:nth-child(5){transition-delay:.26s}
.drawer.open nav a:nth-child(6){transition-delay:.31s}
.drawer nav a:hover{background:var(--bg-2)}
.drawer nav a[aria-current]{color:var(--brand); background:var(--brand-soft)}
/* لازم يبقى أقوى من `.drawer nav a` فوق، وإلا الزر الأخضر ياخد لون النص العادي */
.drawer nav a.btn{margin-block-start:var(--s-3); color:var(--brand-on); justify-content:center}
.drawer nav a.btn:hover{background:var(--brand-2)}
body.locked{overflow:hidden}

/* ---------- 7. الواجهة (Hero) ---------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:var(--s-6) var(--s-6);
  background-color:var(--bg);
  background-image:linear-gradient(180deg, var(--brand-tint) 0%, var(--bg) 62%);
}
.hero::before,.hero::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
}
.hero::before{
  inset-block-start:-32%; inset-inline-end:-14%;
  width:min(820px,88vw); aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 15%, transparent) 0%, transparent 66%);
}
.hero::after{
  inset-block-end:-46%; inset-inline-start:-18%;
  width:min(620px,72vw); aspect-ratio:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 68%);
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:var(--s-6); align-items:center}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:var(--s-5)} }
.hero .txt{display:grid; gap:var(--s-3); align-content:start; max-width:45ch}
.hero .txt .btns{margin-block-start:var(--s-1)}
.hero h1 .g{color:var(--brand)}
/* التدرّج جوّه @supports — من غير الحرس، متصفح ما بيدعمش background-clip:text
   يخلّي الكلمة شفافة تمامًا. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .g{
    background-image:linear-gradient(105deg, var(--brand-deep), var(--brand-2) 65%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* بطاقة الترخيص المتراكبة على الصورة — أول حاجة تثبت الجدية */
.shotwrap{position:relative}
.floatcard{
  position:absolute; inset-block-end:-26px; inset-inline-start:-18px; z-index:2;
  display:grid; gap:4px; max-width:min(280px,78%);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px 20px; box-shadow:var(--sh-4);
}
.floatcard b{
  display:flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:700; letter-spacing:.13em; color:var(--brand);
}
.floatcard b svg{width:15px; height:15px; stroke:var(--brand); fill:none; stroke-width:2; flex:0 0 auto}
.floatcard span{font-size:.9rem; color:var(--ink-2); line-height:1.65}
@media (max-width:940px){
  .floatcard{inset-inline-start:auto; inset-inline-end:14px; inset-block-end:-22px; max-width:min(300px,86%)}
}
@media (max-width:520px){ .floatcard{position:static; max-width:none; margin-block-start:14px; box-shadow:var(--sh-2)} }

.badge{
  display:inline-flex; width:fit-content; align-items:center; gap:11px; align-self:start;
  font-size:.83rem; font-weight:600; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-full);
  padding:10px 18px; box-shadow:var(--sh-2); line-height:1.5;
  transition:box-shadow var(--d) var(--ease), transform var(--d) var(--ease);
}
.badge:hover{box-shadow:var(--sh-3); transform:translateY(-1px)}
.badge svg{width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:2; flex:0 0 auto}

/* شريط الأرقام */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  margin-block-start:var(--s-6);
  box-shadow:var(--sh-2);
}
.stats div{
  background:var(--card); padding:var(--s-4) clamp(20px,2.6vw,32px);
  display:grid; gap:6px; align-content:start;
  transition:background var(--d) var(--ease);
}
.stats div:hover{background:var(--brand-tint)}
.stats b{
  font-size:clamp(1.85rem, 1.2rem + 1.9vw, 2.65rem); color:var(--brand);
  font-weight:700; line-height:1.05; letter-spacing:-.03em;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
}
.stats span{font-size:.88rem; color:var(--ink-3); font-weight:500; line-height:1.6}

/* ---------- 8. رأس الصفحات الداخلية ---------- */
.pagehero{
  padding-block:var(--s-5) 0; position:relative; overflow:hidden;
  background-color:var(--bg);
  background-image:linear-gradient(180deg, var(--brand-tint) 0%, var(--bg) 78%);
}
.pagehero::before{
  content:""; position:absolute; inset-block-start:-42%; inset-inline-start:-12%;
  width:min(700px,84vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 13%, transparent) 0%, transparent 68%);
}
.pagehero .wrap{position:relative}
.pagehero .head{margin-block-end:var(--s-4)}
.crumbs{
  font-size:.86rem; color:var(--ink-3); margin-block-end:var(--s-3);
  animation:fadeIn .6s var(--ease-out) both;
}
.crumbs a{padding-block:6px; transition:color var(--d-fast)}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin-inline:9px; opacity:.6}

/* شرائط التنقل داخل الصفحة */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-block-start:var(--s-4)}
.chips a{
  font-size:.89rem; font-weight:600; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-full);
  padding:10px 20px; box-shadow:var(--sh-1);
  transition:color var(--d-fast), border-color var(--d-fast), background var(--d-fast),
             transform var(--d-fast) var(--ease), box-shadow var(--d-fast);
}
.chips a:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-tint); transform:translateY(-2px); box-shadow:var(--sh-2)}
/* القسم اللي المستخدم واقف عنده حاليًا */
.chips a.active{color:var(--brand-on); background:var(--brand); border-color:var(--brand); box-shadow:var(--sh-brand)}

/* ---------- 9. البطاقات ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--s-3)}
/* أربع بطاقات = صف واحد، مش 3 + بطاقة يتيمة تحتهم.
   :has مدعوم في كل المتصفحات الحديثة، ولو مش مدعوم بيرجع للسلوك الافتراضي. */
@media (min-width:1000px){
  .cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
}
.card{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-4); display:grid; gap:var(--s-2); align-content:start;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--d) var(--ease), transform var(--d) var(--ease),
             border-color var(--d) var(--ease);
}
/* خط علوي بلون الهوية يظهر مع المرور */
.card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:linear-gradient(to left, var(--brand), var(--brand-2));
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--d) var(--ease);
}
.card:hover::before{transform:scaleX(1)}
.card:hover{box-shadow:var(--sh-3); transform:translateY(-4px); border-color:var(--line-2)}
.card p{color:var(--ink-2); font-size:.98rem; line-height:1.9}
.card .ico{
  width:50px; height:50px; border-radius:14px; background:var(--brand-soft);
  display:grid; place-items:center; margin-block-end:var(--s-1);
  transition:background var(--d) var(--ease), transform var(--d) var(--ease);
}
.card:hover .ico{background:var(--brand); transform:scale(1.06) rotate(-3deg)}
.card .ico svg{width:23px; height:23px; stroke:var(--brand); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--d)}
.card:hover .ico svg{stroke:var(--brand-on)}

/* البطاقة كلها رابط — منطقة النقر بالكامل، مش عنوان صغير جوّه بطاقة */
a.card{color:inherit}
a.card h3{transition:color var(--d) var(--ease)}
a.card:hover h3{color:var(--brand)}
a.card .more{
  margin-block-start:auto; padding-block-start:var(--s-1);
  color:var(--brand); font-weight:600; font-size:.94rem;
  display:inline-flex; align-items:center; gap:8px;
}
a.card .more i{font-style:normal; transition:transform var(--d) var(--ease)}
a.card:hover .more i{transform:translateX(-5px)}

/* بطاقات القيم — رقم بدل الأيقونة */
.card .num{
  font-size:.79rem; font-weight:700; letter-spacing:.12em; color:var(--brand);
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
}

/* قائمة المزايا المرقّمة */
.numlist{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:var(--s-2); counter-reset:n;
}
.numlist li{
  counter-increment:n; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-3) var(--s-3); padding-inline-start:74px;
  font-size:.99rem; line-height:1.85; color:var(--ink-2);
  box-shadow:var(--sh-1);
  transition:border-color var(--d) var(--ease), box-shadow var(--d) var(--ease),
             transform var(--d) var(--ease);
}
.numlist li:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); box-shadow:var(--sh-2); transform:translateY(-2px)}
.numlist li::before{
  content:counter(n,decimal); position:absolute;
  inset-block-start:20px; inset-inline-start:22px;
  width:36px; height:36px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-size:.87rem; font-weight:700;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
  transition:background var(--d) var(--ease), color var(--d) var(--ease);
}
.numlist li:hover::before{background:var(--brand); color:var(--brand-on)}

/* قائمة بعلامات ✓ */
.checks{display:grid; gap:var(--s-2)}
.checks li{position:relative; padding-inline-start:36px; color:var(--ink-2); line-height:1.85}
.checks li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.5em;
  width:21px; height:21px; border-radius:50%; background:var(--brand-soft);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300713F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}

/* ---------- 10. الأكورديون (details أصلي — بدون جافاسكريبت) ---------- */
.acc{display:grid; gap:var(--s-1)}
.acc details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh-1);
  transition:border-color var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.acc details:hover{border-color:var(--line-2)}
.acc details[open]{border-color:color-mix(in srgb,var(--brand) 30%,var(--line)); box-shadow:var(--sh-2)}
.acc summary{
  cursor:pointer; list-style:none;
  padding:var(--s-3) clamp(20px,2.8vw,30px);
  display:flex; align-items:center; gap:var(--s-2);
  font-weight:600; font-size:1.03rem; line-height:1.65; color:var(--ink);
  transition:color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--brand); background:var(--brand-tint)}
.acc summary::after{
  content:""; margin-inline-start:auto; flex:0 0 auto;
  width:11px; height:11px;
  border-inline-end:2px solid var(--ink-3); border-block-end:2px solid var(--ink-3);
  /* مقفول = سهم لتحت، مفتوح = سهم لفوق. الترتيب مهم: الإزاحة قبل الدوران. */
  transform:translateY(-3px) rotate(-45deg);
  transition:transform var(--d) var(--ease), border-color var(--d-fast);
}
.acc details[open] summary::after{transform:translateY(2px) rotate(135deg); border-color:var(--brand)}
.acc details[open] summary{color:var(--brand)}
.acc .body{
  padding:0 clamp(20px,2.8vw,30px) var(--s-4);
  color:var(--ink-2); display:grid; gap:var(--s-2);
  animation:accBody .38s var(--ease-out) both;
}
.acc .body h4{font-size:var(--t-h4); letter-spacing:.11em; color:var(--brand); font-weight:700}
.acc .n{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-size:.85rem; font-weight:700;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
  transition:background var(--d) var(--ease), color var(--d) var(--ease);
}
.acc details[open] .n,.acc summary:hover .n{background:var(--brand); color:var(--brand-on)}

/* ---------- 10ب. جملة موقف ---------- */
/* الحتة اللي بتقول للزائر إحنا مين في سطر واحد. مش بطاقة — بيان. */
.statement{
  display:grid; gap:var(--s-3); justify-items:start;
  border-inline-start:4px solid var(--brand); padding-inline-start:var(--s-4);
  max-width:56ch;
}
.statement q{
  /* المسافات حوالين + إلزامية جوّه clamp — من غيرها السطر كله يُهمل */
  quotes:none; font-size:clamp(1.4rem, 1rem + 1.65vw, 2.15rem);
  font-weight:700; line-height:1.4; letter-spacing:-.02em; color:var(--ink);
  text-wrap:balance;
}
.statement q .g{color:var(--brand)}
.statement p{color:var(--ink-2); font-size:var(--t-lede); line-height:1.95}

/* ---------- 10ج. خطوات العمل ---------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);
  position:relative; counter-reset:s;
}
.step{position:relative; display:grid; gap:var(--s-2); align-content:start}
/* الخيط بين كل خطوة واللي بعدها — مرسوم من الدايرة لحد العمود التالي،
   عشان ما يزوّغش برّه أول وآخر دايرة. */
.step::after{
  content:""; position:absolute; z-index:0;
  inset-block-start:26px; height:2px;
  inset-inline-start:62px; inset-inline-end:calc(var(--s-3) * -1);
  background:linear-gradient(to left,
    color-mix(in srgb,var(--brand) 38%,transparent),
    color-mix(in srgb,var(--brand) 14%,transparent));
}
.step:last-child::after{display:none}
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:50%;
  background:var(--card); border:2px solid var(--brand); color:var(--brand);
  display:grid; place-items:center;
  font-size:.92rem; font-weight:700; letter-spacing:.02em;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--bg);
  transition:background var(--d) var(--ease), color var(--d) var(--ease),
             transform var(--d) var(--ease);
}
.sec.alt .step::before{box-shadow:0 0 0 6px var(--bg-2)}
.step:hover::before{background:var(--brand); color:var(--brand-on); transform:scale(1.06)}
.step h3{font-size:1.06rem}
.step p{color:var(--ink-2); font-size:.97rem; line-height:1.9}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-3)}
  .step::after{display:none}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ---------- 11. الشريط الأخضر الغامق ---------- */
.band{
  position:relative; overflow:hidden;
  /* لون صريح تحت التدرّج — لو التدرّج ما اتحمّلش لأي سبب، الخلفية تفضل غامقة
     والنص الفاتح يفضل مقروء. */
  background-color:var(--brand-ink);
  background-image:linear-gradient(150deg, var(--brand-ink) 0%, var(--brand-ink-2) 100%);
  color:var(--on-ink);
  padding-block:var(--s-6);
}
.band::before,.band::after{content:""; position:absolute; pointer-events:none}
.band::before{
  inset-block-start:-55%; inset-inline-start:-8%;
  width:min(720px,80vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(60,187,128,.16) 0%, transparent 66%);
}
/* شبكة خطوط رفيعة — تفصيلة بتدي إحساس مؤسسي من غير صور */
.band::after{
  inset:0; opacity:.5;
  background-image:linear-gradient(to left, rgba(234,243,238,.055) 1px, transparent 1px);
  background-size:56px 100%;
}
.band .wrap{position:relative; z-index:1}
.band h2,.band h3{color:var(--on-ink)}
.band p{color:var(--on-ink-2); font-size:var(--t-lede); line-height:1.95; max-width:58ch}
/* لون صريح (مش شفاف) عشان التباين يبقى مضمون ومقيس: 8.5:1 */
.band .eyebrow{
  color:var(--on-ink);
  background:color-mix(in srgb, var(--on-ink) 10%, var(--brand-ink));
  border-color:color-mix(in srgb, var(--on-ink) 22%, var(--brand-ink));
}
.band .eyebrow::before{background:#63D39C}
.band .btn{background:var(--on-ink); color:var(--brand-ink); box-shadow:none}
.band .btn:hover{background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.28)}
.band .btn.soft{background:transparent; color:var(--on-ink); border-color:rgba(234,243,238,.34)}
.band .btn.soft:hover{background:rgba(234,243,238,.08); border-color:var(--on-ink); color:var(--on-ink)}

.band-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-5); align-items:center}
@media (max-width:880px){ .band-grid{grid-template-columns:1fr; gap:var(--s-4)} }
.band-grid .txt{display:grid; gap:var(--s-3); align-content:start; justify-items:start}

/* أرقام داخل الشريط — لوح محدّد، مش قائمة سايبة في الفراغ */
.band .facts{
  display:grid; align-content:center;
  background:color-mix(in srgb, var(--on-ink) 5%, var(--brand-ink));
  border:1px solid color-mix(in srgb, var(--on-ink) 14%, var(--brand-ink));
  border-radius:var(--r); padding:var(--s-3) var(--s-4);
}
.band .facts div{
  display:flex; align-items:baseline; gap:16px;
  padding-block:var(--s-3);
  border-block-end:1px solid color-mix(in srgb, var(--on-ink) 12%, var(--brand-ink));
}
.band .facts div:first-child{padding-block-start:var(--s-2)}
.band .facts div:last-child{border-block-end:0; padding-block-end:var(--s-2)}
.band .facts b{
  font-size:clamp(1.5rem, 1.1rem + 1.2vw, 2rem); color:var(--on-ink); line-height:1;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
  flex:0 0 auto; min-width:4.2ch; text-align:start;
}
.band .facts span{color:var(--on-ink-2); font-size:.95rem; line-height:1.6; flex:1 1 auto}

/* ---------- 11ب. شريط الدعوة الفاتح ---------- */
.cta{
  position:relative; overflow:hidden;
  background-color:var(--brand-soft);
  background-image:linear-gradient(150deg, var(--brand-soft) 0%, var(--brand-tint) 100%);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius:var(--r-lg); padding:var(--s-6) var(--s-5);
  display:grid; gap:var(--s-3); justify-items:center; text-align:center;
  box-shadow:var(--sh-2);
}
.cta::before{
  content:""; position:absolute; inset-block-start:-60%; inset-inline-start:50%;
  translate:-50% 0; width:min(680px,120%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 11%, transparent) 0%, transparent 65%);
}
.cta > *{position:relative}
.cta p{color:var(--ink-2); font-size:var(--t-lede); max-width:56ch}
.cta .btns{margin-block-start:var(--s-1)}

/* ---------- 12. اتصل بنا ---------- */
.contact-grid{display:grid; grid-template-columns:1fr .82fr; gap:var(--s-5); align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr} }

form.icg{display:grid; gap:var(--s-3)}
.field{display:grid; gap:9px}
.field label{font-size:.91rem; font-weight:600; color:var(--ink-2)}
.field label .req{color:var(--brand)}
.field input,.field textarea{
  width:100%; background:var(--card); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:15px 18px; font-size:1rem; line-height:1.7;
  transition:border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease),
             background var(--d-fast);
}
.field textarea{min-height:165px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:hover,.field textarea:hover{border-color:var(--ink-4)}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); background:var(--bg);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#C4453B}
.hp{position:absolute; inset-inline-start:-9999px; opacity:0}      /* مصيدة سبام */
.formnote{font-size:.86rem; color:var(--ink-3)}
.alert{
  padding:16px 20px; border-radius:var(--r-sm); font-size:.95rem; line-height:1.75;
  border:1px solid; animation:drawIn .45s var(--ease-out) both;
}
.alert.ok{background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 32%,transparent); color:var(--ink)}
.alert.err{background:color-mix(in srgb,#C4453B 8%,var(--card)); border-color:color-mix(in srgb,#C4453B 32%,transparent); color:var(--ink)}

.infocard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-4); display:grid; gap:var(--s-3); box-shadow:var(--sh-2);
}
.infoitem{display:flex; gap:15px; align-items:flex-start}
.infoitem svg{width:20px; height:20px; stroke:var(--brand); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; margin-block-start:6px}
.infoitem b{display:block; font-size:var(--t-h4); font-weight:700; letter-spacing:.1em; color:var(--ink-3); margin-block-end:4px}
.infoitem a,.infoitem span{color:var(--ink); font-weight:500; line-height:1.75}
.infoitem a{transition:color var(--d-fast)}
.infoitem a:hover{color:var(--brand)}
.ltr{direction:ltr; display:inline-block; unicode-bidi:isolate}

/* ---------- 13. التذييل ---------- */
/* من غير margin علوي — القسم الأخير (.sec) عنده padding سفلي بالفعل */
footer.site{
  background:var(--bg-2); border-block-start:1px solid var(--line);
  padding-block:var(--s-6) var(--s-4);
}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1.15fr; gap:var(--s-5)}
@media (max-width:800px){ .fgrid{grid-template-columns:1fr; gap:var(--s-4)} }
.fgrid h4{font-size:var(--t-h4); letter-spacing:.13em; color:var(--ink-3); font-weight:700; margin-block-end:var(--s-2)}
.fgrid img{height:38px; width:auto; margin-block-end:var(--s-2)}
.fgrid p{color:var(--ink-2); font-size:var(--t-sm); line-height:1.9; max-width:42ch}
.fgrid nav{display:grid; gap:2px; justify-items:start}
/* مساحة لمس مريحة على الموبايل — الرابط نفسه أقصر من 44px */
.fgrid nav a{
  position:relative; color:var(--ink-2); font-size:var(--t-sm); padding-block:9px;
  transition:color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.fgrid nav a:hover{color:var(--brand); transform:translateX(-3px)}
.fbot{
  margin-block-start:var(--s-5); padding-block-start:var(--s-3);
  border-block-start:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-size:.86rem; color:var(--ink-3);
}
.fbot a{transition:color var(--d-fast)}
.fbot a:hover{color:var(--brand)}

/* ---------- 14. تفاصيل ---------- */
.src{
  font-size:.89rem; color:var(--ink-3); line-height:1.85;
  border-inline-start:3px solid var(--brand); padding-inline-start:20px;
  background:var(--bg-2); padding-block:var(--s-2); padding-inline-end:var(--s-3);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.src a{color:var(--brand); font-weight:600; transition:color var(--d-fast)}
.src a:hover{color:var(--brand-deep)}

/* زرار واتساب عائم — بلون واتساب الرسمي عمدًا مش لون العلامة، عشان يتعرف من
   أول نظرة. الحجم 56px = أكبر من الحد الأدنى للمس (44px) بهامش مريح. */
.wa{
  position:fixed; z-index:60;
  inset-block-end:clamp(16px, 3vw, 26px);
  inset-inline-start:clamp(16px, 3vw, 26px);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
  transition:transform var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.wa svg{width:31px; height:31px; fill:currentColor}
.wa:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 12px 28px rgba(0,0,0,.26)}
.wa:active{transform:translateY(-1px) scale(1.01)}
/* نبضة خفيفة مرة واحدة بعد التحميل — بتلفت النظر من غير ما تفضل شغالة وتضايق */
.js .wa{animation:waIn .5s var(--ease-out) .9s both}
@keyframes waIn{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .js .wa{animation:none} }

@media print{
  header.site,footer.site,.drawer,.btn,.icobtn,.chips,.prog,.wa{display:none !important}
  body{background:#fff; color:#000}
  .acc details{break-inside:avoid}
  .acc .body{animation:none}
}