/* ==========================================================================
   سرايا | Saraya Clean  —  Theme Stylesheet
   مؤسسة فريد الأمان | مكافحة حشرات وتعقيم — الرياض
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* خلفيات (Backgrounds) — 003F88 · 00509D */
  --bg-1:#003F88;
  --bg-2:#00509D;
  --bg-3:#0066C7;
  --bg-deep:#00295C;
  --bg-night:#001B3F;

  /* عناصر (Elements) — FDC500 · FFD500 */
  --el-1:#FDC500;
  --el-2:#FFD500;
  --el-3:#FFE04D;
  --ink:#051C3B;
  --ink-2:#0A2C58;

  /* أسطح */
  --paper:#ffffff;
  --paper-2:#F1F6FC;
  --paper-3:#E3EDF9;
  --line:rgba(5,28,59,.12);
  --line-2:rgba(255,255,255,.16);

  /* نص */
  --tx:#051C3B;
  --tx-soft:#4B6485;
  --tx-inv:#ffffff;
  --tx-inv-soft:rgba(255,255,255,.84);

  /* شكل */
  --r-pill:999px;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:8px;

  /* مقاسات */
  --wrap:1280px;
  --gut:clamp(18px,4vw,48px);

  /* ظل */
  --sh-1:none;
  --sh-2:none;
  --sh-amber:none;

  /* تدرّجات */
  --grad-brand:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 58%,var(--bg-3) 100%);
  --grad-amber:linear-gradient(135deg,var(--el-1) 0%,var(--el-2) 100%);

  /* خطوط */
  --f-disp:"Cairo","Segoe UI",Tahoma,sans-serif;
  --f-body:"Cairo","Segoe UI",Tahoma,sans-serif;

  --hd-h:88px;
}

/* ---------- 2. Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--f-body);font-size:16px;line-height:1.9;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{
  font-family:var(--f-disp);font-weight:800;margin:0;
  /* Cairo يحتاج تنفّساً أكثر: صاعداته وهابطاته أطول من الخطوط اللاتينية */
  line-height:1.42;letter-spacing:-.012em;
}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--el-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--el-2);color:var(--ink)}

.sr-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* مقياس الخط */
.t-hero{font-size:clamp(1.85rem,4.3vw,3.3rem);line-height:1.3;letter-spacing:-.02em}
.t-xxl {font-size:clamp(1.5rem,2.85vw,2.25rem);line-height:1.38;letter-spacing:-.015em}
.t-xl  {font-size:clamp(1.3rem,2.15vw,1.8rem);line-height:1.42}
.t-lg  {font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.5}

/* الترقيم اللاتيني داخل النص العربي */
.num{font-family:var(--f-disp);font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}

/* ---------- 3. الشعار النصي ---------- */
.sr-logo{display:flex;align-items:center;gap:10px;line-height:1}
.sr-logo__mark{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:var(--grad-amber);position:relative;
  display:grid;place-items:center;
}
.sr-logo__mark svg{width:26px;height:26px;display:block}
.sr-logo__tx{display:flex;flex-direction:column;gap:1px}
.sr-logo__ar{font-family:var(--f-disp);font-weight:800;font-size:1.2rem;letter-spacing:0;white-space:nowrap}
.sr-logo__en{font-family:var(--f-disp);font-weight:500;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.7;direction:ltr;white-space:nowrap}

/* ---------- 4. أزرار ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-disp);font-weight:700;font-size:.98rem;
  padding:.86em 1.6em;border-radius:var(--r-pill);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s;
  white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;flex:0 0 auto}
.btn:hover{transform:translateY(-2px)}
.btn--amber{background:var(--grad-amber);color:var(--ink);}
.btn--white{background:#fff;color:var(--bg-1);}
.btn--ink{background:var(--ink);color:#fff}
.btn--ghost{border:1.5px solid var(--line-2);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{border:1.5px solid var(--line);color:var(--bg-1)}
.btn--outline:hover{border-color:var(--bg-1);background:var(--paper-2)}
.btn--lg{padding:.86em 1.6em;font-size:.97rem}
.btn--block{width:100%;justify-content:center}
.btn--wa{background:#25D366;color:#053b1a}

/* دائرة أيقونة */
.icb{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:#fff;transition:.25s;flex:0 0 44px;
}
.icb svg{width:19px;height:19px}
.icb:hover{background:#fff;color:var(--bg-1);border-color:#fff}

/* ---------- 5. الترويسة (مطابقة للمرجع) ---------- */
.sr-hd{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:97;
  height:var(--hd-h);display:flex;align-items:center;
  transition:background .35s,height .35s;
}
.sr-hd__in{width:100%;max-width:1420px;margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.sr-hd__nav{display:flex;align-items:center;gap:12px}
.sr-hd a,.sr-hd button{color:#fff}
/* على الصفحات الداخلية — شفافة جزئياً قبل التمرير */
.sr-hd--inner{background:rgba(0,27,63,.62);backdrop-filter:blur(10px)}
/*
 * حالة التمرير — أولوية أعلى (كلاسان) لتتجاوز .sr-hd--inner،
 * وإلا بقيت الترويسة شبه شفافة في الصفحات الداخلية فيظهر العنوان من خلفها.
 */
.sr-hd.sr-hd--solid{
  background:rgba(0,20,48,.97);backdrop-filter:blur(16px);
  border-block-end:1px solid rgba(255,255,255,.12);
  height:74px;
}

.burger{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.42);
  display:grid;place-items:center;gap:5px;align-content:center;transition:.25s;background:rgba(255,255,255,.06)}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.burger:hover{background:#fff}
.burger:hover span{background:var(--bg-1)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.pill-help{
  display:inline-flex;align-items:center;gap:.5em;height:46px;padding:0 1.25em;
  border-radius:var(--r-pill);border:1.5px solid rgba(255,255,255,.42);
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;transition:.25s;background:rgba(255,255,255,.06)
}
.pill-help:hover{background:#fff;color:var(--bg-1)}

/* القائمة الجانبية (Side Drawer — 50% من الصفحة) */
.sr-menu{position:fixed;inset:0;z-index:95;pointer-events:none}
.sr-menu.is-open{pointer-events:auto}

/* الخلفية المعتّمة */
.sr-menu__bd{
  position:absolute;inset:0;
  background:rgba(0,27,63,.62);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .42s ease;
}
.sr-menu.is-open .sr-menu__bd{opacity:1}

/* اللوح — نصف عرض الشاشة، ينزلق من الحرف (يمين في RTL) */
.sr-menu__panel{
  position:absolute;inset-block:0;inset-inline-start:0;
  width:min(50vw,540px);
  padding:calc(var(--hd-h) + 14px) clamp(22px,2.6vw,38px) 44px;
  background:linear-gradient(200deg,#00295C 0%,var(--bg-night) 78%);
  border-inline-end:1px solid rgba(255,213,0,.3);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);            /* RTL: مخفي إلى اليمين */
  transition:transform .5s cubic-bezier(.62,0,.24,1);
}
.sr-menu.is-open .sr-menu__panel{transform:none}
@media(max-width:960px){.sr-menu__panel{width:min(88vw,400px)}}

/* زر الإغلاق */
.sr-menu__x{
  position:absolute;inset-block-start:calc(var(--hd-h) - 46px);inset-inline-end:clamp(18px,2vw,26px);
  z-index:4;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  transition:background .28s,color .28s,border-color .28s,transform .3s cubic-bezier(.2,.7,.3,1);
}
.sr-menu__x svg{width:17px;height:17px}
.sr-menu__x:hover,.sr-menu__x:focus-visible{
  background:var(--el-2);color:var(--ink);border-color:transparent;transform:rotate(90deg);
}

/* عناوين المجموعات */
.sr-menu__lbl{
  display:block;font-family:var(--f-disp);font-size:.64rem;font-weight:700;
  letter-spacing:.24em;color:var(--el-2);text-transform:uppercase;
  margin:0 0 12px;
}
.sr-menu__lbl:not(:first-of-type){margin-block-start:30px}

/* روابط الخدمات — مصغّرة */
.sr-menu__list li+li{border-block-start:1px solid rgba(255,255,255,.08)}
.sr-menu__list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:.62em 0;font-family:var(--f-disp);font-weight:600;color:#fff;
  font-size:clamp(.94rem,1.15vw,1.06rem);line-height:1.5;transition:.28s;
}
.sr-menu__list a span.i{color:var(--el-2);display:grid;place-items:center;opacity:0;transform:translateX(8px);transition:.28s}
.sr-menu__list a span.i svg{width:15px;height:15px}
.sr-menu__list a:hover,.sr-menu__list a:focus-visible{color:var(--el-2);padding-inline-start:9px}
.sr-menu__list a:hover span.i,.sr-menu__list a:focus-visible span.i{opacity:1;transform:translateX(0)}

/* الأزرار */
.sr-menu__acts{display:grid;gap:9px;margin-block-start:24px}
.sr-menu__acts .btn{font-size:.92rem;padding:.78em 1.3em}

/* روابط الصفحات */
.sr-menu__pages{display:grid;gap:2px}
.sr-menu__pages a{
  display:block;padding:.42em 0;font-size:.9rem;
  color:rgba(255,255,255,.7);transition:.25s;
}
.sr-menu__pages a:hover{color:var(--el-2);padding-inline-start:8px}

/* التواصل */
.sr-menu__ct{display:grid;gap:9px}
.sr-menu__ct a,.sr-menu__ct p{
  display:flex;align-items:center;gap:.6em;margin:0;
  font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.6;transition:.25s;
}
.sr-menu__ct svg{width:16px;height:16px;flex:0 0 16px;color:var(--el-2)}
.sr-menu__ct a:hover{color:#fff}
.sr-menu__ct b{font-family:var(--f-disp);font-size:1.06rem;color:var(--el-2);letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){
  .sr-menu__panel,.sr-menu__bd{transition:none}
}

/* ---------- 6. الهيرو (Hero) ---------- *//* ---------- 6. الهيرو (Hero) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-night)}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero__slide.is-on{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(0,27,63,.96) 0%,rgba(0,27,63,.86) 30%,rgba(0,27,63,.5) 62%,rgba(0,27,63,.62) 100%),
    linear-gradient(to top,rgba(0,27,63,.9) 0%,rgba(0,27,63,.25) 52%,transparent 72%);
}
.hero__body{position:relative;z-index:2;width:100%;padding-block:0 clamp(84px,12vh,148px)}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.6em;color:#fff;
  font-family:var(--f-disp);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  margin-bottom:15px;opacity:.92;
}
.hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--el-2);display:block}
/* h1 للشريحة الأولى و p للبقية — نفس الشكل تماماً */
.hero .t-hero{
  color:#fff;max-width:20ch;margin:0;
  font-family:var(--f-disp);font-weight:800;letter-spacing:-.025em;
}
.hero .t-hero em{font-style:normal;color:var(--el-2)}
.hero__sub{
  color:rgba(255,255,255,.9);max-width:48ch;margin:18px 0 28px;font-size:1rem;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px}
.hero__dots{
  display:flex;gap:9px;margin-block-start:30px;
}
.hero__dots button{
  width:34px;height:5px;border-radius:5px;
  background:rgba(255,255,255,.34);border:0;
  transition:width .35s cubic-bezier(.2,.7,.3,1),background .3s;
}
.hero__dots button:hover{background:rgba(255,255,255,.6)}
.hero__dots button.is-on{background:var(--grad-amber);width:58px}

/* شريط الثقة أسفل الهيرو */
.hero__strip{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:4;
  background:rgba(0,27,63,.55);backdrop-filter:blur(10px);
  border-block-start:1px solid rgba(255,255,255,.14);
}
.hero__strip ul{
  display:flex;flex-wrap:wrap;gap:6px 30px;padding-block:14px;
  justify-content:space-between;
}
.hero__strip li{display:flex;align-items:center;gap:.55em;color:#fff;font-size:.9rem;font-weight:600}
.hero__strip svg{width:17px;height:17px;color:var(--el-2);flex:0 0 17px}
@media(max-width:900px){.hero__strip{display:none}}

/* ---------- 7. أدوات الأقسام ---------- */
.sec{padding-block:clamp(64px,8.5vw,124px);position:relative}
.sec--paper{background:var(--paper)}
.sec--tint{background:var(--paper-2)}
.sec--brand{background:var(--grad-brand);color:#fff}
.sec--night{background:var(--bg-night);color:#fff}
.sec--brand h2,.sec--night h2,.sec--brand h3,.sec--night h3{color:#fff}

/* خط الحماية — العنصر المميّز للهوية */
.perim{position:relative}
.perim::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:var(--gut);height:2px;
  background-image:linear-gradient(to left,var(--el-1) 0 14px,transparent 14px 26px);
  background-size:26px 2px;opacity:.55;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-disp);font-weight:600;font-size:.8rem;letter-spacing:.18em;
  color:var(--bg-2);margin-bottom:14px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--el-1)}
.sec--brand .eyebrow,.sec--night .eyebrow{color:var(--el-2)}
.sec-head{max-width:62ch;margin-bottom:clamp(34px,4vw,58px)}
.sec-head p{color:var(--tx-soft);font-size:1rem;margin-block-start:13px}
.sec--brand .sec-head p,.sec--night .sec-head p{color:rgba(255,255,255,.86)}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.sec-head--row>div{max-width:62ch}

/* ---------- 8. القسم رقم 3 — الشريط السينمائي (مطابق للمرجع) ---------- */
.cine{position:relative;background:var(--bg-night);color:#fff;overflow:hidden}
.cine__stage{
  position:relative;display:grid;
  min-height:min(78vh,680px);
}
/* كل الشرائح في خلية واحدة — الحاوية تأخذ ارتفاع أطولها فلا يُقصّ شيء */
.cine__slide{
  grid-area:1/1;position:relative;
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .9s ease;
}
.cine__slide.is-on{opacity:1;pointer-events:auto;z-index:1}
.cine__bg{position:absolute;inset:0}
.cine__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06)}
.cine__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(0,27,63,.96) 0%,rgba(0,27,63,.88) 34%,rgba(0,41,92,.72) 66%,rgba(0,27,63,.8) 100%),
    linear-gradient(to top,rgba(0,27,63,.92),rgba(0,27,63,.3) 55%,transparent 78%);
}
.cine__in{
  position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(56px,7vw,92px) var(--gut) clamp(104px,11vw,132px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,52px);align-items:center;
}
/* العمود الأيمن: العنوان الكبير */
.cine__title .eyebrow{margin-bottom:10px}
.cine__title h2{font-size:clamp(1.6rem,3.3vw,2.5rem);line-height:1.34;letter-spacing:-.018em;}
/* العمود الأيسر: اسم البرنامج + الوصف */
.cine__mark{display:flex;align-items:center;gap:10px;margin-bottom:auto}
.cine__brand{text-align:center;padding-block:clamp(8px,2vw,22px)}
.cine__brand b{display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.3;letter-spacing:-.018em}
.cine__brand i{display:block;font-style:normal;font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.8rem);line-height:1.15;letter-spacing:.18em;direction:ltr;
  color:rgba(255,255,255,.34);margin-block-start:4px;text-transform:uppercase}
.cine__card{max-width:52ch}
.cine__card h3{display:flex;align-items:center;gap:.6em;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.45}
.cine__badge{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;color:var(--el-2)}
.cine__badge svg{width:22px;height:22px}
.cine__card p{color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.85;margin:12px 0 20px;}
.cine__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cine__nav{
  position:absolute;inset-block-end:clamp(30px,4.5vw,48px);inset-inline-start:var(--gut);z-index:4;
  display:flex;align-items:center;gap:12px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:rgba(0,20,48,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
}
.cine__nav .icb{
  width:38px;height:38px;flex:0 0 38px;
  border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);
}
.cine__nav .icb svg{width:17px;height:17px}
.cine__dots{display:flex;gap:8px}
.cine__dots button{
  width:26px;height:5px;border-radius:5px;border:0;
  background:rgba(255,255,255,.36);
  transition:width .35s cubic-bezier(.2,.7,.3,1),background .3s;
}
.cine__dots button:hover{background:rgba(255,255,255,.65)}
.cine__dots button.is-on{background:var(--grad-amber);width:46px}
@media(max-width:900px){
  .cine__in{grid-template-columns:1fr;gap:22px;padding-block:clamp(90px,16vw,120px) 110px}
}

/* ---------- 9. شبكة الخدمات ---------- */
.srv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,2vw,26px)}
.srv-card{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--ink);min-height:360px;isolation:isolate;transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.srv-card:hover{transform:translateY(-6px);}
.srv-card__img{position:absolute;inset:0;z-index:-2}
.srv-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.srv-card:hover .srv-card__img img{transform:scale(1.08)}
.srv-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,27,63,.95) 4%,rgba(0,27,63,.62) 42%,rgba(0,27,63,.12) 78%);
}
.srv-card__body{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(20px,2.4vw,28px);color:#fff;min-height:360px;
  overflow-wrap:break-word;
}
.srv-card__kicker{font-family:var(--f-disp);font-size:.7rem;font-weight:600;letter-spacing:.2em;
  color:var(--el-2);margin-bottom:8px;display:block}
.srv-card h3{font-size:1.14rem;line-height:1.52;color:#fff}
.srv-card p{
  color:rgba(255,255,255,.86);font-size:.9rem;line-height:1.8;margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .3s;
}
.srv-card:hover p{color:#fff}
.srv-card__go{
  position:absolute;inset-block-start:clamp(18px,2vw,24px);inset-inline-start:clamp(18px,2vw,24px);
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:.35s;color:#fff
}
.srv-card__go svg{width:17px;height:17px}
.srv-card:hover .srv-card__go{background:var(--grad-amber);color:var(--ink);border-color:transparent;transform:rotate(-45deg)}

/* ---------- 10. خطوات العمل (علامات الفحص المرقّمة) ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,2.4vw,30px)}
.step{position:relative;padding-block-start:34px}
.step__tag{
  width:52px;height:62px;display:grid;place-items:center;padding-block-end:10px;
  background:var(--grad-amber);color:var(--ink);font-family:var(--f-disp);font-weight:800;font-size:1.4rem;
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);margin-bottom:18px;
}
.step:nth-child(even) .step__tag{transform:rotate(4deg)}
.step:nth-child(odd) .step__tag{transform:rotate(-4deg)}
.step h3{font-size:1.14rem;line-height:1.45;margin-bottom:9px}
.step p{color:var(--tx-soft);font-size:.95rem;margin:0}
.sec--brand .step p,.sec--night .step p{color:var(--tx-inv-soft)}
.step::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background-image:linear-gradient(to left,currentColor 0 12px,transparent 12px 24px);
  background-size:24px 2px;opacity:.22;
}

/* ---------- 11. الأرقام + من نحن ---------- */
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,64px);align-items:center}
.about__media{position:relative;border-radius:var(--r-lg);overflow:hidden;;border:1px solid var(--line)}
.about__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about__badge{
  position:absolute;inset-block-end:20px;inset-inline-start:20px;background:#fff;color:var(--ink);
  border-radius:var(--r-md);padding:14px 18px;max-width:78%;border:1px solid var(--line);
}
.about__badge b{display:block;font-family:var(--f-disp);font-size:1.28rem;line-height:1.3}
.about__badge small{color:var(--tx-soft);font-size:.8rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-block-start:30px}
.stat{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff}
.sec--brand .stat,.sec--night .stat{background:rgba(255,255,255,.07);border-color:var(--line-2)}
.stat b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.68rem;color:var(--bg-2);line-height:1.15}
.sec--brand .stat b,.sec--night .stat b{color:var(--el-2)}
.stat small{color:var(--tx-soft);font-size:.84rem}
.sec--brand .stat small,.sec--night .stat small{color:var(--tx-inv-soft)}
.ticks li{display:flex;gap:.7em;align-items:flex-start;margin-block-end:10px;font-size:1rem}
.ticks svg{width:20px;height:20px;flex:0 0 20px;color:var(--el-1);margin-block-start:5px}
@media(max-width:900px){.about{grid-template-columns:1fr}}

/* ---------- 11b. وسوم مختصرة (آفات / أحياء) ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.areas a,.areas span{
  display:flex;align-items:center;gap:.5em;padding:.72em 1em;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid var(--line-2);
  font-size:.9rem;line-height:1.5;transition:.25s;
}
.areas a:hover{background:var(--el-2);color:var(--ink);border-color:transparent}
.areas svg{width:14px;height:14px;color:var(--el-2);flex:0 0 14px}
.areas a:hover svg{color:var(--ink)}

/* ---------- 12. نطاق الخدمة — الرياض كمدينة ---------- */
/*
 * لوح تحريري مقسوم إلى أربع جهات بخطوط شعرية.
 * الخطوط الشعرية مصنوعة من gap على الشبكة لا من حدود الخلايا،
 * فتبقى سليمة عند أي عدد أعمدة بلا قواعد استثناء.
 */
.cover{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-lg);overflow:hidden;
}
@media(max-width:1024px){.cover{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cover{grid-template-columns:1fr}}

.cover__c{
  position:relative;background:var(--bg-night);
  padding:clamp(22px,2.3vw,30px);
  transition:background .38s ease;
}
.cover__c:hover{background:#00295C}
/* خط ذهبي يمتدّ من اليمين عند التأشير */
.cover__c::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--grad-amber);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.cover__c:hover::after{transform:scaleX(1)}

.cover__dir{
  display:flex;align-items:center;gap:.45em;
  font-family:var(--f-disp);font-weight:700;font-size:.66rem;letter-spacing:.2em;
  color:var(--el-2);margin-bottom:15px;
}
.cover__dir svg{width:14px;height:14px;flex:0 0 14px}

.cover__t{
  display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.1rem,1.55vw,1.32rem);color:#fff;line-height:1.45;margin:0;
}
.cover__t small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.72rem;
  color:rgba(255,255,255,.5);letter-spacing:0;margin-block-start:6px;
}

.cover__p{
  font-size:.86rem;color:rgba(255,255,255,.72);line-height:1.95;
  margin:16px 0 0;
}
.cover__s{
  margin-block-start:16px;padding-block-start:15px;
  border-block-start:1px dashed rgba(255,213,0,.3);
  font-size:.79rem;color:rgba(255,255,255,.6);line-height:1.7;
}
.cover__s b{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:.85rem;
  color:var(--el-2);margin-block-start:3px;
}

/* تذييل القسم */
.cover__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:22px;flex-wrap:wrap;margin-block-start:clamp(24px,3vw,36px);
}
.cover__note{
  display:flex;align-items:flex-start;gap:.6em;margin:0;max-width:58ch;
  font-size:.92rem;color:rgba(255,255,255,.68);line-height:1.85;
}
.cover__note svg{width:17px;height:17px;flex:0 0 17px;color:var(--el-2);margin-block-start:5px}
.cover__acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 13. الأسئلة الشائعة ---------- */
.faq{border-block-start:1px solid var(--line)}
.faq__i{border-block-end:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:1.15em 0;text-align:start;font-family:var(--f-disp);font-weight:700;font-size:1.04rem;
  line-height:1.6;
}
.faq__q i{flex:0 0 30px;align-self:flex-start;margin-block-start:2px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);
  display:grid;place-items:center;font-style:normal;transition:.3s;color:var(--bg-2)}
.faq__i.is-open .faq__q i{background:var(--grad-amber);border-color:transparent;color:var(--ink);transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.3,1)}
.faq__a>div{padding-block-end:1.3em;color:var(--tx-soft);font-size:.99rem}
.sec--night .faq,.sec--night .faq__i{border-color:var(--line-2)}
.sec--night .faq__q i{border-color:var(--line-2);color:var(--el-2)}
.sec--night .faq__a>div{color:var(--tx-inv-soft)}

/* ---------- 15. شريط الدعوة (CTA) ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--grad-brand);color:#fff}
.cta-band::before{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-6%;width:44vw;height:44vw;
  border-radius:50%;background:radial-gradient(circle,rgba(255,213,0,.22),transparent 65%)
}
.cta-band__in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;padding-block:clamp(44px,6vw,72px)}
.cta-band h2{font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.4;max-width:26ch}
.cta-band p{color:var(--tx-inv-soft);margin:10px 0 0;max-width:52ch}

/* ---------- 16. نموذج الطلب (تصميم داكن) ---------- */

/* صندوق النموذج */
.leadbox{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,var(--bg-night) 0%,#00295C 62%,#003468 100%);
  border:1px solid rgba(255,213,0,.2);
  border-radius:18px;
  padding:clamp(17px,1.8vw,21px);
  color:#fff;
}
/* توهج ذهبي علوي + خط الحماية */
.leadbox::before{
  content:"";position:absolute;z-index:-1;
  inset-block-start:-55%;inset-inline-start:-25%;width:80%;height:80%;
  background:radial-gradient(circle,rgba(253,197,0,.2),transparent 68%);
}
.leadbox::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--grad-amber);
}

.leadbox__hd{margin-bottom:15px}
.leadbox__tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-disp);font-weight:700;font-size:.59rem;letter-spacing:.14em;
  color:var(--el-2);margin-bottom:6px;
}
.leadbox__tag svg{width:12px;height:12px;flex:0 0 12px}
.leadbox__hd b{
  display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.44;color:#fff;
}
.leadbox__hd small{display:block;color:rgba(255,255,255,.62);font-size:.78rem;line-height:1.6;margin-block-start:3px}

/* بدائل التواصل أسفل النموذج */
.leadbox__alt{
  display:flex;gap:7px;margin-block-start:13px;padding-block-start:13px;
  border-block-start:1px solid rgba(255,255,255,.12);
}
.leadbox__alt a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.4em;
  padding:.58em;border-radius:var(--r-pill);
  font-family:var(--f-disp);font-weight:700;font-size:.81rem;color:#fff;
  border:1.5px solid rgba(255,255,255,.2);transition:.25s;
}
.leadbox__alt svg{width:15px;height:15px}
.leadbox__alt a:first-child:hover{background:var(--el-2);color:var(--ink);border-color:transparent}
.leadbox__alt a:last-child:hover{background:#25D366;border-color:transparent}

/* ── بنية النموذج ── */
.form{display:grid;gap:10px}
.form__row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media(max-width:520px){.form__row{grid-template-columns:1fr}}

.field{display:grid;gap:5px;position:relative}
.field label{
  font-family:var(--f-disp);font-weight:600;font-size:.86rem;color:var(--tx-soft);
  display:flex;align-items:center;gap:.5em;
}
.field .opt{
  font-family:var(--f-body);font-size:.66rem;font-weight:500;
  padding:.14em .55em;border-radius:var(--r-pill);
  background:rgba(5,28,59,.08);color:var(--tx-soft);
}
.field .req{color:var(--bg-2);font-weight:800;font-size:1.05rem;line-height:1}
.field__h{font-size:.74rem;color:var(--tx-soft);opacity:.8}

.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.91rem;color:var(--tx);
  background-color:var(--paper);border:1.5px solid var(--line);border-radius:11px;
  padding:.62em .9em;transition:border-color .22s,background-color .22s;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--bg-3);outline:2px solid var(--bg-3);outline-offset:2px;
}
.field select{
  appearance:none;cursor:pointer;padding-inline-end:2.2em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B6485' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:14px;
  background-position:left .85em center;
}

/* حقل الجوال مع مقدّمة الدولة */
.tel{
  display:flex;align-items:stretch;direction:ltr;position:relative;
  border:1.5px solid var(--line);border-radius:11px;
  background-color:var(--paper);overflow:hidden;
  transition:border-color .22s,background-color .22s;
}
.tel__cc{
  display:grid;place-items:center;padding-inline:.75em;
  font-family:var(--f-disp);font-weight:700;font-size:.83rem;
  color:var(--tx-soft);background-color:rgba(5,28,59,.05);
  border-inline-end:1.5px solid var(--line);flex:0 0 auto;letter-spacing:.02em;
}
.tel input{
  border:0!important;border-radius:0!important;background-color:transparent!important;flex:1 1 auto;min-width:0;
  letter-spacing:.05em;font-size:.96rem;font-weight:600;
}
.tel:focus-within{border-color:var(--bg-3);outline:2px solid var(--bg-3);outline-offset:2px}

.form__note{
  display:flex;align-items:flex-start;gap:.45em;
  font-size:.71rem;color:var(--tx-soft);margin:1px 0 0;line-height:1.6;
}
.form__note svg{width:13px;height:13px;flex:0 0 13px;margin-block-start:3px}

.form__msg{border-radius:11px;padding:.7em .95em;font-size:.86rem;display:none;line-height:1.6}
.form__msg.ok{display:block;background:rgba(37,211,102,.14);color:#8FF0BC;border:1px solid rgba(37,211,102,.34)}
.form__msg.err{display:block;background:rgba(255,90,90,.14);color:#FFB3B3;border:1px solid rgba(255,90,90,.34)}
.hp{position:absolute!important;left:-9999px;opacity:0}

/* ══ الوضع الداكن للنموذج ══ */
.form--dark .field label{color:rgba(255,255,255,.8)}
.form--dark .field .opt{background:rgba(255,255,255,.1);color:rgba(255,255,255,.55)}
.form--dark .field .req{color:var(--el-2)}
.form--dark .field__h{color:rgba(255,255,255,.42)}

.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea,
.form--dark .tel{
  background-color:rgba(255,255,255,.07);   /* مفردة — لا تصفّر خصائص الخلفية الأخرى */
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.form--dark .field input::placeholder,
.form--dark .field textarea::placeholder{color:rgba(255,255,255,.34)}

.form--dark .field input:focus,
.form--dark .field select:focus,
.form--dark .field textarea:focus,
.form--dark .tel:focus-within{
  border-color:var(--el-2);
  outline:2px solid var(--el-2);outline-offset:2px;
  background-color:rgba(255,255,255,.11);
}
.form--dark .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD500' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:17px;
  background-position:left 1em center;
}
/* قائمة الخيارات يرسمها النظام — تحتاج ألواناً صريحة */
.form--dark .field select option{background:#0A2C58;color:#fff}

.form--dark .tel__cc{
  background-color:rgba(255,255,255,.08);
  border-inline-end-color:rgba(255,255,255,.18);
  color:var(--el-2);
}
.form--dark .form__note{color:rgba(255,255,255,.55)}
.form--dark .form__note svg{color:var(--el-2)}


/* ══ النموذج بلا تسميات مرئية — النص داخل الحقل ══ */
/*
 * التسميات موجودة في HTML بكلاس .sr-only لقارئات الشاشة،
 * ومحذوفة بصرياً فقط. أيقونة داخل حقل الاسم و«+966» في حقل الجوال
 * تبقيان مؤشّراً دائماً بعد اختفاء النص التوضيحي عند الكتابة.
 */
.form--bare .field{gap:0}
.form--bare .field__h{display:none}

.field__ic{
  position:absolute;inset-inline-start:.85em;inset-block-start:50%;
  transform:translateY(-50%);z-index:2;pointer-events:none;
  width:16px;height:16px;color:rgba(255,255,255,.4);
  transition:color .25s;
}
.field--icon input{padding-inline-start:2.5em}
.field--icon:focus-within .field__ic{color:var(--el-2)}

/* النص التوضيحي أوضح قليلاً لأنه بديل التسمية */
.form--dark .field input::placeholder,
.form--dark .field textarea::placeholder{color:rgba(255,255,255,.46)}
.form--dark .field select:invalid,
.form--dark .field select option[value=""]{color:rgba(255,255,255,.46)}

/* حقل الجوال يبرز لأنه المطلوب الوحيد */
.form--bare .tel{border-color:rgba(255,213,0,.34)}
.form--bare .tel:focus-within{border-color:var(--el-2)}
.form--bare .tel__cc{color:var(--el-2)}

/* حقل فيه خطأ */
.form--dark .field.is-err input,.form--dark .field.is-err .tel{
  border-color:#FF6B6B;outline:2px solid rgba(255,107,107,.6);outline-offset:2px;
}

/* ---------- 16b. شريط الدعوة المبسّط + خدمات تهمك ---------- */

/* ══ شريط الدعوة: ثلاثة أزرار بلا حقول ══ */
.ctabar{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--bg-night) 0%,#00295C 74%,#003468 100%);
  border:1px solid rgba(255,213,0,.2);
  border-radius:18px;
  padding:clamp(20px,2.4vw,28px);
  color:#fff;
}
.ctabar::before{
  content:"";position:absolute;z-index:-1;
  inset-block-start:-55%;inset-inline-start:-18%;width:62%;height:100%;
  background:radial-gradient(circle,rgba(253,197,0,.2),transparent 68%);
}
.ctabar::after{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--grad-amber);
}

.ctabar__t{margin-bottom:20px}
.ctabar__tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-disp);font-weight:700;font-size:.6rem;letter-spacing:.15em;
  color:var(--el-2);margin-bottom:7px;
}
.ctabar__tag svg{width:12px;height:12px;flex:0 0 12px}
.ctabar__t b{
  display:block;font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.12rem,1.8vw,1.4rem);line-height:1.45;color:#fff;
}
.ctabar__t small{
  display:block;color:rgba(255,255,255,.68);font-size:.87rem;
  line-height:1.8;margin-block-start:6px;max-width:62ch;
}

.ctabar__a{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.ctabar__a{grid-template-columns:1fr}}

.ctabar__b{
  display:flex;align-items:center;justify-content:center;gap:.6em;
  padding:.9em 1em;border-radius:var(--r-pill);border:0;
  font-family:var(--f-disp);font-weight:700;font-size:.98rem;
  text-align:start;cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background .28s;
}
.ctabar__b svg{width:19px;height:19px;flex:0 0 19px}
.ctabar__b span{display:flex;flex-direction:column;line-height:1.25}
.ctabar__b small{
  font-family:var(--f-body);font-weight:400;font-size:.72rem;
  opacity:.72;margin-block-start:3px;letter-spacing:.02em;
}
.ctabar__b:hover,.ctabar__b:focus-visible{transform:translateY(-3px)}

.ctabar__b--tel{background:var(--grad-amber);color:var(--ink);}
.ctabar__b--wa{background:#25D366;color:#053b1a;}
.ctabar__b--srv{
  background:rgba(255,255,255,.08);color:#fff;
  border:1.5px solid rgba(255,255,255,.24);
}
.ctabar__b--srv:hover{background:#fff;color:var(--bg-1);border-color:#fff}

/* ══ خدمات تهمك ══ */
.picks{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
}
.picks__hd{
  padding:16px 18px;
  background:linear-gradient(160deg,var(--bg-night),#00295C);
  color:#fff;
}
.picks__tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-disp);font-weight:700;font-size:.58rem;letter-spacing:.15em;
  color:var(--el-2);margin-bottom:5px;
}
.picks__tag svg{width:12px;height:12px;flex:0 0 12px}
.picks__hd b{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.06rem;line-height:1.4}

.picks__l{padding:6px 0}
.picks__l li+li{border-block-start:1px solid var(--line)}
.picks__l a{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;transition:background .25s;
}
.picks__l a:hover{background:var(--paper-2)}

.picks__im{
  flex:0 0 52px;width:52px;height:52px;border-radius:12px;overflow:hidden;
  background:var(--bg-night);position:relative;
}
.picks__im img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.picks__l a:hover .picks__im img{transform:scale(1.12)}

.picks__tx{flex:1 1 auto;min-width:0}
.picks__tx b{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:.92rem;
  color:var(--ink);line-height:1.45;
}
.picks__tx small{
  display:flex;align-items:center;gap:.35em;
  font-size:.76rem;color:var(--tx-soft);margin-block-start:4px;
}
.picks__tx small svg{width:13px;height:13px;flex:0 0 13px;color:var(--bg-2)}

.picks__go{
  flex:0 0 26px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;color:var(--bg-2);
  background:var(--paper-2);transition:.28s;
}
.picks__go svg{width:13px;height:13px}
.picks__l a:hover .picks__go{background:var(--grad-amber);color:var(--ink);transform:translateX(-3px)}

.picks__more{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  padding:13px;border-block-start:1px solid var(--line);
  font-family:var(--f-disp);font-weight:700;font-size:.88rem;
  color:var(--bg-2);background:var(--paper-2);transition:.25s;
}
.picks__more svg{width:15px;height:15px}
.picks__more:hover{background:var(--bg-1);color:#fff}

@media(prefers-reduced-motion:reduce){
  .ctabar__b:hover,.picks__l a:hover .picks__im img{transform:none}
}

/* ---------- 17. ترويسة الصفحة الداخلية (كبيرة) ---------- */
.phero{position:relative;min-height:clamp(440px,58vh,620px);display:flex;align-items:flex-end;
  background:var(--bg-night);overflow:hidden;padding-block-start:var(--hd-h)}
.phero__bg{position:absolute;inset:0}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(0,27,63,.94) 0%,rgba(0,27,63,.7) 44%,rgba(13,59,92,.4) 100%),
    linear-gradient(to top,rgba(0,27,63,.92),transparent 58%);
}
.phero__in{position:relative;z-index:2;width:100%;padding-block:clamp(30px,5vw,56px) clamp(38px,6vw,66px)}
.phero h1{color:#fff;max-width:24ch;font-size:clamp(1.6rem,3.3vw,2.5rem);line-height:1.38;}
.phero__sub{color:rgba(255,255,255,.9);max-width:58ch;margin:14px 0 0;font-size:.99rem;}
.phero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:26px}
/* شرائح معلومات ظاهرية (Schema مرئي) */
.phero__chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:24px}
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.5em .95em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid var(--line-2);color:#fff;font-size:.85rem}
.chip svg{width:15px;height:15px;color:var(--el-2)}
.chip b{font-weight:700;font-family:var(--f-disp)}

/* Breadcrumbs */
.crumbs{margin-bottom:18px;font-size:.86rem;color:rgba(255,255,255,.85);}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5em}
.crumbs li{display:flex;align-items:center;gap:.5em}
.crumbs li+li::before{content:"‹";color:var(--el-2);opacity:.8}
.crumbs a{color:var(--tx-inv-soft);transition:.2s}
.crumbs a:hover{color:var(--el-2)}
.crumbs [aria-current]{color:#fff;font-weight:600}
.crumbs--light{color:var(--tx-soft)}
.crumbs--light a{color:var(--tx-soft)}
.crumbs--light [aria-current]{color:var(--ink)}

/* ---------- 18. تخطيط المحتوى + الشريط الجانبي ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:clamp(26px,3.4vw,54px);align-items:start}
@media(max-width:1024px){.layout{grid-template-columns:1fr}}
.prose{font-size:1.01rem}
.prose h2{font-size:clamp(1.3rem,2vw,1.68rem);line-height:1.45;margin:1.8em 0 .65em}
.prose h2:first-child{margin-block-start:0}
.prose h3{font-size:clamp(1.08rem,1.5vw,1.26rem);line-height:1.5;margin:1.6em 0 .55em}
.prose p{color:#22405F}
.prose ul,.prose ol{margin:0 0 1.3em;padding-inline-start:0}
.prose ul li{position:relative;padding-inline-start:1.6em;margin-block-end:.55em;color:#22405F}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  width:9px;height:9px;border-radius:3px;background:var(--grad-amber)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n;position:relative;padding-inline-start:2.1em;margin-block-end:.6em;color:#22405F}
.prose ol li::before{content:counter(n);position:absolute;inset-inline-start:0;inset-block-start:.15em;
  width:26px;height:26px;border-radius:8px;background:var(--paper-3);color:var(--bg-1);
  display:grid;place-items:center;font-family:var(--f-disp);font-weight:700;font-size:.82rem}
.prose blockquote{margin:1.6em 0;padding:1.2em 1.4em;border-inline-start:4px solid var(--el-1);
  background:var(--paper-2);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2)}
.prose img{border-radius:var(--r-md);margin-block:1.4em}
.prose a{color:var(--bg-2);text-decoration:underline;text-underline-offset:3px}

/* بطاقة بيانات الخدمة — Schema ظاهري */
.spec{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:1.8em 0;background:#fff}
.spec__hd{background:var(--grad-brand);color:#fff;padding:.95em 1.2em;font-family:var(--f-disp);
  font-weight:700;display:flex;align-items:center;gap:.6em;font-size:1rem;line-height:1.5}
.spec__hd svg{width:19px;height:19px;color:var(--el-2)}
.spec table{width:100%;border-collapse:collapse;font-size:.95rem}
.spec th,.spec td{padding:.85em 1.2em;text-align:start;vertical-align:top;border-block-start:1px solid var(--line)}
.spec tr:first-child th,.spec tr:first-child td{border-block-start:0}
.spec th{width:38%;color:var(--tx-soft);font-weight:600;font-family:var(--f-disp);background:var(--paper-2)}
.spec td{color:var(--ink)}

/* الشريط الجانبي */
.side{display:grid;gap:18px;position:sticky;inset-block-start:calc(var(--hd-h) + 14px)}
@media(max-width:1024px){.side{position:static}}
.swid{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.swid__hd{padding:1.05em 1.25em;background:var(--grad-brand);color:#fff}
.swid__hd b{font-family:var(--f-disp);font-weight:800;font-size:1.1rem;display:block}
.swid__hd small{color:var(--tx-inv-soft);font-size:.84rem}
.swid__bd{padding:1.25em}
.swid--amber .swid__hd{background:var(--grad-amber);color:var(--ink)}
.swid--amber .swid__hd small{color:rgba(5,28,59,.7)}
.sidelist li+li{border-block-start:1px solid var(--line)}
.sidelist a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.8em 0;
  font-family:var(--f-disp);font-weight:600;font-size:.96rem;transition:.25s}
.sidelist a:hover{color:var(--bg-2);padding-inline-start:8px}
.sidelist a span{color:var(--el-1);font-size:.7rem}
.sidelist a[aria-current]{color:var(--bg-2)}
.qcall{display:grid;gap:10px}
.qcall a{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border-radius:var(--r-md);
  border:1px solid var(--line);font-family:var(--f-disp);font-weight:600;transition:.25s;font-size:.96rem}
.qcall a:hover{border-color:var(--bg-3);background:var(--paper-2)}
.qcall svg{width:20px;height:20px;color:var(--bg-2)}
.qcall b{direction:ltr;font-family:var(--f-disp)}

/* ---------- 19. صفحة الأرشيف / الشبكة العامة ---------- */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mini{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.35s;display:block}
.mini:hover{transform:translateY(-4px);}
.mini img{aspect-ratio:16/10;object-fit:cover;width:100%}
.mini__b{padding:18px}
.mini__b h3{font-size:1.1rem}
.mini__b p{color:var(--tx-soft);font-size:.9rem;margin:8px 0 0}

/* ---------- 19b. أقسام الصفحات (شورت‌كودات) ---------- */

/* عناصر لا تتأثر بأنماط .prose */
/*
 * تحذير: لا تستخدم هنا محدّداً شاملاً مثل `.prose .not-prose *`.
 * أولويته (0,2,0) تتجاوز كل كلاسات المكوّنات (0,1,0)، فتفقد البطاقات
 * والحقول والأزرار حشوها الداخلي ويلتصق نصّها بحرف الصندوق.
 * الاستثناء المطلوب هو نقاط القوائم فقط، لا كل شيء.
 */
.prose .not-prose ul,
.prose .not-prose ol{margin:0;padding:0;list-style:none;counter-reset:none}
.prose .not-prose li{padding-inline-start:0;margin-block-end:0;counter-increment:none}
.prose .not-prose li::before{content:none!important;display:none}
.prose .srv-grid,.prose .hoods,.prose .ccards,.prose .faq,.prose .pcta{margin-block:1.9em}
.prose .srv-card h3,.prose .hood h3,.prose .ccard b{margin:0}
.prose .srv-card p,.prose .hood p{color:inherit}

/* ── بطاقات الأحياء ── */
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:16px}

.hood{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;min-height:302px;
  padding:clamp(18px,2.2vw,24px);
  background:linear-gradient(168deg,#00295C 0%,var(--bg-night) 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);color:#fff;
  transition:transform .38s cubic-bezier(.2,.7,.3,1),border-color .38s;
}
/* توهج ذهبي يظهر عند التأشير */
.hood::before{
  content:"";position:absolute;z-index:-1;
  inset-block-end:-45%;inset-inline-end:-25%;width:78%;height:78%;
  background:radial-gradient(circle,rgba(253,197,0,.22),transparent 68%);
  opacity:0;transition:opacity .45s;
}
.hood:hover{
  transform:translateY(-5px);
  border-color:rgba(255,213,0,.5);
}
.hood:hover::before{opacity:1}

/* شريط الضمان — الزاوية العلوية على حرف البطاقة */
.hood__rib{
  position:absolute;inset-block-start:18px;inset-inline-start:0;z-index:3;
  background:var(--grad-amber);color:var(--ink);
  font-family:var(--f-disp);font-weight:800;font-size:.7rem;letter-spacing:.04em;
  padding:.44em 1.1em .44em 1.7em;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,13px 50%);
}

/* واتساب + هاتف — الزاوية المقابلة */
.hood__acts{
  position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:3;
  display:flex;gap:8px;
}
.hood__acts a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.hood__acts a:hover,.hood__acts a:focus-visible{transform:scale(1.12) translateY(-2px)}
.hood__acts svg{width:18px;height:18px}
.hood__wa{background:#25D366;color:#fff}
.hood__tel{background:var(--grad-amber);color:var(--ink)}

/* المحتوى — مثبّت إلى الأسفل */
.hood__b{margin-block-start:auto}
.hood__cat{
  display:block;font-family:var(--f-disp);font-weight:700;
  font-size:.68rem;letter-spacing:.16em;color:var(--el-2);margin-bottom:9px;
}
.hood h3{
  font-size:clamp(1.04rem,1.45vw,1.16rem);color:#fff;line-height:1.55;
  margin:0 0 9px!important;
}
.hood p{
  font-size:.88rem;color:rgba(255,255,255,.66);line-height:1.8;
  margin:0!important;
}

/* اطلب الآن */
.hood__go{
  display:inline-flex;align-items:center;gap:.55em;margin-block-start:16px;
  font-family:var(--f-disp);font-weight:700;font-size:.88rem;color:var(--el-2);
  transition:color .28s;
}
.hood__go svg{width:16px;height:16px;flex:0 0 16px}
.hood__go::after{
  content:"";width:32px;height:1px;background:currentColor;opacity:.45;
  transition:width .32s cubic-bezier(.2,.7,.3,1),opacity .32s;
}
.hood:hover .hood__go{color:#fff}
.hood:hover .hood__go::after{width:56px;opacity:1}

@media(max-width:420px){
  .hoods{grid-template-columns:1fr}
  .hood{min-height:288px}
}
@media(prefers-reduced-motion:reduce){
  .hood,.hood__acts a,.hood__go::after{transition:none}
  .hood:hover{transform:none}
}

/* ── بطاقات التواصل ── *//* ── بطاقات التواصل ── */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.ccard{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:22px;transition:.3s;
}
.ccard:not(.ccard--static):hover{
  border-color:var(--bg-3);transform:translateY(-3px);
}
.ccard--wa:not(.ccard--static):hover{border-color:#25D366}
.ccard__i{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;margin-bottom:14px;
}
.ccard--wa .ccard__i{background:#25D366}
.ccard--static .ccard__i{background:var(--paper-3);color:var(--bg-2)}
.ccard__i svg{width:21px;height:21px}
.ccard b{
  display:block;font-family:var(--f-disp);font-weight:700;font-size:.98rem;
  color:var(--tx-soft);margin-bottom:4px!important;
}
.ccard>span{
  display:block;font-family:var(--f-disp);font-weight:800;font-size:1.06rem;
  color:var(--ink);letter-spacing:.01em;word-break:break-word;
}
.ccard>span.num{color:var(--bg-2)}
.ccard small{display:block;color:var(--tx-soft);font-size:.82rem;margin-block-start:7px;line-height:1.6}

/* ── شريط دعوة داخل الصفحة ── */
.pcta{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--bg-night) 0%,#00295C 100%);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);color:#fff;
}
.pcta::before{
  content:"";position:absolute;z-index:-1;inset-block-start:-60%;inset-inline-start:-15%;
  width:60%;height:100%;background:radial-gradient(circle,rgba(253,197,0,.2),transparent 68%);
}
.pcta h3{color:#fff;font-size:clamp(1.1rem,1.7vw,1.36rem);line-height:1.45;margin:0 0 10px!important}
.pcta p{color:rgba(255,255,255,.72);margin:0 0 20px!important;font-size:.98rem;max-width:56ch}
.pcta__a{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 19c. صفحة الأحياء — الجهات والبحث الفوري ---------- */

.zones{margin-block:1.9em}

/* ══ شريط البحث ══ */
.afilter{
  position:sticky;inset-block-start:calc(var(--hd-h) - 6px);z-index:20;
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(14px,1.8vw,20px);margin-bottom:clamp(24px,3vw,34px);
}
.afilter__in{position:relative;display:flex;align-items:center}
.afilter__ic{
  position:absolute;inset-inline-start:.95em;inset-block-start:50%;
  transform:translateY(-50%);pointer-events:none;
  width:18px;height:18px;color:var(--bg-2);
}
.afilter input{
  width:100%;font-family:var(--f-body);font-size:1rem;font-weight:600;color:var(--tx);
  background-color:var(--paper-2);border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:.78em 1em .78em 3em;transition:border-color .22s,background-color .22s;
  appearance:none;
}
.afilter input::placeholder{font-weight:400;color:var(--tx-soft)}
.afilter input::-webkit-search-cancel-button{display:none}
.afilter input:focus{
  border-color:var(--bg-3);background-color:var(--paper);
  outline:2px solid var(--bg-3);outline-offset:2px;
}
.afilter__x{
  position:absolute;inset-inline-end:.6em;inset-block-start:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-3);color:var(--bg-1);transition:.25s;
}
.afilter__x svg{width:14px;height:14px}
.afilter__x:hover{background:var(--el-2);color:var(--ink)}

.afilter__meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  margin-block-start:13px;
}
.acount{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-disp);font-weight:600;font-size:.83rem;color:var(--tx-soft);
}
.acount b{
  font-family:var(--f-disp);font-weight:800;font-size:1.02rem;color:var(--bg-1);
  direction:ltr;display:inline-block;
}
.acount svg{width:14px;height:14px;color:var(--bg-2)}
.acount--z b{color:var(--bg-2)}
.acount--t{color:var(--tx-soft)}

.afilter__none{
  display:flex!important;align-items:flex-start;gap:.5em;
  margin:13px 0 0!important;padding-block-start:13px;
  border-block-start:1px dashed rgba(253,197,0,.4);
  font-size:.9rem;color:var(--tx-soft);line-height:1.75;
}
.afilter__none[hidden]{display:none!important}
.afilter__none svg{width:16px;height:16px;flex:0 0 16px;color:var(--el-1);margin-block-start:4px}

/* ══ الجهة ══ */
.zone{margin-block-end:clamp(34px,4.5vw,54px)}
.zone[hidden]{display:none}
.zone__hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-block-end:12px;margin-bottom:16px;
  border-block-end:2px solid var(--line);
  position:relative;
}
.zone__hd::after{
  content:"";position:absolute;inset-block-end:-2px;inset-inline-start:0;
  width:72px;height:2px;background:var(--grad-amber);
}
.zone__n{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-disp);font-weight:800;
  font-size:clamp(1.14rem,1.8vw,1.36rem);color:var(--ink);line-height:1.45;
}
.zone__n svg{width:19px;height:19px;color:var(--bg-2);flex:0 0 19px}
.zone__c{
  font-family:var(--f-disp);font-weight:700;font-size:.8rem;
  color:var(--bg-2);background:var(--paper-3);
  padding:.32em .85em;border-radius:var(--r-pill);
}
.zone__lead{
  font-size:.98rem;color:var(--tx-soft);line-height:1.95;
  margin:0 0 20px!important;max-width:78ch;
}

/* ══ بقية الأحياء: وسوم ══ */
.zone__rest{margin-block-start:20px}
.zone__rl{
  display:block;font-family:var(--f-disp);font-weight:600;font-size:.83rem;
  color:var(--tx-soft);margin-bottom:11px;
}
.chipgrid{display:flex;flex-wrap:wrap;gap:7px}
.chip-a{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.52em .9em;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--f-disp);font-weight:600;font-size:.86rem;color:var(--ink);
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.chip-a svg{width:13px;height:13px;color:var(--bg-2);flex:0 0 13px;transition:color .25s}
.chip-a:hover,.chip-a:focus-visible{
  background:var(--bg-1);border-color:var(--bg-1);color:#fff;transform:translateY(-2px);
}
.chip-a:hover svg,.chip-a:focus-visible svg{color:var(--el-2)}
.chip-a[hidden]{display:none}
/* الحي المطابق للبحث */
.chip-a.is-hit{background:var(--grad-amber);border-color:transparent;color:var(--ink)}
.chip-a.is-hit svg{color:var(--ink)}

.hood[hidden]{display:none}

@media(max-width:600px){
  .afilter{position:static}
  .zone__lead{font-size:.94rem}
}
@media(prefers-reduced-motion:reduce){
  .chip-a:hover{transform:none}
}

/* ---------- 20. الفوتر ---------- */
.ft{background:var(--bg-night);color:#fff;padding-block:clamp(48px,6vw,80px) 0}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,48px)}
@media(max-width:960px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft__grid{grid-template-columns:1fr}}
.ft h4{font-size:1rem;margin-bottom:16px;color:#fff}
.ft p,.ft a,.ft li{color:var(--tx-inv-soft);font-size:.93rem}
.ft a:hover{color:var(--el-2)}
.ft li{margin-block-end:.55em}
.ft__soc{display:flex;gap:8px;margin-block-start:16px}
.ft__soc a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;transition:.25s}
.ft__soc a:hover{background:var(--el-2);border-color:transparent;color:var(--ink)}
.ft__soc svg{width:17px;height:17px}
.ft__legal{margin-block-start:clamp(32px,4vw,54px);border-block-start:1px solid var(--line-2);
  padding-block:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem}
.ft__cr{color:rgba(255,255,255,.55)}
.ft__cr .num{color:var(--tx-inv-soft)}

/* ---------- 20b. بطاقة السجل التجاري (الفوتر) ---------- */
.ftcr{
  margin-block-start:clamp(30px,4vw,50px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  padding:clamp(16px,2.2vw,24px);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.ftcr::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:3px;height:100%;
  background:var(--grad-amber);
}
.ftcr__qr{
  flex:0 0 auto;width:116px;height:116px;border-radius:var(--r-md);
  background:#fff;padding:9px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.ftcr__qr:hover{transform:translateY(-3px) scale(1.02)}
.ftcr__qr img{width:100%;height:100%;object-fit:contain;display:block}
.ftcr__b{flex:1 1 280px;min-width:0}
.ftcr__tag{
  display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-disp);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;color:var(--el-2);margin-bottom:9px;
}
.ftcr__tag svg{width:14px;height:14px;flex:0 0 14px}
.ftcr h5{font-family:var(--f-disp);font-weight:800;font-size:1.12rem;color:#fff;margin:0 0 12px;line-height:1.4}
.ftcr dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 22px;margin:0}
.ftcr div.f{min-width:0}
.ftcr dt{font-size:.7rem;color:rgba(255,255,255,.48);font-family:var(--f-disp);font-weight:600;letter-spacing:.05em;margin:0}
.ftcr dd{margin:3px 0 0;font-size:.9rem;color:#fff;line-height:1.6}
.ftcr dd .num{color:var(--el-2);font-weight:700;letter-spacing:.06em;font-size:.98rem}
.ftcr__v{
  display:inline-flex;align-items:center;gap:.4em;margin-block-start:14px;
  font-size:.8rem;color:var(--el-2);font-weight:700;font-family:var(--f-disp);
  border-block-end:1px solid rgba(255,213,0,.35);padding-block-end:2px;transition:.25s;
}
.ftcr__v:hover{color:#fff;border-color:#fff}
.ftcr__v svg{width:13px;height:13px;flex:0 0 13px}
@media(max-width:600px){
  .ftcr{flex-direction:column;align-items:flex-start;gap:18px}
  .ftcr__qr{width:100px;height:100px}
}



/* ── اعتماد المصمّم ── */
.ft__by{
  display:flex;align-items:center;justify-content:center;gap:.7em;
  padding-block:16px 22px;
  border-block-start:1px solid rgba(255,255,255,.08);
  text-align:center;flex-wrap:wrap;
}
.ft__by__i{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;
  display:grid;place-items:center;
  background:rgba(255,213,0,.1);border:1px solid rgba(255,213,0,.22);
  color:var(--el-2);
  transition:background .3s,color .3s,border-color .3s,transform .4s cubic-bezier(.2,.7,.3,1);
}
.ft__by__i svg{width:14px;height:14px}
.ft__by:hover .ft__by__i{
  background:var(--grad-amber);color:var(--ink);border-color:transparent;
  transform:rotate(-8deg) scale(1.06);
}
.ft__by__t{
  display:inline-flex;align-items:center;gap:.42em;flex-wrap:wrap;justify-content:center;
  font-size:.83rem;line-height:1.7;
}
.ft__by__t i{font-style:normal;color:rgba(255,255,255,.45)}
.ft__by__t a{
  font-family:var(--f-disp);font-weight:800;font-size:.92rem;
  color:var(--el-2);letter-spacing:.01em;
  border-block-end:1px solid rgba(255,213,0,.32);
  padding-block-end:1px;transition:color .25s,border-color .25s;
}
.ft__by__t a:hover{color:#fff;border-color:#fff}
.ft__by__t small{
  color:rgba(255,255,255,.42);font-size:.78rem;
  padding-inline-start:.42em;border-inline-start:1px solid rgba(255,255,255,.14);
}
@media(max-width:520px){.ft__by__t small{border:0;padding:0;flex-basis:100%}}

/* ---------- 21. الأزرار الدائرية الطائرة (FAB) ---------- */
/*
 * الموضع: منتصف الشاشة رأسياً على الحرف الأيسر (inset-inline-end في RTL)،
 * وتطفو فوق المحتوى ولا تحجز له مساراً — فلا يتزحزح تخطيط الصفحة.
 *
 * لتقليل ما تغطّيه: مُلصَقة بحرف الشاشة (12px)، ودائرية فالتلامس أقل من مربّع،
 * وحدّها الذهبي يفصلها بصرياً عن أي نص يمرّ تحتها.
 */
.fab{
  position:fixed;z-index:88;
  inset-block-start:50%;inset-inline-end:12px;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:center;
  opacity:0;animation:fabIn .62s cubic-bezier(.2,.7,.3,1) .35s forwards;
}
@keyframes fabIn{
  from{opacity:0;transform:translateY(-50%) translateX(-22px)}
  to{opacity:1;transform:translateY(-50%)}
}

.fab__btn{
  position:relative;width:50px;height:50px;flex:0 0 50px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-night);color:var(--el-2);
  border:1.5px solid rgba(255,213,0,.42);
  transition:background .3s,color .3s,border-color .3s,
             transform .3s cubic-bezier(.2,.7,.3,1);
}
.fab__btn svg{width:21px;height:21px;position:relative;z-index:2}
.fab__btn:hover,.fab__btn:focus-visible{
  background:var(--el-2);color:var(--ink);border-color:transparent;
  transform:translateX(5px);
}
.fab__btn--wa:hover,.fab__btn--wa:focus-visible{
  background:#25D366;color:#fff;
}
.fab__btn--srv{
  background:var(--grad-amber);color:var(--ink);border-color:rgba(5,28,59,.14);
}
.fab__btn--srv::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(253,197,0,.42);
  animation:fabRing 3s ease-out infinite;
}
@keyframes fabRing{
  0%{transform:scale(1);opacity:.75}
  70%,100%{transform:scale(1.4);opacity:0}
}

/* التسمية تنزلق نحو داخل الصفحة (يمين الزر في RTL) */
.fab__lbl{
  position:absolute;inset-inline-start:calc(100% + 12px);inset-block-start:50%;
  transform:translateY(-50%) translateX(9px);
  background:var(--ink);color:#fff;white-space:nowrap;
  font-family:var(--f-disp);font-weight:700;font-size:.83rem;
  padding:.46em .88em;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.fab__lbl::after{
  content:"";position:absolute;inset-inline-end:-4px;inset-block-start:50%;
  width:9px;height:9px;background:var(--ink);transform:translateY(-50%) rotate(45deg);
}
.fab__btn:hover .fab__lbl,.fab__btn:focus-visible .fab__lbl{
  opacity:1;transform:translateY(-50%) translateX(0);
}

/* الجوال: تبقى في المنتصف لكن أصغر وألصق بالحرف */
@media(max-width:899px){
  .fab{inset-inline-end:6px;gap:8px}
  .fab__btn{width:40px;height:40px;flex:0 0 40px}
  .fab__btn svg{width:17px;height:17px}
  .fab__lbl{display:none}
}

@media(prefers-reduced-motion:reduce){
  .fab{opacity:1;animation:none;transform:translateY(-50%)}
  .fab__btn--srv::after{animation:none;opacity:0}
  .fab__btn:hover{transform:none}
}

/* ---------- 22. نافذة طلب الخدمة ---------- */
.smodal{position:fixed;inset:0;z-index:130;display:none;padding:16px}
.smodal.is-open{display:grid;place-items:center}
.smodal__bd{
  position:absolute;inset:0;background:rgba(0,27,63,.74);
  backdrop-filter:blur(7px);animation:smFade .3s ease forwards;
}
.smodal__box{
  position:relative;width:100%;max-width:428px;max-height:90svh;overflow-y:auto;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,213,0,.24);
  animation:smPop .42s cubic-bezier(.2,.7,.3,1) forwards;
  overscroll-behavior:contain;
}
.smodal__box .leadbox{border-radius:var(--r-lg)}
@keyframes smFade{from{opacity:0}to{opacity:1}}
@keyframes smPop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.smodal__x{
  position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:5;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;transition:.25s;
}
.smodal__x svg{width:17px;height:17px}
.smodal__x:hover{background:var(--el-2);color:var(--ink);border-color:transparent;transform:rotate(90deg)}
html.sm-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.smodal__box,.smodal__bd{animation:none}}

/* ---------- 23. حركة الظهور ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 24b. عزل مكوّنات الشورت‌كودات عن تنسيق .prose ---------- */
/*
 * .prose a أولويتها (0,1,1) وتتجاوز كلاسات المكوّنات (0,1,0)،
 * فكانت روابط البطاقات والنماذج داخل الصفحات تصير أزرق داكن مسطّراً
 * وتختفي على الخلفيات الداكنة. هذه القواعد تُعيدها إلى ألوانها الأصلية.
 */
.prose .not-prose a,
.prose .not-prose a:hover{text-decoration:none}

/* بطاقات الخدمات */
.prose .srv-card{color:#fff}
.prose .srv-card h3{color:#fff}
.prose .srv-card__kicker{color:var(--el-2)}
.prose .srv-card__go{color:#fff}
.prose .srv-card:hover .srv-card__go{color:var(--ink)}

/* بطاقات الأحياء */
.prose .hood{color:#fff}
.prose .hood h3{color:#fff}
.prose .hood__cat{color:var(--el-2)}
.prose .hood__go{color:var(--el-2)}
.prose .hood:hover .hood__go{color:#fff}
.prose .hood__wa{color:#fff}
.prose .hood__tel{color:var(--ink)}
.prose .hood__rib{color:var(--ink)}

/* بطاقات التواصل */
.prose .ccard{color:inherit}
.prose .ccard b{color:var(--tx-soft)}
.prose .ccard>span{color:var(--ink)}
.prose .ccard>span.num{color:var(--bg-2)}
.prose .ccard small{color:var(--tx-soft)}
.prose .ccard__i{color:#fff}
.prose .ccard--static .ccard__i{color:var(--bg-2)}

/* صندوق النموذج الداكن */
.prose .leadbox{color:#fff}
.prose .leadbox__tag{color:var(--el-2)}
.prose .leadbox__hd b{color:#fff}
.prose .leadbox__alt a{color:#fff}
.prose .leadbox__alt a:first-child:hover{color:var(--ink)}
.prose .leadbox .field label{color:rgba(255,255,255,.8)}
.prose .leadbox .field .req{color:var(--el-2)}
.prose .leadbox .form__note{color:rgba(255,255,255,.55)}

/* شريط الدعوة المبسّط */
.prose .ctabar{color:#fff}
.prose .ctabar__t b{color:#fff}
.prose .ctabar__tag{color:var(--el-2)}
.prose .ctabar__b--tel{color:var(--ink)}
.prose .ctabar__b--wa{color:#053b1a}
.prose .ctabar__b--srv{color:#fff}
.prose .ctabar__b--srv:hover{color:var(--bg-1)}
.prose .ctabar{padding:clamp(20px,2.4vw,28px)}
.prose .ctabar__b{padding:.9em 1em}

/* صفحة الأحياء */
.prose .chip-a{color:var(--ink)}
.prose .chip-a:hover{color:#fff}
.prose .chip-a.is-hit{color:var(--ink)}
.prose .zone__n{color:var(--ink)}
.prose .zone__c{color:var(--bg-2)}
.prose .zone__lead{color:var(--tx-soft)}
.prose .acount b{color:var(--bg-1)}
.prose .afilter input{padding:.78em 1em .78em 3em}
.prose .chip-a{padding:.52em .9em}

/* خدمات تهمك */
.prose .picks__hd b{color:#fff}
.prose .picks__tag{color:var(--el-2)}
.prose .picks__tx b{color:var(--ink)}
.prose .picks__tx small{color:var(--tx-soft)}
.prose .picks__go{color:var(--bg-2)}
.prose .picks__l a:hover .picks__go{color:var(--ink)}
.prose .picks__more{color:var(--bg-2)}
.prose .picks__more:hover{color:#fff}
.prose .picks__l a{padding:11px 16px}

/* شريط الدعوة */
.prose .pcta{color:#fff}
.prose .pcta h3{color:#fff}

/* الأزرار داخل أي مكوّن */
.prose .not-prose .btn--amber{color:var(--ink)}
.prose .not-prose .btn--ghost{color:#fff}
.prose .not-prose .btn--white{color:var(--bg-1)}
.prose .not-prose .btn--wa{color:#053b1a}
.prose .not-prose .btn--ink{color:#fff}

/* الأسئلة الشائعة */
.prose .faq__q{color:var(--ink)}
.prose .faq__q i{color:var(--bg-2)}
.prose .faq__i.is-open .faq__q i{color:var(--ink)}


/* حزام أمان: تثبيت الحشو الداخلي للمكوّنات داخل .prose */
.prose .srv-card__body{padding:clamp(20px,2.4vw,28px)}
.prose .hood{padding:clamp(18px,2.2vw,24px)}
.prose .ccard{padding:22px}
.prose .leadbox{padding:clamp(20px,2.5vw,28px)}
.prose .pcta{padding:clamp(24px,3vw,36px)}
.prose .not-prose .field input,
.prose .not-prose .field select,
.prose .not-prose .field textarea{padding:.86em 1em}
.prose .not-prose .field select{padding-inline-end:2.4em}
.prose .not-prose .tel__cc{padding-inline:.9em}
.prose .not-prose .btn{padding:.86em 1.6em}
.prose .not-prose .btn--lg{padding:1.02em 1.9em}
.prose .not-prose .faq__q{padding:1.15em 0}
.prose .not-prose .faq__a>div{padding-block-end:1.3em}
.prose .hood__rib{padding:.44em 1.1em .44em 1.7em}
.prose .leadbox__alt a{padding:.78em}
.prose .areas span,.prose .areas a{padding:.72em 1em}

/* ---------- 25. نافذة الترحيب ---------- */
/*
 * المدة تُضبط من التخصيص وتُمرَّر كمتغيّر --intro-ms على العنصر نفسه،
 * فتتزامن معها الحركة وشريط التقدّم تلقائياً بلا أي رقم مكرّر في الكود.
 *
 * توقيت الحركة موزَّع على نحو 70٪ من المدة لا على أول ثانيتين —
 * فالفراغ الساكن هو ما يُشعِر بالطول، لا المدة نفسها.
 */
.intro{display:none}
html.has-intro{overflow:hidden}
html.has-intro .intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:28px;text-align:center;
  background:
    radial-gradient(58% 48% at 50% 34%,rgba(253,197,0,.13),transparent 70%),
    radial-gradient(130% 100% at 50% 22%,#00295C 0%,var(--bg-night) 66%);
}
.intro__in{max-width:34ch;display:grid;justify-items:center;position:relative}

/* الشعار */
.intro__mark{
  width:66px;height:66px;border-radius:20px;display:grid;place-items:center;
  background:var(--grad-amber);
  opacity:0;transform:scale(.82);
  animation:inMark calc(var(--intro-ms) * .22) cubic-bezier(.22,1,.3,1) calc(var(--intro-ms) * .03) forwards;
}
.intro__mark svg{width:38px;height:38px}
@keyframes inMark{to{opacity:1;transform:none}}

/* الاسم */
.intro__ar{
  font-family:var(--f-disp);font-weight:900;color:#fff;
  font-size:clamp(2.1rem,6.2vw,3.5rem);line-height:1.26;
  margin:22px 0 0;
  opacity:0;letter-spacing:.34em;
  animation:inName calc(var(--intro-ms) * .3) cubic-bezier(.22,1,.3,1) calc(var(--intro-ms) * .1) forwards;
}
@keyframes inName{
  from{opacity:0;letter-spacing:.34em;transform:translateY(12px)}
  to{opacity:1;letter-spacing:.02em;transform:none}
}

/* الخط الذهبي */
.intro__rule{
  display:block;height:2px;width:0;margin:20px 0 18px;
  background:var(--grad-amber);border-radius:2px;
  animation:inRule calc(var(--intro-ms) * .2) cubic-bezier(.22,1,.3,1) calc(var(--intro-ms) * .33) forwards;
}
@keyframes inRule{to{width:88px}}

/* الوصف */
.intro__sub{
  font-size:clamp(.94rem,1.8vw,1.1rem);line-height:1.9;
  color:rgba(255,255,255,.74);margin:0;
  opacity:0;transform:translateY(10px);
  animation:inSub calc(var(--intro-ms) * .24) cubic-bezier(.22,1,.3,1) calc(var(--intro-ms) * .42) forwards;
}
@keyframes inSub{to{opacity:1;transform:none}}

/* تخطّي — يظهر مبكراً جداً فمن استعجل لا ينتظر */
.intro__skip{
  margin-block-start:34px;font-family:var(--f-disp);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;color:rgba(255,255,255,.55);
  padding:.5em 1.2em;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.2);
  opacity:0;transition:color .25s,border-color .25s,background .25s;
  animation:inSkip .5s ease .8s forwards;
}
@keyframes inSkip{to{opacity:1}}
.intro__skip:hover,.intro__skip:focus-visible{
  color:var(--ink);background:var(--el-2);border-color:transparent;
}

/* شريط التقدّم — يُعلم الزائر أن الانتظار محدود ومنتهٍ */
.intro__bar{
  display:block;width:132px;height:2px;margin-block-start:22px;
  background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden;
}
.intro__bar i{
  display:block;height:100%;width:100%;
  background:var(--grad-amber);
  transform-origin:right;
  animation:introBar var(--intro-ms) linear forwards;
}
@keyframes introBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* الخروج */
.intro.is-out{animation:introOut .62s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
@keyframes introOut{to{opacity:0;transform:scale(1.025)}}

@media(prefers-reduced-motion:reduce){
  .intro__mark,.intro__ar,.intro__rule,.intro__sub,.intro__skip{
    animation:none;opacity:1;transform:none;letter-spacing:.02em;
  }
  .intro__rule{width:88px}
  .intro__bar{display:none}
  .intro.is-out{animation:none;opacity:0}
}

/* ---------- 26. WordPress helpers ---------- */
.alignright{float:right;margin:0 0 1em 1.4em}
.alignleft{float:left;margin:0 1.4em 1em 0}
.aligncenter{margin-inline:auto}
.wp-caption-text{font-size:.84rem;color:var(--tx-soft);text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.admin-bar .sr-hd{inset-block-start:32px}
@media(max-width:782px){.admin-bar .sr-hd{inset-block-start:46px}}