/* ==========================================================================
   شركة دلائل الصحة — v2 «كوفي هندسي مضيء» (Luminous Geometric Kufi)
   اللوحة ثابتة؛ الشخصية: كوفي حادّ — معيّنات، شبكة ليلية مضيئة، نقش مفتاحي.
   كل شيء بخصائص منطقية (inline/block) ليعمل RTL و LTR بلا تكرار.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400..800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------- الرموز */
:root{
  /* لوحة «مسار الدلائل» — بنفسجي الشعار الفاتح على ورق بارد مضيء */
  --peri:#8DA5CE;            /* زخرفة، خطوط المسار، نقاط العلام */
  --peri-deep:#46619B;       /* التفاعل: أزرار وروابط — أبيض عليه 6.0:1 */
  --peri-ink:#33497A;        /* نص بنفسجي صغير على فاتح — 8.2:1 */
  --peri-wash:#EAF0F9;
  --ink:#1D2A47;
  --ink-2:#47536E;
  --night:#16223D;           /* التذييل والأحزمة الداكنة */
  --mint:#1E7A66;            /* لمسة حيوية صحية — باعتدال شديد */
  --mint-wash:#E7F4F0;

  /* الأسماء القديمة تُشير للوحة الجديدة — البنية ثابتة والقيم وحدها تتبدّل */
  --navy:var(--peri-deep);
  --navy-deep:var(--peri-ink);
  --navy-ink:var(--night);
  --navy-soft:var(--peri);
  --navy-mist:#E2EAF6;
  --amber:var(--peri);
  --amber-deep:var(--peri-deep);
  --amber-ink:var(--peri-ink);
  --amber-wash:var(--peri-wash);
  --paper:#F9FBFE;
  --paper-2:#EEF3FA;
  --paper-3:#E2EAF6;
  --surface:#FFFFFF;
  --rule:#DCE4F0;
  --rule-ink:#B7C5DD;
  --text:var(--ink);
  --text-2:var(--ink-2);     /* 7.3:1 على الورق */
  --danger:#A8332D;
  --ok:var(--mint);

  /* الزوايا — حادّة هندسية */
  --r-xs:2px;
  --r:4px;
  --r-lg:8px;
  --r-xl:12px;
  /* النقش الكوفي المفتاحي — بلاطة واحدة تُعاد على المصبوغ والتذييل */
  --kufic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M10 10h18v5H15v13h-5zM44 10h18v18h-5V15H44zM10 44h5v13h13v5H10zM44 57h13V44h5v18H44zM31 31h10v10H31z' fill='%238DA5CE' fill-opacity='.10'/%3E%3C/svg%3E");

  /* المقاس */
  --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:'Noto Kufi Arabic',sans-serif; /* كوفي عادي (خط الشعار) — لا المحدب */
  --f-body:'Noto Kufi Arabic',sans-serif;    /* كوفي مقروء — خط الشعار */
  --f-latin:'Manrope',system-ui,sans-serif;
  --f-num:'Manrope',sans-serif;              /* أرقام جدولية */

  /* الظلال — حادّة قصيرة بلون الحبر الكحلي */
  --sh-1:0 1px 0 rgba(22,34,61,.08);
  --sh-2:0 1px 0 rgba(22,34,61,.08),0 6px 16px rgba(22,34,61,.10);
  --sh-3:0 10px 26px rgba(22,34,61,.16);
  --sh-4:0 16px 40px rgba(22,34,61,.24);

  /* الحركة */
  --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:400;
  direction:rtl;
  overflow-x:clip;
  /* إضاءة هادئة — توهّج بنفسجي خافت لا يُرى لكنه يُحسّ */
  background-image:
    radial-gradient(1100px 520px at 82% -160px,rgba(141,165,206,.13),transparent 62%),
    radial-gradient(900px 480px at -140px 10%,rgba(141,165,206,.07),transparent 58%);
  background-repeat:no-repeat;
}
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(--peri);color:var(--night)}

/* مقاس افتراضي آمن لكل أيقونة — يمنع أي أيقونة من التمدّد لعرض الحاوية */
.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(--ink);
  font-weight:700;   /* Noto Kufi يحتاج وزناً أثقل من Reem ليحمل حضور العنوان */
  line-height:1.55;   /* الكوفي المعزول طويل القامة — لا اقتصاص */
  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(2rem,1.3rem + 2.7vw,3.35rem);line-height:1.5}
h2{font-size:clamp(1.55rem,1.18rem + 1.55vw,2.35rem);line-height:1.5}
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}

/* ترويسة القسم — مستطيل حادّ بحدّ 2px يبدأ بمعيّن */
.filetag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-body);font-size:.775rem;font-weight:700;
  letter-spacing:.12em;color:var(--peri-ink);
  padding:6px 14px;border-radius:0;
  background:transparent;border:2px solid rgba(70,97,155,.4);
  margin-block-end:20px;text-transform:uppercase;
}
.filetag::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--peri-deep);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:0;
  border:2px solid var(--peri);outline:2px solid rgba(141,165,206,.45);
  outline-offset:5px;color:var(--peri-ink);
  font-family:var(--f-display);font-size:.78rem;font-weight:700;text-align:center;
  line-height:1.5;padding:10px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(22,34,61,.16);
}
/* النصّ اللاتيني أطول من العربي في المساحة نفسها — نوسّع الختم قليلاً */
html.lang-en .stamp{inline-size:118px;block-size:118px;font-size:.74rem;line-height:1.4}

/* ------------------------------------------------------ الرأس والتنقّل */
.topline{
  background:var(--navy-ink);color:#C7D2E8;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(249,251,254,.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(22,34,61,.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:2px 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) var(--kufic);border-block:1px solid var(--rule)}
section.ink{
  background:var(--night) var(--kufic);
  background-image:var(--kufic),
    repeating-linear-gradient(90deg,rgba(141,165,206,.06) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(141,165,206,.06) 0 1px,transparent 1px 64px);
  color:#C6D2EA;
}
section.ink :is(h1,h2,h3,h4){color:#fff}
section.ink .lede{color:#AFC0DE}
section.ink .filetag{color:#C9D7F3;background:rgba(141,165,206,.14);border-color:rgba(141,165,206,.4)}
section.ink .filetag::before{background:var(--peri);box-shadow:0 0 0 3px rgba(141,165,206,.25)}
section.tight{padding-block-start:0}

/* شريط زخرفي: مربّعات مفتاحية متعامدة بين الأقسام */
.rule-band{
  block-size:4px;
  background:repeating-linear-gradient(90deg,var(--peri) 0 10px,transparent 10px 20px);
  opacity:.45;
}

/* ---------------------------------------------- البطل — ليلي درامي */
.hero{
  position:relative;padding-block:clamp(52px,7vw,96px) clamp(48px,6vw,84px);overflow:hidden;
  background:var(--night);color:#C6D2EA;
}
.hero::before{  /* شبكة هندسية مضيئة تنزاح ببطء + وهج بنفسجي */
  content:"";position:absolute;inset:-80px;pointer-events:none;
  background:
    radial-gradient(640px 420px at 78% 14%,rgba(141,165,206,.24),transparent 64%),
    repeating-linear-gradient(90deg,rgba(141,165,206,.08) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(141,165,206,.08) 0 1px,transparent 1px 64px);
}
.hero > *{position:relative}
.hero :is(h1,h2,h3){color:#fff}
.hero .lede{color:#B9C6E2}
.hero .crumbs,.hero .crumbs a{color:#9FB0D4}
.hero .crumbs a:hover{color:#fff}
.hero .filetag{color:#C9D7F3;border-color:rgba(141,165,206,.55)}
.hero .filetag::before{background:var(--peri)}
.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .btn--line:hover{background:rgba(255,255,255,.1);border-color:#fff}
.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.3rem);
  color:var(--navy);font-weight:700;line-height:1.35;
  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:var(--r-xs);
  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),0 0 0 8px rgba(141,165,206,.35);   /* حلقة نقطة العلام */
}
section.tinted .stage::before{box-shadow:0 0 0 6px var(--paper-2),0 0 0 8px rgba(141,165,206,.35)}
.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:var(--r-xs);
  background:var(--amber-wash);border:1px solid rgba(70,97,155,.28);
  color:var(--amber-ink);font-size:.82rem;font-weight:700;line-height:1.8;
}
.chip--navy{background:var(--navy-mist);border-color:rgba(51,73,122,.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;overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:32px 28px;box-shadow:var(--sh-2);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur);
  display:flex;flex-direction:column;
}
/* قصّة الركن الكوفية: مربّع صغير في الزاوية يكبر عند التحويم */
.doc::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  inline-size:12px;block-size:12px;background:var(--peri);
  transition:inline-size var(--dur) var(--ease),block-size var(--dur) var(--ease),background var(--dur);
}
.doc:hover::after{inline-size:22px;block-size:22px;background:var(--peri-deep)}
.doc:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--rule-ink)}
.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)}
/* رقم البطاقة الشبحي: بنفسجي حبريّ شفّاف — خافت كما أُريد له،
   وفوق حدّ 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(51,73,122,.6);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(70,97,155,.2);
}
.doc-ic svg{inline-size:26px;block-size:26px}
.doc--navy .doc-ic{background:var(--navy-mist);color:var(--navy);border-color:rgba(51,73,122,.16)}

/* بطاقة مميّزة */
.doc--feature{
  background:linear-gradient(160deg,var(--navy-deep),var(--navy));
  border-color:var(--navy-deep);color:#C6D2EA;
}
.doc--feature :is(h3,h4){color:#fff}
.doc--feature > p{color:#C2CFE8}
.doc--feature ul li{color:#C8D4EA}
.doc--feature ul li::before{border-color:var(--amber)}
.doc--feature .doc-num{color:rgba(141,165,206,.8)}   /* بنفسجي فاتح مرئي على الداكن */
.doc--feature .doc-ic{background:rgba(141,165,206,.15);color:var(--amber);border-color:rgba(141,165,206,.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:-32px;inset-block-start:.6em;
  inline-size:12px;block-size:12px;transform:rotate(45deg);
  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؛ تفصيل القرارات في git */
.timeline > li{position:relative;font-size:.94rem;color:var(--text-2);line-height:1.9}
.timeline > li::before{
  content:"";position:absolute;inset-inline-start:-32px;inset-block-start:.6em;
  inline-size:12px;block-size:12px;transform:rotate(45deg);
  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);
}
/* ردّ الفريق: تمييز بصري فوري عن رسائل العميل */
.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:#C6D2E8;
  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)}
/* 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) */
.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:var(--r);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{
  position:relative;
  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::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  inline-size:10px;block-size:10px;background:var(--peri);
  transition:inline-size var(--dur) var(--ease),block-size var(--dur) var(--ease);
}
.card:hover::after{inline-size:18px;block-size:18px}
.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(70,97,155,.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:var(--mint-wash);border-inline-start-color:var(--mint);color:#12564A}
.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:#8AD8C4}
.news-msg.bad{color:#F6A9A4}

/* ------------------------------------------------- شريط دعوة (CTA) */
.cta-band{
  background:var(--night);border:1px solid rgba(141,165,206,.3);
  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:0;pointer-events:none;
  background:
    radial-gradient(420px 300px at 12% -10%,rgba(141,165,206,.26),transparent 66%),
    repeating-linear-gradient(90deg,rgba(141,165,206,.07) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(141,165,206,.07) 0 1px,transparent 1px 56px);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;margin-block-end:var(--s4)}
.cta-band .lede{color:#B9C6E2}
.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:saturate(1.07);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:saturate(1.06);transform:scale(1.03)}

/* معيّن علام في ركن الوسائط — بنبض توهّج diamondPulse */
.doc-media::after,.media-doc::after{
  content:"";position:absolute;inset-block-start:13px;inset-inline-end:13px;
  inline-size:10px;block-size:10px;transform:rotate(45deg);
  background:var(--peri);border:2px solid rgba(255,255,255,.9);
  opacity:.95;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .doc-media::after,.media-doc::after,.tl::before,.timeline > li::before{
    animation:diamondPulse 3.8s ease-in-out infinite;
  }
}
@keyframes diamondPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(141,165,206,.5)}
  50%{box-shadow:0 0 0 7px rgba(141,165,206,0)}
}

/* شريط شعارات/معايير */
.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) var(--kufic);color:#B6C3DC;padding-block:var(--s9) var(--s5);position:relative}
footer.site::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:repeating-linear-gradient(90deg,var(--peri) 0 10px,transparent 10px 20px);
  opacity:.5;
}
.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:#B6C3DC;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(141,165,206,.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(249,251,254,.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(22,34,61,.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(--peri-deep);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;filter:brightness(.78) saturate(.92)}
.hero-bg picture{display:block;block-size:100%}
.hero-shade::before{  /* الشبكة المضيئة فوق الظلّ الليلي */
  content:"";position:absolute;inset:-80px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(141,165,206,.10) 0 1px,transparent 1px 72px),
    repeating-linear-gradient(0deg,rgba(141,165,206,.10) 0 1px,transparent 1px 72px);
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--paper) 0,transparent 22%),
    linear-gradient(105deg,
      rgba(11,17,33,.96) 0%,rgba(22,34,61,.9) 30%,
      rgba(22,34,61,.72) 55%,rgba(22,34,61,.38) 78%,rgba(141,165,206,.14) 100%);
}
html.lang-en .hero-shade{
  background:
    linear-gradient(to top,var(--paper) 0,transparent 22%),
    linear-gradient(-105deg,
      rgba(11,17,33,.96) 0%,rgba(22,34,61,.9) 30%,
      rgba(22,34,61,.72) 55%,rgba(22,34,61,.38) 78%,rgba(141,165,206,.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:0;margin-block-end:var(--s5);
  background:rgba(141,165,206,.14);border:2px solid rgba(141,165,206,.5);
  color:#C9D7F3;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(249,251,254,.94);color:var(--navy);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 44px rgba(22,34,61,.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:var(--r);
  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(141,165,206,.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 ===== */

/* البطل: صورة الخلفية تتنفّس بزوم بطيء (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(141,165,206,.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(141,165,206,.22),0 14px 38px rgba(141,165,206,.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(22,34,61,.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 — حركة هادفة تحت بوابة html.js ===== */

/* ------------------- دخول البطل: كشف clip-path متدرّج (html.js فقط) */
@media (prefers-reduced-motion:no-preference){
  html.js .hero-enter > *{clip-path:inset(0 0 100% 0);animation:heroClip .7s 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{clip-path:inset(0 0 100% 0);animation:heroClip .9s var(--ease) .3s forwards}
}
@keyframes heroClip{from{clip-path:inset(0 0 100% 0);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}

/* الشبكة المضيئة تنزاح ببطء شديد — بطل ليلي وغلاف معاً */
@media (prefers-reduced-motion:no-preference){
  html.js .hero::before,html.js .hero-shade::before{animation:gridDrift 38s linear infinite alternate}
}
@keyframes gridDrift{to{transform:translate(64px,64px)}}

/* ------------------------------------------ كشف بالتمرير: أنماط إضافية */
@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(--night);
  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:#E0E7F4;
}
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='%23A8332D' 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='%231E7A66' 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)}
/* قرص رقم التعهّد: ليلي برقم فاتح — لا يهبط تحت 3:1 */
.pledge-n{
  flex:none;inline-size:42px;block-size:42px;border-radius:var(--r-xs);
  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-end:0;
  inline-size:12px;block-size:12px;background:var(--peri);
  transition:inline-size .3s var(--ease),block-size .3s var(--ease),background var(--dur);
}
.tip:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.tip:hover::before{inline-size:22px;block-size:22px;background:var(--peri-deep)}
.tip-ic{
  inline-size:46px;block-size:46px;border-radius:var(--r-xs);
  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:var(--r-xs);
  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(141,165,206,.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(51,73,122,.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)}
/* عند التمرير يشتدّ الرقم إلى بنفسجي التفاعل بدل أن يبهت. */
.doc:hover .doc-num{transform:translateY(-4px) scale(1.06);color:var(--amber-deep)}
.doc--feature:hover .doc-num{color:rgba(141,165,206,.95)}

/* الأكورديون: المحتوى يدخل بلطف */
@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:var(--r);
  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:#B3C1DC;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(141,165,206,.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:#AFC0DE;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:var(--r-xs);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:.78rem;color:#BCC9E2;
}
.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:#AFC0DE;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(141,165,206,.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:linear-gradient(180deg,rgba(141,165,206,.16),transparent 78%);
  margin-block-start:-13px;position:relative;z-index:1;pointer-events:none;
}
section.tinted + .sec-sep{background:linear-gradient(180deg,rgba(141,165,206,.10),transparent 78%)}

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

/* خطّ العنوان الكوفي — يُرسم من اليمين عند الظهور (kufiTrace) */
.sec-head h2{position:relative}
.sec-head h2::after{
  content:"";position:absolute;inset-block-end:-12px;inset-inline-start:0;
  block-size:4px;inline-size:72px;
  background:repeating-linear-gradient(90deg,var(--peri-deep) 0 12px,transparent 12px 18px) 100% 0/100% 100% no-repeat;
}
@media (prefers-reduced-motion:no-preference){
  html.js .sec-head h2::after{background-size:0% 100%}
  html.js .sec-head.in h2::after,html.js .in .sec-head h2::after{animation:kufiTrace .7s var(--ease) forwards}
}
@keyframes kufiTrace{to{background-size:100% 100%}}

/* ------------------------------------------------ احترام تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important;transform:none!important}
  .hero-visual .stamp,.hero::before,.hero-shade::before,.cta-band::before{animation:none!important;transform:none!important}
  .doc-media::after,.media-doc::after,.tl::before,.timeline > li::before{animation:none!important}
  .hero-enter > *,.hero-visual{animation:none!important;clip-path:none!important;opacity:1!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{background-size:100% 100%!important;animation:none!important}
  .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}
}

/* ================= بطل v2.1 — نبض ECG · دوّار المجالات · شرارات · لمعة
   كل حركة هنا زخرفية: مشروطة بـ html.js حيث تُخفي شيئاً، ومُلغاة كلها تحت
   تقليل الحركة في الكتلة أدناه. بلا جافاسكربت: أثر النبض ساكن، الكلمة الأولى
   من الدوّار ظاهرة وحدها، ولا شرارات. ================= */
.hero-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.pulse-line{position:absolute;inset-inline:0;inset-block-end:7%;inline-size:100%;block-size:clamp(70px,12vw,160px)}
.pulse-line path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.pl-trace{stroke:rgba(141,165,206,.26);stroke-width:2}
.pl-comet{stroke:var(--peri);stroke-width:2.5;stroke-dasharray:230 2200;filter:drop-shadow(0 0 6px rgba(141,165,206,.9));opacity:0}
html.js .pl-comet{opacity:1;animation:plRun 7s linear infinite}
@keyframes plRun{to{stroke-dashoffset:-2430}}
.spark{position:absolute;inline-size:9px;block-size:9px;background:var(--peri);rotate:45deg;opacity:0;box-shadow:0 0 12px 2px rgba(141,165,206,.55)}
.spark.s1{inset-inline-start:8%;inset-block-end:16%}
.spark.s2{inset-inline-start:22%;inset-block-end:32%;inline-size:6px;block-size:6px}
.spark.s3{inset-inline-start:38%;inset-block-end:10%;inline-size:7px;block-size:7px}
.spark.s4{inset-inline-start:57%;inset-block-end:38%;inline-size:5px;block-size:5px}
.spark.s5{inset-inline-start:72%;inset-block-end:14%}
.spark.s6{inset-inline-start:88%;inset-block-end:28%;inline-size:6px;block-size:6px}
html.js .spark{animation:sparkUp 16s linear infinite}
html.js .spark.s2{animation-duration:21s;animation-delay:3s}
html.js .spark.s3{animation-duration:13s;animation-delay:6s}
html.js .spark.s4{animation-duration:24s;animation-delay:2s}
html.js .spark.s5{animation-duration:18s;animation-delay:9s}
html.js .spark.s6{animation-duration:15s;animation-delay:5s}
@keyframes sparkUp{0%{opacity:0;translate:0 0}8%{opacity:.85}55%{opacity:.4}100%{opacity:0;translate:0 -52vh;rotate:225deg}}
.hero-rotator{min-block-size:38px}
.rot{position:relative;display:block;block-size:38px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--peri)}
html.lang-en .rot{font-family:var(--f-latin)}
.rot span{display:none}
.rot span:first-child{display:block}
html.js .rot span{display:block;position:absolute;inset:0;opacity:0;translate:0 14px;animation:rotWord 18s infinite}
html.js .rot span:nth-child(2){animation-delay:3s}
html.js .rot span:nth-child(3){animation-delay:6s}
html.js .rot span:nth-child(4){animation-delay:9s}
html.js .rot span:nth-child(5){animation-delay:12s}
html.js .rot span:nth-child(6){animation-delay:15s}
@keyframes rotWord{0%{opacity:0;translate:0 14px}2.8%,13.5%{opacity:1;translate:0 0}16.5%,100%{opacity:0;translate:0 -12px}}
.hero-enter{position:relative}
html.js .hero-enter::after{content:'';position:absolute;inset:-8% -24%;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%) no-repeat;background-size:250% 100%;background-position:180% 0;animation:heroSweep 7.5s ease-in-out 2.2s infinite}
@keyframes heroSweep{0%{background-position:180% 0}24%,100%{background-position:-80% 0}}
html.js .hero-enter > *:nth-child(5){animation-delay:.49s}
.hfloat,.hero-seal{transition:translate .25s var(--ease)}
@media (max-width:760px){.pulse-line{inset-block-end:12%}.spark.s2,.spark.s4{display:none}}
@media (prefers-reduced-motion:reduce){
  .pl-comet,.spark,html.js .rot span,html.js .hero-enter::after{animation:none!important}
  .pl-comet{opacity:.5}
  html.js .rot span{display:none;position:static}
  html.js .rot span:first-child{display:block;opacity:1;translate:0 0}
}