/* ==========================================================================
   شركة السجوان — نظام التصميم v3
   الاتجاه: "Warm Dossier" — ملف أرشيفي دافئ. الخدمة كحرفة موثّقة.
   ورق عاجي مسطّر · ختم كهرماني · عمود فقري مرقّم · ركن ملف مطويّ.
   كل شيء بخصائص منطقية (inline/block) ليعمل RTL و LTR بلا تكرار.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Almarai:wght@300;400;700;800&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&display=swap');

/* ---------------------------------------------------------------- الرموز */
:root{
  /* لوحة مستخرجة من الشعار: كحلي + كهرماني على ورق عاجي */
  --navy:#1B3A5C;
  --navy-deep:#122741;
  --navy-ink:#0C1B2E;
  --navy-soft:#2E5480;
  --navy-mist:#E7EDF4;
  --amber:#F0A830;
  --amber-deep:#B87410;      /* للأيقونات والحدود الزخرفية */
  --amber-ink:#8A570D;       /* للنصوص الكهرمانية الصغيرة — AA مضمون على الورق */
  --amber-wash:#FDF4E3;
  --paper:#FCFAF7;
  --paper-2:#F6F1E9;
  --paper-3:#EFE7DA;
  --surface:#FFFFFF;
  --rule:#E8DFD2;
  --rule-ink:#C9B79C;
  --text:#241F19;
  --text-2:#5C5347;          /* AA على الورق: 6.9:1 */
  --danger:#9E2A24;
  --ok:#1F6B4A;

  /* الزوايا */
  --r-xs:4px;
  --r:7px;
  --r-lg:12px;
  --r-xl:20px;

  /* المقاس */
  --maxw:1200px;
  --maxw-narrow:820px;
  --gutter:clamp(20px,4vw,32px);

  /* سلّم المسافات (‎8pt‎) */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:44px;  --s8:60px; --s9:80px; --s10:112px;

  /* الخطوط */
  --f-display:'El Messiri',serif;
  --f-body:'Almarai',sans-serif;
  --f-latin:'Newsreader',Georgia,serif;
  --f-num:'Newsreader',Georgia,serif;   /* أرقام بأشكال جدولية أنيقة */

  /* الظلال — دافئة، بلون الحبر لا الأسود */
  --sh-1:0 1px 2px rgba(36,31,25,.05);
  --sh-2:0 1px 2px rgba(36,31,25,.06),0 8px 26px rgba(36,31,25,.06);
  --sh-3:0 18px 48px rgba(36,31,25,.13);
  --sh-4:0 32px 70px rgba(18,39,65,.20);

  /* الحركة */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:.24s;

  --z-header:70;
  --z-float:80;
  --z-overlay:90;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-block-start:120px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--text);
  font-size:16px;
  line-height:2;
  font-weight:300;
  direction:rtl;
  overflow-x:clip;
  /* نسيج ورق مسطّر — دفء لا يُرى لكنه يُحسّ */
  background-image:
    repeating-linear-gradient(180deg,transparent,transparent 31px,rgba(201,183,156,.085) 31px,rgba(201,183,156,.085) 32px);
  background-attachment:local;
}
html.lang-en body{direction:ltr;font-family:var(--f-latin);line-height:1.75;font-weight:400}

img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--navy);text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2.5px solid var(--amber-deep);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--amber);color:var(--navy-deep)}

/* مقاس افتراضي آمن لكل أيقونة — يمنع أي أيقونة من التمدّد لعرض الحاوية */
.ico{inline-size:20px;block-size:20px;flex:none}

/* سمة hidden يجب أن تغلب أي display معلن (بطاقات الكتالوج مثلاً display:flex،
   وهو ما كان يُبطل الإخفاء عند التصفية). */
[hidden]{display:none!important}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* رابط التخطّي — أول ما يصله لوح المفاتيح */
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:var(--s4);
  z-index:var(--z-overlay);background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:var(--r);font-weight:700;
  transition:inset-block-start .2s var(--ease);
}
.skip:focus{inset-block-start:var(--s4)}

/* ------------------------------------------------------------- الطباعة */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--navy);
  font-weight:600;
  line-height:1.35;
  text-wrap:balance;
}
html.lang-en :is(h1,h2,h3,h4,h5){font-family:var(--f-latin);font-weight:600;letter-spacing:-.011em}
h1{font-size:clamp(2.15rem,1.35rem + 3.1vw,3.85rem);line-height:1.18;letter-spacing:-.012em}
h2{font-size:clamp(1.62rem,1.2rem + 1.75vw,2.6rem);line-height:1.24}
h3{font-size:clamp(1.14rem,1.05rem + .38vw,1.32rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}

p{text-wrap:pretty}
.lede{font-size:clamp(1.04rem,1rem + .28vw,1.16rem);line-height:2.05;max-width:64ch;color:var(--text-2)}
html.lang-en .lede{line-height:1.8}
.lede-tight{max-width:56ch}
strong,b{color:var(--navy);font-weight:700}

/* الترويسة الأرشيفية — كعنوان ملف */
.filetag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:.775rem;font-weight:800;
  letter-spacing:.14em;color:var(--amber-ink);
  padding-block-end:9px;border-block-end:2px solid var(--amber);
  margin-block-end:20px;text-transform:uppercase;
}
.filetag::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--amber);transform:rotate(45deg);
}
html.lang-en .filetag{font-family:var(--f-latin);letter-spacing:.16em;font-weight:700}

.sec-head{max-width:68ch;margin-block-end:var(--s8)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .filetag{justify-content:center}
.sec-head.center .lede{margin-inline:auto}
.sec-head h2 + .lede{margin-block-start:var(--s4)}

/* ختم — موتيف التوثيق المتكرر */
.stamp{
  display:inline-grid;place-items:center;
  inline-size:104px;block-size:104px;border-radius:50%;
  border:2px dashed var(--amber);color:var(--amber-deep);
  font-family:var(--f-display);font-size:.8rem;font-weight:700;text-align:center;
  line-height:1.32;transform:rotate(-9deg);padding:12px;
  background:var(--amber-wash);
  box-shadow:0 6px 22px rgba(184,116,16,.16);
}
/* النصّ اللاتيني أطول من العربي في المساحة نفسها — نوسّع الختم قليلاً */
html.lang-en .stamp{inline-size:118px;block-size:118px;font-size:.74rem;line-height:1.4}

/* ------------------------------------------------------ الرأس والتنقّل */
.topline{
  background:var(--navy-ink);color:#CBD8E5;font-size:.82rem;padding:9px 0;
  line-height:1.7;
}
.topline .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:center}
.topline a{color:var(--amber);font-weight:400}
.topline a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.topline .tl-contact{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.topline .dot{opacity:.35}

header.site{
  position:sticky;inset-block-start:0;z-index:var(--z-header);
  background:rgba(252,250,247,.93);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-block-end:1px solid var(--rule);
  transition:box-shadow .3s var(--ease);
}
header.site.stuck{box-shadow:0 6px 26px rgba(36,31,25,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-block-size:78px;gap:var(--s5)}
.brand{display:flex;align-items:center;flex:none}
.brand img{block-size:46px;inline-size:auto}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-links a{
  position:relative;
  font-family:var(--f-display);font-size:.98rem;font-weight:500;
  color:var(--text);padding:9px 14px;border-radius:var(--r);
  transition:background var(--dur),color var(--dur);
  white-space:nowrap;
}
html.lang-en .nav-links a{font-family:var(--f-latin)}
.nav-links a:hover{background:var(--paper-2)}
.nav-links a.on{color:var(--amber-deep);font-weight:700}
.nav-links a.on::after{
  content:"";position:absolute;inset-block-end:1px;inset-inline:14px;
  block-size:2.5px;background:var(--amber);border-radius:2px;
}
.nav-tools{display:flex;gap:9px;align-items:center;flex:none}

/* --------------------------------------------------------------- أزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);
  font-family:var(--f-display);font-size:1rem;font-weight:600;
  background:var(--navy);color:#fff;border:1.5px solid var(--navy);
  box-shadow:var(--sh-2);min-block-size:48px;text-align:center;
  transition:background var(--dur),transform .16s var(--ease),box-shadow var(--dur),border-color var(--dur);
}
html.lang-en .btn{font-family:var(--f-latin);font-weight:600}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn:active{transform:translateY(0) scale(.975)}
.btn svg{inline-size:19px;block-size:19px;flex:none}
.btn--amber{background:var(--amber);border-color:var(--amber);color:var(--navy-ink)}
.btn--amber:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:#fff}
.btn--line{background:transparent;color:var(--navy);border-color:var(--rule-ink);box-shadow:none}
.btn--line:hover{background:var(--paper-2);border-color:var(--navy);transform:none;box-shadow:none}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none}
.btn--ghost-light:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:none;box-shadow:none}
.btn--sm{padding:10px 18px;font-size:.9rem;min-block-size:42px}
.btn--wide{inline-size:100%}

.lang-btn{
  font-family:var(--f-display);background:transparent;border:1.5px solid var(--rule-ink);
  color:var(--navy);padding:9px 14px;border-radius:var(--r);
  min-block-size:44px;min-inline-size:52px;font-size:.9rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur),border-color var(--dur);
}
.lang-btn:hover{background:var(--paper-2);border-color:var(--navy)}
#burger{display:none;font-size:1.15rem;padding:9px 13px}

/* ----------------------------------------------------------- الأقسام */
section{padding-block:clamp(56px,7vw,92px)}
section.tinted{background:var(--paper-2);border-block:1px solid var(--rule)}
section.ink{background:var(--navy-deep);color:#C7D4E2}
section.ink :is(h1,h2,h3,h4){color:#fff}
section.ink .lede{color:#A9BCCE}
section.ink .filetag{color:var(--amber)}
section.tight{padding-block-start:0}

/* شريط زخرفي: مسطرة أرشيفية بين الأقسام */
.rule-band{
  block-size:6px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 26px,transparent 26px 52px);
  opacity:.45;
}

/* ------------------------------------------------------------- البطل */
.hero{position:relative;padding-block:clamp(52px,7vw,96px) clamp(48px,6vw,84px);overflow:hidden}
.hero::before{  /* هالة كهرمانية خفيفة خلف الزاوية */
  content:"";position:absolute;inset-block-start:-180px;inset-inline-end:-140px;
  inline-size:520px;block-size:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,168,48,.16),transparent 66%);
  pointer-events:none;
}
.hero > *{position:relative}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,64px);align-items:center}
.hero h1{margin-block-end:var(--s5)}
.hero-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-block-start:var(--s6)}
.hero-visual{position:relative}
.hero-visual .frame{
  border-radius:var(--r-lg);overflow:hidden;
  border-block-start:5px solid var(--amber);
  box-shadow:var(--sh-3);background:var(--paper-2);
}
.hero-visual img{inline-size:100%;aspect-ratio:3/2;object-fit:cover}
.hero-visual .stamp{position:absolute;inset-block-end:-30px;inset-inline-start:-24px}

/* صفحات داخلية: بطل نصّي مضغوط */
.hero--page{padding-block:clamp(48px,6vw,76px) clamp(28px,3.5vw,44px)}
.hero--page::before{opacity:.7}

/* فتات الطريق */
.crumbs{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--text-2);margin-block-end:var(--s4);flex-wrap:wrap}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px}
.crumbs .sep{opacity:.45}

/* ------------------------------------------------- شريط الأرقام/الثقة */
.statband{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  margin-block-start:var(--s7);
}
.stat{background:var(--surface);padding:24px 22px;text-align:center}
.stat b{
  display:block;font-family:var(--f-display);font-size:clamp(1.7rem,1.3rem + 1.4vw,2.35rem);
  color:var(--navy);font-weight:700;line-height:1.15;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat span{display:block;font-size:.9rem;color:var(--text-2);margin-block-start:6px;line-height:1.65}
.stat .stat-ic{color:var(--amber-deep);margin:0 auto 10px;inline-size:24px;block-size:24px}

/* ------------------------------------ العمود الفقري لدورة الخدمة (التوقيع) */
.spine{position:relative;padding-inline-start:58px}
.spine::before{
  content:"";position:absolute;inset-block:10px;inset-inline-start:20px;
  inline-size:2px;background:linear-gradient(180deg,var(--amber),var(--rule-ink));
}
.stage{position:relative;padding-block-end:var(--s8)}
.stage:last-child{padding-block-end:0}
.stage::before{
  content:attr(data-step);
  position:absolute;inset-inline-start:-58px;inset-block-start:-2px;
  inline-size:42px;block-size:42px;border-radius:50%;
  background:var(--surface);border:2px solid var(--amber);
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;color:var(--amber-deep);font-size:1rem;
  box-shadow:0 0 0 6px var(--paper);
}
section.tinted .stage::before{box-shadow:0 0 0 6px var(--paper-2)}
.stage h3{margin-block-end:var(--s2)}
.stage p{color:var(--text-2);font-size:1rem;line-height:1.95}
.stage-meta{
  display:flex;gap:var(--s2);flex-wrap:wrap;margin-block-start:var(--s3);
}

/* رقائق */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 13px;border-radius:999px;
  background:var(--amber-wash);border:1px solid rgba(184,116,16,.28);
  color:var(--amber-ink);font-size:.82rem;font-weight:700;line-height:1.8;
}
.chip--navy{background:var(--navy-mist);border-color:rgba(27,58,92,.2);color:var(--navy)}
.chip svg{inline-size:14px;block-size:14px}

/* ------------------------------------------------------------ البطاقات */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:var(--s5)}
.docs--2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.docs--3{grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))}
.docs--4{grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}

.doc{
  position:relative;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:32px 28px;box-shadow:var(--sh-2);
  border-block-start:4px solid var(--amber);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);
  display:flex;flex-direction:column;
}
.doc:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.doc h3{margin-block-end:var(--s3)}
.doc > p{font-size:.97rem;color:var(--text-2);line-height:1.95}
.doc ul{margin-block-start:var(--s4)}
.doc ul li{
  padding-inline-start:24px;position:relative;font-size:.94rem;
  color:var(--text-2);line-height:1.95;
}
.doc ul li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;
  inline-size:9px;block-size:5px;
  border-inline-start:2px solid var(--amber-deep);
  border-block-end:2px solid var(--amber-deep);
  transform:rotate(-45deg);
}
.doc-foot{margin-block-start:auto;padding-block-start:var(--s4)}
/* رقم البطاقة. كان لونه --paper-3 (#EFE7DA) على بطاقة بيضاء = تباين 1.23:1،
   أي دون حدّ 3:1 للنصّ الكبير بثلاثة أضعاف — رقمٌ موجود في الشيفرة وغير موجود
   على الشاشة. الكحلي الشفّاف يبقيه خافتاً كما أُريد له، ومرئياً كما يجب. */
.doc-num{
  position:absolute;inset-block-start:18px;inset-inline-end:22px;
  font-family:var(--f-num);font-size:2.6rem;font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
  color:rgba(27,58,92,.55);line-height:1;pointer-events:none;user-select:none;
}

/* أيقونة داخل بطاقة */
.doc-ic{
  inline-size:52px;block-size:52px;border-radius:var(--r);
  background:var(--amber-wash);color:var(--amber-deep);
  display:grid;place-items:center;margin-block-end:var(--s4);
  border:1px solid rgba(184,116,16,.2);
}
.doc-ic svg{inline-size:26px;block-size:26px}
.doc--navy .doc-ic{background:var(--navy-mist);color:var(--navy);border-color:rgba(27,58,92,.16)}

/* بطاقة مميّزة */
.doc--feature{
  background:linear-gradient(160deg,var(--navy-deep),var(--navy));
  border-color:var(--navy-deep);color:#C7D4E2;
}
.doc--feature :is(h3,h4){color:#fff}
.doc--feature > p{color:#C3D1DF}
.doc--feature ul li{color:#C9D6E2}
.doc--feature ul li::before{border-color:var(--amber)}
.doc--feature .doc-num{color:rgba(240,168,48,.55)}   /* كان أبيض 7% = 1.23:1 على الكحلي */
.doc--feature .doc-ic{background:rgba(240,168,48,.15);color:var(--amber);border-color:rgba(240,168,48,.28)}

/* قائمة تحقّق مستقلة */
.checklist{display:grid;gap:var(--s3)}
.checklist li{
  display:flex;gap:var(--s3);align-items:flex-start;
  font-size:.96rem;color:var(--text-2);line-height:1.85;
}
.checklist svg{inline-size:21px;block-size:21px;flex:none;color:var(--amber-deep);margin-block-start:.4em}

/* --------------------------------------------------- من نخدم (شرائح) */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:900px){.audience{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.audience{grid-template-columns:1fr}}
.aud{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:24px 20px;text-align:center;
  transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.aud:hover{border-color:var(--amber);transform:translateY(-3px)}
.aud svg{inline-size:32px;block-size:32px;color:var(--amber-deep);margin:0 auto var(--s3)}
.aud b{display:block;font-family:var(--f-display);color:var(--navy);font-size:1.02rem;margin-block-end:5px}
.aud span{font-size:.86rem;color:var(--text-2);line-height:1.75}

/* ------------------------------------------------------- اقتباس/مبدأ */
.quote{
  position:relative;
  background:var(--surface);border:1px solid var(--rule);
  border-inline-start:5px solid var(--amber);
  border-radius:var(--r-lg);padding:38px 36px;
  box-shadow:var(--sh-2);max-inline-size:74ch;
}
.quote p{
  font-family:var(--f-display);font-size:clamp(1.16rem,1.05rem + .55vw,1.5rem);
  line-height:1.75;color:var(--navy);font-weight:500;
}
html.lang-en .quote p{font-family:var(--f-latin);font-style:italic}
.quote cite{display:block;margin-block-start:var(--s4);font-style:normal;font-size:.88rem;color:var(--text-2);font-weight:700}
.quote::before{
  content:"”";position:absolute;inset-block-start:2px;inset-inline-end:26px;
  font-family:var(--f-latin);font-size:5.4rem;line-height:1;color:var(--paper-3);
  pointer-events:none;
}

/* ------------------------------------------------------ الخط الزمني */
.timeline{display:grid;gap:var(--s5);position:relative;padding-inline-start:34px}
.timeline::before{
  content:"";position:absolute;inset-block:8px;inset-inline-start:7px;
  inline-size:2px;background:linear-gradient(180deg,var(--amber),var(--rule));
}
.tl{position:relative}
.tl::before{
  content:"";position:absolute;inset-inline-start:-34px;inset-block-start:.55em;
  inline-size:16px;block-size:16px;border-radius:50%;
  background:var(--surface);border:3px solid var(--amber);
}
.tl b{display:block;font-family:var(--f-display);color:var(--navy);font-size:1.04rem;margin-block-end:3px}
.tl span{font-size:.94rem;color:var(--text-2);line-height:1.9}

/* ---------------------------------------- محادثة التذكرة (يبنيها js/tickets.js)
   هذه الأصناف لا ترد في أي HTML مولَّد: يصنعها tickets.js بـcreateElement عند جلب
   التذكرة، فلا يلتقطها البحث في الصفحات ولا أي اختبار واجهة. بلا هذه القواعد كانت
   المحادثة تُعرض نصّاً خاماً متلاصقاً بلا تمييز بين ردّ الفريق وردّ العميل — العميل
   يفتح رابط بريده فيجد وظيفةً سليمة وشكلاً منهاراً. تُكتب هنا لا في build-site.py
   لأن المولّد ينتج HTML لا CSS.

   الاتجاه: الصفحة RTL، فردّ الفريق يُزاح إلى اليسار (inline-end) ليقرأ الحوار
   كما يقرأ المستخدم تطبيقات المحادثة: كلامي في جهتي وكلام الآخر في الجهة المقابلة. */
.timeline > li{position:relative;font-size:.94rem;color:var(--text-2);line-height:1.9}
.timeline > li::before{
  content:"";position:absolute;inset-inline-start:-34px;inset-block-start:.55em;
  inline-size:16px;block-size:16px;border-radius:50%;
  background:var(--surface);border:3px solid var(--amber);
}
.timeline > li time{
  display:block;font-size:.8rem;color:var(--text-2);opacity:.85;
  font-family:var(--f-latin);letter-spacing:.02em;
}
.timeline > li b{
  display:inline-block;font-family:var(--f-display);color:var(--navy);
  font-size:1rem;margin-block-start:2px;
}

.sup-msg{
  position:relative;margin-block-end:var(--s4);padding:15px 18px;
  border-radius:var(--r-lg);border:1px solid var(--rule);
  background:var(--surface);box-shadow:var(--sh-1);
  max-inline-size:min(88%,640px);
}
/* ردّ الفريق: خلفية عاجية وحدّ كهرماني في جهة البداية — إشارة بصرية فورية
   إلى «هذه رسالة منّا». اللون الكهرماني حدٌّ لا خلفية نصّ، فتباين النصّ يبقى
   على الورق العاجي لا على الكهرماني (الأخير يسقط في 4.5:1 مع الأبيض). */
.sup-msg--staff{
  margin-inline-end:auto;
  background:var(--amber-wash);border-color:var(--rule-ink);
  border-inline-start:3px solid var(--amber);
}
.sup-msg--customer{
  margin-inline-start:auto;
  background:var(--navy-mist);border-color:#CBD8E6;
  border-inline-end:3px solid var(--navy-soft);
}
.sup-msg-meta{
  display:block;font-size:.8rem;font-weight:700;color:var(--text-2);
  margin-block-end:7px;letter-spacing:.01em;
}
.sup-msg--staff .sup-msg-meta{color:var(--amber-ink)}
.sup-msg--customer .sup-msg-meta{color:var(--navy)}
/* white-space:pre-wrap يحفظ أسطر العميل كما كتبها: بلاغ العطل يُكتب عادةً
   بنقاط في أسطر منفصلة، ودمجها في فقرة واحدة يفقده معناه. */
.sup-msg > p{margin:0;white-space:pre-wrap;line-height:1.95;color:var(--text);font-size:.97rem}
.sup-msg-file{margin-block-start:10px !important;font-size:.9rem}
.sup-msg-file a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--navy);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;word-break:break-word;
}
.sup-msg-file a:hover{color:var(--amber-ink)}
.sup-empty{
  margin:0;padding:20px 18px;text-align:center;
  border:1px dashed var(--rule-ink);border-radius:var(--r-lg);
  background:var(--paper-2);color:var(--text-2);font-size:.94rem;line-height:1.9;
}
/* .hint معرّف أصلاً داخل .field وحدها، وtickets.js يضع <span class="hint">
   خارج أي حقل (اسم المرفق بجانب رابطه) فكان يخرج بلا تنسيق. */
.sup-msg-file .hint,
[data-tv-file] .hint{font-weight:300;font-size:.82rem;color:var(--text-2)}

@media (max-width:640px){
  .sup-msg{max-inline-size:100%}
}

/* ------------------------------------------------ كتالوج المنتجات */
.cat-filters{
  display:flex;gap:var(--s2);flex-wrap:wrap;margin-block-end:var(--s6);
  padding-block-end:var(--s4);border-block-end:1px solid var(--rule);
}
.cat-filters button{
  padding:9px 18px;border-radius:999px;min-block-size:42px;
  background:var(--surface);border:1.5px solid var(--rule);
  font-family:var(--f-display);font-size:.92rem;font-weight:600;color:var(--text-2);
  transition:all var(--dur) var(--ease);
}
html.lang-en .cat-filters button{font-family:var(--f-latin)}
.cat-filters button:hover{border-color:var(--amber);color:var(--amber-deep)}
.cat-filters button[aria-pressed="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}

.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:var(--s5)}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--rule-ink)}
.card-top{
  padding:20px 22px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
}
.card-ic{
  inline-size:44px;block-size:44px;border-radius:var(--r);flex:none;
  background:var(--amber-wash);color:var(--amber-deep);display:grid;place-items:center;
  border:1px solid rgba(184,116,16,.2);
}
.card-ic svg{inline-size:23px;block-size:23px}
.card-body{padding:16px 22px 22px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.06rem;margin-block-end:var(--s2)}
.card-body p{font-size:.9rem;color:var(--text-2);line-height:1.85}
.card-body ul{margin-block-start:var(--s3);display:flex;flex-wrap:wrap;gap:6px}
.card-body ul li{
  font-size:.77rem;color:var(--text-2);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r-xs);padding:3px 9px;line-height:1.75;
}
.card-cta{margin-block-start:auto;padding-block-start:var(--s4)}
.card-cta a{
  font-family:var(--f-display);font-size:.92rem;font-weight:700;color:var(--amber-ink);
  display:inline-flex;align-items:center;gap:7px;min-block-size:40px;
}
html.lang-en .card-cta a{font-family:var(--f-latin)}
.card-cta a:hover span{text-decoration:underline;text-underline-offset:4px}
.card-cta .ico{inline-size:16px;block-size:16px;transition:transform var(--dur) var(--ease)}
html:not(.lang-en) .card-cta .ico{transform:scaleX(-1)}
.card:hover .card-cta .ico{transform:translateX(4px)}
html:not(.lang-en) .card:hover .card-cta .ico{transform:scaleX(-1) translateX(4px)}

.catalog-empty{
  grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--text-2);
  border:1px dashed var(--rule-ink);border-radius:var(--r-lg);background:var(--paper-2);
}

/* ------------------------------------------------------- الأكورديون */
.acc{display:grid;gap:var(--s3);max-inline-size:900px}
.acc details{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  border-inline-start:4px solid var(--rule-ink);
  overflow:hidden;transition:border-color var(--dur),box-shadow var(--dur);
}
.acc details[open]{border-inline-start-color:var(--amber);box-shadow:var(--sh-2)}
.acc summary{
  list-style:none;cursor:pointer;
  padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  font-family:var(--f-display);font-size:1.03rem;font-weight:600;color:var(--navy);
  min-block-size:60px;
}
html.lang-en .acc summary{font-family:var(--f-latin)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--paper-2)}
.acc summary::after{
  content:"";flex:none;inline-size:11px;block-size:11px;
  border-right:2.5px solid var(--amber-deep);border-bottom:2.5px solid var(--amber-deep);
  transform:rotate(45deg);margin-block-start:-5px;
  transition:transform var(--dur) var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg);margin-block-start:4px}
.acc .acc-body{padding:0 26px 24px;color:var(--text-2);font-size:.96rem;line-height:2}

/* --------------------------------------------------------- النماذج */
.field{margin-block-end:var(--s5)}
.field label{
  display:block;font-weight:700;font-size:.9rem;color:var(--navy);
  margin-block-end:var(--s2);
}
.field .req{color:var(--danger);font-weight:700}
.field .hint{display:block;font-weight:300;font-size:.82rem;color:var(--text-2);margin-block-start:3px}
.field input,.field select,.field textarea{
  inline-size:100%;padding:13px 16px;border-radius:var(--r);min-block-size:50px;
  background:var(--surface);border:1.5px solid var(--rule-ink);
  transition:border-color var(--dur),box-shadow var(--dur);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3.5px var(--amber-wash);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.field textarea{min-block-size:152px;resize:vertical;line-height:1.9}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber-deep) 50%),linear-gradient(135deg,var(--amber-deep) 50%,transparent 50%);
  background-position:calc(var(--sel-x,20px)) calc(50% - 2px),calc(var(--sel-x,20px) + 5px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-inline-start:44px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.hp{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.err{color:var(--danger);font-size:.83rem;margin-block-start:6px;font-weight:700}

.note{
  padding:15px 19px;border-radius:var(--r);background:var(--amber-wash);
  border-inline-start:3px solid var(--amber);font-size:.93rem;line-height:1.9;
}
.note--ok{background:#EAF6F0;border-inline-start-color:var(--ok);color:#155239}
.note--bad{background:#FBEDEC;border-inline-start-color:var(--danger);color:#7B211C}
.note:empty{display:none}

/* مجموعة حقول قابلة للطيّ (إفصاح تدريجي) */
.fieldset{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:0;margin-block-end:var(--s5);background:var(--paper-2);overflow:hidden;
}
.fieldset > summary{
  cursor:pointer;list-style:none;padding:15px 20px;min-block-size:54px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:.97rem;
}
.fieldset > summary::-webkit-details-marker{display:none}
.fieldset > summary .ico{color:var(--amber-deep)}
.fieldset > summary:hover{background:var(--paper-3)}
.fieldset > summary::after{
  content:"";inline-size:9px;block-size:9px;margin-inline-start:auto;flex:none;
  border-right:2.5px solid var(--amber-deep);border-bottom:2.5px solid var(--amber-deep);
  transform:rotate(45deg);margin-block-start:-4px;transition:transform var(--dur)
}
.fieldset[open] > summary::after{transform:rotate(-135deg);margin-block-start:3px}
.fieldset .fs-body{padding:4px 20px 8px;background:var(--surface);border-block-start:1px solid var(--rule)}

/* النشرة البريدية */
.news-form{display:flex;gap:var(--s2);flex-wrap:wrap;max-inline-size:520px}
.news-form input{
  flex:1 1 220px;padding:13px 16px;min-block-size:50px;border-radius:var(--r);
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);color:#fff;
}
.news-form input::placeholder{color:rgba(255,255,255,.5)}
.news-form input:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.12)}
.news-msg{font-size:.88rem;margin-block-start:var(--s3);min-block-size:1.4em}
.news-msg.ok{color:#7FD7AC}
.news-msg.bad{color:#F6A9A4}

/* ------------------------------------------------- شريط دعوة (CTA) */
.cta-band{
  background:linear-gradient(150deg,var(--navy-deep) 0%,var(--navy) 62%,#24507D 100%);
  color:#fff;border-radius:var(--r-xl);padding:clamp(34px,5vw,58px);
  position:relative;overflow:hidden;box-shadow:var(--sh-4);
}
.cta-band::before{
  content:"";position:absolute;inset-block-start:-90px;inset-inline-start:-60px;
  inline-size:340px;block-size:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,168,48,.24),transparent 68%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;margin-block-end:var(--s4)}
.cta-band .lede{color:#B9C8D8}
.cta-band .hero-actions{margin-block-start:var(--s6)}

/* ---------------------------------------------------------- الوسائط */
.media-doc{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);border:1px solid var(--rule);
  border-block-start:4px solid var(--amber);box-shadow:var(--sh-2);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
}
.media-doc img{
  inline-size:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .55s var(--ease),filter .4s;
}
.media-doc:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.media-doc:hover img{filter:sepia(.14) saturate(1.05);transform:scale(1.03)}
.media-doc figcaption{
  padding:12px 18px;font-size:.83rem;color:var(--text-2);
  background:var(--surface);border-block-start:1px solid var(--rule);line-height:1.75;
}
.stage .media-doc{margin-block-start:var(--s5);max-inline-size:460px}
.media-wide{margin-block-start:var(--s7);max-inline-size:820px}

.doc-media{
  position:relative;margin-block-end:var(--s5);border-radius:var(--r);overflow:hidden;
  background:var(--paper-2);box-shadow:var(--sh-1);
}
.doc-media img{inline-size:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .55s var(--ease),filter .4s}
.doc:hover .doc-media img{filter:sepia(.12) saturate(1.04);transform:scale(1.03)}

/* ركن ملف مطويّ — لغة الأرشيف */
.doc-media::after,.media-doc::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  border-width:0 24px 24px 0;border-style:solid;
  border-color:var(--amber) var(--paper);
  opacity:.92;pointer-events:none;
}
html:not(.lang-en) :is(.doc-media,.media-doc)::after{
  border-width:0 0 24px 24px;border-color:var(--amber) transparent transparent var(--paper);
}

/* شريط شعارات/معايير */
.logostrip{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:center;
  padding:26px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
}
.logostrip span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:.95rem;
  opacity:.85;
}
html.lang-en .logostrip span{font-family:var(--f-latin)}
.logostrip svg{inline-size:22px;block-size:22px;color:var(--amber-deep)}

/* ---------------------------------------------------------- التذييل */
footer.site{background:var(--navy-ink);color:#B7C6D6;padding-block:var(--s9) var(--s5);position:relative}
footer.site::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:4px;
  background:repeating-linear-gradient(90deg,var(--amber) 0 30px,transparent 30px 60px);
  opacity:.6;
}
.foot-h{font-family:var(--f-display);color:#fff;font-size:1.06rem;font-weight:600;margin-block-end:var(--s4)}
html.lang-en .foot-h{font-family:var(--f-latin)}
footer.site a{color:#B7C6D6;font-size:.95rem;line-height:2.15;display:inline-block}
footer.site a:hover{color:var(--amber)}
footer.site p{font-size:.93rem;line-height:1.95}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.5fr;gap:var(--s7)}
.foot-brand img{block-size:52px;inline-size:auto;margin-block-end:var(--s4);filter:brightness(0) invert(1)}
.foot-social{display:flex;gap:var(--s2);margin-block-start:var(--s4)}
.foot-social a{
  inline-size:42px;block-size:42px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;
  transition:background var(--dur),border-color var(--dur);
}
.foot-social a:hover{background:rgba(240,168,48,.16);border-color:var(--amber)}
.foot-social svg{inline-size:19px;block-size:19px}
.foot-base{
  margin-block-start:var(--s8);padding-block-start:var(--s5);
  border-block-start:1px solid rgba(255,255,255,.1);
  font-size:.85rem;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  line-height:1.9;
}

/* ------------------------------------------ عناصر عائمة / شريط جوال */
.wa-float{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:var(--z-float);
  inline-size:56px;block-size:56px;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(31,168,85,.38);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
}
.wa-float:hover{transform:scale(1.07);box-shadow:0 14px 38px rgba(31,168,85,.5)}
.wa-float svg{inline-size:29px;block-size:29px}

.mobile-cta{
  display:none;position:fixed;inset-block-end:0;inset-inline:0;z-index:var(--z-float);
  background:rgba(252,250,247,.97);backdrop-filter:blur(12px);
  border-block-start:1px solid var(--rule);
  padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  gap:var(--s2);box-shadow:0 -6px 24px rgba(36,31,25,.1);
}
.mobile-cta a{flex:1}

/* شريط تقدّم القراءة */
.progress{
  position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:calc(var(--z-header) + 1);
  background:var(--amber);transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}
html:not(.lang-en) .progress{transform-origin:100% 50%}


/* ==========================================================================
   البطل الغلافي v5 — صورة كاملة + تدرّج كحلي + عناصر عائمة
   ========================================================================== */
.hero--cover{
  position:relative;overflow:hidden;
  min-block-size:min(88vh,860px);
  display:flex;align-items:center;
  padding-block:clamp(90px,12vh,150px) clamp(120px,16vh,190px);
  color:#fff;
}
.hero--cover::before{display:none}   /* هالة النسخة القديمة */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center}
.hero-bg picture{display:block;block-size:100%}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--paper) 0,transparent 22%),
    linear-gradient(105deg,
      rgba(10,22,38,.96) 0%,rgba(12,27,46,.9) 30%,
      rgba(18,39,65,.72) 55%,rgba(18,39,65,.38) 78%,rgba(240,168,48,.14) 100%);
}
html.lang-en .hero-shade{
  background:
    linear-gradient(to top,var(--paper) 0,transparent 22%),
    linear-gradient(-105deg,
      rgba(10,22,38,.96) 0%,rgba(12,27,46,.9) 30%,
      rgba(18,39,65,.72) 55%,rgba(18,39,65,.38) 78%,rgba(240,168,48,.14) 100%);
}
.hero-cover-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,60px);
  align-items:center;inline-size:100%;
}
.hero--cover h1{color:#fff;margin-block-end:var(--s5);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.lede--light{color:#E6EDF5;font-weight:400}
.hero--cover .lede{text-shadow:0 2px 16px rgba(0,0,0,.45);font-size:clamp(1.08rem,1rem + .4vw,1.24rem)}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;margin-block-end:var(--s5);
  background:rgba(240,168,48,.14);border:1px solid rgba(240,168,48,.45);
  color:#FFC65E;font-size:.9rem;font-weight:700;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hero-badge .ico{inline-size:16px;block-size:16px}

/* العناصر العائمة يمين البطل */
.hero-floats{position:relative;min-block-size:320px}
.hfloat{
  position:absolute;display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:var(--r-lg);
  background:rgba(252,250,247,.94);color:var(--navy);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 44px rgba(5,15,28,.35);
  font-family:var(--f-display);font-weight:600;font-size:.94rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  white-space:nowrap;
}
html.lang-en .hfloat{font-family:var(--f-latin)}
.hfloat .ico{color:var(--amber-deep);inline-size:19px;block-size:19px}
.hfloat--1{inset-block-start:6%;inset-inline-end:4%}
.hfloat--2{inset-block-start:40%;inset-inline-end:26%}
.hfloat--3{inset-block-start:74%;inset-inline-end:8%}
.hero-seal{position:absolute;inset-block-start:32%;inset-inline-start:-4%}
/* في LTR البطاقة الوسطى تمتدّ نحو الختم — ننزله تحت خطّها */
html.lang-en .hero-seal{inset-block-start:64%;inset-inline-start:-2%}
@media (prefers-reduced-motion:no-preference){
  html.js .hfloat{animation:floatY 6.5s ease-in-out infinite}
  html.js .hfloat--2{animation-duration:7.6s;animation-delay:.9s}
  html.js .hfloat--3{animation-duration:8.4s;animation-delay:1.7s}
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* مؤشر التمرير */
.scroll-cue{
  position:absolute;inset-block-end:calc(clamp(120px,16vh,190px)/2 - 12px);
  inset-inline-start:50%;transform:translateX(-50%);z-index:1;
  inline-size:46px;block-size:46px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);
  transition:background var(--dur),border-color var(--dur);
}
.scroll-cue:hover{background:rgba(240,168,48,.2);border-color:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  html.js .scroll-cue .ico{animation:cueDown 2.1s ease-in-out infinite}
}
@keyframes cueDown{0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(4px);opacity:1}}

/* شريط الأرقام يعتلي حافة البطل */
.statwrap{position:relative;z-index:2;margin-block-start:calc(-1*clamp(74px,10vh,110px))}
.statwrap .statband{background:var(--rule);box-shadow:var(--sh-3)}
.statwrap + .ticker{margin-block-start:clamp(48px,7vw,84px)}

/* ---------------------------------------------------- حقائق الشركة */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)}
.fact{
  padding:18px 20px;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--rule);
  border-inline-start:3px solid var(--amber);
}
.fact b{display:block;font-family:var(--f-display);color:var(--navy);font-size:.95rem;margin-block-end:4px}
html.lang-en .fact b{font-family:var(--f-latin)}
.fact span{font-size:.88rem;color:var(--text-2);line-height:1.75}

/* -------------------------------------------------------- المعرض */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.gal-item{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--rule);box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
}
.gal-item img{
  inline-size:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .6s var(--ease),filter .4s;
}
.gal-item:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.gal-item:hover img{transform:scale(1.05);filter:saturate(1.08)}
.gal-item:nth-child(even){margin-block-start:var(--s6)}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gal-item:nth-child(even){margin-block-start:var(--s4)}
}

/* استجابة البطل الغلافي */
@media (max-width:980px){
  .hero-cover-grid{grid-template-columns:1fr}
  .hero-floats{display:none}
  .hero--cover{min-block-size:0;padding-block:clamp(80px,11vh,120px) clamp(110px,14vh,160px)}
  .statwrap{margin-block-start:-64px}
}
@media (max-width:760px){
  .scroll-cue{display:none}
  .hero--cover h1{font-size:clamp(1.9rem,1.3rem+3.4vw,2.7rem)}
}

/* --------------------------------------------------------- الحركة */
@media (prefers-reduced-motion:no-preference){
  html.js :is(.slide,.rise){opacity:0}
  html.js .slide{transform:translateX(24px)}
  html.js.lang-en .slide{transform:translateX(-24px)}
  html.js .rise{transform:translateY(22px)}
  html.js :is(.slide,.rise).in{animation:reveal .72s var(--ease) forwards}
  html.js .in:nth-child(2){animation-delay:.09s}
  html.js .in:nth-child(3){animation-delay:.18s}
  html.js .in:nth-child(4){animation-delay:.27s}
  html.js .in:nth-child(5){animation-delay:.36s}
  html.js .in:nth-child(6){animation-delay:.45s}
}
@keyframes reveal{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .doc:hover,.card:hover,.media-doc:hover,.btn:hover{transform:none}
  .media-doc:hover img,.doc:hover .doc-media img{filter:none;transform:none}
}


/* ==========================================================================
   طبقة الحركة v6 — عمق أكثر، دائماً خلف بوابتَي html.js و reduced-motion
   ========================================================================== */

/* البطل: صورة الخلفية تتنفّس بزوم بطيء (Ken Burns) */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-bg img{animation:kenburns 26s ease-in-out infinite alternate}
}
@keyframes kenburns{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.09) translate(-1.6%,1.2%)}
}

/* لمعة كهرمانية تمسح البطل كل فترة — خفيفة جداً */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-shade::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,transparent 42%,rgba(240,168,48,.09) 50%,transparent 58%);
    background-size:280% 100%;
    animation:sheen 9s ease-in-out infinite;
  }
}
@keyframes sheen{0%,55%{background-position:130% 0}85%,100%{background-position:-40% 0}}

/* زرّ البطل الرئيسي: توهّج لطيف يلفت العين دون إزعاج */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-actions .btn--amber{animation:ctaGlow 4.6s ease-in-out 2.2s infinite}
}
@keyframes ctaGlow{
  0%,100%{box-shadow:var(--sh-2)}
  50%{box-shadow:0 0 0 7px rgba(240,168,48,.22),0 14px 38px rgba(240,168,48,.35)}
}

/* زرّ واتساب العائم: حلقة نبض تصدر كل بضع ثوانٍ */
@media (prefers-reduced-motion:no-preference){
  html.js .wa-float::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    border:2px solid #1FA855;opacity:0;
    animation:ping 3.6s cubic-bezier(.2,.6,.35,1) 1.4s infinite;
  }
}
@keyframes ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.75);opacity:0}}

/* معين الترويسة يدور عند ظهور القسم */
@media (prefers-reduced-motion:no-preference){
  html.js .sec-head.in .filetag::before,
  html.js .in .sec-head .filetag::before{animation:diaSpin .7s var(--ease)}
}
@keyframes diaSpin{from{transform:rotate(225deg) scale(0)}to{transform:rotate(45deg) scale(1)}}

/* جدول المقارنة وجدول الاستجابة: صفوف تتوالى */
@media (prefers-reduced-motion:no-preference){
  html.js :is(.compare,.sla).stagger > *{opacity:0;transform:translateY(14px)}
  html.js :is(.compare,.sla).stagger.in > *{animation:reveal .5s var(--ease) forwards}
  html.js :is(.compare,.sla).stagger.in > *:nth-child(3n+1){animation-delay:calc(.05s * var(--row,0))}
}
/* تأخير تدريجي عام لأي أبناء بعد التاسع (الشبكات الكبيرة كالمقارنة) */
@media (prefers-reduced-motion:no-preference){
  html.js .stagger.in > *:nth-child(n+9){animation-delay:.66s}
  html.js .stagger.in > *:nth-child(n+13){animation-delay:.8s}
  html.js .stagger.in > *:nth-child(n+17){animation-delay:.94s}
}

/* قوائم التحقق: بنود تنقر واحداً واحداً */
@media (prefers-reduced-motion:no-preference){
  html.js .checklist.stagger > li{opacity:0;transform:translateX(16px)}
  html.lang-en.js .checklist.stagger > li{transform:translateX(-16px)}
  html.js .checklist.stagger.in > li{animation:reveal .45s var(--ease) forwards}
  html.js .checklist.stagger.in > li:nth-child(2){animation-delay:.09s}
  html.js .checklist.stagger.in > li:nth-child(3){animation-delay:.18s}
  html.js .checklist.stagger.in > li:nth-child(4){animation-delay:.27s}
  html.js .checklist.stagger.in > li:nth-child(5){animation-delay:.36s}
  html.js .checklist.stagger.in > li:nth-child(6){animation-delay:.45s}
}

/* المعرض: كل صورة تدخل بميل خفيف يعتدل */
@media (prefers-reduced-motion:no-preference){
  html.js .gallery.stagger > *{opacity:0;transform:translateY(26px) rotate(1.6deg)}
  html.js .gallery.stagger > *:nth-child(even){transform:translateY(26px) rotate(-1.6deg)}
  html.js .gallery.stagger.in > *{animation:galIn .7s var(--ease) forwards}
  html.js .gallery.stagger.in > *:nth-child(2){animation-delay:.1s}
  html.js .gallery.stagger.in > *:nth-child(3){animation-delay:.2s}
  html.js .gallery.stagger.in > *:nth-child(4){animation-delay:.3s}
}
@keyframes galIn{to{opacity:1;transform:none}}

/* الخطوات: الرقم يقفز عند الظهور */
@media (prefers-reduced-motion:no-preference){
  html.js .steps.stagger > .step::before{opacity:0;transform:scale(.4)}
  html.js .steps.stagger.in > .step::before{animation:stepPop .55s var(--ease) forwards}
  html.js .steps.stagger.in > .step:nth-child(2)::before{animation-delay:.12s}
  html.js .steps.stagger.in > .step:nth-child(3)::before{animation-delay:.24s}
  html.js .steps.stagger.in > .step:nth-child(4)::before{animation-delay:.36s}
}

/* البطاقات العائمة: ظلّ يتنفّس مع الطفو */
@media (prefers-reduced-motion:no-preference){
  html.js .hfloat{transition:box-shadow .3s}
  html.js .hfloat:hover{animation-play-state:paused;box-shadow:0 24px 56px rgba(5,15,28,.5)}
}

/* v6 — إلغاء شامل تحت تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .hero-bg img,.hero-shade::after,.hero-actions .btn--amber,.wa-float::after{animation:none!important}
  .compare.stagger > *,.sla.stagger > *,.checklist.stagger > li,
  .gallery.stagger > *,.steps.stagger > .step::before{opacity:1!important;transform:none!important;animation:none!important}
}

/* ------------------------------------------------------- الاستجابة */
@media (max-width:1060px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero-visual .stamp{inline-size:88px;block-size:88px;font-size:.72rem;inset-block-end:-22px;inset-inline-start:-14px}
  .split-2{grid-template-columns:1fr!important}
}
@media (max-width:760px){
  .nav-links{
    display:none;
  }
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;inset-inline:0;inset-block-start:100%;
    background:var(--paper);border-block-end:1px solid var(--rule);
    padding:var(--s3);box-shadow:var(--sh-3);gap:2px;
  }
  .nav-links.open a{padding:14px 16px;min-block-size:48px;display:flex;align-items:center}
  .nav-links.open a.on::after{display:none}
  .nav-links.open a.on{background:var(--amber-wash)}
  #burger{display:inline-flex}
  header.site{position:sticky}
  .nav{min-block-size:70px}
  .brand img{block-size:38px}
  .topline{font-size:.74rem}
  .topline .tl-tag{display:none}
  .nav-tools .btn{display:none}
  .spine{padding-inline-start:46px}
  .stage::before{inset-inline-start:-46px;inline-size:36px;block-size:36px;font-size:.92rem}
  .spine::before{inset-inline-start:17px}
  .foot-grid{grid-template-columns:1fr;gap:var(--s6)}
  .field-row{grid-template-columns:1fr}
  .quote{padding:28px 24px}
  .mobile-cta{display:flex}
  body{padding-block-end:78px}
  .wa-float{inset-block-end:84px;inline-size:50px;block-size:50px}
  .wa-float svg{inline-size:25px;block-size:25px}
  .doc{padding:26px 22px}
  .doc-num{font-size:2.1rem}
}
@media (max-width:420px){
  .statband{grid-template-columns:1fr 1fr}
  .cat-filters{gap:6px}
  .cat-filters button{padding:8px 13px;font-size:.85rem}
}

/* ==========================================================================
   طبقة الحياة — v4
   حركة هادفة (لا زخرفية) + مكوّنات المحتوى الجديدة.
   كل حركة تُلغى تحت prefers-reduced-motion في نهاية الملف.
   ========================================================================== */

/* ------------------------------------------------ دخول البطل المتدرّج */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-enter > *{opacity:0;animation:heroUp .8s var(--ease) forwards}
  html.js .hero-enter > *:nth-child(1){animation-delay:.05s}
  html.js .hero-enter > *:nth-child(2){animation-delay:.16s}
  html.js .hero-enter > *:nth-child(3){animation-delay:.27s}
  html.js .hero-enter > *:nth-child(4){animation-delay:.38s}
  html.js .hero-visual{opacity:0;animation:heroPop 1s var(--ease) .3s forwards}
}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroPop{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}}

/* الختم يدور ببطء — يوحي بحركة دائمة بلا إزعاج */
@media (prefers-reduced-motion:no-preference){
  .hero-visual .stamp{animation:sealSpin 34s linear infinite}
  .hero-visual .stamp:hover{animation-play-state:paused}
}
@keyframes sealSpin{from{transform:rotate(-9deg)}to{transform:rotate(351deg)}}

/* هالة البطل تتنفّس */
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:breathe 11s ease-in-out infinite}
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.13);opacity:.72}}

/* ------------------------------------------ كشف بالتمرير: أنماط إضافية */
@media (prefers-reduced-motion:no-preference){
  html.js .zoom{opacity:0;transform:scale(.955)}
  html.js .fade{opacity:0}
  html.js :is(.zoom,.fade).in{animation:reveal .7s var(--ease) forwards}

  /* تتالي أبناء أي شبكة موسومة بـ stagger */
  html.js .stagger > *{opacity:0;transform:translateY(20px)}
  html.js .stagger.in > *{animation:reveal .66s var(--ease) forwards}
  html.js .stagger.in > *:nth-child(1){animation-delay:.04s}
  html.js .stagger.in > *:nth-child(2){animation-delay:.12s}
  html.js .stagger.in > *:nth-child(3){animation-delay:.2s}
  html.js .stagger.in > *:nth-child(4){animation-delay:.28s}
  html.js .stagger.in > *:nth-child(5){animation-delay:.36s}
  html.js .stagger.in > *:nth-child(6){animation-delay:.44s}
  html.js .stagger.in > *:nth-child(7){animation-delay:.52s}
  html.js .stagger.in > *:nth-child(8){animation-delay:.6s}
  html.js .stagger.in > *:nth-child(n+9){animation-delay:.66s}
}

/* ------------------------- العمود الفقري: الخطّ يُرسَم مع التمرير */
.spine::before{transform-origin:top;transition:transform 1.4s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  html.js .spine::before{transform:scaleY(0)}
  html.js .spine.in::before{transform:scaleY(1)}
  html.js .spine .stage::before{opacity:0;transform:scale(.6)}
  html.js .spine.in .stage::before{animation:stepPop .5s var(--ease) forwards}
  html.js .spine.in .stage:nth-child(1)::before{animation-delay:.25s}
  html.js .spine.in .stage:nth-child(2)::before{animation-delay:.45s}
  html.js .spine.in .stage:nth-child(3)::before{animation-delay:.65s}
  html.js .spine.in .stage:nth-child(4)::before{animation-delay:.85s}
  html.js .spine.in .stage:nth-child(5)::before{animation-delay:1.05s}
}
@keyframes stepPop{to{opacity:1;transform:scale(1)}}

/* نبضة خفيفة على رقم الحلقة عند المرور */
.stage:hover::before{background:var(--amber);color:var(--navy-ink);transition:background .2s,color .2s}

/* --------------------------------------------- العدّاد الرقمي المتحرّك */
.stat b{font-variant-numeric:tabular-nums}
.count-suffix{font-size:.62em;vertical-align:.12em;margin-inline-start:1px}

/* ------------------------------------------------ الشريط المتحرّك */
.ticker{
  position:relative;overflow:hidden;
  background:var(--navy-deep);
  padding-block:15px;
  border-block:1px solid rgba(255,255,255,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ticker-track{display:flex;inline-size:max-content;gap:0}
/* الحركة مشروطة بـ .js لأن الحلقة السلسة تحتاج نسخة مكرّرة يضيفها السكربت؛
   بدون جافاسكربت يبقى الشريط ساكناً ومقروءاً. */
@media (prefers-reduced-motion:no-preference){
  html.js .ticker-track{animation:tick 46s linear infinite}
  html.js .ticker:hover .ticker-track{animation-play-state:paused}
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  display:inline-flex;align-items:center;gap:11px;
  padding-inline:26px;white-space:nowrap;
  font-family:var(--f-display);font-size:1.02rem;font-weight:500;color:#E2EAF2;
}
html.lang-en .ticker-item{font-family:var(--f-latin)}
.ticker-item .ico{color:var(--amber);inline-size:17px;block-size:17px}
.ticker-item::after{content:"";inline-size:5px;block-size:5px;background:var(--amber);opacity:.5;transform:rotate(45deg)}

/* -------------------------------------- جدول المقارنة: مورّد أم شريك */
.compare{
  display:grid;grid-template-columns:1.05fr 1fr 1fr;
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-2);
}
.compare > *{padding:17px 20px;border-block-end:1px solid var(--rule);font-size:.94rem;line-height:1.8}
.compare > *:nth-last-child(-n+3){border-block-end:0}
.compare .ch{
  font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--navy);
  background:var(--paper-2);border-block-end:2px solid var(--rule-ink);
}
html.lang-en .compare .ch{font-family:var(--f-latin)}
.compare .ch.ch--us{background:var(--navy);color:#fff;border-block-end-color:var(--amber)}
.compare .cq{font-weight:700;color:var(--navy);background:var(--paper)}
.compare .cn{color:var(--text-2)}
.compare .cy{color:var(--text);background:var(--amber-wash);font-weight:400}
.compare .cn::before,.compare .cy::before{
  content:"";display:inline-block;inline-size:16px;block-size:16px;
  margin-inline-end:9px;vertical-align:-3px;background-repeat:no-repeat;background-size:contain;
}
.compare .cn::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E2A24' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.compare .cy::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B4A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
@media (max-width:820px){
  .compare{grid-template-columns:1fr;border-radius:var(--r)}
  .compare .ch:first-child{display:none}
  .compare .cq{background:var(--navy);color:#fff;font-family:var(--f-display);margin-block-start:0}
  .compare .ch{display:none}
  .compare > *{border-block-end:1px solid var(--rule)!important}
  .compare .cn::after{content:" (مورّد عادي)";font-size:.78rem;opacity:.7}
  .compare .cy::after{content:" (السجوان)";font-size:.78rem;color:var(--amber-deep);font-weight:700}
}

/* ------------------------------------------------------ التعهّدات */
.pledges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:var(--s4)}
.pledge{
  display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:22px 22px;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);
}
.pledge:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--amber)}
/* قرص رقم التعهّد. كان رقماً بـ1.02rem داخل قرص 38px بتباين 5.73:1 — حبرٌ
   قليل جداً على مساحة كبيرة، وخطّ Newsreader بأرقامه القديمة (old-style)
   يُهبط بعضها تحت خطّ الأساس فتبدو مقصوصة داخل القرص. الحلّ: قرص أكبر قليلاً،
   رقم أكبر بنحو ٢٢٪، أرقام مصطفّة صريحة، وخلفية --navy-ink فيصير التباين
   8.54:1 بدل 5.73:1 — وكلا اللونين من الهوية. */
.pledge-n{
  flex:none;inline-size:42px;block-size:42px;border-radius:12px;
  background:var(--navy-ink);color:var(--amber);
  display:grid;place-items:center;
  font-family:var(--f-num);font-size:1.24rem;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  transition:background var(--dur),color var(--dur);
}
.pledge:hover .pledge-n{background:var(--amber);color:var(--navy-ink)}
.pledge b{display:block;font-family:var(--f-display);color:var(--navy);font-size:1.02rem;margin-block-end:5px}
html.lang-en .pledge b{font-family:var(--f-latin)}
.pledge span{font-size:.92rem;color:var(--text-2);line-height:1.85}

/* ------------------------------------------------ نصائح التشغيل */
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--s5)}
.tip{
  position:relative;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:30px 26px 26px;box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur);
}
.tip::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:linear-gradient(90deg,var(--amber),var(--amber-deep));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .45s var(--ease);
}
.tip:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.tip:hover::before{transform:scaleX(1)}
.tip-ic{
  inline-size:46px;block-size:46px;border-radius:50%;
  background:var(--amber-wash);color:var(--amber-deep);
  display:grid;place-items:center;margin-block-end:var(--s4);
  transition:transform var(--dur) var(--ease);
}
.tip:hover .tip-ic{transform:rotate(-8deg) scale(1.06)}
.tip-ic .ico{inline-size:23px;block-size:23px}
.tip h3{font-size:1.06rem;margin-block-end:var(--s2)}
.tip p{font-size:.93rem;color:var(--text-2);line-height:1.9}
.tip .tip-tag{
  display:inline-block;margin-block-start:var(--s4);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;
  color:var(--amber-ink);text-transform:uppercase;
}

/* ------------------------------------ جدول أزمنة الاستجابة (SLA) */
.sla{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-2);
}
.sla > *{padding:15px 18px;border-block-end:1px solid var(--rule);font-size:.93rem}
.sla > *:nth-last-child(-n+3){border-block-end:0}
.sla .sh{
  background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:600;
  font-size:.92rem;border-block-end:0;
}
html.lang-en .sla .sh{font-family:var(--f-latin)}
.sla .sc{font-weight:700;color:var(--navy)}
.sla .sv{color:var(--text-2);font-variant-numeric:tabular-nums}
.sla-note{font-size:.84rem;color:var(--text-2);margin-block-start:var(--s4);line-height:1.9}
@media (max-width:720px){
  .sla{grid-template-columns:1fr 1fr}
  .sla .sh:first-child{grid-column:1/-1}
  .sla .sc{grid-column:1/-1;background:var(--paper-2)}
}

/* ------------------------------------------------ خطوات مرقّمة أفقية */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s5);counter-reset:st}
.step{position:relative;padding-block-start:var(--s6)}
.step::before{
  counter-increment:st;content:counter(st);
  position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:40px;block-size:40px;border-radius:50%;
  background:var(--amber);color:var(--navy-ink);
  display:grid;place-items:center;
  font-family:var(--f-num);font-weight:700;font-size:1.04rem;
  box-shadow:0 5px 16px rgba(240,168,48,.34);
}
.step::after{
  content:"";position:absolute;inset-block-start:19px;
  inset-inline-start:52px;inset-inline-end:-12px;
  block-size:2px;background:repeating-linear-gradient(90deg,var(--rule-ink) 0 6px,transparent 6px 12px);
}
.step:last-child::after{display:none}
.step b{display:block;font-family:var(--f-display);color:var(--navy);font-size:1.06rem;margin-block-end:6px}
html.lang-en .step b{font-family:var(--f-latin)}
.step span{font-size:.93rem;color:var(--text-2);line-height:1.88}
@media (max-width:760px){.step::after{display:none}}

/* ---------------------------------------------- تغطية جغرافية */
.coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s3)}
.cov{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--rule);
  font-size:.94rem;color:var(--text);
  transition:border-color var(--dur),transform var(--dur) var(--ease);
}
.cov:hover{border-color:var(--amber);transform:translateY(-2px)}
.cov .ico{color:var(--amber-deep);inline-size:17px;block-size:17px}

/* ------------------------------------------- لمعة على الأزرار */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-60%;
  inline-size:45%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .55s var(--ease);
}
.btn:hover::after{inset-inline-start:120%}
.btn--line::after,.btn--ghost-light::after{background:linear-gradient(90deg,transparent,rgba(27,58,92,.1),transparent)}

/* أيقونة البطاقة تتحرّك عند المرور */
.doc-ic,.card-ic{transition:transform var(--dur) var(--ease),background var(--dur)}
.doc:hover .doc-ic{transform:rotate(-7deg) scale(1.07)}
.card:hover .card-ic{transform:rotate(7deg) scale(1.07);background:var(--amber);color:var(--navy-ink)}
.aud svg{transition:transform var(--dur) var(--ease)}
.aud:hover svg{transform:translateY(-3px) scale(1.1)}

/* رقم البطاقة الشبحي يتحرّك */
.doc-num{transition:transform .5s var(--ease),color var(--dur)}
/* التمرير كان يرفع اللون إلى --amber-wash (#FDF4E3) — أفتح من الحالة الأصلية،
   فيهبط التباين إلى ~1.06:1 ويختفي الرقم تماماً عند الاقتراب منه. */
.doc:hover .doc-num{transform:translateY(-4px) scale(1.06);color:var(--amber-deep)}
.doc--feature:hover .doc-num{color:rgba(240,168,48,.72)}

/* الأكورديون: المحتوى يدخل بلطف */
@media (prefers-reduced-motion:no-preference){
  .acc details[open] .acc-body{animation:accIn .34s var(--ease)}
  .fieldset[open] .fs-body{animation:accIn .3s var(--ease)}
}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* رأس الصفحة يتقلّص عند التمرير */
header.site.stuck .nav{min-block-size:64px;transition:min-block-size .3s var(--ease)}
header.site.stuck .brand img{block-size:38px;transition:block-size .3s var(--ease)}
.nav,.brand img{transition:min-block-size .3s var(--ease),block-size .3s var(--ease)}

/* ------------------------------------------------ زرّ العودة للأعلى */
.to-top{
  position:fixed;inset-block-end:22px;inset-inline-start:22px;z-index:var(--z-float);
  inline-size:48px;block-size:48px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;
  display:grid;place-items:center;
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s,visibility .3s,transform .3s var(--ease),background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--amber);color:var(--navy-ink)}
.to-top .ico{inline-size:21px;block-size:21px}

/* ==================================================== التذييل الممتلئ */
.foot-top{
  display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s7);
  padding-block-end:var(--s8);margin-block-end:var(--s7);
  border-block-end:1px solid rgba(255,255,255,.1);
  align-items:center;
}
.foot-cta h2{color:#fff;font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);margin-block-end:var(--s3)}
.foot-cta p{color:#B3C3D4;max-inline-size:52ch}
.foot-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}
.fq{
  display:flex;align-items:center;gap:12px;
  padding:15px 17px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  transition:background var(--dur),border-color var(--dur),transform var(--dur) var(--ease);
}
.fq:hover{background:rgba(240,168,48,.13);border-color:var(--amber);transform:translateY(-2px)}
.fq .ico{color:var(--amber);flex:none}
.fq b{display:block;color:#fff;font-size:.9rem;font-weight:700;line-height:1.5}
.fq span{display:block;color:#AFC1D2;font-size:.84rem;line-height:1.55}
.fq[dir=ltr] b{direction:ltr}

.foot-grid{grid-template-columns:1.6fr .85fr .95fr .95fr 1.25fr}
.foot-links{display:flex;flex-direction:column;gap:2px}
.foot-links a{
  position:relative;padding-inline-start:0;transition:padding-inline-start .2s var(--ease),color .2s;
}
.foot-links a:hover{padding-inline-start:9px}
.foot-links a::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;
  inline-size:5px;block-size:5px;margin-block-start:-2px;
  background:var(--amber);transform:rotate(45deg) scale(0);
  transition:transform .2s var(--ease);
}
.foot-links a:hover::before{transform:rotate(45deg) scale(1)}

.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:var(--s4)}
.foot-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:#BCCCDD;
}
.foot-badge .ico{inline-size:14px;block-size:14px;color:var(--amber)}

.foot-hours{
  margin-block-start:var(--s4);padding:14px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.045);border-inline-start:3px solid var(--amber);
}
.foot-hours b{display:block;color:#fff;font-size:.86rem;margin-block-end:3px}
.foot-hours span{font-size:.86rem;color:#AFC1D2;line-height:1.75}

.foot-base{align-items:center}
.foot-base-links{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot-base-links a{font-size:.84rem}
.foot-dev{display:inline-flex;align-items:center;gap:6px;font-size:.84rem}
.foot-dev a{
  color:var(--amber);font-weight:700;
  border-block-end:1px solid rgba(240,168,48,.4);
  transition:color var(--dur),border-color var(--dur);
}
.foot-dev a:hover{color:#fff;border-block-end-color:#fff}

@media (max-width:1060px){
  .foot-top{grid-template-columns:1fr;gap:var(--s6)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
  .to-top{inline-size:42px;block-size:42px;inset-block-end:84px;inset-inline-start:16px}
}

/* --------------------------------------- تفاصيل بصرية إضافية */
/* فاصل قسم على شكل ورقة ممزّقة خفيفة */
.sec-sep{
  block-size:26px;
  background:
    radial-gradient(circle at 12px -6px,var(--paper) 12px,transparent 13px) repeat-x 0 0/24px 26px;
  margin-block-start:-13px;position:relative;z-index:1;pointer-events:none;
}
section.tinted + .sec-sep{background-image:radial-gradient(circle at 12px -6px,var(--paper-2) 12px,transparent 13px)}

/* شارة "جديد" صغيرة */
.tagnew{
  display:inline-block;margin-inline-start:8px;padding:2px 9px;border-radius:999px;
  background:var(--amber);color:var(--navy-ink);font-size:.68rem;font-weight:800;
  letter-spacing:.05em;vertical-align:middle;
}

/* عنوان بخطّ سفلي متحرّك */
.sec-head h2{position:relative}
.sec-head h2::after{
  content:"";position:absolute;inset-block-end:-10px;inset-inline-start:0;
  block-size:3px;inline-size:0;background:var(--amber);border-radius:2px;
  transition:inline-size .8s var(--ease) .2s;
}
html.js .sec-head.in h2::after,html.js .in .sec-head h2::after{inline-size:64px}
html:not(.js) .sec-head h2::after{inline-size:64px}

/* ------------------------------------------------ احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important;transform:none!important}
  .hero-visual .stamp,.hero::before{animation:none!important}
  .spine::before{transform:none!important}
  .btn::after{display:none}
  .doc:hover .doc-ic,.card:hover .card-ic,.aud:hover svg,
  .tip:hover .tip-ic,.doc:hover .doc-num,.pledge:hover{transform:none!important}
  .sec-head h2::after{inline-size:64px;transition:none}
  .to-top{transition:none}
}

/* ------------------------------------------------------ طباعة الجديد */
@media print{
  .ticker,.to-top,.foot-top,.foot-badges,.sec-sep{display:none!important}
  .compare,.sla,.pledge,.tip{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
}

/* ---------------------------------------------------------- الطباعة */
@media print{
  .topline,header.site,.wa-float,.mobile-cta,.progress,.hero-actions,.cta-band,.skip{display:none!important}
  body{background:#fff;font-size:11pt;line-height:1.6}
  section{padding-block:16px;break-inside:avoid}
  .doc,.card,.quote{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  footer.site{background:#fff;color:#000;border-block-start:2px solid #000}
  footer.site :is(h4,a,p){color:#000}
}