/* مولَّد بـbuild-site.mjs من <style> في index.html — لا تحرّره بيد. */

/* ============================================================
   DentoFlow — Landing / Marketing page
   هوية مطابقة للسيستم: أزرق طبي + slate · RTL · Light/Dark
   ============================================================ */
:root{
  --blue-50:#eff5ff; --blue-100:#dbe7fe; --blue-200:#bfd3fe; --blue-300:#93b4fd;
  --blue-400:#608dfa; --blue-500:#3b6df6; --blue-600:#1a56db; --blue-700:#1e44b8;
  --blue-800:#1e3a91; --blue-900:#1d3473;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#060b18;
  --emerald-500:#10b981; --emerald-600:#059669; --violet-500:#8b5cf6; --violet-600:#7c3aed;
  --cyan-500:#06b6d4; --amber-500:#f59e0b; --rose-500:#f43f5e;

  --bg:var(--slate-50); --surface:#ffffff; --surface-2:var(--slate-50); --surface-3:var(--slate-100);
  --border:rgba(226,232,240,.9); --border-strong:var(--slate-200);
  --text:var(--slate-900); --text-2:var(--slate-500);
  --primary:var(--blue-600); --primary-hover:var(--blue-700); --primary-soft:var(--blue-50);
  --ring:rgba(26,86,219,.35);
  --nav-bg:rgba(255,255,255,.72);
  --hero-ink:#eaf1ff;

  --font-ar:"IBM Plex Sans Arabic","Tajawal",system-ui,sans-serif;
  --font-num:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif;

  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-3xl:24px; --r-full:999px;
  --sec-pad:clamp(52px,6vw,88px);   /* إيقاع الأقسام — انظر .s-pad */

  /* ============================================================
     سلّم الخطوط — سبع درجات بدل عشرين
     ============================================================
     كان في الملفّ نحو عشرين مقاسَ نصٍّ للواجهة (‏10.5 · 11 · 11.5 · 12 · 12.5
     · 13 · 13.5 · 14 · 14.5 · 15 · 15.5 …). والفرق نصفُ بكسل لا يُرى مفرداً،
     لكن العين تقرأ **غياب النظام** فوراً: عنوانان متجاوران بوزنٍ واحد ومقاسين
     مختلفين بربع درجة يجعلان الصفحة تبدو مجمَّعة لا مصمَّمة.

     الدرجات هنا نسبتها ثابتة (‏≈1.125)، فكل مقاس يُشتقّ من الذي قبله بدل أن
     يُختار بالحدس. والمقاسات الصغيرة جداً (7–9px) تبقى كما هي في **ماكيتات
     الأجهزة** المرسومة بالـCSS: تلك رسمٌ لا نصٌّ يُقرأ. */
  --fs-2xs:11.5px;  /* شارات وتسميات دقيقة */
  --fs-xs:12.5px;   /* سطر شارح تحت عنوان صغير */
  --fs-sm:13.5px;   /* نصّ ثانوي · روابط التذييل */
  --fs-md:14.5px;   /* نصّ الواجهة الافتراضي */
  --fs-lg:16px;     /* عنوان بطاقة */
  --fs-xl:18px;     /* عنوان فرعي */

  /* ⚠️ نصّ رمادي فاتح على أبيض: 2.56:1 — يسقط في AA (‏4.5) بفارق كبير.
     وهو مستعمل في نصوصٍ تُقرأ فعلاً (اسم العيادة تحت اسم الطبيب، وروابط
     المميزات في منيو الهاتف)، لا في زخرفة. التغميق يرفعه فوق العتبة ويُبقي
     الدرجة الثالثة مميّزةً عن الثانية. */
  --text-3:#66738a;   /* 4.79:1 على أبيض · 4.58:1 على السطح الثاني — كلاهما فوق AA */
  --shadow-md:0 1px 2px rgba(15,23,42,.03),0 2px 6px rgba(15,23,42,.04);
  --shadow-lg:0 6px 18px rgba(15,23,42,.06),0 2px 5px rgba(15,23,42,.04);
  --shadow-xl:0 14px 36px rgba(15,23,42,.10),0 4px 12px rgba(15,23,42,.06);
  --shadow-glow:0 0 0 1px rgba(26,86,219,.08),0 20px 60px -12px rgba(26,86,219,.35);
  --maxw:1180px;
}
html[data-theme="dark"]{
  --bg:var(--slate-950); --surface:#0e1626; --surface-2:#121c30; --surface-3:#16223a;
  --border:rgba(148,163,184,.14); --border-strong:rgba(148,163,184,.22);
  --text:#eef2f8; --text-2:#97a6bd; --text-3:#8494ab;
  --primary:var(--blue-500); --primary-hover:var(--blue-400); --primary-soft:rgba(59,109,246,.14);
  --ring:rgba(59,109,246,.4);
  --nav-bg:rgba(11,19,34,.72);
  --shadow-md:0 2px 6px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --shadow-xl:0 24px 60px rgba(0,0,0,.6);
  --shadow-glow:0 0 0 1px rgba(59,109,246,.18),0 24px 70px -12px rgba(11,40,110,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}

/* ============================================================
   ⚠️ حلقة تركيز — لم تكن في الصفحة **ولا قاعدة واحدة**
   ============================================================
   المتصفّح يرسم حلقةً افتراضية، وقاعدتان هنا تُلغيانها (‏outline:none) في
   الحقول والأزرار. فمن يتنقّل بلوحة المفاتيح — وهو كل من لا يستطيع استعمال
   الفأرة — كان يفقد موضعه في الصفحة تماماً: يضغط Tab فلا يرى أين ذهب.

   و«:focus-visible» لا «:focus»: الأخيرة ترسم الحلقة عند الضغط بالفأرة أيضاً
   فتبدو خطأً بصرياً، والأولى تظهر لمن يستعمل لوحة المفاتيح وحده. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary); outline-offset:3px; border-radius:var(--r-sm)}
.btn:focus-visible,.nav-login:focus-visible{outline-offset:4px}

/* ⚠️ الترويسة ثابتة بارتفاع ≈٧٦ بكسل، فالقفز إلى مرساة (‏#pricing) كان يضع
   عنوان القسم **تحتها** — يضغط الزائر «الأسعار» فيجد نفسه في منتصف الفقرة
   ولا يرى العنوان. والمقدار أكبر قليلاً من الترويسة ليتنفّس القسم. */
:where(section,[id]){scroll-margin-top:104px}
@media (max-width:680px){ :where(section,[id]){scroll-margin-top:88px} }
/* ⚠️ body بـclip لا hidden: hidden يجعل body حاوية تمرير (overflow-y يصير auto) بينما
   الصفحة تُمرَّر على النافذة — فيفقد كل عنصرٍ لاصق (sticky) مرجعه ويتحرّك مع الصفحة.
   هكذا كان فهرس المقال الجانبي يختفي عند أوّل تمرير بدل أن يرافق القارئ. */
body{
  margin:0; font-family:var(--font-ar); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.7; overflow-x:clip;
  transition:background-color .4s ease,color .4s ease;
}
.num{font-family:var(--font-num); font-feature-settings:"tnum" 1; letter-spacing:-.01em}
/* ============================================================
   لمساتٌ دقيقة
   ============================================================
   ⚠️ ولا واحدة منها زينة: التحديد بلون العلامة يجعل النسخ يبدو جزءاً من
   المنتج لا من المتصفّح، وحدّ العرض ‏(‏`text-wrap:balance`) يمنع العنوان من
   أن يترك كلمةً وحيدة في سطرٍ أخير — وهو أكثر ما يجعل عنواناً مضبوطاً يبدو
   مهملاً. وكلاهما بلا أي تكلفة على الأداء. */
::selection{background:color-mix(in srgb,var(--primary) 22%,transparent); color:var(--text)}
h1,h2,h3,.h-sec,.feat h3,.cap h3,.rev-title{text-wrap:balance}
p,li{text-wrap:pretty}
/* التمرير الناعم يُبطَل لمن طلب تقليل الحركة — القفزة الفورية أرحم من دوارٍ
   لا يستطيع إيقافه. */
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
section{position:relative}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-xs); font-weight:700;
  letter-spacing:normal; color:var(--text-2);
  padding:0; background:none; border:0;
}
.eyebrow{font-size:var(--fs-xs); font-weight:700; color:var(--primary)}
.eyebrow::before{content:""; width:18px; height:2px; border-radius:2px; background:currentColor; opacity:.55; flex:none}
.eyebrow.dark{color:#8fb4ff}
.eyebrow.dark{color:#8fa9d8}
/* ⚠️ التتبّع السالب ضيّق على العربية: الحروف موصولة، وتضييقُها ٣٫٥٪ عند ٤٤
   بكسل يقارب حرفاً ونصفاً فتلتصق الأسنان والنقاط. اللاتينية تحتمله والعربية
   لا — والعنوان هنا عربيّ في كل الصفحة. */
.h-sec{font-size:clamp(26px,4.2vw,42px); font-weight:800; line-height:1.32; letter-spacing:-.012em; margin:16px 0 14px}
.sub-sec{font-size:clamp(15px,1.9vw,17.5px); color:var(--text-2); max-width:640px; margin:0 auto; line-height:1.85}
.center{text-align:center}
.grad-text{background:linear-gradient(110deg,var(--blue-500),var(--blue-700) 60%); -webkit-background-clip:text; background-clip:text; color:transparent}
/* inline icon sizing (scales with container font-size via 1em) */
.ic{width:1em; height:1em; display:inline-block; vertical-align:-.14em; flex:none}
.bx .ico svg{width:23px; height:23px}
.sico svg{width:22px; height:22px}
.book-benes .bi svg{width:20px; height:20px}
.form-ok .okc svg{width:32px; height:32px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-ar); display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 24px; border-radius:var(--r-full); font-size:var(--fs-md); font-weight:700;
  cursor:pointer; border:1px solid transparent; background:transparent; color:var(--text);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,border-color .18s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn-primary{ background:linear-gradient(135deg,#3b78ee,#1a56db); color:#fff;
  box-shadow:0 8px 22px -6px rgba(26,86,219,.6),inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(26,86,219,.7)}
/* ⚠️ ردّ فعل للضغط: زرٌّ يرتفع عند المرور ولا يتحرّك عند الضغط يترك المستخدم
   لا يعرف أن ضغطته وصلت — خصوصاً على اللمس حيث لا «مرور» أصلاً. */
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; pointer-events:none}
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:active{transform:none!important} }
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%); transition:transform .6s}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{ background:var(--surface); border-color:var(--border-strong); color:var(--text); box-shadow:var(--shadow-md) }
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--primary); color:var(--primary)}
.btn-lg{height:54px; padding:0 30px; font-size:var(--fs-lg)}
.btn-sm{height:40px; padding:0 18px; font-size:var(--fs-sm)}
.btn-block{width:100%}

/* ---------- NAV ---------- */
header.nav{position:fixed; inset-inline:0; top:0; z-index:80; transition:padding .3s,background .3s}
/* ⚠️ الترويسة أعرض من عمود المحتوى (1180) عمداً: هي شريطٌ عائم لا عمود قراءة،
   وحصرُها في عرض النصّ كان يزحم سبعة روابط وأربعة أزرار في مساحةٍ لا تسعها —
   فتلتفّ الروابط سطرين ويبدو الشريط مكسوراً على شاشة عريضة. */
.nav-inner{
  max-width:1260px; margin:14px auto 0; padding:9px 16px; display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  background:var(--nav-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border); border-radius:var(--r-full); box-shadow:var(--shadow-lg);
  transition:margin .3s,background .3s;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; font-size:18px; letter-spacing:-.01em}
.brand small{display:block; font-size:11px; color:var(--text-2); font-weight:600; margin-top:-2px}
.nav-links{display:flex; align-items:center; gap:2px; margin-inline-start:auto; flex:none}
.nav-links a{padding:9px 13px; border-radius:var(--r-full); font-size:var(--fs-md); font-weight:600; color:var(--text-2);
  transition:.18s; white-space:nowrap}
.nav-links a:hover{color:var(--text); background:var(--surface-2)}
.nav-actions{display:flex; align-items:center; gap:8px; flex:none}
/* اسم النظام تحت الشعار يختفي قبل أن تضيق الروابط: سطرٌ تعريفيّ يُقرأ مرّةً
   ويأخذ عرضاً دائماً، والروابط تُستعمل في كل زيارة. */
@media (max-width:1180px){ .brand small{display:none} .brand{font-size:17px} }
.icon-btn{width:44px; height:44px; border-radius:var(--r-full); display:grid; place-items:center;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2); cursor:pointer; transition:.18s}
.icon-btn:hover{color:var(--primary); border-color:var(--primary)}
.nav-cta{height:44px; padding:0 20px}
.burger{display:none}
/* mobile dropdown menu */
.mobile-menu{display:none; position:fixed; top:76px; inset-inline:14px; z-index:79;
  background:var(--nav-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow-xl); padding:10px;
  flex-direction:column; gap:4px; opacity:0; transform:translateY(-12px); pointer-events:none; transition:.24s cubic-bezier(.2,.7,.3,1)}
.mobile-menu.open{opacity:1; transform:none; pointer-events:auto}
.mobile-menu a{padding:13px 16px; border-radius:var(--r-lg); font-weight:600; font-size:var(--fs-md); color:var(--text-2); transition:.15s}
.mobile-menu a:hover,.mobile-menu a:active{background:var(--surface-2); color:var(--text)}
.mobile-menu .mm-cta{color:#fff; justify-content:center; margin-top:8px}
.burger.on{color:var(--primary); border-color:var(--primary)}
/* ============================================================
   زرّ الدخول — كان يرث حشوته من `.nav-links a`
   ============================================================
   ⚠️ حين انتقل من قائمة الروابط إلى شريط الإجراءات سقطت عنه الحشوة التي كان
   يرثها، فالتصق الإطار بالنصّ وصار ارتفاعه أقصر من الأزرار المدوّرة بجواره —
   يبدو مضغوطاً وغير مستوٍ معها. فصار له ارتفاعه وحشوته صراحةً، ومقاسه مقاس
   جيرانه (٤٢ بكسل). */
.nav-login{display:inline-flex; align-items:center; height:44px; padding:0 16px;
  border-radius:var(--r-full); font-size:var(--fs-md); font-weight:700; color:var(--primary);
  border:1px solid color-mix(in srgb,var(--primary) 28%,transparent);
  background:color-mix(in srgb,var(--primary) 5%,transparent); white-space:nowrap;
  transition:background .18s,border-color .18s,transform .18s}
.nav-login:hover{background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 55%,transparent); transform:translateY(-1px)}
.mobile-menu .mm-login{color:var(--primary); font-weight:700; border:1px solid var(--border-strong); justify-content:center; text-align:center; border-radius:var(--r-lg)}
/* صفّ الأدوات آخر المنيو (اللغة والوضع) — أخفّ وزناً من روابط التنقّل فوقه
   فلا يزاحمها، ولا يظهر إلا على المقاس الذي يُخفي أصلَه من الشريط. */
.mm-tools{display:none; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--border)}
.mm-tools button{flex:1; height:40px; border-radius:var(--r-lg); cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-2);
  font-family:inherit; font-weight:600; font-size:var(--fs-sm); transition:.15s}
.mm-tools button:hover{color:var(--primary); border-color:var(--primary)}
/* ---------- القائمة المنسدلة في الترويسة ----------
   ⚠️ هنا لا في build-site.mjs: الترويسة تُستخرج من هذا الملفّ، فأنماطها لازم
   تكون معه وإلا وصلت الصفحات المولَّدة وحدها وبقيت الرئيسية بلا تنسيق. */
.has-menu{position:relative}
.nav-trigger{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:var(--r-full);
  font-size:var(--fs-md); font-weight:600; color:var(--text-2); background:none; border:0; cursor:pointer;
  font-family:inherit; transition:.18s; white-space:nowrap}
.nav-trigger:hover,.has-menu.open .nav-trigger{color:var(--text); background:var(--surface-2)}
.nav-trigger svg{transition:transform .2s} .has-menu.open .nav-trigger svg{transform:rotate(180deg)}
.mega{position:absolute; top:calc(100% + 14px); inset-inline-start:50%; transform:translateX(50%) translateY(-8px) scale(.985);
  width:min(640px,92vw); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  box-shadow:0 30px 70px -30px rgba(15,23,42,.35),0 2px 8px rgba(15,23,42,.06); padding:10px; display:grid;
  grid-template-columns:1fr 1fr; gap:2px; transform-origin:top center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s cubic-bezier(.2,.7,.3,1),transform .2s cubic-bezier(.2,.7,.3,1),visibility .2s;
  z-index:120; text-align:start}
.has-menu.open .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(50%) translateY(0) scale(1)}
.mega a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-lg);
  font-size:var(--fs-md); font-weight:600; color:var(--text-2); transition:.15s; white-space:nowrap}
.mega a:hover{background:var(--surface-2); color:var(--text)}
.mega a svg{width:17px; height:17px; color:var(--primary); flex:none}
.mega-all{grid-column:1 / -1; border-bottom:1px solid var(--border); border-radius:var(--r-lg) var(--r-lg) 0 0;
  margin-bottom:6px; padding-bottom:12px!important; font-weight:800!important; color:var(--text)!important}
.mobile-menu .mm-sub{padding-inline-start:30px; padding-block:9px; font-size:var(--fs-sm); color:var(--text-3)}
.mobile-menu .mm-sub-all{font-weight:800; color:var(--primary)}
.mm-acc{display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px;
  padding:13px 16px; border:0; border-radius:var(--r-lg); background:none; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:var(--fs-md); color:var(--text-2); transition:.15s}
.mm-acc:hover,.mm-acc[aria-expanded="true"]{background:var(--surface-2); color:var(--text)}
.mm-acc svg{transition:transform .2s; flex:none}
.mm-acc[aria-expanded="true"] svg{transform:rotate(180deg)}
/* ⚠️ الغلاف عمودٌ صريح: روابط المميزات كانت أبناءً مباشرين لـ`.mobile-menu`
   (وهو `flex-direction:column`) فتُرسم سطراً لكلٍّ منها. وبعد لفّها في `div`
   عادت `inline` فسالت في سطرٍ واحد متّصل — تغييرُ بنيةٍ أسقط تنسيقاً كان
   يأتي من الأب لا من الصنف نفسه.
   ⚠️ و`[hidden]` بعده: قاعدة `display` لاحقة تُبطل `hidden` وتفتح القائمة دائماً. */
.mm-sub-wrap{display:flex; flex-direction:column; gap:2px}
.mm-sub-wrap[hidden]{display:none}
/* ⚠️ المنيو ثابت (position:fixed) فلا يتمرّر مع الصفحة: بستّة عشر رابط ميزة صار
   أطول من الشاشة، والعناصر الأخيرة (تسجيل الدخول وحجز العرض) تخرج تحت الحافّة
   بلا أي وسيلة للوصول إليها — أي أن إضافة المميزات كسرت أهمّ زرّين في المنيو.
   سقفٌ للارتفاع وتمرير داخليّ يحلّها، و overscroll-behavior تمنع تمرير الصفحة
   خلفه حين يصل المنيو إلى آخره. */
.mobile-menu{max-height:calc(100dvh - 96px); overflow-y:auto; overscroll-behavior:contain}
@media (max-width:980px){ .has-menu{display:none} }

/* نافذة الدخول أُزيلت — الدخول من app.dentoflow-ai.com (انظر الشرح عند الترويسة). */

/* ---------- HERO ---------- */
/* الخلفيات لونان مسطّحان في الموقع كلّه (قرار المالك): لون الصفحة و«s-alt» الرماديّ الفاتح —
   لا قسمٌ داكن ولا هالاتٌ ملوّنة تلمع. ثلاثة أنواع أرضيّة في صفحةٍ واحدة تُقرأ ثلاثة مواقع. */
.hero{padding:170px 0 90px; overflow:clip}
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:30px; align-items:center}
.hero h1{font-size:clamp(33px,5.2vw,58px); font-weight:700; line-height:1.24; letter-spacing:-.012em; margin:16px 0 20px}
.hero p.lead{font-size:clamp(16px,2.2vw,20px); color:var(--text-2); max-width:540px; margin:0 0 28px; line-height:1.8}
.hero-cta{display:flex; gap:13px; flex-wrap:wrap}
.hero-facts{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:11px 24px;
  color:var(--text-2); font-size:var(--fs-sm); font-weight:600}
.hero-facts li{display:inline-flex; align-items:center; gap:8px}
.hero-facts svg{width:15px; height:15px; color:var(--emerald-600); flex:none}

/* ============================================================
   مسرح الأجهزة — إطارٌ واحد لكل صور الشرح
   ============================================================
   الصور مقصوصةٌ على حدّ الجهاز بلا خلفية، ولا ظلّ حولها ولا إطار (قرار المالك:
   الظلّ المسقَط كان يُقرأ بقعةً سوداء تحت الأجهزة، وأثقل في الوضع الداكن).
   وإطارٌ مرسوم كان سيضع «كارت» حول جهازٍ هو نفسه كارت. */
.art-stage{position:relative; display:flex; align-items:center; justify-content:center}
.art{position:relative; z-index:1; display:block; width:100%; height:auto}
/* الأجهزة تخرج قليلاً من عمود المحتوى نحو حافّة الشاشة: تركيبةٌ عرضها ضِعف
   ارتفاعها تُقرأ صغيرةً لو حُبست في نصفٍ مضبوط، و«overflow:clip» على الهيرو
   يمنع أي تمرير أفقي. */
.art-hero{width:114%; max-width:none; margin-inline-end:-14%}
/* لقطةٌ لهاتفٍ وحده عرضها الأصليّ ٣٤٥ بكسل: مدُّها إلى عرض نصف الصفحة يجعلها
   ضبابية — تُعرض بحدّها الطبيعي وتُوسَّط. */
.art-narrow{max-width:330px; margin-inline:auto}
/* جهازٌ مائل يُقرأ جهازاً في يد؛ والمستوي تماماً يُقرأ لقطةَ شاشة. */
.art-tilt{max-width:300px; margin-inline:auto}
.art-tilt .art{transform:rotate(-7deg); transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.art-tilt:hover .art{transform:rotate(-3deg) translateY(-6px)}
/* ============================================================
   اهتزازة الإشعار — نبضة قصيرة كل بضع ثوانٍ لا رجفة مستمرّة
   ============================================================
   القسم يقول «الإشعار بيوصلك»، والاهتزازة هي الجملة مرسومة. لكن جهازاً
   يرتجف بلا توقّف يُقرأ عطلاً في الصفحة لا إشعاراً — فالدورة ستّ ثوانٍ،
   تسعُ أعشارها سكون، والحركة في آخرها نصف ثانية.

   ⚠️ والاهتزاز على **الغلاف** لا على الصورة: الصورة تحمل `transform:rotate`
   للميل، وحركةٌ ثانية على الخاصية نفسها تلغيه — فيستوي الجهاز فجأة كلّما
   اهتزّ. الغلاف يزيح، والصورة تبقى مائلة. */
.art-buzz{animation:notifyBuzz 6s ease-in-out infinite}
@keyframes notifyBuzz{
  0%,84%,100%{transform:translateX(0)}
  86%{transform:translateX(-4px)}
  88.5%{transform:translateX(4px)}
  91%{transform:translateX(-3px)}
  93.5%{transform:translateX(3px)}
  96%{transform:translateX(-1.5px)}
  98%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .art-tilt .art,.art-tilt:hover .art{transition:none}
  .art-buzz{animation:none}
}
@media (max-width:980px){ .art-hero{width:100%; margin-inline-end:0} }
/* حركةٌ بطيئة جداً: تُحسّ ولا تُلاحَظ، فلا تسحب العين عن العنوان. */
.art-float{animation:artFloat 9s ease-in-out infinite}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.art-float{animation:none}}

/* ============================================================
   قسم بوّابة المريض — شريطٌ داكن بلقطته الخاصّة
   ============================================================
   لقطات البوّابة داكنة بذهبيّها (ألوان العيادة في المثال)، فوضعها على خلفية
   بيضاء يجعلها بقعةً سوداء وسط الصفحة. الشريط الداكن يجعل اللقطة تُقرأ
   امتداداً للقسم لا ثقباً فيه. */
.portal{background:var(--sec-alt); position:relative; overflow:clip}
/* ⚠️ عمود الأجهزة أوسع: الأجهزة هي **الدليل** في هذا القسم، والكلام شرحُها.
   وكان العمودان شبه متساويين فيخرج اللابتوب صغيراً لا تُقرأ شاشته — وصورةُ
   جهازٍ لا يُقرأ ما فيه لا تقول شيئاً. */
.portal-grid{position:relative; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:44px; align-items:center}

/* ---------- الكلام المتبدّل مع الشاشة ---------- */
/* الألواح مكدّسة في خانة واحدة: الحاوية بارتفاع أطولها، فلا يقفز الزرّ تحتها. */
.pc-swap{display:grid}
.pc-pane{grid-area:1/1; opacity:0; transform:translateY(10px);
  transition:opacity .42s ease,transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events:none; visibility:hidden}
.pc-pane.on{opacity:1; transform:none; pointer-events:auto; visibility:visible}
@media (prefers-reduced-motion:reduce){ .pc-pane{transition:opacity .2s linear; transform:none} }
.portal .sub-sec{max-width:520px}
.portal-list{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:12px}
.portal-list li{display:flex; align-items:center; gap:11px; font-weight:600; font-size:var(--fs-md); color:var(--text)}
.portal-list i{width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--text-3)}

.portal-art{position:relative; display:flex; align-items:center; justify-content:center;
  padding-block:10px; min-height:300px; touch-action:pan-y}
.portal-art .pa-lap{position:relative; z-index:1; width:100%; max-width:820px; height:auto; display:block}
/* الهاتف أمام اللابتوب وعلى جانبه: يُقرآن مشهداً واحداً لا صورتين. */
.pa-phone{position:absolute; z-index:2; inset-inline-start:0; bottom:-9%; width:min(35%,248px); aspect-ratio:190/381}
/* ============================================================
   تبديل شاشات البوّابة — دخولٌ من جانب وخروجٌ من الجانب المقابل
   ============================================================
   ⚠️ الذاهبة تخرج من **الجهة المقابلة** للداخلة، وإلّا رجعت من حيث أتت
   فقُرئت «تراجعاً» لا «تالية». وهي الحالة التي تحتاج صنفاً ثالثاً
   (`.out`): صنفٌ واحد (`.on`) يعرف «ظاهرة/مخفيّة» ولا يعرف **الاتجاه**.
   والصنف يُنزع بعد انتهاء الانتقال فلا يتراكم على الشاشات. */
.pa-shot{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transform:translateX(38px) scale(.94);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .58s cubic-bezier(.22,.9,.3,1)}
.pa-shot.on{opacity:1; transform:none}
.pa-shot.out{opacity:0; transform:translateX(-38px) scale(.94)}
.pa-dots{position:absolute; z-index:3; inset-inline-start:0; bottom:-18%; width:min(35%,248px);
  display:flex; justify-content:center; gap:7px}
.pa-dots button{width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--border-strong); transition:.2s}
.pa-dots button.on{background:var(--primary); width:20px; border-radius:var(--r-full)}
.pa-dots button:hover{background:var(--text-3)}
@media (prefers-reduced-motion:reduce){ .pa-shot{transition:none} }
@media (max-width:980px){
  .portal-grid{grid-template-columns:1fr; gap:38px}
  .portal-art{margin-top:6px}
  .pa-phone{inset-inline-start:0; bottom:-4%}
  .pa-dots{bottom:-13%}
}
@media (max-width:560px){
  .portal-art .pa-lap{max-width:100%}
  .pa-phone{width:30%}
  .pa-dots{width:30%}
}

/* ---------- قسم «ما هو دينتو فلو» ---------- */
/* عمودان: التعريف في البداية وما يغطّيه النظام بجواره — صفوفٌ بفاصلٍ رفيع لا
   بطاقات، وأيقونات رمادية. كانت فقرةً واحدة من خمسة أسطر بعرض الصفحة تعدّ
   الوحدات بالفواصل، فتُقرأ كتلةً رمادية ويتخطّاها القارئ. */
.wi{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,84px); align-items:center}
.wi-lead{margin:0; font-size:clamp(16px,1.8vw,18.5px); line-height:1.95; color:var(--text); font-weight:500}
.wi-note{margin:14px 0 0; font-size:var(--fs-md); line-height:1.95; color:var(--text-2)}
.wi-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:32px}
.wi-list li{display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 2px;
  border-bottom:1px solid var(--border); font-size:15px; font-weight:600; color:var(--text); line-height:1.5}
.wi-list .ic{width:19px; height:19px; color:var(--text-3)}
@media (max-width:900px){ .wi{grid-template-columns:1fr; gap:28px} }
@media (max-width:520px){ .wi-list{grid-template-columns:1fr} .wi-list li{min-height:50px} }

/* ---------- شريط الدول ---------- */
.countries{position:relative; overflow:clip; background:var(--sec-alt)}
/* ============================================================
   الأعلام تطوف حول الجملة
   ============================================================
   ⚠️ نُقلت مرّةً إلى صفٍّ تحت النصّ لأن التوزيع حوله كان يُركِب البلاطات على
   الكلام في اللحظة التي يُقرأ فيها. والحلّ الصحيح إبعادها لا نقلها: كل موضع
   هنا **خارج عمود القراءة** — الجوانب عند |x| ≥ ٣٫٢ والأعلى والأسفل عند
   |y| ≥ ٢٫٥ — فتحيط بالجملة ولا تلمسها.

   ⚠️ وعلى الشاشة الضيّقة يستحيل ذلك (لا هوامش تتّسع)، فتعود صفّاً تحت النصّ.
   ثباتُ التوزيع على كل المقاسات كان سيعني بلاطةً فوق كلمة على الهاتف. */
/* ⚠️ شبكةٌ بتوسيطٍ لا كتلة: الجملة تُتوسَّط رأسياً فتبقى بلاطات الأعلى
   والأسفل خارجها. وقاعدتان متعارضتان على هذا المحدِّد كانتا تُلغيان التوسيط
   بصمت — فتلتصق الجملة بالأعلى ويركب عليها علمان. */
.countries-inner{position:relative; display:grid; place-items:center; min-height:720px}
.countries-copy{position:relative; z-index:2; max-width:560px; margin-inline:auto; text-align:center}
.countries-copy .sub-sec{margin-inline:auto}
.countries-copy .btn{margin-top:26px}

/* ⚠️ الحقل طبقةٌ فوق القسم لا صفٌّ في تدفّقه: البلاطات مطلقة الموضع حول مركزه،
   و«pointer-events:none» تُبقي الزرّ تحتها قابلاً للضغط. */
.fg-field{--k:100px; position:absolute; z-index:1; inset:0; pointer-events:none}

/* ============================================================
   ⚠️ طبقتان: الخارجة تنفجر، والداخلة تطوف
   ============================================================
   الانفجار انتقالٌ لمرّة واحدة (transition) والطواف حركةٌ دائمة (animation)،
   وكلاهما يكتب `transform` — ولا يجتمعان على عنصرٍ واحد: الأخير يفوز فيُلغي
   الآخر. فالخارجة تحمل الموضع والانفجار، والداخلة تحمل الطواف واللمعان. */
.fg-tile{--fs:calc(var(--f,96px) * var(--fz,1));
  position:absolute; left:50%; top:50%; width:var(--fs); height:var(--fs);
  margin:calc(var(--fs) / -2); opacity:0;
  transform:translate(0,0) scale(.28) rotate(0);
  transition:transform .9s cubic-bezier(.16,1.02,.3,1),opacity .55s ease;
  transition-delay:calc(var(--i) * 42ms)}
/* ⚠️ الانطلاق من المركز إلى الموضع: كلّها مكوّمة في نقطة واحدة ثم تتبعثر —
   وهو ما يجعل الحركة تُقرأ «انتشاراً» لا «ظهوراً». والقوس `cubic-bezier`
   يتجاوز الهدف قليلاً ثم يستقرّ، فتبدو ملقاةً لا موضوعة. */
.fg-field.in .fg-tile{opacity:1;
  transform:translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k))) scale(1) rotate(var(--rot))}

.fg-in{position:relative; display:grid; place-items:center; width:100%; height:100%;
  border-radius:calc(var(--fs) * .21); overflow:hidden;
  background:var(--surface);
  border:1px solid color-mix(in srgb,var(--border-strong) 55%,transparent);
  box-shadow:0 16px 30px -18px rgba(15,23,42,.32),0 2px 6px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.7);
  will-change:transform; animation:fgFloat 11s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.83s)}
html[data-theme="dark"] .fg-in{
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 66%,transparent));
  box-shadow:0 20px 38px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}

/* ⚠️ اللمعان شريطُ ضوءٍ **يزحف بـ`transform`** لا وميضُ ظلٍّ يتغيّر: تحريك
   `box-shadow` أو `filter` على أربع عشرة بلاطة يُعيد الرسم في كل إطار — وهو
   بعينه ما أوقف رسم هذا القسم أوّل مرّة. والانزلاق يقع على المُركِّب وحده. */
.fg-in::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%);
  transform:translateX(-160%); animation:fgSheen 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.47s)}
html[data-theme="dark"] .fg-in::after{
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.24) 50%,transparent 66%)}
@keyframes fgFloat{
  0%,100%{transform:translate3d(0,0,0)}
  34%{transform:translate3d(2px,-8px,0)}
  67%{transform:translate3d(-2px,5px,0)}
}
@keyframes fgSheen{0%,62%{transform:translateX(-160%)} 88%,100%{transform:translateX(160%)}}

/* ⚠️ العلم يُقصّ سُداسيّاً — والقصّ على **العنصر** لا على الرسم: «clip-path»
   يقع على المُركِّب فلا يُعاد رسم شيء مع الطواف، بخلاف قناعٍ داخل الـSVG.
   ونسبةُ العلم ٣:٢ والسُداسيّ شبه مربّع، فالـSVG يملأ الصندوق ويُقصّ من
   جانبيه («slice») بدل أن يُترك شريطان فارغان فوقه وتحته. */
.flag{width:72%; height:72%; display:block; border-radius:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}

/* ⚠️ ومن طلب تقليل الحركة: لا انفجار ولا طواف ولا لمعان — تظهر في مواضعها
   مباشرةً. والإخفاء ليس بديلاً: الأعلام محتوى القسم لا زينته. */
@media (prefers-reduced-motion:reduce){
  .fg-tile{transition:opacity .01s linear; transition-delay:0s !important;
    transform:translate(calc(var(--x) * var(--k)),calc(var(--y) * var(--k))) rotate(var(--rot)); opacity:1}
  .fg-in,.fg-in::after{animation:none}
  .fg-in::after{opacity:0}
}

/* ⚠️ الموضع والحجم يصغران معاً: تصغير «--k» وحده يسحب بلاطةً كاملة الحجم
   نحو النصّ فتركبه. والنصّ يضيق معهما فيبقى الخلوص موجباً. */
@media (max-width:1120px){ .fg-field{--k:84px; --fz:.84} .countries-copy{max-width:430px} }
/* دون ٨٦٠: لا هوامش تتّسع لطوقٍ حول النصّ — فتعود صفّاً تحته. */
@media (max-width:860px){
  .countries-inner{min-height:0}
  .countries-copy{max-width:760px}
  .fg-field{position:relative; inset:auto; margin-top:34px;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px}
  .fg-tile{position:static; margin:0; width:var(--fs,60px); height:var(--fs,60px);
    transform:scale(.4); transition-delay:calc(var(--i) * 26ms)}
  .fg-field.in .fg-tile{transform:rotate(var(--rot)) scale(1)}
  .fg-tile{--fs:58px}
  @media (prefers-reduced-motion:reduce){ .fg-tile{transform:rotate(var(--rot))} }
}
@media (max-width:680px){
  .fg-field{gap:9px}
  .fg-tile{--fs:50px}
}

}

/* ============================================================
   شبكة الإمكانيات — بطاقات هادئة على أرضيّة متدرّجة
   ============================================================
   البطاقة بيضاء صريحة على خلفية متدرّجة خفيفة: التباين يأتي من الأرضية لا
   من إطارٍ ثقيل حول كل بطاقة. والأيقونة في مربّع صغير بلون العلامة وحده —
   أيقونة ملوّنة لكل بطاقة تُقرأ لوحةَ ألوان لا نظاماً.

   ⚠️ والضباب في الأرضية ساكن (‏`::before` بـ`filter:blur`) لا
   `backdrop-filter` على كل بطاقة: الأخير يُعيد حساب ما خلف اثنتي عشرة
   بطاقة في كل إطار تمرير. */
.caps{position:relative; overflow:clip; background:var(--sec-alt)}
.caps .wrap{position:relative}
/* ============================================================
   شريطٌ يُسحب بدل أربعة صفوف
   ============================================================
   اثنتا عشرة بطاقة في ثلاثة أعمدة = أربعة صفوف ≈ ١٢٠٠ بكسل من الصفحة،
   وستّ آراء = صفّان آخران. والزائر لا يقرأ اثنتي عشرة بطاقة: يقرأ ثلاثاً
   ويحكم. فصارت كلٌّ منهما **صفّاً واحداً** يُسحب أفقياً — تُختصر الصفحة
   إلى نصفها ويبقى كل المحتوى متاحاً.

   ⚠️ والتمرير هنا «overflow-x» أصليّ لا شريط مصنوع بـJS: يعمل بالإصبع
   وبعجلة الماوس الأفقية ولوحة اللمس، ويُبقي التنقّل بالكيبورد (Tab) يمرّر
   البطاقة إلى داخل الشاشة من تلقائه — وهو ما يسقط في كل شريط مصنوع باليد.
   و«scroll-snap» يجعل السحبة تستقرّ على بطاقة لا بين اثنتين. */
/* البطاقات بارتفاعٍ واحد: صفٌّ أفقيّ بارتفاعات مختلفة يُقرأ غير مرتّب،
   والفرق يظهر هنا أكثر من الشبكة لأن الحوافّ السفلية في خطّ نظر واحد. */
.rail{display:flex; align-items:stretch; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:22px; padding:4px 22px 18px; margin-inline:-22px;
  overscroll-behavior-x:contain; scrollbar-width:thin}
.rail > *{scroll-snap-align:start; flex:0 0 clamp(268px,31%,352px); height:auto}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-3) 45%,transparent); border-radius:8px}
.rail::-webkit-scrollbar-track{background:transparent}
/* ============================================================
   ⚠️⚠️ التلاشي عند الحافّة — قناعٌ لا لونٌ مرسوم فوقه
   ============================================================
   كان طبقتين ملوّنتين فوق الشريط، لونهما «لون القسم» مكتوباً بيد لكل قسم
   (‏`--bg` عامّةً، و`--surface-2` للإمكانيات والآراء). وهذا يعمل ما دام القسم
   لوناً مسطّحاً — **وقسم الإمكانيات ليس كذلك**: خلفيّته شفّافة وفوقها
   `::before` بتدرّجين شعاعيّين (أزرق وبنفسجيّ). فالطبقة المسطّحة تُرسم فوق
   تدرّجٍ لا يطابقها، فيظهر **مستطيلان باهتان عند الطرفين** — لا تلاشٍ.
   وهو نفس صنف «المستطيل الظاهر خلف البوّابة»: لونٌ يُكتب بيد ليطابق خلفيّةً
   تتغيّر.

   والقناع يحلّها من أصلها: لا يرسم شيئاً، بل **يُشفّ محتوى الشريط نفسه** عند
   طرفيه. فيعمل فوق أي خلفية — تدرّجاً كانت أو صورة أو لوناً مسطّحاً — ولا يبقى
   لونٌ يُطابَق، ولا قاعدة تُكتب لكل قسم يُضاف غداً.

   ⚠️ ويُطبَّق على الشريط لا على غلافه: الغلاف لا يقصّ شيئاً (المحتوى يتجاوزه
   ٢٢ بكسلاً في الجهتين)، والقناع على الغلاف كان سيقصّ الظلال الخارجة منه.
   والقناع منطقيّ الاتجاه (`to right` في الشبكة تتبع الكتابة) فينقلب مع RTL
   من تلقائه — ولا حاجة إلى قاعدة ثانية للاتجاه الآخر. */
.rail-wrap{position:relative}
.rail{
  --rail-fade:56px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--rail-fade),
    #000 calc(100% - var(--rail-fade)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--rail-fade),
    #000 calc(100% - var(--rail-fade)), transparent 100%);
}
/* ⚠️ والتلاشي عند **البداية** لا معنى له وهو ساكن: أوّل بطاقة كاملة ولا شيء
   يُقطع، وإخفاء ربعها خلف تدرّجٍ يجعلها تبدو ناقصة. فالساكن يتلاشى من طرفٍ
   واحد (حيث «بعدها المزيد»)، والمتحرّك من الطرفين لأن البطاقات تدخل من هنا
   وتخرج من هناك. */
.rail:not(.is-marquee){
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - var(--rail-fade)), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - var(--rail-fade)), transparent 100%);
}
/* على الهاتف: البطاقة ٨٤٪ من العرض، فتلاشٍ بعرض ٥٦ يبتلع لمحة التالية. */
@media (max-width:680px){ .rail > *{flex:0 0 84%} .rail{--rail-fade:26px} }

/* ============================================================
   الشريط الذي لا يقف
   ============================================================
   ⚠️ و«scroll-snap» يُطفأ على الشريط المتحرّك: المحاذاة تشدّه إلى أقرب بطاقة
   في كل إطار، فتصير الحركة المستمرّة ارتجافاً. وهما قراران متناقضان بطبعهما —
   الالتقاط يريد موضعاً يستقرّ عنده، وهذا لا يستقرّ.

   ⚠️ ومؤشّر التمرير يُخفى لا التمرير: مؤشّرٌ يزحف بلا توقّف يسحب العين إليه
   بدل البطاقات. والسحب بالإصبع وبالعجلة الأفقية وبلوحة اللمس يبقى كما هو،
   ومعه تلاشي الحافّة الذي يقول إن بعدها المزيد. */
.rail.is-marquee{scroll-snap-type:none; scrollbar-width:none; padding-bottom:8px}
.rail.is-marquee::-webkit-scrollbar{height:0; width:0}
/* النسخة المكرّرة لا يقرؤها قارئ الشاشة ولا يبلغها الـTab — التعطيل على ما
   يقبل التركيز داخلها وحده، والمرور يبقى يعمل عليها كما على أصلها. */

.cap{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:22px 20px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 30px -24px rgba(15,23,42,.30);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease}
.cap:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--primary) 32%,var(--border));
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 22px 44px -26px color-mix(in srgb,var(--primary) 40%,rgba(15,23,42,.3))}
.cap-ic{width:42px; height:42px; border-radius:var(--r-xl); display:grid; place-items:center; color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent)}
.cap-ic svg{width:20px; height:20px}
.cap h3{margin:15px 0 8px; font-size:var(--fs-lg); font-weight:800; line-height:1.55}
.cap p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.9}
/* البطاقة الأولى تأخذ صفّها: هي رأس القائمة لا واحدة منها. */
/* ⚠️ في شريطٍ أفقيّ لا معنى لبطاقةٍ «تمتدّ على الصفّ»: الصفّ لا نهاية له.
   فتبقى بطاقةً بعرض أخواتها، ويميّزها لونُها وحجم عنوانها. */
.cap-lead{background:linear-gradient(140deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface) 62%);
  border-color:color-mix(in srgb,var(--primary) 24%,var(--border))}
.cap-lead .cap-ic{width:46px; height:46px; border-radius:var(--r-xl)}
.cap-lead .cap-ic svg{width:22px; height:22px}
.cap-lead h3{font-size:var(--fs-xl)}


/* ---------- DEVICE MOCKUPS ---------- */
.hero-visual{position:relative; z-index:2; perspective:1600px}
.laptop{position:relative; transform:rotateY(-9deg) rotateX(4deg); transform-style:preserve-3d;
  animation:tilt 8s ease-in-out infinite; filter:drop-shadow(0 40px 60px rgba(15,23,42,.28))}
@keyframes tilt{0%,100%{transform:rotateY(-9deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-5deg) rotateX(2deg) translateY(-12px)}}
.laptop-screen{background:#0b1322; border-radius:16px; padding:11px; border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-glow)}
.laptop-bar{display:flex; gap:6px; padding:0 4px 9px}
.laptop-bar i{width:10px; height:10px; border-radius:50%; background:#33415a}
.laptop-bar i:nth-child(1){background:#ff5f57}.laptop-bar i:nth-child(2){background:#febc2e}.laptop-bar i:nth-child(3){background:#28c840}
.laptop-base{height:14px; margin:0 auto; width:78%; background:linear-gradient(#cbd5e1,#94a3b8);
  border-radius:0 0 12px 12px; position:relative}
.laptop-base::after{content:""; position:absolute; top:0; inset-inline:38%; height:5px; background:#64748b; border-radius:0 0 6px 6px}

.phone{position:absolute; bottom:-46px; inset-inline-start:-58px; width:172px; z-index:4;
  border-radius:30px; background:#0b1322; padding:9px; border:1px solid rgba(148,163,184,.25);
  box-shadow:var(--shadow-xl); animation:floatPhone 7s ease-in-out infinite}
@keyframes floatPhone{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.phone-notch{width:54px; height:5px; background:#33415a; border-radius:9px; margin:3px auto 8px}

/* ---- in-app UI recreation ---- */
.app{background:var(--surface); border-radius:9px; overflow:hidden; font-size:11px; color:var(--text); text-align:start}
.app s{text-decoration:none}
.app-mini{display:grid; grid-template-columns:62px 1fr}
.app-side{background:var(--surface-2); border-inline-end:1px solid var(--border); padding:9px 7px}
.app-logo{display:flex; align-items:center; gap:6px; font-weight:700; font-size:10.5px; margin-bottom:11px}
.app-nav{display:flex; flex-direction:column; gap:3px}
.app-nav b{display:flex; align-items:center; gap:6px; padding:6px 7px; border-radius:7px; font-weight:600; color:var(--text-2); font-size:10px}
.app-nav b.on{background:var(--primary); color:#fff}
.app-nav b svg{width:13px; height:13px; flex:none}
.app-main{padding:11px 12px; min-height:300px}
.app-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.app-top h4{margin:0; font-size:13px; font-weight:700}
.app-search{height:24px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); width:120px}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px}
.kpi{background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:8px 9px}
.kpi .k-l{font-size:8.5px; color:var(--text-2); font-weight:600; margin-bottom:3px}
.kpi .k-v{font-size:15px; font-weight:700}
.kpi .k-d{font-size:8px; font-weight:700; margin-top:2px}
.up{color:var(--emerald-600)} .pill-g{color:var(--emerald-600)}
.panels{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:9px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:10px}
.panel h5{margin:0 0 9px; font-size:10.5px; font-weight:700; display:flex; justify-content:space-between; color:var(--text)}
.panel h5 span{color:var(--text-3); font-weight:600; font-size:8.5px}
.bars{display:flex; align-items:flex-end; gap:7px; height:78px}
.bars i{flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#608dfa,#1a56db); position:relative}
.bars i.peak{background:linear-gradient(180deg,#8b5cf6,#7c3aed)}
.bars u{position:absolute; bottom:-13px; inset-inline:0; text-align:center; font-size:7px; color:var(--text-3); font-style:normal}
.rows{display:flex; flex-direction:column; gap:7px}
.rrow{display:flex; align-items:center; gap:7px}
.rrow .t{font-family:var(--font-num); font-size:9px; color:var(--text-2); width:30px; font-weight:600}
.rrow .av{width:20px; height:20px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:8px; font-weight:700}
.rrow .nm{font-size:9.5px; font-weight:600; line-height:1.3}
.rrow .nm s{display:block; text-decoration:none; color:var(--text-3); font-size:8px; font-weight:500}
.rrow .st{margin-inline-start:auto; font-size:8px; font-weight:700; padding:2px 6px; border-radius:var(--r-full)}
.st.green{background:rgba(16,185,129,.14); color:var(--emerald-600)}
.st.blue{background:var(--primary-soft); color:var(--primary)}
.st.amber{background:rgba(245,158,11,.16); color:var(--amber-500)}

/* phone app */
.app-phone{padding:11px 11px 14px}
.app-phone .ph-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.app-phone .ph-top b{font-size:12px}
.app-phone .ph-hi{font-size:9px; color:var(--text-2)}
.app-phone .ph-card{background:linear-gradient(135deg,#3b78ee,#1a56db); color:#fff; border-radius:12px; padding:11px; margin-bottom:10px}
.app-phone .ph-card .l{font-size:8.5px; opacity:.85}
.app-phone .ph-card .v{font-size:19px; font-weight:700; margin-top:2px}
.app-phone .ph-mini{display:flex; gap:7px; margin-bottom:11px}
.app-phone .ph-mini div{flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:7px 8px}
.app-phone .ph-mini .l{font-size:7.5px; color:var(--text-2)} .app-phone .ph-mini .v{font-size:13px; font-weight:700}
.app-phone .ph-row{display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--border)}

/* ---------- marquee / stats ---------- */
/* الأرقام في لوحة واحدة: أربعة أعمدة عائمة على بياض تُقرأ أربعة عناصر
   منفصلة، وإطارٌ واحد يجعلها **جملة واحدة** عن النظام. */
.stats{padding:8px 0 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-3xl);
  padding:26px 8px; box-shadow:0 1px 2px rgba(15,23,42,.03),0 18px 40px -32px rgba(15,23,42,.35)}
.stat{padding:6px 20px; border:0; border-radius:0; background:none; box-shadow:none;
  border-inline-start:1px solid var(--border)}
.stat:first-child{border-inline-start:0}
.stat .n{font-size:clamp(28px,4vw,40px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--text)}
.stat .l{color:var(--text-2); font-size:var(--fs-sm); font-weight:600; margin-top:9px; line-height:1.55}

/* ============================================================
   نظام البطاقة — ظلّان لا خمسة، ونصف قطر واحد
   ============================================================
   كانت كل شاشة تخترع ظلّها ونصف قطرها: ‏`.cap` و`.rev-card` و`.bx`
   و`.media-card` و`.logo-tile`. والعين لا تقرأ ظلاًّ بعينه، لكنها تقرأ
   **عدم الاتساق** فوراً — فتُحسّ الصفحة «مجمَّعة» لا «مصمَّمة».

   المستويان: `--card-rest` لبطاقة ساكنة، و`--card-lift` عند المرور. */
:root{
  --card-rest:0 1px 2px rgba(15,23,42,.04),0 16px 34px -28px rgba(15,23,42,.32);
  --card-lift:0 2px 4px rgba(15,23,42,.05),0 26px 50px -30px rgba(15,23,42,.38);
}
html[data-theme="dark"]{
  --card-rest:0 1px 2px rgba(0,0,0,.4),0 18px 38px -28px rgba(0,0,0,.75);
  --card-lift:0 2px 6px rgba(0,0,0,.5),0 28px 56px -30px rgba(0,0,0,.85);
}
/* ============================================================
   لمعةٌ واحدة خفيفة للصفحة كلّها (قرار المالك — تجربة، سبتمبر ٢٠٢٦)
   ============================================================
   ثابتةٌ على الشاشة والمحتوى يمرّ فوقها، فتبدو الصفحة كلّها بدرجةٍ واحدة
   بدل بقعٍ لكل قسم. والأقسام التي كانت رماديّة شفّافةٌ تماماً (--sec-alt) —
   طبقةٌ شبه شفّافة فوق اللمعة رسمت حدَّ كل قسمٍ خطّاً فاتحاً يقطع اللون أثناء
   التمرير (بلاغ المالك). والبطاقات تبقى معتمة. */
:root{
  --glow-1:rgba(37,99,235,.12); --glow-2:rgba(124,58,237,.08);
  --sec-alt:transparent; --sec-card:transparent;
}
html[data-theme="dark"]{
  --glow-1:rgba(59,109,246,.10); --glow-2:rgba(139,92,246,.07);
}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 620px at 85% -8%,var(--glow-1),transparent 65%),
    radial-gradient(800px 560px at 5% 105%,var(--glow-2),transparent 65%)}
.cap,.rev-card,.bx,.media-card,.book-card{box-shadow:var(--card-rest)}
.cap:hover,.rev-card:hover,.bx:hover{box-shadow:var(--card-lift)}

/* ---------- section base ---------- */
/* إيقاعٌ واحد لكل الأقسام، يضيق مع الشاشة بدل قفزةٍ عند حدٍّ واحد. */
.s-pad{padding:var(--sec-pad) 0}
.s-head{max-width:700px; margin:0 auto 46px; text-align:center}
.s-head:last-child{margin-bottom:0}
.s-head.start{margin-inline:0; text-align:start; max-width:720px}
.s-head.start .sub-sec{margin-inline:0}

/* ---------- feature storytelling (zig-zag) ---------- */
.feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); gap:56px; align-items:center; margin-bottom:104px}
.feat:last-child{margin-bottom:0}
/* ⚠️ القلب على **النصّ** لا على الصورة: الصورة ثانية في الشجرة أصلاً، فوضع
   `order:2` عليها لا يغيّر شيئاً — كان الصفّ «المقلوب» يخرج مطابقاً لسابقه،
   فتصطفّ كل الصور في عمود واحد ويضيع التبادل الذي وُجد القلب لأجله. */
.feat.rev .feat-text{order:2}
.feat.rev{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}
.feat-link{display:inline-flex; align-items:center; gap:7px; margin-top:20px; font-weight:700; font-size:var(--fs-md);
  color:var(--primary); transition:gap .18s ease,color .18s}
.feat-link:hover{gap:11px}
.feat-link svg{transition:transform .18s}

/* ============================================================
   دخول الصفّ — النصّ من جهة والصورة من الجهة المقابلة
   ============================================================
   ⚠️ و`translateX` مقياسٌ **فيزيائي** لا منطقيّ: الموجب يمين دائماً مهما
   كان اتّجاه الصفحة. فالجهة تُحسب من موضع العمود في RTL لا من اسم الخاصية —
   النصّ في صفٍّ عاديّ يمين فيدخل من اليمين، وفي المقلوب يسار فيدخل من اليسار.
   وحركةٌ تدخل من الجهة الخطأ تُقرأ ارتجاجاً لا انسياباً. */
.feat .feat-text,.feat .feat-media{opacity:0; will-change:transform,opacity;
  transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1)}
.feat .feat-text{transform:translateX(34px)}
.feat .feat-media{transform:translateX(-34px) scale(.97)}
.feat.rev .feat-text{transform:translateX(-34px)}
.feat.rev .feat-media{transform:translateX(34px) scale(.97)}
.feat.in .feat-text,.feat.in .feat-media{opacity:1; transform:none}
.feat.in .feat-media{transition-delay:.06s}
/* النقاط تتتابع بعد استقرار الكتلة — الثلاثة معاً تصل كوَمضة واحدة. */
.feat li{opacity:0; transform:translateY(9px); transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.feat.in li{opacity:1; transform:none}
.feat.in li:nth-child(1){transition-delay:.26s}
.feat.in li:nth-child(2){transition-delay:.34s}
.feat.in li:nth-child(3){transition-delay:.42s}
.feat.in .feat-link{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .feat .feat-text,.feat .feat-media,.feat li{opacity:1!important; transform:none!important; transition:none!important}
}
.feat-tag{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:700; color:var(--primary);
  letter-spacing:normal; padding:0; background:none; margin-bottom:14px}
.feat-tag .ic{color:var(--primary); width:1.25em; height:1.25em}
.feat h3{font-size:clamp(21px,2.8vw,29px); font-weight:800; letter-spacing:-.01em; line-height:1.42; margin:0 0 12px}
.feat p{color:var(--text-2); font-size:var(--fs-lg); line-height:1.9; margin:0 0 20px}
.feat ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.feat li{display:flex; align-items:flex-start; gap:11px; font-weight:600; font-size:var(--fs-md)}
.feat li .tick{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(16,185,129,.14); color:var(--emerald-600)}
.feat li .tick svg{width:14px;height:14px}
.feat-media{position:relative}
.media-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:14px; box-shadow:var(--shadow-xl); position:relative; overflow:hidden}
.media-card::before{content:""; position:absolute; inset:0; background:radial-gradient(420px 220px at 80% -10%,rgba(59,120,238,.10),transparent 60%); pointer-events:none}
.media-glow{position:absolute; inset-inline-end:-40px; top:-40px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,120,238,.4),transparent 70%); filter:blur(40px); z-index:-1}

/* dental chart mini */
.teeth{display:grid; gap:9px}
.teeth .arch{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px}
.teeth .tth{aspect-ratio:1; border-radius:7px 7px 9px 9px; background:var(--surface-2); border:1px solid var(--border);
  display:grid; place-items:center; color:var(--text-3); position:relative; transition:.2s}
.teeth .tth svg{width:60%; height:60%}
.teeth .tth.tx{background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 30%,transparent); color:var(--primary)}
.teeth .tth.done{background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.4); color:var(--emerald-600)}
.teeth .tth.warn{background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.45); color:var(--amber-500)}
.chart-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; font-size:12px; font-weight:600; color:var(--text-2)}
.chart-legend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-inline-end:6px; vertical-align:middle}

/* calendar mini */
.cal{display:grid; grid-template-columns:40px repeat(4,minmax(0,1fr)); gap:6px; font-size:11px}
.cal .hd{font-weight:700; color:var(--text-2); padding:6px 0; text-align:center; font-size:10.5px}
.cal .tm{color:var(--text-3); font-family:var(--font-num); font-size:9.5px; padding-top:8px; text-align:center}
.cal .slot{min-height:34px; border-radius:8px; border:1px dashed var(--border-strong); background:var(--surface-2)}
.cal .ev{min-height:34px; border-radius:8px; padding:6px 8px; color:#fff; font-weight:600; font-size:10px; line-height:1.3;
  box-shadow:var(--shadow-md)}
.ev.b{background:linear-gradient(135deg,#3b78ee,#1a56db)} .ev.v{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.ev.g{background:linear-gradient(135deg,#10b981,#059669)} .ev.c{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.ev span{display:block; font-size:8.5px; opacity:.85; font-weight:500}

/* finance mini */
.fin-top{display:flex; gap:10px; margin-bottom:14px}
.fin-card{flex:1; border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface-2)}
.fin-card .l{font-size:11px; color:var(--text-2); font-weight:600}
.fin-card .v{font-size:20px; font-weight:700; margin-top:4px}
.donut{width:120px; height:120px; border-radius:50%; margin:6px auto;
  background:conic-gradient(#1a56db 0 58%,#7c3aed 58% 80%,#10b981 80% 92%,#f59e0b 92% 100%);
  -webkit-mask:radial-gradient(transparent 54%,#000 55%); mask:radial-gradient(transparent 54%,#000 55%)}
.fin-legend{display:flex; flex-direction:column; gap:8px; justify-content:center; font-size:12.5px; font-weight:600}
.fin-legend div{display:flex; align-items:center; gap:8px} .fin-legend i{width:11px; height:11px; border-radius:3px}
.fin-legend b{margin-inline-start:auto; font-family:var(--font-num)}

/* ---------- BENTO ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; grid-auto-rows:minmax(150px,auto)}
.bx{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:24px;
  position:relative; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; box-shadow:var(--shadow-md)}
.bx:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-strong)}
/* (هالة ملوّنة خلف كل بطاقة — أُزيلت: لون بلا معنى يقرأه العين زخرفةً لا معلومة.) */
.bx .ico{width:44px; height:44px; border-radius:var(--r-lg); display:grid; place-items:center; margin-bottom:16px;
  color:var(--primary); background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 14%,transparent); box-shadow:none}
.bx h4{margin:0 0 7px; font-size:var(--fs-lg); font-weight:800; letter-spacing:normal}
.bx p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.85}
.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
.r2{grid-row:span 2}
.bx.feature-hero{display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(135deg,#11193a,#0b1322); color:#eaf1ff; border-color:rgba(148,163,184,.18)}
.bx.feature-hero h4{font-size:22px}.bx.feature-hero p{color:#9fb3d6}
.bx.feature-hero .big{font-size:clamp(30px,5vw,46px); font-weight:700; line-height:1; margin-top:10px}
.mini-chip{display:inline-flex; gap:6px; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:5px 11px; border-radius:var(--r-full); font-size:12px; font-weight:600; color:#cdd9f0}
.bx-stat{display:flex; gap:18px; margin-top:auto; flex-wrap:wrap}
.bx-stat div b{font-size:24px; font-weight:700; display:block} .bx-stat div span{font-size:11.5px; color:#9fb3d6}

/* ---------- devices band ---------- */
.devices{background:linear-gradient(135deg,#0b1322,#11193a); color:var(--hero-ink); border-radius:var(--r-3xl);
  padding:62px 30px; text-align:center; position:relative; overflow:hidden}
.devices::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 360px at 50% -10%,rgba(59,120,238,.28),transparent 60%); pointer-events:none}
.devices h3{font-size:clamp(24px,3.4vw,34px); font-weight:700; margin:14px 0 10px; position:relative}
.devices p{color:#9fb3d6; max-width:560px; margin:0 auto 30px; position:relative}
.dev-strip{display:flex; align-items:flex-end; justify-content:center; gap:26px; flex-wrap:wrap; position:relative}
.dev-chip{display:inline-flex; gap:8px; align-items:center; color:#cdd9f0; font-weight:600; font-size:var(--fs-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:8px 16px; border-radius:var(--r-full)}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.step{position:relative; padding:28px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); box-shadow:var(--shadow-md)}
.step .nidx{font-family:var(--font-num); font-size:54px; font-weight:800; line-height:.8; color:var(--primary-soft);
  -webkit-text-stroke:1px color-mix(in srgb,var(--primary) 35%,transparent); position:absolute; top:14px; inset-inline-end:18px}
.step h4{margin:8px 0 8px; font-size:var(--fs-xl); font-weight:800} .step p{margin:0; color:var(--text-2); font-size:var(--fs-md)}
.step .sico{width:48px; height:48px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; margin-bottom:6px}

/* ---------- CTA / pricing ---------- */
/* النداء الثاني رابطٌ لا زرّ: يبقى متاحاً ولا ينازع الأوّل على العين. */
.cta-quiet{color:rgba(255,255,255,.88); border-color:transparent; background:none; padding:0 14px}
.cta-quiet::after{content:""; position:absolute; inset-inline:14px; bottom:14px; height:1px;
  background:currentColor; opacity:.35; transform:scaleX(.0); transform-origin:inline-end;
  transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.cta-quiet:hover{color:#fff; transform:none}
.cta-quiet:hover::after{transform:scaleX(1)}
.offer-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  padding:7px 15px; border-radius:var(--r-full); font-weight:700; font-size:var(--fs-sm); margin-bottom:18px; position:relative}
.cta-points{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:24px; position:relative; font-weight:600; font-size:var(--fs-sm)}
.cta-points span{display:inline-flex; align-items:center; gap:7px}

/* ---------- booking form ---------- */
.book{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.book-form{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:28px; box-shadow:var(--shadow-xl)}
.field{margin-bottom:16px}
.field label{display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:7px; color:var(--text)}
.field input,.field select{width:100%; height:50px; padding:0 15px; border-radius:var(--r-lg); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); font-family:var(--font-ar); font-size:var(--fs-md);
  transition:border-color .15s,box-shadow .15s,background .15s}
.field input::placeholder{color:var(--text-3)}
.field input:hover,.field select:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--border-strong))}
/* ⚠️ الحلقة على الحقل تُرسم بالظلّ لا بـ`outline`: الأخيرة لا تتبع نصف القطر
   في كل المتصفّحات فتظهر مستطيلاً حول حقلٍ مستدير. و`outline:none` هنا آمنة
   لأن البديل مرسوم — وهي القاعدة الوحيدة المسموح فيها بذلك. */
.field input:focus,.field select:focus{outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--ring); background:var(--surface)}
/* الخطأ يظهر **بعد المحاولة** لا وأنت تكتب: `:user-invalid` تنتظر أن يترك
   المستخدم الحقل، بينما `:invalid` تُحمّر الحقل الفارغ قبل أن يُلمس. */
.field input:user-invalid{border-color:var(--rose-500); box-shadow:0 0 0 3px rgba(244,63,94,.16)}
.field select{cursor:pointer}
.book-benes{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:14px}
.book-benes li{display:flex; gap:13px; align-items:flex-start}
/* ⚠️ ثلاث أيقونات بثلاثة تدرّجات (أزرق · أخضر · بنفسجي) في قائمة من ثلاثة
   سطور تجعل اللون **زينةً** لا معنى: القارئ يبحث عن الفرق الذي يرمز إليه فلا
   يجده. لونٌ واحد يجعلها قائمةً واحدة، والتمييز يبقى في الأيقونة نفسها. */
.book-benes .bi{width:42px; height:42px; border-radius:var(--r-lg); flex:none; display:grid; place-items:center;
  color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent); box-shadow:none}
.book-benes b{display:block; font-size:var(--fs-lg)} .book-benes span{color:var(--text-2); font-size:var(--fs-sm)}
/* ---------- الأسعار بجوار الفورم ----------
   صفوفٌ بخطٍّ رفيع وأيقونةٍ رمادية لا مربّعاتٌ ملوّنة: أربع حقائق عن الاشتراك
   تُقرأ قائمةً واحدة، والأزرق يبقى لزرّ الإرسال وحده. */
.pr-lead{margin:0 !important; text-align:start}
.pr-list{list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--border)}
.pr-list li{display:flex; gap:14px; align-items:flex-start; padding:16px 2px; border-bottom:1px solid var(--border)}
.pr-list .ic{width:20px; height:20px; margin-top:3px; color:var(--text-3)}
.pr-list b{display:block; font-size:var(--fs-md); font-weight:700; color:var(--text); line-height:1.6}
.pr-list span{display:block; margin-top:2px; color:var(--text-2); font-size:var(--fs-sm); line-height:1.75}
.bf-note{display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 0; color:var(--text-3); font-size:var(--fs-xs)}
.bf-note .ic{width:13px; height:13px}
.form-ok{display:none; text-align:center; padding:20px}
.form-ok.show{display:block; animation:fadeUp .5s ease}
.form-ok .okc{width:70px; height:70px; border-radius:50%; background:rgba(16,185,129,.14); color:var(--emerald-600); display:grid; place-items:center; margin:0 auto 14px}

/* ---------- footer ----------
   ============================================================
   التذييل — ثلاث طبقات: دعوة، ثمّ خريطة، ثمّ توقيع
   ============================================================
   الدعوة الأخيرة **شريطٌ فوق الأعمدة** لا زرٌّ داخل عمود العلامة: من وصل آخر
   الصفحة يقرأ أوّلاً ما يخسره لو خرج، ثمّ يجد الروابط. وتحت العلامة ثلاث شارات
   ثقة كلٌّ منها مكتوبٌ بالتفصيل في صفحة الأمان — لا وعدٌ بلا مقابل.
   ⚠️ الأرضية تدرّجٌ هادئ بالرموز فيتبع الوضع الداكن، والشريط الأزرق ثابت اللون
   فيبقى نصّه الأبيض فوق ٤.٥ في الوضعين. */
footer{position:relative; overflow:hidden; margin-top:32px; padding:44px 0 28px; border-top:1px solid var(--border)}
footer .wrap{position:relative; z-index:1}
.foot-top{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:22px 32px; flex-wrap:wrap;
  margin:0 0 52px; padding:30px 36px; border-radius:var(--r-3xl); color:#fff;
  background:linear-gradient(120deg,#0f3aa8,#1a56db 50%,#5b3fd6); box-shadow:0 26px 50px -26px rgba(26,86,219,.6)}
.foot-top::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(380px 160px at 88% 0%,rgba(255,255,255,.22),transparent 70%),radial-gradient(300px 140px at 6% 100%,rgba(255,255,255,.12),transparent 70%)}
.foot-top > *{position:relative}
.foot-top-copy b{display:block; font-size:clamp(20px,2.5vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.35}
.foot-top-copy span{display:block; margin-top:6px; font-size:var(--fs-sm); color:rgba(255,255,255,.92); line-height:1.7}
.foot-top-act{display:flex; gap:10px; flex-wrap:wrap}
.foot-top .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border-radius:var(--r-full); font-weight:800}
.foot-top .foot-cta{background:#fff; color:#1a56db; border:0; box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.foot-top .foot-cta:hover{background:#eef3ff; color:#0f3aa8}
.foot-top .foot-ghost{color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.42)}
.foot-top .foot-ghost:hover{color:#fff; background:rgba(255,255,255,.18)}
/* شريط التذييل في كل صفحة (قرار المالك): هو الدعوة الوحيدة في آخر الصفحة، ولا شريط
   دعوةٍ خاصّ بالصفحة فوقه (‏.cta-band أُزيل من الموقع كلّه). */

.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:40px; margin-bottom:34px; align-items:start}
/* ⚠️ عناوين أعمدة التذييل «h2» لا «h5»: المستوى في HTML **بنية** لا مقاس.
   كانت h5 فتقفز كل صفحة في الموقع من h1 إلى h5 — شجرةٌ مكسورة يتخطّى فيها
   قارئ الشاشة ثلاثة مستويات، ويقرؤها الزاحف روابطَ بلا ما يجمعها. والمقاس
   يبقى كما هو: هو قرار CSS، والمستوى قرار معنى. */
.foot-grid h2{display:flex; align-items:center; gap:9px; margin:0 0 16px; font-size:13px; font-weight:800; color:var(--text)}
.foot-grid h2::before{content:""; flex:none; width:14px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--primary),#7c3aed)}
.foot-grid > div:not(.foot-brand) a{display:block; width:fit-content; padding:6px 0; color:var(--text-2); font-size:var(--fs-md); transition:color .15s ease,transform .2s ease}
.foot-grid > div:not(.foot-brand) a:hover{color:var(--primary); transform:translateX(-3px)}
html[data-theme="dark"] .foot-grid > div:not(.foot-brand) a:hover{color:var(--blue-300)}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{margin:0; max-width:340px; color:var(--text-2); font-size:var(--fs-md); line-height:1.85}
.foot-badges{list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.foot-badges li{display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 11px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--text-2)}
.foot-badges svg{width:15px; height:15px; flex:none; color:var(--primary)}

.foot-bottom{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  padding-top:22px; border-top:1px solid var(--border); color:var(--text-2); font-size:var(--fs-sm)}
.foot-legal{display:flex; gap:20px; justify-self:end}
.foot-legal a{color:var(--text-2); transition:color .15s}
.foot-legal a:hover{color:var(--primary)}
/* أيقونات الحسابات الرسمية في التذييل (تُحقن من content/social.mjs) */
.foot-social{display:flex; gap:10px; align-items:center; justify-content:center}
.foot-social a{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--text-2);
  background:var(--surface); border:1px solid var(--border); transition:color .15s,background .15s,border-color .15s,transform .2s}
.foot-social a:hover{color:#fff; background:var(--primary); border-color:var(--primary); transform:translateY(-2px)}
.foot-social svg{width:16px; height:16px}
@media (max-width:980px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 20px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:680px){
  footer{padding-top:34px}
  .foot-top{flex-direction:column; align-items:stretch; text-align:center; gap:18px; padding:26px 18px; margin-bottom:36px; border-radius:var(--r-2xl)}
  .foot-top-act{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .foot-top .btn{height:46px; padding:0 10px; font-size:var(--fs-sm)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px}
  .foot-grid > div:last-child{grid-column:1 / -1; display:flex; flex-wrap:wrap; column-gap:22px}
  .foot-grid > div:last-child h2{flex-basis:100%}
  .foot-bottom{grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px}
  .foot-social{order:-1}
  .foot-legal{justify-self:center}
}

/* ---------- ما هو دينتو فلو (قسم التعريف) ---------- */
.what-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:0 auto}
.what-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:24px 22px; box-shadow:var(--shadow-md)}
.what-card h3{margin:0 0 9px; font-size:16.5px; font-weight:800; letter-spacing:-.01em}
.what-card p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.85}
.what-card a{color:var(--primary); font-weight:600}
.what-links{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px !important; font-size:var(--fs-md)}
@media (max-width:900px){ .what-grid{grid-template-columns:1fr} }

/* ---------- AI assistant ---------- */
.ai-fab{position:fixed; inset-inline-end:24px; bottom:24px; z-index:90; width:64px; height:64px; border-radius:50%;
  border:none; cursor:pointer; background:linear-gradient(135deg,#3b78ee,#1a56db); box-shadow:0 14px 34px -8px rgba(26,86,219,.7);
  display:grid; place-items:center; transition:transform .2s; animation:fabPulse 2.6s ease-in-out infinite}
.ai-fab:hover{transform:scale(1.07)}
.ai-fab svg{width:30px; height:30px}
.ai-fab .ai-badge{position:absolute; top:-3px; inset-inline-start:-3px; width:18px; height:18px; border-radius:50%;
  background:var(--emerald-500); border:2px solid #fff; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:dotPulse 2s infinite}
@keyframes fabPulse{0%,100%{box-shadow:0 14px 34px -8px rgba(26,86,219,.7),0 0 0 0 rgba(59,120,238,.4)}50%{box-shadow:0 14px 34px -8px rgba(26,86,219,.7),0 0 0 14px rgba(59,120,238,0)}}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.ai-panel{position:fixed; inset-inline-end:24px; bottom:100px; z-index:91; width:380px; max-width:calc(100vw - 32px);
  height:560px; max-height:calc(100vh - 130px); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-xl); display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(20px) scale(.96); opacity:0; pointer-events:none; transform-origin:bottom left; transition:.25s cubic-bezier(.2,.7,.3,1)}
.ai-panel.open{transform:none; opacity:1; pointer-events:auto}
.ai-head{background:linear-gradient(135deg,#11193a,#0b1322); color:#fff; padding:15px 16px; display:flex; align-items:center; gap:11px}
.ai-head .ai-ava{width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; flex:none}
.ai-head b{font-size:var(--fs-md); display:block} .ai-head small{font-size:11.5px; color:#9fefc8; display:flex; align-items:center; gap:5px}
.ai-head small i{width:7px; height:7px; border-radius:50%; background:var(--emerald-500); display:inline-block}
.ai-head .ai-x{margin-inline-start:auto; background:rgba(255,255,255,.1); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; display:grid; place-items:center}
.ai-body{flex:1; overflow-y:auto; padding:16px; background:var(--surface-2); display:flex; flex-direction:column; gap:11px}
.msg{max-width:84%; padding:10px 13px; border-radius:var(--r-xl); font-size:var(--fs-md); line-height:1.65; white-space:pre-wrap; animation:fadeUp .3s ease}
.msg.bot{background:var(--surface); border:1px solid var(--border); border-start-start-radius:4px; align-self:flex-start; box-shadow:var(--shadow-md)}
.msg.me{background:linear-gradient(135deg,#3b78ee,#1a56db); color:#fff; border-start-end-radius:4px; align-self:flex-end}
.msg.bot b{color:var(--primary)}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; background:var(--surface-2)}
.chips button{background:var(--surface); border:1px solid var(--border-strong); color:var(--primary); font-family:var(--font-ar);
  font-size:var(--fs-xs); font-weight:600; padding:7px 13px; border-radius:var(--r-full); cursor:pointer; transition:.15s}
.chips button:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.ai-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); background:var(--surface)}
.ai-input input{flex:1; height:44px; border-radius:var(--r-full); border:1px solid var(--border-strong); background:var(--surface-2);
  padding:0 16px; font-family:var(--font-ar); font-size:var(--fs-md); color:var(--text)}
.ai-input input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring)}
.ai-input button{width:44px; height:44px; border-radius:50%; border:none; background:linear-gradient(135deg,#3b78ee,#1a56db);
  color:#fff; cursor:pointer; display:grid; place-items:center; flex:none}
.typing{display:flex; gap:4px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; align-self:flex-start; width:max-content}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--text-3); animation:tdot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.05s}.reveal.d2{transition-delay:.1s}.reveal.d3{transition-delay:.15s}.reveal.d4{transition-delay:.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} .reveal{opacity:1; transform:none}}

/* ============================================================
   ١) خانات اللقطات — صورة حقيقية تغطّي الماكيت حين تتوفّر
   ============================================================
   كل شاشة جهاز مبنيّة بالـCSS (ماكيت حيّ يعمل بلا أي ملف)، وفوقها خانة صورة
   فارغة. حين تُرفَع لقطة حقيقية إلى assets/shots/<الاسم>.png تظهر مكانها
   تلقائياً؛ ولو غابت يُزال الوسم ويبقى الماكيت — فالصفحة لا تُظهر مربّعاً
   مكسوراً أبداً ولا تنتظر ملفاً غير موجود. (المنطق في dfShots أسفل الصفحة.) */
.shot-slot{position:relative; overflow:hidden}
.shot{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center; border-radius:inherit; z-index:5}

/* ============================================================
   ٢) شريط الثقة — تحت الهيرو مباشرةً
   ============================================================ */
.trustbar{border-block:1px solid var(--border); background:var(--sec-card)}
.trustbar .wrap{display:flex; align-items:center; justify-content:center; gap:14px 34px;
  flex-wrap:wrap; padding-block:20px}
.trustbar b{font-family:var(--font-num); font-weight:800; color:var(--primary)}
.trust-item{display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-md); font-weight:600; color:var(--text-2)}
.trust-item svg{width:17px; height:17px; color:var(--primary); flex:none}
.trust-sep{width:1px; height:20px; background:var(--border-strong)}
/* ⚠️ على الهاتف تصير أربعة أسطر متتالية بفواصل رأسية بلا معنى (الفاصل يفصل
   ما هو **بجواره** لا ما هو تحته). شبكةٌ باثنين في السطر تُقرأ أربع حقائق
   في نظرة، والفواصل تُخفى لأنها لم تعد تفصل شيئاً. */
@media (max-width:680px){
  .trustbar .wrap{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; padding-block:16px}
  .trust-sep{display:none}
  .trust-item{font-size:var(--fs-xs); gap:7px; align-items:flex-start}
  .trust-item svg{width:15px; height:15px; margin-top:2px}
}

/* ============================================================
   ٣) جدار العيادات — الدليل الاجتماعي
   ============================================================ */
.logo-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary)}
/* الشعار الحقيقي يُدرَج هنا؛ وحتى ذلك الحين يظهر اسم العيادة برمز محايد. */
.logo-tile img{max-height:52px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72;
  transition:filter .25s ease, opacity .25s ease}
.logo-tile:hover img{filter:none; opacity:1}
.logo-ph{display:grid; place-items:center; gap:7px; color:var(--text-3)}
.logo-ph svg{width:26px; height:26px; color:var(--primary); opacity:.5}
.logo-ph span{font-size:12px; font-weight:700; color:var(--text-2); line-height:1.4}

/* ============================================================
   ٤) مسرح الأجهزة — اللابتوب والتابلت والموبايل مجتمعة
   ============================================================
   كل المقاسات نسبيّة إلى عرض المسرح (%)، فالتركيبة تتقلّص كقطعة واحدة ولا
   تنكسر النسب بين الأجهزة على أي شاشة.

   ⚠️ الإزاحات بـ`left`/`right` الفيزيائيّتين لا `inset-inline-*`: هذه تركيبة
   بصرية لأجهزة حقيقية، وقلبُها مع اتّجاه الصفحة يضع الموبايل خلف اللابتوب.
   الاتّجاه يقلب النصّ لا الأثاث.

   ⚠️ وارتفاع كل شاشة من `aspect-ratio` لا من محتواها. المحتوى ماكيت قد يطول
   أو يقصر مع أي تعديل، وشاشةٌ ارتفاعها يتبع محتواها تعطي «لابتوب» بنسبة
   ٣:١ — شريطاً لا جهازاً. النسبة تثبّت شكل الجهاز، والمحتوى يتمدّد داخله. */
.stage{position:relative; width:min(920px,100%); margin:34px auto 0;
  aspect-ratio:16/9; filter:drop-shadow(0 44px 60px rgba(3,10,28,.45))}
/* ⚠️ غير مقصورة على .stage: نفس الجهاز يُستعمل في شريط «عيادتك في جيبك»
   خارج المسرح، وقصرُ القاعدة عليه ترك تلك النسخة بلا تمدّد — ثلثا الشاشة أبيض.
   (ظهر عند التصيير لا في قراءة الكود.) */
.scr{background:#0b1322; border:1px solid rgba(148,163,184,.25); overflow:hidden;
  display:flex; flex-direction:column}

/* ⚠️ حركة كل جهاز لها إطاراتها الخاصّة **حاملةً إزاحته**.
   `transform` خاصّية واحدة: إطارٌ يكتب `translateY` وحده يمحو `translateX(-50%)`
   الذي يوسّط اللابتوب، فينزلق نصف عرضه خارج المسرح. وقع هذا فعلاً. */
.d-lap{position:absolute; left:50%; top:0; width:68%; z-index:2;
  animation:floatLap 8s ease-in-out infinite}
@keyframes floatLap{0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-14px)}}
.d-lap .scr{aspect-ratio:16/10; border-radius:12px; padding:8px;
  box-shadow:0 24px 60px -18px rgba(5,15,45,.75)}
.d-lap .bar{display:flex; gap:5px; padding:0 3px 7px; flex:none}
.d-lap .bar i{width:8px; height:8px; border-radius:50%; background:#33415a}
.d-lap .bar i:nth-child(1){background:#ff5f57}.d-lap .bar i:nth-child(2){background:#febc2e}.d-lap .bar i:nth-child(3){background:#28c840}
.d-lap .foot{height:11px; width:112%; margin-inline-start:-6%;
  background:linear-gradient(#cbd5e1,#8fa1b8); border-radius:0 0 10px 10px; position:relative}
.d-lap .foot::after{content:""; position:absolute; top:0; left:44%; width:12%; height:4px;
  background:#64748b; border-radius:0 0 5px 5px}

/* ⚠️ التابلت على **اليمين** والموبايل على اليسار — لا العكس.
   الصفحة عربية (RTL)، فمحتوى كل صفّ يبدأ من يمين الشاشة: الصورة والاسم هناك،
   والشارة في أقصى اليسار. ووضعُ التابلت يساراً كان يُخفي يمينَه خلف اللابتوب —
   أي يُخفي بالضبط الجزء الذي فيه المعنى، ويترك للزائر صفوفاً بيضاء فارغة.
   (ظهر هذا عند أوّل تصيير فعليّ، لا في قراءة الكود.) */
.d-tab{position:absolute; right:0; bottom:3%; width:31%; z-index:1;
  animation:floatTab 9s ease-in-out .6s infinite}
@keyframes floatTab{0%,100%{transform:rotate(7deg) translateY(0)}
  50%{transform:rotate(7deg) translateY(-12px)}}
.d-tab .scr{aspect-ratio:3/4; border-radius:14px; padding:9px 7px;
  box-shadow:0 22px 46px -16px rgba(5,15,45,.7)}
.d-tab .cam{width:5px; height:5px; border-radius:50%; background:#33415a; margin:0 auto 6px; flex:none}

.d-phn{position:absolute; left:1%; bottom:-3%; width:16.5%; z-index:3;
  animation:floatPhn 7s ease-in-out .3s infinite}
@keyframes floatPhn{0%,100%{transform:rotate(-5deg) translateY(0)}
  50%{transform:rotate(-5deg) translateY(-12px)}}
.d-phn .scr{aspect-ratio:9/19.5; border-radius:20px; padding:6px;
  box-shadow:0 22px 44px -14px rgba(5,15,45,.8)}
.d-phn .notch{width:38%; height:4px; border-radius:9px; background:#33415a; margin:2px auto 6px; flex:none}

/* ---- شاشة مبسّطة داخل الجهاز ----
   تتمدّد لتملأ الجهاز مهما كانت نسبته: الصفوف `1fr` فتقسم ما تبقّى بينها.
   بلا ذلك يظهر ثلث الشاشة محتوى وثلثاها فراغ أبيض — وهو ما يقرؤه الزائر
   «تطبيق فاضي» لا «تطبيق منظّم». والمقاسات بـem كي تتبع حجم الجهاز نفسه. */
.mini{background:var(--surface); border-radius:7px; overflow:hidden; text-align:start;
  color:var(--text); flex:1; min-height:0; display:flex; flex-direction:column}
.mini-hd{display:flex; align-items:center; justify-content:space-between; gap:6px; flex:none;
  padding:.75em .85em; border-bottom:1px solid var(--border)}
.mini-hd b{font-size:1em; font-weight:800}
.mini-hd i{width:2.6em; height:.5em; border-radius:var(--r-full); background:var(--surface-3); font-style:normal}
.mini-bd{flex:1; min-height:0; padding:.8em; display:flex; flex-direction:column; gap:.65em}
.mini-k{display:grid; grid-template-columns:repeat(4,1fr); gap:.5em; flex:none}
.mini-k div{background:var(--surface-2); border:1px solid var(--border); border-radius:.5em; padding:.5em}
.mini-k s{display:block; text-decoration:none; color:var(--text-3); font-size:.72em; font-weight:600; margin-bottom:.2em}
.mini-k b{font-family:var(--font-num); font-size:1.05em; font-weight:800}
.mini-bars{display:flex; align-items:flex-end; gap:.42em; flex:1 1 38%; min-height:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:.6em; padding:.6em}
.mini-bars i{flex:1; border-radius:.3em .3em 0 0; background:linear-gradient(180deg,var(--blue-400),var(--blue-600)); opacity:.55}
.mini-bars i.on{opacity:1}
.mini-rows{display:grid; grid-auto-rows:1fr; gap:.45em; flex:1 1 62%; min-height:0}
.mini-row{display:flex; align-items:center; gap:.5em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:.5em; padding:.4em .55em; min-height:0; overflow:hidden}
.mini-row u{text-decoration:none; width:1.7em; height:1.7em; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-size:.72em; font-weight:800}
.mini-row span{flex:1; font-size:.8em; font-weight:700; line-height:1.35; min-width:0; overflow:hidden}
.mini-row span s{display:block; text-decoration:none; color:var(--text-3); font-size:.85em; font-weight:600}
.mini-row em{margin-inline-start:auto; font-style:normal; font-size:.68em; font-weight:800;
  padding:.2em .5em; border-radius:var(--r-full); background:var(--primary-soft); color:var(--primary); flex:none}

/* حجم الخطّ داخل كل جهاز يتبع **عرض المسرح** لا عرض النافذة: المسرح مسقوف
   بـ920 بكسل، فربطُه بـvw كان يجعل الخطّ يكبر على شاشة عريضة والجهاز لا يكبر. */
.d-lap,.d-tab,.d-phn{--u:min(9.2px,1vw)}
.d-lap .mini{font-size:calc(var(--u) * 1.15)}
.d-tab .mini{font-size:calc(var(--u) * 1.05)}
.d-phn .mini{font-size:calc(var(--u) * .60)}
/* ============================================================
   ٥) آراء الأطباء
   ============================================================ */
/* ============================================================
   بطاقات الآراء — شهادةٌ لا ملصق
   ============================================================
   ⚠️ كانت النجوم **نصّاً** (★★★★★) وحرفَ سؤال داخل دائرة متدرّجة صارخة،
   والعنوان فوق الرأي. ثلاثتها تُقرأ «قالب» لا «شهادة»: النصّ النجميّ يتغيّر
   شكله بين الخطوط ولا يُقرأ عند مكبّر الشاشة، والتدرّج الصارخ يزاحم النصّ،
   وترتيبُ «مَن قال» فوق «ماذا قال» يقلب أولويّة القارئ.

   الآن: نجوم SVG بحجمٍ واحد، والاقتباس أوّلاً، وصاحبه أسفله خلف فاصل — وهو
   ترتيب الشهادة في كل مطبوعة. والأفاتار حرفٌ واحد على سطحٍ محايد؛ الصورة
   الحقيقية تحلّ محلّه بلا أي تغيير آخر.
============================================================ */
.rev-card{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:24px 22px 18px; margin:0; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 30px -24px rgba(15,23,42,.28);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease}
.rev-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--primary) 26%,var(--border));
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 22px 44px -26px rgba(15,23,42,.34)}
.rev-quote{position:absolute; inset-inline-end:20px; top:20px; width:30px; height:30px;
  fill:var(--primary); opacity:.12; pointer-events:none}
.rev-stars{display:inline-flex; gap:3px}
.rev-stars svg{width:15px; height:15px; fill:var(--amber-500)}
.rev-card blockquote{margin:0; display:flex; flex-direction:column; gap:8px}
.rev-title{margin:0; font-size:var(--fs-lg); font-weight:800; line-height:1.6; color:var(--text)}
.rev-body{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.9}
.rev-by{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:15px;
  border-top:1px solid var(--border)}
.rev-av{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:14px; font-weight:800; overflow:hidden;
  color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 20%,transparent)}
.rev-av img{width:100%; height:100%; object-fit:cover}
.rev-who{min-width:0; display:block}
.rev-who b{display:block; font-size:var(--fs-md); font-weight:800; line-height:1.45}
.rev-who span{display:block; font-size:var(--fs-xs); color:var(--text-3); font-weight:600}

/* ============================================================
   ٦) رؤية المنتج — شريط نصّي واحد
   ============================================================ */
.vision{border:1px solid var(--border); border-radius:var(--r-3xl); background:var(--surface);
  padding:52px 40px; text-align:center; box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.vision::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 300px at 50% -20%,rgba(59,120,238,.10),transparent 62%)}
.vision h3{position:relative; font-size:clamp(21px,3vw,29px); font-weight:800; line-height:1.55;
  margin:0 auto 16px; max-width:820px; letter-spacing:-.01em}
.vision p{position:relative; color:var(--text-2); max-width:760px; margin:0 auto 26px; font-size:var(--fs-lg); line-height:1.9}

/* ============================================================
   ٧) شريط التطبيق على الموبايل
   ============================================================ */
.appband{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 24px}
.chips span{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:700;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-full); padding:7px 14px;
  box-shadow:var(--shadow-md)}
.chips span svg{width:14px; height:14px; color:var(--primary)}
.appband-visual{position:relative; display:grid; place-items:center; min-height:340px}
/* هاتف الإشعارات وتركيبة البوّابة يدخلان من الجانب كبقيّة الأجهزة —
   `.reveal` العامّة تُصعِدهما فقط، والصعود لا يُقرأ «تقديماً» لجهاز. */
.appband-visual.reveal,.portal-art.reveal{transform:translateX(52px) scale(.95)}
.appband-visual.reveal.in,.portal-art.reveal.in{transform:none}
.appband-visual.reveal,.portal-art.reveal{
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .appband-visual.reveal,.portal-art.reveal{transform:none!important; transition:none!important}
}
.appband-visual .d-phn{position:relative; right:auto; bottom:auto; width:min(210px,60%); transform:rotate(-3deg); --rot:-3deg}
.appband-visual .d-phn .mini{font-size:8px}

/* ---------- RESPONSIVE ---------- */
/* ⚠️ صفوف الشرح كانت تنهار إلى عمودٍ واحد عند ٩٨٠ — أي أن التابلت الأفقي
   (‏١٠٢٤) وحده يبقى بعمودين، وتابلت ٨٢٠ يعرض صورةً بعرض الشاشة ونصّاً تحتها
   بينما فيه متّسع لعمودين مريحين. الحدّ الصحيح ٨٦٠: عندها يصير كل عمود أضيق
   من ٤٠٠ بكسل فيستحقّ الانهيار فعلاً. */
@media (max-width:980px) and (min-width:861px){
  .feat,.feat.rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; margin-bottom:76px}
  .feat h3{font-size:clamp(20px,2.6vw,25px)}
  .feat p{font-size:var(--fs-md)}
}
@media (max-width:980px){
  .nav-links{display:none}
  .burger{display:grid}
  .mobile-menu{display:flex}
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero-visual{order:-1; margin:0 auto; max-width:480px; width:100%}
  /* ============================================================
     الصور الطولية تبقى **بجوار** نصّها على الهاتف
     ============================================================
     صورةُ هاتفٍ وحده عرضها ٣٤٥ بكسل: ممدودةً على عرض شاشةٍ ٣٩٠ تصير كتلةً
     طولها ٧٠٠ بكسل تدفع النصّ خارج الشاشة كلّها — والقارئ يمرّر جهازاً
     مرسوماً بدل أن يقرأ ما يقوله. وبجوار النصّ تُفهم في نظرة وتشغل رُبع
     المساحة. ولا يسري هذا على الصور العريضة (اللابتوب والشاشة): عرضها
     الكامل هو ما يجعل ما بداخلها مقروءاً. */
  /* عمودٌ واحد: الصورة تحت نصّها دائماً — والقلب هنا يقلب الترتيب رأسياً فقط. */
  /* ============================================================
     ⚠️ الجهاز يدخل من الجانب على الهاتف أيضاً
     ============================================================
     كان الدخول هنا صعوداً رأسياً بحجّة أن العمود واحد — والنتيجة أن الصورة
     تظهر بالحركة نفسها التي يظهر بها النصّ فوقها، فلا يُحسّ لها دخولٌ أصلاً:
     كتلةٌ واحدة تطلع. والدخول الجانبي هو ما يجعل الجهاز يُقرأ **جهازاً يُقدَّم**
     لا فقرةً تُعرض، وهو أوضح على الهاتف منه على الشاشة الواسعة لأنه يملأ
     العرض كلّه.

     ⚠️ والجهة تتبادل مع الصفوف (‏«rev») فلا تتكرّر الحركة نفسها سبع مرّات،
     والنصّ يبقى صاعداً: حركتان متعامدتان تفصلان الكلام عن الصورة بلا لون.
     ولا خطر تمريرٍ أفقي: «body:overflow-x:clip» و«html:overflow-x:clip». */
  .book{grid-template-columns:1fr; gap:30px}
  .bento{grid-template-columns:repeat(4,1fr)}
  .c6{grid-column:span 4}.c4{grid-column:span 4}.c3{grid-column:span 2}.c2{grid-column:span 2}
  .logo-wall{grid-template-columns:repeat(4,1fr)}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
  /* ⚠️ هاتف الإشعارات بجوار نصّه لا فوقه: ممدوداً على عرض الشاشة يصير كتلةً
     طولها ٦٠٠ بكسل قبل أن يُقرأ سطر واحد ممّا يشرحه. */
  .appband{grid-template-columns:minmax(0,1fr) 33%; gap:18px; align-items:center}
  .appband-visual{order:0; min-height:0}
  .appband-visual .art-tilt{max-width:none}
  .appband .chips{gap:7px; margin:14px 0 18px}
  .appband .chips span{font-size:12px; padding:6px 10px; box-shadow:none}
}
/* ⚠️ على الهاتف عمود النصّ ≈٢٣٠ بكسل بجوار الجهاز، فتلتفّ كل شريحة على سطرها
   بعرضٍ مختلف — ستّ كبسولات متفاوتة تُقرأ مبعثرة. تصير قائمةً بعلامة صحّ
   كقوائم المميزات فوقها: الحافّة واحدة والعين تنزل سطراً سطراً. */
@media (max-width:560px){
  .appband .chips{display:grid; gap:9px}
  .appband .chips span{background:none; border:0; box-shadow:none; padding:0; font-size:13px; font-weight:600}
}

/* ============================================================
   عمودٌ واحد — تحت ٨٦٠ وحدها
   ============================================================
   عندها يصير كل عمود أضيق من ٤٠٠ بكسل، وهو الحدّ الذي يستحقّ الانهيار فعلاً.
   وكل ما بعده يخصّ هذا التخطيط وحده: الصورة الطولية بجوار نصّها، وقلبُ
   الترتيب رأسياً، والدخول الجانبي للجهاز. */
@media (max-width:860px){
  .feat,.feat.rev{grid-template-columns:1fr; gap:26px; margin-bottom:64px}
  .feat.feat-side,.feat.rev.feat-side{grid-template-columns:minmax(0,1fr) 34%; gap:16px; align-items:center}
  .feat.feat-side .feat-text{order:0}
  .feat.feat-side .art-narrow{max-width:none}
  .feat.feat-side li{font-size:var(--fs-sm)}
  .feat.rev .feat-text{order:0}
  .feat .feat-text{transform:translateY(20px)}
  .feat .feat-media{transform:translateX(46px) scale(.94)}
  .feat.rev .feat-text{transform:translateY(20px)}
  .feat.rev .feat-media{transform:translateX(-46px) scale(.94)}
  .feat.in .feat-text,.feat.in .feat-media{transform:none}
  .feat.in .feat-media{transition-delay:.1s}
}
/* على الهاتف وحده: الجهاز فوق وكلامه تحته (قرار المالك) — في الميزات وقسم البوّابة.
   الشاشة الأعرض تبقى كما هي، وصفّ «feat-side» جنباً إلى جنب فلا يُقلب. */
@media (max-width:680px){
  .feat:not(.feat-side) .feat-media{order:-1}
  .portal-art{order:-1; margin-top:0}
}
@media (max-width:680px){
  body{font-size:14.5px}
  .nav-inner{margin-top:10px; padding:8px 12px; gap:10px; max-width:calc(100vw - 20px)}
  .brand{font-size:16px; min-width:0} .brand small{display:none}
  /* ============================================================
     ⚠️ الشريط على الهاتف: الدخول يبقى، والتبديلان ينزلان إلى المنيو
     ============================================================
     كان الشريط يحمل الشعار وثلاث أيقونات (لغة · وضع · برجر) ويُخفي
     «تسجيل الدخول» داخل البرجر. والنتيجة أن **أكثر فعلٍ يتكرّر في الموقع
     كلّه** — طبيبٌ يفتح نظامه كل صباح — صار وراء ضغطتين وقراءةِ قائمة،
     بينما تبديل الوضع الليلي (يُضغط مرّة في العمر) في المقدّمة.

     والمساحة لا تتّسع للاثنين: الشعار ١٠٠ + الدخول ١٠٥ + البرجر ٤٤
     = ٢٦٥ من ٣٣١ متاحة عند ٣٧٥ بكسل. فالتبديلان ينزلان إلى المنيو
     بزرّين وكيلين (‏`data-nav-proxy`) ينقران الأصلَ المخفيّ — لا نسخة
     ثانية بمعرّف مكرّر. */
  .nav-cta,#langBtn,#themeBtn{display:none}
  .nav-login{height:42px; padding:0 14px}
  .nav-actions{margin-inline-start:auto; gap:6px}
  /* ⚠️ ولا يظهر صفّ الأدوات إلا حين يختفي أصلُه من الشريط: فوق ٦٨٠ الزرّان
     ما زالا في الترويسة، وإظهارُ وكيليهما في المنيو معهما تكرارٌ يجعل
     المستخدم يسأل «أيّهما الحقيقي؟». */
  .mm-tools{display:flex}
  .hero{padding:128px 0 60px}
  .stats-grid{grid-template-columns:1fr 1fr; gap:11px}
  .stat{padding:18px 12px}
  .s-pad{padding:56px 0}
  .steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr; gap:12px}
  .c6,.c4,.c3,.c2{grid-column:span 2}
  .r2{grid-row:auto}
  .bx{padding:18px; border-radius:var(--r-xl)}
  /* flatten the 3D laptop so it fits small screens without clipping */
  .hero-visual{perspective:none; max-width:420px}
  .feat-text,.feat-media{min-width:0; max-width:100%}
  .media-card,.media-card .app{overflow:hidden}
  .rrow{min-width:0} .rrow .nm{min-width:0; overflow:hidden}
  .cal .ev,.cal .slot{min-width:0; overflow:hidden}
  .laptop{transform:none!important; animation:none}
  .phone{width:120px; inset-inline-start:-14px; bottom:-26px; animation:none; transform:rotate(-3deg)}
  .cta-points{gap:12px}
  .devices{padding:44px 18px}
  .logo-wall{grid-template-columns:repeat(3,1fr); gap:10px}
  .logo-tile{border-radius:var(--r-lg); padding:9px 7px}
  .rev-grid{grid-template-columns:1fr}
  .vision{padding:38px 20px; border-radius:var(--r-2xl)}
  .trustbar .wrap{gap:10px 18px; padding-block:16px}
  .trust-item{font-size:var(--fs-sm)}
  .trust-sep{display:none}
  /* ⚠️ المسرح **لا يتفكّك** على الهاتف: تجميع الأجهزة هو رسالة القسم نفسها
     («نفس النظام على كل جهاز»)، وتفريقُها إلى ثلاث صور تحت بعضها يمحو المعنى.
     النسب داخلية بالنسبة المئوية، فالتقلّص يحفظها كما هي. */
  .stage{width:100%; margin-top:26px}
  .d-lap .mini{font-size:5.4px} .d-tab .mini{font-size:4.2px} .d-phn{--rot:5deg}
  .d-phn .mini{font-size:3.2px}
  /* AI button smaller on phones (but reasonable) */
  .ai-fab{width:54px; height:54px; inset-inline-end:16px; bottom:16px}
  .ai-fab svg{width:25px; height:25px}
  .ai-panel{inset-inline-end:10px; bottom:78px; height:min(520px,calc(100vh - 100px))}
}
/* phones: show BOTH the laptop + phone together, scaled down as one piece
   so the internal proportions never break on tiny screens */
@media (max-width:600px){
  .hero{padding:120px 0 54px}
  .hero h1{font-size:clamp(30px,8.5vw,42px)}
  .hero .lead{font-size:var(--fs-lg)}
  /* الصورة تتقاس بعرض حاويتها؛ و«zoom» كان يصغّر ماكيت CSS ثابت العرض. */
  .hero-visual{perspective:none; width:100%; max-width:100%; margin:0 auto}
  .laptop{display:block; transform:none!important; animation:none}
  .phone{position:absolute; inset-inline-start:-24px; bottom:-22px; width:166px;
         transform:none; animation:none}
  /* keep the phone a natural ratio: trim its content so it isn't too tall */
  .phone .app-phone{padding:9px 9px 11px}
  .phone .ph-card{padding:9px 10px; margin-bottom:8px}
  .phone .ph-card .v{font-size:17px}
  .phone .ph-mini{margin-bottom:8px}
  .phone .ph-row:last-child{display:none}
}

@media (max-width:380px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr} .c6,.c4,.c3,.c2{grid-column:span 1}
  .hero-cta .btn{width:100%}
  .ai-fab{width:50px; height:50px}
}

/* ============================================================
   الهاتف — شريط الثقة بطاقات اثنين اثنين، والأعلام حول الجملة
   ============================================================
   ⚠️ في آخر الأنماط عمداً: تغلب قواعد الوسائط الأقدم بترتيبها لا بأسبقيّةٍ أعلى. */
html[data-theme="dark"] .trustbar b{color:var(--blue-300)}
@media (max-width:680px){
  .trustbar{background:var(--sec-alt); border-block:0}
  .trustbar .wrap{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:10px; padding-block:18px}
  .trust-sep{display:none}
  .trust-item{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:108px; padding:14px 10px;
    text-align:center; font-size:12.5px; font-weight:700; line-height:1.6; color:var(--text);
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-md)}
  .trust-item svg{width:36px; height:36px; margin:0 0 7px; padding:9px; border-radius:12px; color:var(--primary); background:var(--primary-soft)}
  .trust-item b{font-size:13.5px}
}

/* ⚠️ الأعلام تعود **طبقةً حول الجملة** على الهاتف: شريطٌ فوقها وشريطٌ تحتها
   بمواضع متعرّجة وزوايا مختلفة، كنسخة الكمبيوتر. الموضع مركز البلاطة (‏left
   نسبةٌ من العرض، وtop/bottom بالبكسل من الحافّة) فلا يتغيّر بطول النصّ، والحشوة
   الرأسية أكبر من أبعد بلاطة كي لا تركب علماً على كلمة. */
@media (max-width:860px){
  .countries-inner{min-height:0; padding-block:190px 206px}
  .fg-field{position:absolute; inset:0; margin:0; display:block}
  .fg-tile{position:absolute; left:var(--ml); top:var(--mt,auto); bottom:var(--mb,auto);
    width:var(--fs); height:var(--fs); margin:calc(var(--fs) / -2);
    transform:scale(.3); transition-delay:calc(var(--i) * 34ms)}
  .fg-field.in .fg-tile{transform:rotate(var(--rot)) scale(1)}
  .fg-tile:nth-child(1){--ml:11%; --mt:34px; --fs:52px; --rot:-7deg}
  .fg-tile:nth-child(2){--ml:37%; --mt:72px; --fs:58px; --rot:5deg}
  .fg-tile:nth-child(3){--ml:63%; --mt:28px; --fs:48px; --rot:-3deg}
  .fg-tile:nth-child(4){--ml:88%; --mt:64px; --fs:54px; --rot:7deg}
  .fg-tile:nth-child(5){--ml:17%; --mt:142px; --fs:44px; --rot:4deg}
  .fg-tile:nth-child(6){--ml:52%; --mt:140px; --fs:40px; --rot:-5deg}
  .fg-tile:nth-child(7){--ml:81%; --mt:146px; --fs:46px; --rot:-4deg}
  .fg-tile:nth-child(8){--ml:12%; --mb:150px; --fs:46px; --rot:6deg}
  .fg-tile:nth-child(9){--ml:38%; --mb:162px; --fs:42px; --rot:-5deg}
  .fg-tile:nth-child(10){--ml:64%; --mb:146px; --fs:50px; --rot:3deg}
  .fg-tile:nth-child(11){--ml:89%; --mb:164px; --fs:40px; --rot:-7deg}
  .fg-tile:nth-child(12){--ml:22%; --mb:58px; --fs:56px; --rot:-4deg}
  .fg-tile:nth-child(13){--ml:52%; --mb:42px; --fs:60px; --rot:6deg}
  .fg-tile:nth-child(14){--ml:80%; --mb:64px; --fs:52px; --rot:-3deg}
  @media (prefers-reduced-motion:reduce){ .fg-tile{transform:rotate(var(--rot)); opacity:1} }
}

/* ============================================================
   أنماط الصفحات الداخلية (يولّدها build-site.mjs)
   ============================================================ */
.page-hero{padding:132px 0 56px; position:relative; overflow:hidden}
.page-hero .wrap{position:relative}
.crumbs{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-3); font-weight:600; margin-bottom:22px}
.crumbs a{color:var(--text-2)} .crumbs a:hover{color:var(--primary)}
.crumbs span{opacity:.5}
.page-hero h1{font-size:clamp(30px,5vw,50px); font-weight:800; letter-spacing:-.035em; line-height:1.18; margin:14px 0 16px; max-width:16ch}
.page-hero .lead{font-size:clamp(16px,2.1vw,19px); color:var(--text-2); line-height:1.85; max-width:60ch; margin:0 0 30px}
.page-icon{width:52px; height:52px; border-radius:var(--r-xl); display:grid; place-items:center; color:var(--primary);
  background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 14%,transparent); margin-bottom:20px}
.page-icon svg{width:26px; height:26px}

/* (أقسام صفحة الميزة صارت .fp-sec — أنماطها في featureCss أسفل الملفّ.
   بقيت .sec-card وحدها: خانة اللقطة الحقيقية حين تُرفع إلى assets/shots.) */
.sec-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg); overflow:hidden; aspect-ratio:16/10; position:relative}
.sec-card .ph{position:absolute; inset:0; display:grid; place-items:center; gap:10px; text-align:center; padding:20px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface))}
.sec-card .ph svg{width:34px; height:34px; color:var(--primary); opacity:.35}
.sec-card .ph span{font-size:var(--fs-xs); font-weight:600; color:var(--text-3)}
/* فهرس المميزات */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feat-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:24px 22px; box-shadow:var(--shadow-md); transition:transform .25s,box-shadow .25s,border-color .25s}
.feat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-strong)}
.feat-card .ico{width:44px; height:44px; border-radius:var(--r-lg); display:grid; place-items:center; margin-bottom:16px;
  color:var(--primary); background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 14%,transparent)}
.feat-card .ico svg{width:22px; height:22px}
.feat-card h3{margin:0 0 8px; font-size:var(--fs-lg); font-weight:800; line-height:1.55}
.feat-card p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.85}

/* سجل التحديثات — صفوف تحت شهرها
   الشهر عنوانٌ جانبيّ ثابت (كعنوان الأسئلة الشائعة)، وكل تحديث صفٌّ بخطٍّ رفيع:
   أيقونة تصنيفه رمادية، ثمّ التاريخ والتصنيف سطرًا هادئًا، فالعنوان والوصف وما تغيّر. */
.up-feed{max-width:1040px; margin:0 auto}
.up-group{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:48px; align-items:start}
.up-group + .up-group{margin-top:64px}
.up-month{position:sticky; top:110px; margin:0; font-size:var(--fs-xl); font-weight:800; letter-spacing:-.012em}
.up-line{border-top:1px solid var(--border)}
.up-item{display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:16px; padding:24px 0; border-bottom:1px solid var(--border)}
.up-point svg{width:18px; height:18px; margin-top:4px; color:var(--text-3)}
.up-meta{display:flex; flex-wrap:wrap; gap:4px 10px; margin-bottom:4px; font-size:var(--fs-xs); font-weight:700; color:var(--text-3)}
.up-meta time{font-family:var(--font-num)}
.up-tag::before{content:"·"; margin-inline-end:10px}
.up-card h3{margin:0 0 6px; font-size:var(--fs-lg); font-weight:800; line-height:1.55}
.up-card > p{margin:0 0 12px; color:var(--text-2); font-size:var(--fs-md); line-height:1.9}
.up-card ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.up-card li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-md); line-height:1.75}
.up-card li svg{flex:none; width:14px; height:14px; margin-top:7px; color:var(--text-3)}
.up-video{display:inline-block; margin-top:12px; font-weight:700; color:var(--primary)}
@media (max-width:860px){
  .up-group{grid-template-columns:minmax(0,1fr); gap:12px}
  .up-month{position:static}
}

/* ============================================================
   المستندات القانونية (الخصوصية · الشروط)
   ============================================================
   ⚠️ عمود واحد بعرض قراءة (‏72 محرفاً) لا شبكة بطاقات: هذه صفحة تُقرأ سطراً
   سطراً عند نزاع أو تدقيق، لا صفحة تُمسح بالعين بحثاً عن ميزة. وتقطيعُها إلى
   بطاقات ملوّنة يجعلها تبدو تسويقية — وهو أسوأ ما يُقال عن مستند التزام. */
.legal{max-width:74ch; margin:0 auto}
.legal-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 34px;
  padding:12px 16px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--text-2)}
.legal-meta b{color:var(--text); font-weight:700}
.legal-toc{margin:0 0 44px; padding:20px 22px; border-radius:var(--r-2xl);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md)}
.legal-toc h2{margin:0 0 12px; font-size:var(--fs-xs); font-weight:800; color:var(--text-3)}
.legal-toc ol{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 22px}
.legal-toc a{font-size:var(--fs-md); color:var(--text-2); line-height:1.7}
.legal-toc a:hover{color:var(--primary)}
.legal-sec{margin:0 0 40px; scroll-margin-top:96px}
.legal-sec h2{font-size:clamp(18px,2.4vw,23px); font-weight:800; letter-spacing:-.02em; line-height:1.4; margin:0 0 12px}
.legal-sec > p{margin:0 0 16px; color:var(--text-2); font-size:var(--fs-lg); line-height:1.95}
.legal-sec ul{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:13px}
.legal-sec li{display:flex; align-items:flex-start; gap:12px}
.legal-sec li .tick{width:21px; height:21px; border-radius:50%; flex:none; margin-top:3px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--emerald-500) 14%,transparent); color:var(--emerald-600)}
.legal-sec li .tick svg{width:11px; height:11px}
.legal-sec li b{display:block; font-size:var(--fs-md); font-weight:700; line-height:1.6}
.legal-sec li span{display:block; font-size:var(--fs-sm); color:var(--text-2); line-height:1.8; margin-top:3px}
.legal-note{margin:0; padding:15px 17px; border-radius:var(--r-lg); font-size:var(--fs-md); line-height:1.85; color:var(--text-2);
  background:var(--primary-soft); border-inline-start:3px solid var(--primary)}

@media (max-width:980px){
  .legal-toc ol{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .has-menu{display:none}
}

/* ---------- المدوّنة ---------- */
.post-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
  font-size:var(--fs-sm); color:var(--text-2); font-weight:600}
.post-meta .tag{padding:4px 11px; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:700;
  color:var(--text-2); background:var(--surface-2)}
.post-meta time{font-family:var(--font-num)}
.post-meta .dot{opacity:.45}
/* ⚠️ عرض القراءة محدود عمداً: سطرٌ أطول من ~٧٥ حرفاً تضيع فيه العين بين نهايته
   وبداية الذي يليه، وهو أكثر ما يجعل مقالاً جيّداً لا يُكمَل. */
.post{max-width:720px; margin:0 auto}
.post h2{font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.012em; line-height:1.45; margin:38px 0 12px}
.post h2:first-child{margin-top:0}
.post p{color:var(--text-2); font-size:var(--fs-lg); line-height:1.95; margin:0 0 16px}
.post ul{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:13px}
.post li{display:flex; align-items:flex-start; gap:12px}
.post li .tick{width:21px; height:21px; border-radius:50%; flex:none; margin-top:3px; display:grid; place-items:center;
  border:1px solid var(--border); color:var(--text-3)}
.post li .tick svg{width:11px; height:11px}
.post li b{display:block; font-size:var(--fs-md); font-weight:700; line-height:1.6}
.post li span{display:block; font-size:var(--fs-sm); color:var(--text-2); line-height:1.8; margin-top:3px}
.post .note{margin:0 0 18px; padding:15px 17px; border-radius:var(--r-lg); font-size:var(--fs-md); line-height:1.85;
  color:var(--text-2); background:var(--surface-2); border-inline-start:3px solid var(--border-strong)}
.post-more{margin-top:44px; padding-top:26px; border-top:1px solid var(--border)}
.post-more h3{margin:0 0 12px; font-size:var(--fs-sm); font-weight:800; color:var(--text-3)}
/* ---------- صور المقالات ---------- */
/* ⚠️ الصورة داكنة والبطاقة فاتحة: تحتاج حدّاً يفصلها عن أرضيّتها في الوضع
   الفاتح، وإلا بدت ملصقةً على البطاقة لا جزءاً منها. و«aspect-ratio» يحجز
   مكانها قبل تحميلها فلا يقفز ما تحتها. */
.post-cover{margin:26px 0 0; border-radius:var(--r-2xl); overflow:hidden;
  border:1px solid var(--border); background:var(--slate-900); box-shadow:var(--shadow-lg)}
.post-cover img{width:100%; height:auto; display:block}

@media (max-width:680px){
  .page-hero{padding:112px 0 40px}
  .feat-grid{grid-template-columns:1fr}
  .log-item{padding:20px 18px}
  .post h2{margin-top:30px}
}

/* ---------- حقائق سريعة تحت عنوان الميزة ---------- */
.facts{display:flex; flex-wrap:wrap; gap:6px 10px; margin:-8px 0 30px; font-size:var(--fs-sm); font-weight:600; color:var(--text-3)}
.facts span + span::before{content:"·"; margin-inline-end:10px}

/* ---------- الأسئلة الشائعة ---------- */
/* صفوفٌ بخطٍّ رفيع لا بطاقاتٍ بظلّ: ثلاث بطاقات متتالية تُقرأ «اضغطني» مرّاتٍ ثلاثاً،
   والسؤال نصٌّ يُقرأ لا زرّ. والعلامة رمادية — الأزرق للأفعال وحدها. */
.faq{max-width:820px; margin:0 auto; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; font-size:var(--fs-md); font-weight:700; line-height:1.6}
.faq summary:hover{color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:14px; height:14px;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:12px 1.5px,1.5px 12px; background-position:center; background-repeat:no-repeat; color:var(--text-3); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{margin:-4px 0 18px; color:var(--text-2); font-size:var(--fs-md); line-height:1.9; max-width:68ch}
/* قسم الأسئلة عمودان: العنوان جانباً والأسئلة بجواره — لا عنوانٌ في المنتصف فوق قائمةٍ في المنتصف */
.faq-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; align-items:start}
.faq-split .sec-head{margin:0; position:sticky; top:110px}
.faq-split .sec-head p{font-size:var(--fs-md)}
.faq-split .faq{max-width:none; margin:0}

/* ---------- وحدات مرتبطة / التالي والسابق ---------- */
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.rel-card{display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-md); transition:transform .25s,border-color .25s}
.rel-card:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.rel-card .ico{width:40px; height:40px; flex:none; border-radius:var(--r-lg); display:grid; place-items:center; color:var(--text-2); background:var(--surface-2); border:1px solid var(--border)}
.rel-card .ico svg{width:20px; height:20px}
.rel-card b{display:block; font-size:var(--fs-md); font-weight:800; line-height:1.4}
.rel-card span{display:block; font-size:var(--fs-xs); color:var(--text-3); margin-top:2px}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border)}
.pn a{display:flex; flex-direction:column; gap:4px; padding:4px 0}
.pn a:hover b{color:var(--primary)}
.pn a small{font-size:var(--fs-xs); font-weight:700; color:var(--text-3)}
.pn a b{font-size:var(--fs-md); font-weight:800; line-height:1.5}
.pn a.next{text-align:end}
/* بسهم: الاسم وتسميته بجوار سهمٍ في دائرةٍ رفيعة — والسهم يتحرّك خطوةً في اتجاهه عند المرور */
.pn a.pna{flex-direction:row; align-items:center; gap:14px}
.pn a.pna.next{justify-content:flex-end}
.pn a.pna > span:not(.pn-ar){display:flex; flex-direction:column; gap:3px}
.fl + .pn{border-top:0; margin-top:6px}
.pn-ar{width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); color:var(--text-2); background:var(--surface); transition:border-color .2s,color .2s,transform .2s}
.pn-ar svg{width:18px; height:18px}
.pn a.pna:hover .pn-ar{border-color:var(--primary); color:var(--primary)}
.pn a.pna:not(.next):hover .pn-ar{transform:translateX(3px)}
.pn a.pna.next:hover .pn-ar{transform:translateX(-3px)}
html[dir="ltr"] .pn-ar svg{transform:scaleX(-1)}
html[dir="ltr"] .pn a.pna:not(.next):hover .pn-ar{transform:translateX(-3px)}
html[dir="ltr"] .pn a.pna.next:hover .pn-ar{transform:translateX(3px)}

/* ---------- «تعمل مع» و«من المدوّنة» عمودان من صفوف روابط ---------- */
/* ذيل صفحة الميزة قسمٌ واحد: الأسئلة ثمّ سطران رفيعان للروابط بعمودَي الأسئلة نفسيهما
   (التسمية تحت العنوان، والروابط تحت الأسئلة) — لا ثلاثة أقسامٍ بثلاثة عناوين. */
.fl{margin-top:44px; border-top:1px solid var(--border)}
.fl-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; padding:18px 0; border-bottom:1px solid var(--border); align-items:baseline}
.fl-k{font-size:var(--fs-sm); font-weight:700; color:var(--text-3)}
.fl-v{display:flex; flex-wrap:wrap; gap:10px 28px; min-width:0}
.fl-v.col{flex-direction:column; gap:10px}
.fl-v a{display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-md); font-weight:600; color:var(--text); line-height:1.6}
.fl-v a svg{width:16px; height:16px; flex:none; color:var(--text-3)}
.fl-v a:hover{color:var(--primary)}

/* ---------- عناوين الأقسام الداخلية ---------- */
.sec-head{margin:0 0 26px}
.sec-head h2{font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.03em; line-height:1.3; margin:0 0 8px}
.sec-head p{margin:0; color:var(--text-2); font-size:var(--fs-lg); line-height:1.85; max-width:64ch}
.s-alt{background:var(--sec-alt)}

/* ---------- فهرس المميزات: مجموعات ---------- */
.group-head{display:flex; align-items:flex-start; gap:16px; margin:0 0 22px}
.group-head .gi{width:48px; height:48px; flex:none; border-radius:var(--r-xl); display:grid; place-items:center; color:var(--primary);
  background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 14%,transparent)}
.group-head .gi svg{width:24px; height:24px}
.group-head h2{font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.35; margin:0 0 6px}
.group-head p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.8; max-width:70ch}
.group + .group{margin-top:52px}

/* ---------- صفحة المميزات ----------
   ما يجعلها تُقرأ «منتجاً متكاملاً» لا قائمة: رأسٌ بصورة المنتج وأرقامه، وشريط
   مجموعات يبقى معك، وكل مجموعة لها رسمها وشرحها، وكل وحدة بطاقةٌ فيها ما تفعله
   فعلاً (‏facts) وطريقٌ واضح لتفاصيلها. */
.fx-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center}
.fx-hero .fx-hero-text h1{max-width:18ch}
.fx-hero-art{margin:0}
.fx-hero-art img{width:100%; height:auto; display:block}
/* الفهرس مجموعاتٌ بتخطيط الأسئلة (العنوان جانباً) ووحداتها صفوفٌ في عمودين — لا بطاقات
   ولا رسوم ولا عدّادات. والمسافة بين المجموعات فراغ: الصفوف لها خطوطها، وخطٌّ فوقها يصير خطّين. */
.fx-sec{scroll-margin-top:110px}
.fx-sec + .fx-sec{margin-top:72px}
@media (max-width:980px){ .fx-hero-grid{grid-template-columns:1fr; gap:26px} }
@media (max-width:680px){ .fx-hero-art{order:-1} }
@media (max-width:680px){ .fx-sec + .fx-sec{margin-top:48px} }
.cmp{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden}
.cmp th,.cmp td{padding:14px 16px; text-align:start; vertical-align:top; font-size:var(--fs-md); line-height:1.7; border-bottom:1px solid var(--border)}
.cmp th{font-size:var(--fs-sm); font-weight:800; color:var(--text-3); background:var(--surface-2)}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:700; width:26%}
.cmp td.no{color:var(--text-3)}
.cmp td.yes{color:var(--text); font-weight:600}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; border-radius:var(--r-2xl)}
.tbl-wrap .cmp{min-width:560px}
.tbl-cap{font-size:var(--fs-sm); color:var(--text-3); margin:8px 0 0; text-align:start}

/* ---------- من نحن — صفوف لا بطاقات ----------
   نفس لغة بقيّة الموقع: رأسٌ بنصّه وصورة، ثمّ أقسام بتخطيط الأسئلة (العنوان جانباً)
   والمحتوى صفوفٌ بخطٍّ رفيع وأيقونة رمادية. لا تدرّج في العنوان ولا شريط أرقام: الأرقام
   كانت تكرّر ما في الرأس، والتدرّج يجعل العنوان زينةً لا جملة. */
.ab-hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center}
.ab-hero h1{max-width:none}
.ab-hero-art img{display:block; width:100%; height:auto}
@media (max-width:980px){ .ab-hero-grid{grid-template-columns:minmax(0,1fr); gap:28px} .ab-hero-art{max-width:560px} }

/* ---------- صفوف عامّة: أيقونة رمادية ثمّ عنوانٌ ووصف ----------
   (من نحن · الدليل · المقارنات · العرض التجريبي). plain بلا أيقونة، وtwo عمودان. */
.rows{border-top:1px solid var(--border)}
.rows > *{display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:14px; padding:18px 0; border-bottom:1px solid var(--border); color:inherit}
.rows > * > svg{grid-row:1 / span 2; width:18px; height:18px; margin-top:5px; color:var(--text-3)}
.rows > * > b{font-size:var(--fs-lg); font-weight:800; line-height:1.55; color:var(--text)}
.rows > * > span{margin-top:3px; font-size:var(--fs-md); color:var(--text-2); line-height:1.8}
.rows > a:hover > b{color:var(--primary)}
.rows.plain > *{grid-template-columns:minmax(0,1fr)}
.rows.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; border-top:0}
.rows.two > *{border-bottom:0; border-top:1px solid var(--border)}
.rows-h{margin:0 0 10px; font-size:var(--fs-sm); font-weight:700; color:var(--text-3)}
.sec-head .fl-v{margin-top:16px}
@media (max-width:680px){ .rows.two{grid-template-columns:minmax(0,1fr)} }

/* «ما لا نفعله» ونظائرها (الإنجليزية): صفوفٌ بخطٍّ رفيع وأيقونة رمادية. */
.refuse{border-top:1px solid var(--border)}
.refuse > div{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border)}
.refuse .x{flex:none; display:grid; place-items:center; width:18px; height:18px; margin-top:4px; color:var(--text-3)}
.refuse .x svg{width:18px; height:18px}
.refuse b{display:block; font-size:var(--fs-lg); font-weight:800; line-height:1.55}
.refuse span{display:block; font-size:var(--fs-md); color:var(--text-2); line-height:1.8; margin-top:3px}

/* ---------- المدوّنة: الفهرس صفوفٌ لا بطاقات ----------
   الأحدث صورةٌ وبجوارها نصّه بلا إطار، ثمّ «ابدأ من هنا» وكل تصنيف بتخطيط الأسئلة نفسه
   (‏faq-split: العنوان في عمود، والصفوف في عمودين) — صفٌّ لكل مقال بصورةٍ صغيرة وخطٍّ رفيع. */
.featured{display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:center; margin:0 0 72px}
.featured .fimg{display:block; aspect-ratio:16/9; background:var(--slate-900); border-radius:var(--r-2xl); overflow:hidden; border:1px solid var(--border)}
.featured .fimg img{width:100%; height:100%; object-fit:cover; display:block}
.featured .fbody{display:flex; flex-direction:column; gap:12px}
.featured .fbody h2{margin:0; font-size:clamp(22px,2.6vw,30px); font-weight:800; line-height:1.4; letter-spacing:-.015em}
.featured .fbody h2 a{color:inherit}
.featured .fbody h2 a:hover{color:var(--primary)}
.featured .fbody p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.85}
.featured .post-meta{margin:0}
.featured .fk{font-size:var(--fs-xs); font-weight:800; color:var(--text-3)}
.cat-nav{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 36px}
.cat-nav a{padding:9px 16px; border-radius:var(--r-full); background:var(--surface); border:1px solid var(--border); font-size:var(--fs-sm); font-weight:700; color:var(--text-2)}
.cat-nav a:hover{border-color:var(--primary); color:var(--primary)}
.cat-sec{scroll-margin-top:96px}
.cat-sec + .cat-sec{margin-top:72px}
/* كل تصنيف: عنوانه ووصفه سطراً فوقه، ثمّ مقالاته شبكةً بثلاثة أعمدة — صورةٌ ثمّ نصّها
   بلا إطار ولا خلفية (ليست بطاقة). كانت صفوفاً بصورةٍ صغيرة في نصف الصفحة ونصفُها الآخر
   عنوانٌ وحده، فطالت الصفحة وصغرت الصور حتى لا تُقرأ. */
.cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px 32px; flex-wrap:wrap;
  margin:0 0 26px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.cat-head h2{margin:0; font-size:clamp(22px,2.6vw,28px); font-weight:800; letter-spacing:-.02em}
.cat-head p{margin:0; color:var(--text-2); font-size:var(--fs-md); line-height:1.8; max-width:56ch}
.bl-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px}
.bl-card{display:flex; flex-direction:column; gap:12px; min-width:0}
.bl-card .blog-thumb{display:block; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden; background:var(--slate-900); border:1px solid var(--border)}
.bl-card .blog-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.bl-card:hover .blog-thumb img{transform:scale(1.04)}
.bl-card h3{margin:0; font-size:var(--fs-lg); font-weight:800; line-height:1.55}
.bl-card h3 a{color:inherit}
.bl-card h3 a:hover{color:var(--primary)}
.bl-card p{margin:0; color:var(--text-2); font-size:var(--fs-sm); line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.bl-card .post-meta{margin:0; font-size:var(--fs-xs)}
@media (prefers-reduced-motion:reduce){ .bl-card:hover .blog-thumb img{transform:none} }
ol.path{list-style:none; margin:0; padding:0}
.path{counter-reset:path; border-top:1px solid var(--border)}
.path > a, .path > li{display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:16px; padding:18px 0; border-bottom:1px solid var(--border); color:inherit}
.path > a::before, .path > li::before{counter-increment:path; content:counter(path); grid-row:1 / span 3; width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  display:grid; place-items:center; font-family:var(--font-num); font-size:13px; font-weight:800; color:var(--text-2)}
.path small{font-size:var(--fs-xs); font-weight:700; color:var(--text-3)}
.path b{font-size:var(--fs-lg); font-weight:800; line-height:1.55; margin-top:2px}
.path span{font-size:var(--fs-md); color:var(--text-2); line-height:1.8; margin-top:4px}
.path a:hover b{color:var(--primary)}

/* ---------- المقال: التخطيط بعمودين وفهرس المحتويات ---------- */
.post-layout{display:grid; grid-template-columns:minmax(0,720px) 260px; gap:56px; justify-content:center; align-items:start}
/* ⚠️ min-width:0 على عنصر الشبكة شرطٌ لا زينة: بلاه يأخذ المقال عرض أعرض
   محتوًى فيه (جدولٌ حدّه الأدنى ٥٦٠) فيخرج من عمود الهاتف (٣٣١) إلى خارج
   الشاشة — والجدول لا يمرَّر داخل غلافه لأن الغلاف نفسه صار بعرض الجدول.
   (قِيس فعلاً على ٣٧٥: كان عرض المقال ٥٦٠.) */
.post-layout > *{min-width:0; max-width:100%}
/* الجانب بلا بطاقات: الفهرس بخطٍّ رفيع على حافّته، والدعوة سطرٌ تحته */
.post-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:26px}
.toc{padding:2px 0; padding-inline-start:18px; border-inline-start:1px solid var(--border)}
.toc h2{margin:0 0 12px; font-size:var(--fs-xs); font-weight:800; color:var(--text-3)}
.toc ol{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; counter-reset:toc}
.toc li{display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-sm); line-height:1.6}
.toc li::before{counter-increment:toc; content:counter(toc); flex:none; font-family:var(--font-num); font-weight:700; color:var(--text-3); font-size:12px; margin-top:2px}
.toc a{color:var(--text-2)} .toc a:hover{color:var(--primary)}
.side-cta{padding-top:22px; border-top:1px solid var(--border)}
.side-cta b{display:block; font-size:var(--fs-md); font-weight:800; line-height:1.5; margin-bottom:6px}
.side-cta p{margin:0 0 14px; font-size:var(--fs-sm); color:var(--text-2); line-height:1.75}
.post h2{scroll-margin-top:96px}
/* الخلاصة بين خطّين رفيعين لا بطاقة */
.takeaways{margin:0 0 34px; padding:18px 0 20px; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.takeaways h2{margin:0 0 12px!important; font-size:var(--fs-sm)!important; font-weight:800; color:var(--text-3)}
.takeaways ul{gap:10px}
.takeaways li{align-items:flex-start; font-size:var(--fs-md); line-height:1.75; color:var(--text)}
.takeaways li .tick{margin-top:4px}
.post .steps{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:0; counter-reset:st; border-top:1px solid var(--border)}
.post .steps li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border)}
.post .steps li::before{counter-increment:st; content:counter(st); flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--border); color:var(--text-2);
  font-family:var(--font-num); font-weight:800; font-size:13px; display:grid; place-items:center; margin-top:2px}
.post .steps b{display:block; font-size:var(--fs-md); font-weight:800; line-height:1.55}
.post .steps span{display:block; font-size:var(--fs-sm); color:var(--text-2); line-height:1.8; margin-top:3px}
.post .cmp td:first-child{width:auto}
/* الجسر إلى النظام: قسمٌ بخطٍّ رفيع — الوحدات صفوفٌ بأيقونةٍ رمادية، والزرّ وحده أزرق */
.bridge{margin:48px 0 0; padding-top:26px; border-top:1px solid var(--border)}
.bridge .k{display:block; font-size:var(--fs-xs); font-weight:800; color:var(--text-3); margin-bottom:8px}
.bridge p{margin:0 0 16px; color:var(--text); font-size:var(--fs-md); line-height:1.85}
.bridge .fl-v, .post-more .fl-v{margin:0 0 20px}
.post-faq{margin-top:48px; padding-top:26px; border-top:1px solid var(--border)}
.post-faq h2{margin:0 0 8px!important}
/* الكاتب والمشاركة: سطران هادئان لا بطاقة */
.author{display:flex; gap:14px; align-items:center; margin-top:40px; padding-top:22px; border-top:1px solid var(--border)}
.author .av{flex:none; width:40px; height:40px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; color:var(--text-2)}
.author .av svg{width:20px; height:20px}
.author b{display:block; font-size:var(--fs-md); font-weight:800}
.author span{display:block; font-size:var(--fs-sm); color:var(--text-2); line-height:1.7; margin-top:2px}
.share{display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-top:18px}
.share > span{font-size:var(--fs-sm); font-weight:700; color:var(--text-3)}
.share a{font-size:var(--fs-sm); font-weight:700; color:var(--text-2)}
.share a:hover{color:var(--primary)}
.post .fl{margin-top:36px}

/* ---------- المقال: طبقة القراءة ----------
   ما يجعل المقال «منظّماً» ليس زخرفة بل **إيقاع ثابت**: مقاسٌ واحد ولونٌ واحد للمتن،
   وعناوين بفاصلٍ واضح، وملاحظاتٌ تُرى صناديق لا فقرات رمادية، ومكانٌ تعرف منه أين
   أنت (شريط التقدّم وقسمٌ نشِط في الفهرس). والغلاف بعرض القراءة لا بعرض الشاشة:
   صورةٌ ارتفاعها ٦٤٠ كانت تؤخّر أوّل سطرٍ من المقال شاشةً كاملة. */
.read-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:200; pointer-events:none}
.read-progress span{display:block; height:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; will-change:transform}
[dir="rtl"] .read-progress span{transform-origin:right}
/* رأس المقال في عمود القراءة نفسه لا في وسط الشاشة: العنوان والغلاف والمتن حافّةٌ واحدة،
   والعمود الجانبي فارغٌ فوق حتى يبدأ الفهرس. كان الرأس وسطاً بعرض ٨٨٠ والمتن ٧٢٠ على اليمين
   بجواره فهرس — ثلاث حوافّ مختلفة في شاشةٍ واحدة. */
.post-page{padding:124px 0 96px}
.post-head{margin:0 0 34px}
.post-head .crumbs{margin-bottom:18px}
.post-head .post-meta{margin:0}
.post-head h1{margin:14px 0 14px; font-size:clamp(28px,3.8vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1.35}
.post-head .lead{margin:0 0 18px; color:var(--text-2); font-size:var(--fs-lg); line-height:1.9}
.post-page .post-side{padding-top:6px}
.post-byline{display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-sm); color:var(--text-2)}
.post-byline b{color:var(--text); font-weight:800}
.post-byline time{font-family:var(--font-num)}
.post-byline .av{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary)}
.post-byline .av svg{width:16px; height:16px}
.post-head .post-cover{margin:26px 0 0; aspect-ratio:16/9}
.post-head .post-cover img{width:100%; height:100%; object-fit:cover}
.post > p{color:color-mix(in srgb,var(--text) 80%,var(--text-2)); font-size:17px; line-height:2; margin:0 0 18px}
.post > h2{font-size:clamp(21px,2.8vw,29px); margin:50px 0 14px; padding-top:26px; border-top:1px solid var(--border)}
.post > h2:first-of-type{margin-top:6px; padding-top:0; border-top:0}
.post li b{font-size:16px}
.post li span{font-size:15px; line-height:1.85}
.post > p.note{position:relative; margin:4px 0 22px; padding:16px 18px 16px 18px; padding-inline-start:52px;
  border-radius:var(--r-lg); background:var(--surface-2); color:var(--text); font-size:var(--fs-md); line-height:1.9;
  border:0; border-inline-start:3px solid var(--border-strong)}
.post > p.note::before{content:"!"; position:absolute; inset-inline-start:16px; top:16px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--text-3); color:var(--surface); font-family:var(--font-num); font-weight:800; font-size:13px; line-height:1}
.toc a.is-active{color:var(--text); font-weight:800}
.toc li:has(a.is-active)::before{color:var(--text)}
.toc-m{display:none}
.share-copy{padding:0; border:0; background:none; font:inherit; font-size:var(--fs-sm); font-weight:700; color:var(--text-2); cursor:pointer}
.share-copy:hover,.share-copy.done{color:var(--primary)}
@media (max-width:1100px){
  .toc-m{display:block; margin:0 0 26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:0}
  .toc-m summary{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; cursor:pointer;
    font-weight:800; font-size:var(--fs-md); list-style:none}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary span{font-size:var(--fs-xs); font-weight:700; color:var(--text-3)}
  .toc-m ol{margin:0; padding:0 18px 16px; list-style:none; display:flex; flex-direction:column; gap:9px; counter-reset:tm}
  .toc-m li{display:flex; gap:10px; font-size:var(--fs-sm); line-height:1.6}
  .toc-m li::before{counter-increment:tm; content:counter(tm); flex:none; font-family:var(--font-num); font-weight:700; color:var(--text-3); font-size:12px; margin-top:2px}
  .toc-m a{color:var(--text-2)}
  .toc-m a.is-active{color:var(--text); font-weight:800}
  .post-side .toc{display:none}
}
@media (max-width:680px){
  .post > p{font-size:16px; line-height:1.95}
  .post-head .post-cover{margin-top:22px}
  .post-page{padding:104px 0 64px}
}

@media (max-width:1100px){
  .post-layout{grid-template-columns:minmax(0,720px)}
  /* على الشاشة الضيّقة ينتقل الجانب تحت المقال فتصير دعوته ملاصقةً لشريط الدعوة — فيُخفى (والفهرس صار فوق المقال) */
  .post-side{position:static; display:none}
}
@media (max-width:980px){
  .rel-grid{grid-template-columns:1fr 1fr}
  .featured{grid-template-columns:1fr; gap:22px}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .rel-grid,.refuse,.pn,.faq-split,.fl-row{grid-template-columns:1fr}
  /* على الهاتف: صفٌّ بصورةٍ صغيرة بجوار نصّها — شبكةٌ بعمودٍ واحد تجعل كل مقالٍ شاشةً كاملة */
  .bl-grid{grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--border)}
  .bl-card{display:grid; grid-template-columns:108px minmax(0,1fr); gap:4px 14px; align-content:start; padding:16px 0; border-bottom:1px solid var(--border)}
  .bl-card .blog-thumb{grid-row:1 / span 3; border-radius:var(--r-lg)}
  .bl-card h3{font-size:var(--fs-md)}
  .bl-card p{-webkit-line-clamp:2}
  .cat-head{margin-bottom:0; padding-bottom:12px; border-bottom:0}
  .featured{margin-bottom:48px}
  .cat-sec + .cat-sec{margin-top:52px}
  .faq-split{gap:28px}
  .fl-row{gap:10px}
  .faq-split .sec-head{position:static}
  .pn a.next{text-align:start}
  .pn:has(.pna){grid-template-columns:1fr 1fr; gap:10px}
  .pn a.pna{gap:10px}
  .pn a.pna.next{text-align:end}
  .featured .fbody{padding:22px 20px}
  .post .steps li{padding:12px 14px}
}

.cmp3 td.ours{color:var(--text)} .cmp3 td.theirs{color:var(--text-2)}
.cmp3 th small{font-weight:600; color:var(--text-3)}
.cmp td strong{font-weight:800; color:var(--text)}
.theirs-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; column-gap:32px}
.theirs-list li{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--border); font-size:var(--fs-md); line-height:1.75; color:var(--text-2)}
.theirs-list .tick{flex:none; margin-top:6px; color:var(--text-3)}
.theirs-list .tick svg{width:14px; height:14px; display:block}
.guide-grid{margin:0 0 18px}
.sitemap-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; align-items:start}
.sitemap-group h2{font-size:var(--fs-md); font-weight:800; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--border)}
.sitemap-group ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.sitemap-group a{font-size:var(--fs-sm); color:var(--text-2); line-height:1.6}
.sitemap-group a:hover{color:var(--primary)}
[dir="ltr"] .page-hero h1{max-width:22ch}
@media (max-width:980px){ .sitemap-cols{grid-template-columns:1fr 1fr} .theirs-list{grid-template-columns:1fr} }
@media (max-width:680px){ .sitemap-cols{grid-template-columns:1fr} }

/* ---------- صفحة الميزة: الرأس ---------- */
.fp-hero{padding:120px 0 44px}
.fp-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center}
.fp-hero-solo{grid-template-columns:minmax(0,1fr)}
.fp-hero-text{min-width:0}
.fp-hero-text .eyebrow{gap:8px; margin-bottom:4px}
.fp-hero-text .eyebrow::before{display:none}
.fp-hero-text .eyebrow svg{width:17px; height:17px}
.fp-hero .lead{margin-bottom:26px}
.fp-hero-visual{position:relative; min-width:0}
.fp-stage{position:relative; padding:22px 18px 26px}
.fp-stage > .mk{position:relative; z-index:1}
/* ---------- أيقونات القنوات الطافية حول ماكيت الرأس (مركز التواصل · CRM) ----------
   بطريقة الأعلام في الرئيسية نفسها: طبقة خارجية تنطلق من المركز إلى موضعها مرّة
   واحدة، وطبقة داخلية (fg-in) تطوف وتلمع — الحركتان على transform وحده. والموضع
   بوحدات الحاوية (cqw · cqh) فيتبع حجم الماكيت على كل شاشة. زينةٌ لا محتوى:
   aria-hidden ولا تستقبل النقر. */
.chf{position:absolute; inset:0; z-index:2; pointer-events:none; container-type:size}
.chf-t{--fs:calc(var(--f,72px) * var(--fz,1));
  position:absolute; left:50%; top:50%; width:var(--fs); height:var(--fs);
  margin:calc(var(--fs) / -2); opacity:0;
  transform:translate(0,0) scale(.3) rotate(0);
  transition:transform .9s cubic-bezier(.16,1.02,.3,1),opacity .55s ease;
  transition-delay:calc(.25s + var(--i) * 70ms)}
.chf.in .chf-t{opacity:1;
  transform:translate(calc(var(--x) * var(--k,1) * 50cqw),calc(var(--y) * var(--k,1) * 50cqh)) scale(1) rotate(var(--rot))}
.chf-t .fg-in{border-radius:calc(var(--fs) * .28)}
.chf-ico{width:56%; height:56%; display:block}
@supports not (width:1cqw){
  .chf.in .chf-t{transform:translate(calc(var(--x) * 220px),calc(var(--y) * 170px)) rotate(var(--rot))}
}
@media (max-width:980px){ .chf{--fz:.8; --k:.94} }
@media (max-width:680px){ .chf{--fz:.6; --k:.84} }
@media (prefers-reduced-motion:reduce){
  .chf-t{transition:none; opacity:1; transform:translate(calc(var(--x) * var(--k,1) * 50cqw),calc(var(--y) * var(--k,1) * 50cqh)) rotate(var(--rot))}
}
/* لقطة حقيقية: إطارٌ داكن بحدٍّ رفيع — شاشة الأشعة داكنة في الوضعين */
.mk-screen{margin:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--border); background:#0a0c10}
.mk-screen img{display:block; width:100%; height:auto}
.fp-hero-wide{margin-top:40px}
/* الحقائق الثلاث سطرٌ هادئ تحت الرأس لا ثلاث بطاقات: البطاقة بظلّها تقول «اضغطني»
   وهي ليست رابطاً، وثلاثة صناديق بعرض الصفحة تنافس العنوان على العين. */
.fp-facts{list-style:none; margin:36px 0 0; padding:22px 0 0; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 32px}
.fp-facts li{display:flex; align-items:center; gap:8px; font-size:var(--fs-md); font-weight:600; color:var(--text-2); line-height:1.55}
.fp-facts li .tick{flex:none; display:grid; place-items:center; color:var(--emerald-600)}
.fp-facts li .tick svg{width:15px; height:15px}

/* ---------- الأقسام: نصّ وصورة بالتناوب ---------- */
.fp-body{padding-top:16px}
.fp-sec{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; padding:60px 0}
.fp-sec + .fp-sec{border-top:1px solid var(--border)}
.fp-sec:first-child{padding-top:24px}
.fp-sec:last-child{padding-bottom:0}
.fp-sec:nth-child(even) .fp-sec-media{order:-1}
.fp-sec-text{min-width:0}
/* السؤال فوق العنوان سطرٌ صغير لا كبسولة ملوّنة: الأزرق للأفعال، ورقم القسم
   رماديّ بخطّ الأرقام — ترتيبٌ يُقرأ لا زرٌّ يُضغط. */
.fp-q{display:flex; align-items:baseline; gap:10px; margin:0 0 12px; color:var(--primary); font-size:var(--fs-sm); font-weight:700; line-height:1.6}
.fp-q i{font-style:normal; font-family:var(--font-num); flex:none; color:var(--text-3); font-size:12px; font-weight:700; letter-spacing:.04em}
.fp-sec h2{font-size:clamp(22px,3vw,31px); font-weight:800; letter-spacing:-.012em; line-height:1.32; margin:0 0 12px}
.fp-sec .fp-p{color:var(--text-2); font-size:var(--fs-lg); line-height:1.9; margin:0 0 20px}
/* البنود صفوفٌ بخطٍّ رفيع لا بطاقات: ثلاث بطاقات مكدّسة بجوار ماكيتٍ بطاقةٍ هو
   الآخر = «بطاقة داخل بطاقة» بصريّاً، والعين لا تعرف أين تبدأ. */
.fp-list{list-style:none; padding:0; margin:0; display:grid; border-top:1px solid var(--border)}
.fp-list li{display:flex; align-items:flex-start; gap:12px; padding:13px 2px; border-bottom:1px solid var(--border)}
.fp-list li .tick{flex:none; margin-top:4px; display:grid; place-items:center; color:var(--emerald-600)}
.fp-list li .tick svg{width:15px; height:15px}
.fp-list li b{display:block; font-size:var(--fs-md); font-weight:700; line-height:1.5}
.fp-list li span span{display:block; font-size:var(--fs-sm); color:var(--text-2); line-height:1.65; margin-top:3px}
.fp-sec-media{min-width:0; position:relative}
.fp-sec-media .mk{max-width:520px; margin-inline:auto}
.fp-sec-media .art-stage{max-width:560px; margin-inline:auto}
.fp-sec-media .art-stage.art-narrow{max-width:300px}
.fp-sec-solo{grid-template-columns:minmax(0,1fr); max-width:780px; margin-inline:auto}
.fp-sec-solo .fp-list{grid-template-columns:1fr 1fr; column-gap:32px}

/* ---------- الماكيتات (mk-*) — الأساس ---------- */
.mk{position:relative; width:100%; font-size:12px; line-height:1.5; color:var(--text); text-align:start; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden}
.mk .num{font-family:var(--font-num); font-feature-settings:"tnum" 1}
.mk-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border)}
.mk-head > b{font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-head > span{display:flex; gap:5px; flex:none}
.mk-body{padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.mk-ph{font-size:10.5px; font-weight:800; color:var(--text-3); margin:0 0 -4px}
.mk-foot{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.mk-foot small{font-size:10.5px; color:var(--text-3); line-height:1.5}
.mk-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px}
.mk-kpi{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:9px 10px; min-width:0}
.mk-kpi small{display:block; font-size:10px; font-weight:600; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-kpi b{display:block; font-family:var(--font-num); font-size:16px; font-weight:800; line-height:1.2; margin-top:3px; letter-spacing:-.01em}
.mk-kpi em{display:block; font-style:normal; font-size:10px; font-weight:700; color:var(--text-3); margin-top:2px}
.mk-kpi em.up{color:var(--emerald-600)} .mk-kpi em.down{color:#be123c}
.mk-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px}
.mk-kv small{display:block; font-size:10px; color:var(--text-3); font-weight:600}
.mk-kv b{display:block; font-size:12px; font-weight:800; line-height:1.4}
.mk-split{display:grid; grid-template-columns:1.25fr 1fr; gap:10px; min-width:0}
.mk-split-2{grid-template-columns:1fr 1fr; align-items:center}
.mk-panel{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:10px 12px; min-width:0; display:flex; flex-direction:column; gap:10px}
.mk-rows{display:flex; flex-direction:column; gap:6px}
.mk-row{display:flex; align-items:center; gap:9px; padding:8px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); min-width:0}
.mk-panel .mk-row{padding:6px 8px}
.mk-txt{flex:1; min-width:0}
.mk-txt b{display:block; font-size:11.5px; font-weight:700; line-height:1.4}
.mk-txt small{display:block; font-size:10px; color:var(--text-3); line-height:1.45; margin-top:1px}
.mk-txt .mk-prog{margin-top:6px}
.mk-end{flex:none; display:flex; align-items:center; gap:5px; margin-inline-start:auto; font-size:11px; font-weight:700}
.mk-av{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:800; color:#fff; background:var(--primary)}
.mk-av.g{background:var(--emerald-600)} .mk-av.a{background:var(--amber-500)} .mk-av.r{background:var(--rose-500)}
.mk-av.v{background:var(--violet-600)} .mk-av.n{background:var(--slate-500)} .mk-av.c{background:var(--cyan-500)}
.mk-chip{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-full); font-size:10px; font-weight:800; line-height:1.6;
  white-space:nowrap; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border)}
.mk-chip.g{background:rgba(16,185,129,.13); color:var(--emerald-600); border-color:rgba(16,185,129,.25)}
.mk-chip.b{background:var(--primary-soft); color:var(--primary); border-color:color-mix(in srgb,var(--primary) 22%,transparent)}
.mk-chip.a{background:rgba(245,158,11,.14); color:#b45309; border-color:rgba(245,158,11,.3)}
.mk-chip.r{background:rgba(244,63,94,.11); color:#be123c; border-color:rgba(244,63,94,.25)}
.mk-chip.v{background:rgba(124,58,237,.11); color:var(--violet-600); border-color:rgba(124,58,237,.22)}
html[data-theme="dark"] .mk-chip.a{color:#fbbf24} html[data-theme="dark"] .mk-chip.r{color:#fb7185} html[data-theme="dark"] .mk-chip.v{color:#c4b5fd}
.mk-bars{display:flex; align-items:flex-end; gap:6px; height:92px; padding-bottom:16px; position:relative}
.mk-bars i{flex:1; height:var(--h); min-width:0; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#608dfa,#1a56db); position:relative}
.mk-bars i.peak{background:linear-gradient(180deg,#8b5cf6,#7c3aed)}
.mk-bars u{position:absolute; bottom:-16px; inset-inline:0; text-align:center; font-size:9px; color:var(--text-3); text-decoration:none; font-family:var(--font-num)}
.mk-prog{display:block; height:6px; border-radius:6px; background:var(--surface-3); overflow:hidden}
.mk-prog i{display:block; height:100%; width:var(--w); border-radius:6px; background:var(--primary)}
.mk-prog i.g{background:var(--emerald-600)} .mk-prog i.v{background:var(--violet-600)} .mk-prog i.a{background:var(--amber-500)}
.mk-table{width:100%; border-collapse:collapse; font-size:11px}
.mk-table th{font-size:9.5px; color:var(--text-3); font-weight:800; text-align:start; padding:4px 8px 6px; border-bottom:1px solid var(--border); white-space:nowrap}
.mk-table td{padding:7px 8px; border-bottom:1px solid var(--border); vertical-align:middle; line-height:1.45}
.mk-table tr:last-child td{border-bottom:0}
.mk-table td:first-child{font-weight:700}
.mk-yes{color:var(--emerald-600); font-weight:800} .mk-no{color:var(--text-3)}
.mk-total{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-lg); background:var(--primary-soft); font-size:11px; font-weight:700}
.mk-total b{margin-inline-start:auto; font-size:14px; font-weight:800; color:var(--primary)}
.mk-btn{display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 11px; border-radius:8px; font-size:10.5px; font-weight:800;
  background:var(--primary); color:#fff; white-space:nowrap}
.mk-btn.ghost{background:var(--surface); color:var(--text); border:1px solid var(--border-strong)}
.mk-tabs{display:flex; gap:2px; padding:0 8px; border-bottom:1px solid var(--border); overflow:hidden}
.mk-tabs span{padding:8px; font-size:10.5px; font-weight:700; color:var(--text-3); border-bottom:2px solid transparent; white-space:nowrap}
.mk-tabs span.on{color:var(--primary); border-color:var(--primary)}
.mk-alert{display:flex; align-items:center; gap:8px; margin:12px 16px 0; padding:8px 10px; border-radius:var(--r-lg); font-size:11px; font-weight:700; line-height:1.5;
  background:rgba(244,63,94,.1); color:#be123c; border:1px solid rgba(244,63,94,.25)}
.mk-alert::before{content:"!"; flex:none; width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:#be123c; color:#fff; font-size:10px; font-weight:800}
.mk-alert.a{background:rgba(245,158,11,.13); color:#b45309; border-color:rgba(245,158,11,.3)}
.mk-alert.a::before{background:#b45309}
.mk-body .mk-alert{margin:0}
html[data-theme="dark"] .mk-alert{color:#fda4af} html[data-theme="dark"] .mk-alert.a{color:#fcd34d}
.mk-input{display:flex; align-items:center; gap:2px; padding:8px 11px; border:1px solid var(--primary); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-soft); font-size:12px}
.mk-input .caret{width:1.5px; height:15px; background:var(--primary); animation:mkBlink 1s steps(2) infinite}
.mk mark{background:color-mix(in srgb,var(--primary) 18%,transparent); color:inherit; border-radius:3px; padding:0 1px}
.mk-tg{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface)}
.mk-tg > i{flex:none; width:30px; height:18px; border-radius:999px; background:var(--slate-300); position:relative}
.mk-tg > i::after{content:""; position:absolute; top:2px; inset-inline-start:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.mk-tg > i.on{background:var(--emerald-600)}
.mk-tg > i.on::after{inset-inline-start:14px}
html[data-theme="dark"] .mk-tg > i{background:#334155}
.mk-handle{flex:none; color:var(--text-3); font-size:11px; letter-spacing:-2px}
.mk-thread{display:flex; flex-direction:column; gap:8px}
.mk-bubble{max-width:84%; padding:8px 11px; border-radius:14px; font-size:11.5px; line-height:1.6}
.mk-bubble > span{display:block}
.mk-bubble.in{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-start-start-radius:4px}
.mk-bubble.out{align-self:flex-end; background:var(--primary); color:#fff; border-start-end-radius:4px}
.mk-bubble.out .mk-chip{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.25); margin-top:4px}
.mk-bubble time{display:block; font-size:9px; opacity:.7; margin-top:3px; font-family:var(--font-num); text-align:end}
.mk-reply{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--r-full); font-size:10.5px; color:var(--text-3)}
.mk-mic{flex:none; width:24px; height:24px; border-radius:50%; background:var(--primary); position:relative}
.mk-mic::after{content:""; position:absolute; inset:6px 9px 7px; border-radius:5px; background:#fff}
.mk-inbox{display:grid; grid-template-columns:1fr 1.3fr; gap:10px; min-width:0}
.mk-list{display:flex; flex-direction:column; gap:6px; min-width:0}
.mk-cv{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:9px; border:1px solid transparent; min-width:0}
.mk-cv.on{background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 25%,transparent)}
.mk-cv .mk-end{flex-direction:column; align-items:flex-end; gap:3px}
.mk-dot{width:8px; height:8px; border-radius:50%; background:var(--primary); display:inline-block}
.mk-conv{border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 10px; display:flex; flex-direction:column; gap:8px; min-width:0}
.mk-conv-hd{display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:800}
.mk-steps{list-style:none; margin:4px 0 0; padding:0; display:flex}
.mk-steps li{flex:1; position:relative; text-align:center; font-size:10.5px; color:var(--text-3); padding-top:20px}
.mk-steps li::before{content:""; position:absolute; top:6px; inset-inline:-50% 50%; height:2px; background:var(--border)}
.mk-steps li:first-child::before{display:none}
.mk-steps li i{position:absolute; top:0; inset-inline-start:calc(50% - 7px); width:14px; height:14px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border); z-index:1}
.mk-steps li.done{color:var(--text)} .mk-steps li.done i{background:var(--emerald-600); border-color:var(--emerald-600)} .mk-steps li.done::before{background:var(--emerald-600)}
.mk-steps li.now{color:var(--primary); font-weight:800} .mk-steps li.now i{background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.mk-steps li.now::before{background:var(--emerald-600)}
.mk-tl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.mk-tl li{position:relative; padding-inline-start:26px}
.mk-tl li i{position:absolute; inset-inline-start:0; top:5px; width:14px; height:14px; border-radius:50%; background:var(--surface-2); border:2px solid var(--border)}
.mk-tl li:not(:last-child)::before{content:""; position:absolute; inset-inline-start:6px; top:21px; bottom:-14px; width:2px; background:var(--border)}
.mk-tl li.done i{background:var(--emerald-600); border-color:var(--emerald-600)} .mk-tl li.done::before{background:var(--emerald-600)}
.mk-tl li.now i{background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft)}
.mk-tl .mk-txt b{font-size:12px}
.mk-cal{display:grid; grid-template-columns:42px repeat(var(--cols,3),minmax(0,1fr)); gap:5px; font-size:10.5px}
.mk-cal .hd{font-weight:800; color:var(--text-2); text-align:center; padding:2px 0 4px; font-size:10px}
.mk-cal .tm{color:var(--text-3); font-family:var(--font-num); font-size:9.5px; text-align:center; padding-top:7px}
.mk-cal .slot{min-height:34px; border-radius:7px; border:1px dashed var(--border-strong); background:var(--surface-2)}
.mk-cal .slot.no{display:grid; place-items:center; font-size:9px; font-weight:800; color:#be123c; background:rgba(244,63,94,.08); border-color:rgba(244,63,94,.45); text-align:center; padding:2px}
.mk-cal .ev{min-height:34px; border-radius:7px; padding:5px 7px; color:#fff; font-weight:700; font-size:10px; line-height:1.3; box-shadow:var(--shadow-md); min-width:0; overflow:hidden}
.mk-cal .ev span{display:block; font-size:8.5px; opacity:.85; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-cal .ev.b{background:linear-gradient(135deg,#3b78ee,#1a56db)} .mk-cal .ev.v{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.mk-cal .ev.g{background:linear-gradient(135deg,#10b981,#059669)} .mk-cal .ev.c{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.mk-cal .ev.ghost{opacity:.6; outline:2px dashed var(--primary); outline-offset:2px; transform:rotate(-2deg)}
html[data-theme="dark"] .mk-cal .slot.no{color:#fda4af}
.mk-teeth{display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:3px}
.mk-teeth + .mk-teeth{margin-top:4px}
.mk-teeth i{aspect-ratio:1; border-radius:4px 4px 7px 7px; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center;
  font-style:normal; font-family:var(--font-num); font-size:8px; font-weight:700; color:var(--text-3); min-width:0}
.mk-teeth.low i{border-radius:7px 7px 4px 4px}
.mk-teeth i.tx{background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 40%,transparent); color:var(--primary)}
.mk-teeth i.done{background:rgba(16,185,129,.14); border-color:rgba(16,185,129,.45); color:var(--emerald-600)}
.mk-teeth i.warn{background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.5); color:#b45309}
.mk-teeth i.sel{outline:2px solid var(--primary); outline-offset:1px}
.mk-legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:10.5px; font-weight:600; color:var(--text-2)}
.mk-legend.col{flex-direction:column; gap:7px}
.mk-legend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-inline-end:6px; vertical-align:middle; background:var(--slate-400)}
.mk-legend i.tx,.mk-legend i.b{background:var(--primary)} .mk-legend i.done,.mk-legend i.g{background:var(--emerald-600)}
.mk-legend i.warn,.mk-legend i.a{background:var(--amber-500)} .mk-legend i.v{background:var(--violet-600)}
.mk-sel{border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); background:var(--primary-soft)}
.mk-shots{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mk-shot{aspect-ratio:4/3; border-radius:9px; position:relative; overflow:hidden; background:radial-gradient(70% 80% at 50% 40%,#475569,#0f172a 75%)}
.mk-shot::before{content:""; position:absolute; inset:18% 30% 22%; border-radius:40% 40% 30% 30%; background:rgba(255,255,255,.14); filter:blur(2px)}
.mk-shots.real{grid-template-columns:2fr 1fr}
.mk-shots.real .mk-shot{background:#0a0c10}
.mk-shots.real .mk-shot:first-child{grid-row:span 2; aspect-ratio:auto}
.mk-shots.real .mk-shot::before{display:none}
.mk-shots.real img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.mk-shot small{position:absolute; bottom:6px; inset-inline:6px; font-size:9px; font-weight:700; color:#e2e8f0; background:rgba(0,0,0,.45); border-radius:5px; padding:2px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-donut{width:112px; height:112px; border-radius:50%; margin:0 auto; flex:none;
  background:conic-gradient(var(--primary) 0 58%,var(--violet-600) 58% 80%,var(--emerald-600) 80% 92%,var(--amber-500) 92% 100%);
  -webkit-mask:radial-gradient(transparent 56%,#000 57%); mask:radial-gradient(transparent 56%,#000 57%)}
.mk-face{position:relative; width:112px; height:112px; margin:6px auto 10px; border-radius:50%; background:radial-gradient(circle at 50% 38%,#e2e8f0,#94a3b8 70%)}
/* صورة حقيقية داخل الدائرة وخطّ مسحٍ يتحرّك فوقها — الخطّ مرسومٌ هنا لا في الصورة، فيبقى حادّاً ويقف مع «تقليل الحركة» */
.mk-face-img{position:absolute; inset:0; border-radius:50%; overflow:hidden}
.mk-face-img img{display:block; width:100%; height:100%; object-fit:cover}
.mk-scanline{position:absolute; inset-inline:0; top:14%; height:2px; background:linear-gradient(90deg,transparent,#22d3ee 20%,#67e8f9 50%,#22d3ee 80%,transparent);
  box-shadow:0 0 10px 2px rgba(34,211,238,.55); animation:mkScanY 2.6s ease-in-out infinite}
@keyframes mkScanY{0%,100%{top:14%}50%{top:84%}}
.mk-face::before{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px dashed var(--primary); animation:mkSpin 14s linear infinite}
.mk-face::after{content:"✓"; position:absolute; bottom:-2px; inset-inline-end:-4px; width:28px; height:28px; border-radius:50%; background:var(--emerald-600); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:14px; border:3px solid var(--surface)}
.mk-center{text-align:center}
.mk-center b{display:block; font-size:13px; font-weight:800}
.mk-center small{display:block; font-size:10.5px; color:var(--text-3)}
.mk-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.mk-col{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px; min-width:0}
.mk-col > b{display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:10.5px; font-weight:800; margin-bottom:8px; white-space:nowrap; overflow:hidden}
.mk-col > b em{font-style:normal; font-family:var(--font-num); font-size:10px; color:var(--text-3); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:0 6px}
.mk-card{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:7px 8px; margin-bottom:6px; box-shadow:var(--shadow-md)}
.mk-card:last-child{margin-bottom:0}
.mk-card b{display:block; font-size:10.5px; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mk-big small{display:block; font-size:10.5px; color:var(--text-3); font-weight:600}
.mk-big b{display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.mk-big em{font-style:normal; font-size:10.5px; font-weight:700; color:var(--text-3)} .mk-big em.up{color:var(--emerald-600)}
.mk-stars{color:var(--amber-500); letter-spacing:1px; font-size:11px; font-weight:400}
.mk-url{display:flex; align-items:center; gap:5px; padding:9px 12px; background:var(--surface-2); border-bottom:1px solid var(--border)}
.mk-url i{width:9px; height:9px; border-radius:50%}
.mk-url i:nth-child(1){background:#ff5f57} .mk-url i:nth-child(2){background:#febc2e} .mk-url i:nth-child(3){background:#28c840}
.mk-url span{flex:1; margin-inline-start:8px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:3px 9px; font-size:10.5px; color:var(--text-3);
  font-family:var(--font-num); direction:ltr; text-align:left}
.mk-site{display:flex; flex-direction:column; gap:12px}
.mk-site-hd{display:flex; align-items:center; gap:10px}
.mk-site-hd b{flex:1; font-size:12.5px; font-weight:800}
.mk-site-hero{padding:22px 18px; border-radius:var(--r-lg); color:#fff; background:linear-gradient(135deg,var(--blue-700),var(--blue-500))}
.mk-site-hero b{display:block; font-size:18px; font-weight:800; margin-bottom:4px}
.mk-site-hero small{display:block; font-size:11px; opacity:.9}
.mk-phone-wrap{display:flex; justify-content:center; padding:6px 0}
.mk-phone{width:236px; border-radius:26px; background:#0b1322; padding:8px; border:1px solid rgba(148,163,184,.3)}
.mk-phone > div{background:var(--surface); border-radius:20px; padding:12px 11px; font-size:11px; display:flex; flex-direction:column; gap:8px}
.mk-ph-top b{display:block; font-size:13px; font-weight:800} .mk-ph-top small{display:block; font-size:10px; color:var(--text-3)}
.mk-ph-card{background:linear-gradient(135deg,#3b78ee,#1a56db); color:#fff; border-radius:14px; padding:11px 12px}
.mk-ph-card small{display:block; font-size:9.5px; opacity:.85} .mk-ph-card b{display:block; font-size:15px; font-weight:800; margin:2px 0} .mk-ph-card span{display:block; font-size:10px; opacity:.9}
/* الماكيت الداكن — العارضات: داكنٌ في الوضعين كشاشة الأشعة */
.mk-dark{background:#0b1220; color:#dbe4f3; border-color:rgba(148,163,184,.22)}
.mk-dark .mk-head{border-color:rgba(148,163,184,.14)}
.mk-dark .mk-chip{background:rgba(255,255,255,.08); color:#cbd5e1; border-color:rgba(255,255,255,.12)}
.mk-dark .mk-chip.b{background:rgba(59,109,246,.22); color:#93b4fd} .mk-dark .mk-chip.a{color:#fcd34d; background:rgba(245,158,11,.16)}
.mk-dark .mk-btn.ghost{background:transparent; color:#e2e8f0; border-color:rgba(255,255,255,.2)}
.mk-dark .mk-foot small{color:#8ea0bd}
.mk-dark .mk-teeth i{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#8ea0bd}
.mk-dark .mk-teeth i.warn{background:rgba(245,158,11,.22); color:#fcd34d} .mk-dark .mk-teeth i.tx{background:rgba(59,109,246,.25); color:#93b4fd}
.mk-panes{display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:6px; height:210px}
.mk-pane{position:relative; border-radius:8px; overflow:hidden; background:radial-gradient(60% 70% at 50% 45%,#3a4a63,#141c2c 72%)}
.mk-pane:first-child{grid-row:span 2}
.mk-pane::before,.mk-pane::after{content:""; position:absolute; background:rgba(96,141,250,.55)}
.mk-pane::before{inset-inline:0; top:52%; height:1px} .mk-pane::after{inset-block:0; inset-inline-start:48%; width:1px}
.mk-pane small{position:absolute; top:6px; inset-inline-start:8px; font-size:9px; color:#93b4fd; font-weight:800; font-family:var(--font-num); z-index:1}
.mk-measure{position:absolute; bottom:10px; inset-inline-end:10px; z-index:1; font-family:var(--font-num); font-size:10px; font-weight:700; color:#fde68a;
  background:rgba(0,0,0,.45); padding:2px 7px; border-radius:6px; direction:ltr}
.mk-slider{display:flex; align-items:center; gap:8px; font-size:10px; color:#93a4bd; font-family:var(--font-num)}
.mk-slider i{flex:1; height:4px; border-radius:4px; background:#26324a; position:relative}
.mk-slider i::after{content:""; position:absolute; top:-4px; inset-inline-start:44%; width:12px; height:12px; border-radius:50%; background:var(--blue-400); box-shadow:0 0 0 3px rgba(96,141,250,.25)}
.mk-3d{height:180px; display:grid; place-items:center; border-radius:8px; background:radial-gradient(60% 70% at 50% 50%,#1e293b,#0b1220 75%)}
.mk-orb{width:132px; height:96px; border-radius:48% 48% 42% 42%/55% 55% 45% 45%; background:linear-gradient(145deg,#f1f5f9,#94a3b8 70%,#64748b);
  box-shadow:inset -14px -12px 26px rgba(0,0,0,.28),inset 6px 8px 16px rgba(255,255,255,.35),0 22px 32px -12px rgba(0,0,0,.7); animation:mkOrb 9s ease-in-out infinite}
/* العوّامات فوق ماكيت الرأس — بطاقات صغيرة تقول ما حدث للتوّ */
.mk-float{position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:8px 12px 8px 9px; border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--surface) 92%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border); box-shadow:var(--shadow-lg); font-size:11.5px; white-space:nowrap; animation:mkFloat 6s ease-in-out infinite}
.mk-float > i{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; background:var(--primary); font-style:normal; font-weight:800; font-size:12px}
.mk-float > i::before{content:"✓"}
.mk-float > i.g{background:var(--emerald-600)} .mk-float > i.a{background:var(--amber-500)} .mk-float > i.a::before{content:"!"}
.mk-float > i.r{background:var(--rose-500)} .mk-float > i.r::before{content:"!"} .mk-float > i.b::before{content:"↻"}
.mk-float > i.v{background:var(--violet-600)} .mk-float > i.v::before{content:"+"}
.mk-float .mk-txt b{font-size:11.5px; font-weight:800} .mk-float .mk-txt small{font-size:10px}
.mk-float.f1{top:2px; inset-inline-end:-6px} .mk-float.f2{bottom:6px; inset-inline-start:-10px; animation-delay:-3s}
@keyframes mkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mkSpin{to{transform:rotate(360deg)}}
@keyframes mkBlink{to{opacity:0}}
@keyframes mkOrb{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ .mk-float,.mk-face::before,.mk-scanline,.mk-orb,.mk-input .caret{animation:none} }

/* ---------- استجابة ---------- */
@media (max-width:980px){
  .fp-hero-grid,.fp-sec{grid-template-columns:minmax(0,1fr); gap:30px}
  .fp-sec:nth-child(even) .fp-sec-media{order:0}
  .fp-facts{grid-template-columns:minmax(0,1fr)}
  .fp-sec{padding:44px 0}
  .fp-sec-solo .fp-list{grid-template-columns:1fr}
  .fp-stage{padding:14px 0 12px}
  .mk-float.f1{inset-inline-end:4px; top:-10px} .mk-float.f2{inset-inline-start:4px; bottom:-8px}
}
@media (max-width:680px){
  /* على الهاتف الجهاز فوق وكلامه تحته (قرار المالك) — كالرئيسية. */
  .fp-hero-visual,.fp-sec .fp-sec-media,.fp-sec:nth-child(even) .fp-sec-media{order:-1}
  .fp-hero{padding:104px 0 32px}
  .mk-float{display:none}
  .mk-kpis{grid-template-columns:1fr 1fr}
  .mk-split{grid-template-columns:1fr}
  .mk-cols{grid-template-columns:1fr 1fr}
  .mk-inbox{grid-template-columns:1fr}
  .mk-grid{grid-template-columns:1fr 1fr}
  .mk-panes{height:180px}
  .mk-body{padding:12px}
  .mk-head{padding:10px 12px}
  .mk-alert{margin-inline:12px}
  .mk-table th,.mk-table td{padding:6px}
}