/* ============================================================================
   Codificah Hub v2 — طبقة هويّة **مستقلّة** لصفحة المعاينة وحدها (ar/preview.html).
   ----------------------------------------------------------------------------
   لا تُحمَّل في أيّ صفحة حيّة. والقاعدة مبدئيّة ومُجرَّبة: كلّ ما أُضيف سابقًا
   كـ«طبقة تجاوز عريضة» على hub.css أسقط ألوانًا معه. فالهويّة هنا ملفّ منفصل،
   والرموز (--bm-*) تُقرأ من barmejli.css كما هي ولا يُعاد تعريفها هنا.

   الفكرة العامّة: بنية الأقسام وترتيبها مستعاران من مرجع تصميميّ، واللون من
   هويّة Codificah Hub وحدها (سماويّ #00E5FF · أزرق #2D7DFF · بنفسجيّ #7C4DFF).
   ============================================================================ */

/* ==== ١) سلّم الطباعة — مقياس كبير كما في المرجع، بخطوط الموقع المحمَّلة ==== */
html[data-bm]:root .sec-head h2,
html[data-bm]:root .v2-h2{
  font-size:clamp(30px,4.3vw,58px) !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  line-height:1.12 !important;
}
html[data-bm]:root .sec-head .lead{ font-size:17.5px !important; max-width:68ch; margin-inline:auto; }
html[data-bm]:root .sec-head{ text-align:center; }
html[data-bm]:root .sec-head .eyebrow{ justify-content:center; }

/* ==== ٢) الواجهة (hero) — مركزية كالمرجع، مع توهّج شفق علويّ ==== */
html[data-bm]:root .v2-hero{ position:relative; overflow:hidden; }
html[data-bm]:root .v2-hero::before{
  content:""; position:absolute; inset:-24% 0 auto; height:560px; pointer-events:none;
  /* خُفِّف من .17/.14 إلى .10/.07: صار للصفحة شفقها العامّ، فلا يتضاعف السطوع. */
  background:
    radial-gradient(58% 100% at 50% 0%, rgba(0,229,255,.10), transparent 68%),
    radial-gradient(38% 80% at 78% 0%, rgba(124,77,255,.07), transparent 70%);
  z-index:0;
}
html[data-bm]:root .v2-hero .hero-in{ display:block; text-align:center; position:relative; z-index:1; }
html[data-bm]:root .v2-hero .hero-copy{ max-width:960px; margin-inline:auto; }
html[data-bm]:root .v2-hero .hm{
  font-size:clamp(30px,5.1vw,68px) !important;
  font-weight:900 !important;
  line-height:1.16 !important;
  letter-spacing:-.022em !important;
}
html[data-bm]:root .v2-hero .lead{ font-size:18px !important; max-width:70ch; margin-inline:auto; }
html[data-bm]:root .v2-hero .hero-cta{ justify-content:center; }
html[data-bm]:root .v2-hero .seal{ margin:38px auto 0; max-width:520px; }

/* ==== ٣) شبكة الرقائق (pills) — خدماتنا ٣×٢ ==== */
html[data-bm]:root .v2-pillgrid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
html[data-bm]:root .v2-pill{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px;
  padding:15px 20px; border-radius:999px; text-align:start;
  border:1px solid var(--bm-line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
html[data-bm]:root .v2-pill:hover{
  border-color:rgba(0,229,255,.48); transform:translateY(-2px);
  box-shadow:0 18px 44px -30px rgba(0,229,255,.85);
  background:linear-gradient(180deg,rgba(0,229,255,.09),rgba(0,229,255,.02));
}
html[data-bm]:root .v2-pill__ic{
  width:44px; height:44px; flex:none; border-radius:999px; display:grid; place-items:center;
  border:1px solid rgba(0,229,255,.28); background:rgba(0,229,255,.08); color:var(--bm-cyan);
}
html[data-bm]:root .v2-pill__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
html[data-bm]:root .v2-pill__t{ display:block; font-size:17px; font-weight:600; color:var(--bm-text); line-height:1.35; }
html[data-bm]:root .v2-pill__d{ display:block; margin-top:3px; font-size:12.5px; color:var(--bm-text-3); line-height:1.5; }

/* ==== ٤) قسم الثقة — رقائق التقنيات + العدّادات ==== */
html[data-bm]:root .v2-chips{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px;
}
html[data-bm]:root .v2-chip{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:66px; padding:10px 12px; border-radius:18px;
  border:1px solid var(--bm-line); background:rgba(255,255,255,.028);
  color:var(--bm-text-2); font-size:13.5px; font-weight:500; letter-spacing:.01em;
  transition:border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
html[data-bm]:root .v2-chip:hover{ color:var(--bm-text); border-color:rgba(0,229,255,.34); background:rgba(0,229,255,.05); }
html[data-bm]:root .v2-chip svg{ width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

html[data-bm]:root .v2-counters{
  margin-top:26px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--bm-line); border-radius:26px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
}
html[data-bm]:root .v2-counter{
  padding:28px 16px; text-align:center; border-inline-start:1px solid var(--bm-line);
}
html[data-bm]:root .v2-counter:first-child{ border-inline-start:0; }
html[data-bm]:root .v2-counter b{
  display:block; font-size:clamp(30px,3.4vw,44px); font-weight:800; line-height:1;
  background:linear-gradient(180deg,#EAF7FD 12%,#6FDDFF 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-bm]:root .v2-counter span{ display:block; margin-top:10px; font-size:12.5px; line-height:1.55; color:var(--bm-text-3); }
/* كـ`.v2-scen__cat`: 12px تحت الشفق على `--bm-text-3` → هامش ضيّق. لون أرفع. */
html[data-bm]:root .v2-note{ margin-top:14px; text-align:center; font-size:12px; color:var(--bm-text-2); }

/* ==== ٥) بطاقات السيناريو — «أيّها يشبه حالتك؟» ==== */
html[data-bm]:root .v2-scen{ columns:3; column-gap:14px; }
html[data-bm]:root .v2-scen__c{
  display:block; break-inside:avoid; margin:0 0 14px; padding:20px 20px 16px;
  border-radius:22px; border:1px solid var(--bm-line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
html[data-bm]:root .v2-scen__c:hover{
  border-color:rgba(0,229,255,.45); transform:translateY(-3px);
  box-shadow:0 24px 56px -34px rgba(0,229,255,.85);
}
html[data-bm]:root .v2-scen__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
html[data-bm]:root .v2-scen__ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  border:1px solid rgba(0,229,255,.26); background:rgba(0,229,255,.07); color:var(--bm-cyan);
}
html[data-bm]:root .v2-scen__ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* قِيس 4.27:1 تحت بقعة الشفق مباشرةً — أقلّ من 4.5. فصعد اللون درجةً إلى `--bm-text-2`
   (وهو نفس رمز `.v2-chip` الذي قِيس 9.21:1). ولم أُخفّض الشفق وحده لأنّ العيب كان في
   النصّ لا في الخلفيّة — والعتبة تُصلَح من الطرفين لا من طرف واحد. */
html[data-bm]:root .v2-scen__cat{ font-size:11.5px; color:var(--bm-text-2); letter-spacing:.02em; }
html[data-bm]:root .v2-scen__q{ display:block; margin-top:14px; font-size:16.5px; font-weight:600; line-height:1.62; color:var(--bm-text); }
html[data-bm]:root .v2-scen__go{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:13px; border-top:1px solid var(--bm-line);
  font-size:13px; color:var(--bm-cyan);
}
html[data-bm]:root .v2-scen__go .plus{ font-size:17px; line-height:1; }

/* ==== ٦) بطاقات الأعمال — أطول وأكثر استدارة ==== */
html[data-bm]:root .work{ border-radius:28px; }
html[data-bm]:root .work .mark-plate{ border-radius:22px; }
html[data-bm]:root .work:hover{ box-shadow:0 30px 74px -40px rgba(0,229,255,.85); }

/* ==== ٧) القفز بالمرساة — لا يختفي العنوان تحت الهيدر الثابت ====
   قِيس: هيدر ٧٧px، وكان `scroll-margin-top:0` فاختفى أعلى `#works` و`#how` تحته. */
html[data-bm]:root main > section[id]{ scroll-margin-top:96px; }
@media (max-width:640px){
  html[data-bm]:root main > section[id]{ scroll-margin-top:88px; }
}

/* ==== ٨) الجوال ==== */
@media (max-width:1024px){
  html[data-bm]:root .v2-pillgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-bm]:root .v2-scen{ columns:2; }
  html[data-bm]:root .v2-counters{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-bm]:root .v2-counter:nth-child(3){ border-inline-start:0; }
  html[data-bm]:root .v2-counter:nth-child(n+3){ border-top:1px solid var(--bm-line); }
}
@media (max-width:640px){
  html[data-bm]:root .v2-pillgrid{ grid-template-columns:1fr; }
  html[data-bm]:root .v2-scen{ columns:1; }
  /* العدّادات: صفّان × عمودان. وكانت `1fr` فصارت أربعة صفوف — والمرجع صفّان. */
  html[data-bm]:root .v2-counters{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-bm]:root .v2-counter{ border-inline-start:1px solid var(--bm-line); border-top:0; }
  html[data-bm]:root .v2-counter:nth-child(odd){ border-inline-start:0; }
  html[data-bm]:root .v2-counter:nth-child(n+3){ border-top:1px solid var(--bm-line); }
  html[data-bm]:root .v2-pill{ padding:13px 15px; gap:12px; }
  html[data-bm]:root .v2-pill__d{ font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .v2-pill:hover,
  html[data-bm]:root .v2-scen__c:hover{ transform:none; }
}

/* ============================================================================
   ٩) خلفية متحرّكة — أعمدة أكواد شفّافة + نوافذ طرفيّة عائمة + شبكة خفيفة
   ----------------------------------------------------------------------------
   المبادئ التي بُنيت عليها:
   • **لا حركة تُزهق الأداء:** كلّ ما يُحرَّك `transform` فقط (لا `width`/`top`)،
     و`will-change` على المسارات المتحرّكة وحدها. ولا `filter:blur()` على الكتل
     الكبيرة — التدرّج الشعاعيّ ناعم بطبعه، والضبابة كانت ستُكلّف معالج الرسم بلا فائدة.
   • **الشفافية محسوبة لا مذوّقة:** أعلى قيمة في طبقة الأكواد .34 وأدناها .22،
     والشبكة .14 — فيبقى التباين فوق الحدّ بعد تركيبها (يُقاس بعد كلّ تغيير).
   • **لا يُعلن للقارئ الآليّ:** الطبقة `aria-hidden` و`pointer-events:none`،
     وتُوقف تمامًا عند `prefers-reduced-motion`.
   • **`translate="no"` + `direction:ltr`:** تعلُّم مُكلِّف سابقًا — مترجم كروم
     العائم يُفسد الأكواد والشعارات، فتُستثنى صراحةً.
   ============================================================================ */

html[data-bm]:root .v2-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  contain:strict;
}
/* المحتوى فوق الطبقة. صريحًا — لا اعتمادًا على ترتيب الرسم الافتراضيّ. */
html[data-bm]:root main#main,
html[data-bm]:root footer.band--footer{ position:relative; z-index:1; }

/* ---- ٩-أ الشفق: ثلاث هالات تدرّج تنساب ببطء ----
   خُفِّضت من .26/.22/.20 إلى .22/.18/.16: قِيس تحت أسوأ بقعة 4.27:1 على نصّ صغير،
   فالعتبة تُصلَح من الطرفين — نصًّا أرفع وشفقًا أخفّ — لا من طرف واحد. */
html[data-bm]:root .v2-bg__blob{
  position:absolute; border-radius:50%; mix-blend-mode:screen;
}
html[data-bm]:root .v2-bg__blob.b1{
  width:58vw; height:58vw; top:-20vw; inset-inline-start:-12vw;
  background:radial-gradient(circle at 50% 50%, rgba(0,229,255,.22), rgba(0,229,255,0) 66%);
  animation:bm-blob-a 28s ease-in-out infinite alternate;
}
html[data-bm]:root .v2-bg__blob.b2{
  width:48vw; height:48vw; top:4vh; inset-inline-end:-14vw;
  background:radial-gradient(circle at 50% 50%, rgba(124,77,255,.18), rgba(124,77,255,0) 68%);
  animation:bm-blob-b 36s ease-in-out infinite alternate;
}
html[data-bm]:root .v2-bg__blob.b3{
  width:42vw; height:42vw; bottom:-16vw; inset-inline-start:30vw;
  background:radial-gradient(circle at 50% 50%, rgba(45,125,255,.16), rgba(45,125,255,0) 70%);
  animation:bm-blob-c 32s ease-in-out infinite alternate;
}
@keyframes bm-blob-a{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(7vw,5vh,0) scale(1.14) } }
@keyframes bm-blob-b{ from{ transform:translate3d(0,0,0) scale(1.06) } to{ transform:translate3d(-6vw,6vh,0) scale(1) } }
@keyframes bm-blob-c{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-5vw,-5vh,0) scale(1) } }

/* ---- ٩-ب الشبكة: انزياح بطيء يعطي عمقًا ---- */
html[data-bm]:root .v2-bg__grid{
  position:absolute; inset:-30% -10%; opacity:.14; will-change:transform;
  background-image:
    linear-gradient(rgba(0,229,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.5) 1px, transparent 1px);
  background-size:68px 68px, 68px 68px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 26%, #000 0%, transparent 76%);
  mask-image:radial-gradient(70% 62% at 50% 26%, #000 0%, transparent 76%);
  animation:bm-grid 24s linear infinite;
}
@keyframes bm-grid{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,68px,0) } }

/* ---- ٩-ج أعمدة الأكواد: العمود اربع مرّات، والمسار يتحرّك بنصف ارتفاعه ---- */
html[data-bm]:root .v2-bg__code{
  position:absolute; inset:0;
  display:flex; justify-content:space-between;
  direction:ltr; text-align:left;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
}
/* عرض العمود ١٩% = ~٢٧٤px عند 1440، وخطّ 11.5px ⇒ **~٣٩ حرفًا** في السطر. ومقطع
   الأكواد في `build_bg.py` كلّه ≤ ٣٩ حرفًا، فلذلك لا يُقتطع رمز في منتصفه.
   ومع ذلك يُلطَّف الطرف بتلاشٍ — فلو طال سطرٌ يومًا لا يظهر قطعٌ حادّ. */
html[data-bm]:root .v2-bg__col{
  width:19%; height:100%; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 84%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 84%, transparent 100%);
}
/* الحركة على **المسار** داخل عمود مقصوص — لا على العمود نفسه. ولو حُرِّك العمود
   لانزلق صندوقه المرئيّ بكامله خارج الشاشة بدل أن ينزلق النصّ داخله.
   والمسار يحمل **نسختين متطابقتين**، فـ`-50%` يساوي ارتفاع نسخة واحدة ⇒ التكرار
   بلا قَطْع. و`min-height:100vh` يضمن أن نسختين تغطّيان الشاشة على الشاشات العالية. */
html[data-bm]:root .v2-bg__track{ position:absolute; inset-inline:0; top:0; will-change:transform; }
html[data-bm]:root .v2-bg__track pre{
  margin:0; font-size:11.5px; line-height:2.05; color:inherit;
  min-height:100vh;
  /* `!important` مقصود: قِيس `white-space:normal` فعليًّا — أي أنّ قاعدة أخرى في
     `hub.css` تغلبه، فيلتفّ الكود ويصير مُشوَّشًا. والسطر الطويل يُقصّ عند حدّ العمود
     (الملطَّف بتلاشٍ) وهو أنظف من الالتفاف. */
  white-space:pre !important;
  word-break:normal !important; overflow-wrap:normal !important;
}
html[data-bm]:root .v2-bg__col.c1{ color:rgba(0,229,255,.34); }
html[data-bm]:root .v2-bg__col.c2{ color:rgba(45,125,255,.30); }
html[data-bm]:root .v2-bg__col.c3{ color:rgba(124,77,255,.28); }
html[data-bm]:root .v2-bg__col.c4{ color:rgba(0,229,255,.22); }
html[data-bm]:root .v2-bg__col.c1 .v2-bg__track{ animation:bm-code 54s linear infinite; }
html[data-bm]:root .v2-bg__col.c2 .v2-bg__track{ animation:bm-code 72s linear infinite; animation-delay:-18s; }
html[data-bm]:root .v2-bg__col.c3 .v2-bg__track{ animation:bm-code 63s linear infinite; animation-delay:-31s; }
html[data-bm]:root .v2-bg__col.c4 .v2-bg__track{ animation:bm-code 88s linear infinite; animation-delay:-9s; }
@keyframes bm-code{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,-50%,0) } }

/* ---- ٩-د نوافذ طرفيّة عائمة ---- */
html[data-bm]:root .v2-bg__win{
  position:absolute; border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,229,255,.16);
  background:linear-gradient(180deg, rgba(9,15,24,.5), rgba(9,15,24,.24));
  box-shadow:0 26px 64px -34px rgba(0,229,255,.55);
  opacity:.62; will-change:transform;
}
html[data-bm]:root .v2-bg__win .bar{
  display:flex; gap:5px; align-items:center; padding:8px 11px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
html[data-bm]:root .v2-bg__win .bar i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }
html[data-bm]:root .v2-bg__win .bar i:first-child{ background:rgba(0,229,255,.55); }
html[data-bm]:root .v2-bg__win pre{
  margin:0; padding:11px 13px; font-size:11px; line-height:1.95; color:rgba(0,229,255,.5);
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction:ltr; text-align:left; white-space:pre !important;
}
html[data-bm]:root .v2-bg__win.w1{ width:252px; top:15%; inset-inline-start:2.5%; animation:bm-win-a 44s ease-in-out infinite alternate; }
html[data-bm]:root .v2-bg__win.w2{ width:212px; bottom:14%; inset-inline-end:3.5%; animation:bm-win-b 56s ease-in-out infinite alternate; }
html[data-bm]:root .v2-bg__win.w3{ width:186px; top:52%; inset-inline-start:8%; animation:bm-win-a 62s ease-in-out infinite alternate-reverse; }
@keyframes bm-win-a{ from{ transform:translate3d(0,0,0) rotate(-1.6deg) } to{ transform:translate3d(1.4vw,-3vh,0) rotate(1.2deg) } }
@keyframes bm-win-b{ from{ transform:translate3d(0,0,0) rotate(1.4deg) } to{ transform:translate3d(-1.2vw,3vh,0) rotate(-1.1deg) } }

/* النوافذ تنافس المحتوى على الشاشات الضيّقة — تُخفى تحتها. */
@media (max-width:1180px){
  html[data-bm]:root .v2-bg__win.w1,
  html[data-bm]:root .v2-bg__win.w3{ display:none; }
}
@media (max-width:900px){
  html[data-bm]:root .v2-bg__win{ display:none; }
  html[data-bm]:root .v2-bg__col{ width:26%; }
  html[data-bm]:root .v2-bg__col.c2,
  html[data-bm]:root .v2-bg__col.c4{ display:none; }
  html[data-bm]:root .v2-bg__track pre{ font-size:11px; }
}

/* إيقاف تامّ لمن يطلب تقليل الحركة — والطبقة تبقى مرئيّة ساكنةً. */
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .v2-bg__blob,
  html[data-bm]:root .v2-bg__grid,
  html[data-bm]:root .v2-bg__col,
  html[data-bm]:root .v2-bg__track,
  html[data-bm]:root .v2-bg__win{ animation:none !important; }
}

/* ============================================================================
   ١٠) الترويسة — كبسولة عائمة بطريقة المرجع، ونمط لغويّ ومفتاح نمط وقائمة
   ----------------------------------------------------------------------------
   الترويسة القديمة تُخفى ولا تُحذف: حذفها يكسر سكربتاتها. والجديدة مستقلّة تمامًا
   فتُتحكَّم بلا مخاطرة، وبمعرّفات مختلفة (`v2Nav`/`v2MenuBtn`) فلا تتصادم.
   ============================================================================ */
html[data-bm]:root .hdr{ display:none !important; }
html[data-bm]:root main#main{ padding-top:104px; }
html[data-bm]:root main > section[id]{ scroll-margin-top:118px; }

html[data-bm]:root .v2-hdr{
  position:fixed; inset-inline:0; top:16px; z-index:95; padding-inline:16px;
  pointer-events:none;
}
html[data-bm]:root .v2-hdr__in{
  pointer-events:auto;
  max-width:1180px; margin-inline:auto; min-height:62px;
  display:flex; align-items:center; gap:14px;
  padding:8px 10px 8px 14px; border-radius:999px;
  border:1px solid var(--bm-line);
  background:linear-gradient(180deg, rgba(10,17,27,.86), rgba(6,10,18,.72));
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 20px 50px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(0,229,255,.05) inset;
}
html[data-bm]:root .v2-brand{
  display:flex; align-items:center; gap:9px; flex:none; text-decoration:none;
}
html[data-bm]:root .v2-brand__mk{
  width:30px; height:30px; fill:none; stroke:var(--bm-cyan); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.6));
}
html[data-bm]:root .v2-brand__nm{
  font-weight:700; font-size:16px; letter-spacing:.01em; color:var(--bm-text);
}
html[data-bm]:root .v2-nav{
  display:flex; align-items:center; gap:2px; margin-inline-start:10px;
}
html[data-bm]:root .v2-nav a{
  padding:9px 13px; border-radius:999px; font-size:14.5px; font-weight:500;
  color:var(--bm-text-2); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
html[data-bm]:root .v2-nav a:hover,
html[data-bm]:root .v2-nav a:focus-visible{ color:var(--bm-text); background:rgba(0,229,255,.09); }
html[data-bm]:root .v2-hdr__end{
  display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex:none;
}
html[data-bm]:root .v2-ic{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--bm-line); background:rgba(255,255,255,.03);
  color:var(--bm-text-2); cursor:pointer; transition:color .2s, border-color .2s, background-color .2s;
}
html[data-bm]:root .v2-ic:hover{ color:var(--bm-cyan); border-color:rgba(0,229,255,.42); background:rgba(0,229,255,.08); }
html[data-bm]:root .v2-ic svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
html[data-bm]:root .v2-ic__moon{ display:none; }

html[data-bm]:root .v2-lang{
  padding:8px 12px; border-radius:999px; border:1px solid var(--bm-line);
  font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--bm-text-2);
  text-decoration:none; transition:color .2s, border-color .2s;
}
html[data-bm]:root .v2-lang:hover{ color:var(--bm-text); border-color:rgba(0,229,255,.42); }
html[data-bm]:root .v2-cta{ padding:10px 18px !important; font-size:14.5px !important; }
html[data-bm]:root .v2-burger{
  display:none; width:40px; height:38px; border-radius:999px; cursor:pointer;
  border:1px solid var(--bm-line); background:rgba(255,255,255,.03);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
html[data-bm]:root .v2-burger span{
  display:block; width:17px; height:1.8px; border-radius:2px; background:var(--bm-text-2);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
html[data-bm]:root .v2-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.4px) rotate(45deg); }
html[data-bm]:root .v2-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.4px) rotate(-45deg); }

@media (max-width:1024px){
  html[data-bm]:root .v2-burger{ display:flex; }
  html[data-bm]:root .v2-cta{ display:none; }
  html[data-bm]:root .v2-nav{
    position:absolute; inset-inline:12px; top:calc(100% + 10px);
    flex-direction:column; align-items:stretch; gap:4px; margin:0; padding:12px;
    border-radius:24px; border:1px solid var(--bm-line);
    background:linear-gradient(180deg, rgba(10,17,27,.97), rgba(6,10,18,.95));
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    box-shadow:0 30px 70px -40px rgba(0,0,0,.95);
    display:none;
  }
  html[data-bm]:root .v2-nav.is-open{ display:flex; }
  html[data-bm]:root .v2-nav a{ padding:12px 14px; font-size:15.5px; }
}

/* ============================================================================
   ١١) شريط الشعار — فوق قسم البطل وتحت الترويسة
   ============================================================================ */
html[data-bm]:root .v2-logoband{
  padding:26px 0 6px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
html[data-bm]:root .v2-logoband__hint{
  font-size:12.5px; color:var(--bm-text-3); letter-spacing:.02em;
}

/* ---- توهّج/لمعان النصّ — يحلّ محلّ وميض الحروف، ويعمل للعربية ----
   وميض الشعار يقسم الكلمة إلى **حروف منفردة** (B·a·r·m·e·j·l·i). والعربيّة لا
   تحتمل ذلك: الحرف يتّخذ شكله من جيرانه ويوصل بهم، وقطعُه يُفرده فيفسد الرسم
   والاتجاه. فالتأثير هنا يُطبَّق على **العنصر كلّه** لا على حروفه:
   `background-clip:text` يل painting بتدرّج متحرّك، و`filter` يُضيف هالة —
   وكلاهما لا يمسّ النصّ ولا ترتيب حروفه، فيبقى الشكل والاتصال كما هما.
   وقيم التدرّج واحدة للعربية واللاتينيّة (لا تُبنى على `ch` ولا على حروف). */
html[data-bm]:root .sec-head h2,
html[data-bm]:root .v2-hero .hm,
html[data-bm]:root .v2-logoband .sec-head h2{
  background-image:linear-gradient(100deg,
    #EAF7FD 0%, #EAF7FD 34%, #7FE6FF 46%, #A78BFF 54%, #EAF7FD 66%, #EAF7FD 100%);
  background-size:280% 100%; background-repeat:no-repeat; background-position:120% 50%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bm-shine 9s ease-in-out infinite;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.16));
}
@keyframes bm-shine{
  0%{ background-position:120% 50%; filter:drop-shadow(0 0 14px rgba(0,229,255,.10)); }
  45%{ background-position:-20% 50%; filter:drop-shadow(0 0 26px rgba(0,229,255,.26)); }
  100%{ background-position:-120% 50%; filter:drop-shadow(0 0 14px rgba(0,229,255,.10)); }
}
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .sec-head h2,
  html[data-bm]:root .v2-hero .hm{ animation:none; background-position:50% 50%; }
}

/* ============================================================================
   ١٢) دوّار الأعمال (منتجاتنا)
   ============================================================================ */
html[data-bm]:root .v2-stage{
  display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:26px; align-items:center; padding:22px; border-radius:32px;
  border:1px solid var(--bm-line); background:var(--bm-card);
  box-shadow:var(--bm-glow-soft);
}
html[data-bm]:root .v2-stage__code{
  display:inline-block; padding:5px 11px; border-radius:999px; font-size:12px;
  letter-spacing:.09em; color:var(--bm-cyan); border:1px solid rgba(0,229,255,.3);
  background:rgba(0,229,255,.08);
}
html[data-bm]:root .v2-stage__name{
  margin:15px 0 0; font-size:clamp(24px,2.5vw,34px) !important; line-height:1.25;
  color:var(--bm-text);
}
html[data-bm]:root .v2-stage__tag{ margin:12px 0 0; font-size:16.5px; line-height:1.75; color:var(--bm-text-2); }
html[data-bm]:root .v2-stage__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

html[data-bm]:root .v2-stage__media{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--bm-line); background:#060A10;
  box-shadow:0 40px 90px -50px rgba(0,229,255,.7);
}
html[data-bm]:root .v2-chrome{
  display:flex; align-items:center; gap:6px; padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.07); direction:ltr;
}
html[data-bm]:root .v2-chrome i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
html[data-bm]:root .v2-chrome i:first-child{ background:rgba(0,229,255,.6); }
html[data-bm]:root .v2-chrome span{
  margin-inline-start:8px; font-size:11.5px; letter-spacing:.03em; color:var(--bm-text-3);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-bm]:root .v2-shot{ position:relative; aspect-ratio:16/10; overflow:hidden; }
html[data-bm]:root .v2-shot picture{ display:block; width:100%; height:100%; }
html[data-bm]:root .v2-shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  animation:bm-shot .7s var(--ease) both;
}
@keyframes bm-shot{ from{ opacity:0; transform:scale(1.03) } to{ opacity:1; transform:none } }
html[data-bm]:root .v2-shotdots{
  position:absolute; inset-inline:0; bottom:10px; display:flex; justify-content:center; gap:6px;
}
html[data-bm]:root .v2-shotdots button{
  width:22px; height:4px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background-color .25s, width .25s;
}
html[data-bm]:root .v2-shotdots button.is-on{ background:var(--bm-cyan); width:34px; }
html[data-bm]:root .v2-stage__ph{
  width:100%; height:100%;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(0,229,255,.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
}
html[data-bm]:root .v2-nav-ctl{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
html[data-bm]:root .v2-nav-ctl button{
  min-width:40px; height:38px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--bm-line); background:rgba(255,255,255,.03);
  color:var(--bm-text-2); font-size:14px; transition:color .2s, border-color .2s;
}
html[data-bm]:root .v2-nav-ctl button:hover{ color:var(--bm-cyan); border-color:rgba(0,229,255,.42); }
html[data-bm]:root .v2-nav-ctl .v2-dots{ display:flex; gap:8px; }
html[data-bm]:root .v2-nav-ctl .v2-dots button{ min-width:9px; width:9px; height:9px; padding:0; border-radius:50%; }
html[data-bm]:root .v2-nav-ctl .v2-dots button.is-on{ background:var(--bm-cyan); border-color:var(--bm-cyan); }
@media (max-width:900px){
  html[data-bm]:root .v2-stage{ grid-template-columns:1fr; gap:18px; padding:16px; border-radius:26px; }
  html[data-bm]:root .v2-stage__media{ order:-1; }
}

/* ============================================================================
   ١٣) نافذة المحادثة
   ============================================================================ */
html[data-bm]:root .v2-chat{
  max-width:820px; margin-inline:auto; border-radius:26px; overflow:hidden;
  border:1px solid var(--bm-line); background:var(--bm-card); box-shadow:var(--bm-glow-soft);
}
html[data-bm]:root .v2-chat__head{
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--bm-line); background:rgba(255,255,255,.02);
}
html[data-bm]:root .v2-chat__head .dots{ display:flex; gap:5px; }
html[data-bm]:root .v2-chat__head .dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
html[data-bm]:root .v2-chat__head .dots i:first-child{ background:rgba(0,229,255,.55); }
html[data-bm]:root .v2-chat__ttl{ font-size:13px; color:var(--bm-text-2); }
html[data-bm]:root .v2-chat__badge{
  margin-inline-start:auto; font-size:11px; padding:4px 10px; border-radius:999px;
  color:var(--bm-text-3); border:1px solid var(--bm-line);
}
html[data-bm]:root .v2-chat__body{
  height:392px; overflow-y:auto; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}
html[data-bm]:root .v2-msg{ display:flex; align-items:flex-end; gap:9px; max-width:88%; }
html[data-bm]:root .v2-msg--c{ align-self:flex-start; }
html[data-bm]:root .v2-msg--b,
html[data-bm]:root .v2-msg--typing{ align-self:flex-end; flex-direction:row-reverse; }
html[data-bm]:root .v2-av{
  width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; color:var(--bm-cyan);
  border:1px solid rgba(0,229,255,.3); background:rgba(0,229,255,.08);
}
html[data-bm]:root .v2-av--bm{
  font-size:11px; letter-spacing:-.02em;
  border-color:rgba(124,77,255,.42); background:rgba(124,77,255,.12); color:#C6B2FF;
}
html[data-bm]:root .v2-bub{
  padding:11px 14px; border-radius:16px; border:1px solid var(--bm-line);
  background:rgba(255,255,255,.035); line-height:1.7;
  animation:bm-bub .38s var(--ease) both;
}
@keyframes bm-bub{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
html[data-bm]:root .v2-bub--bm{ background:rgba(0,229,255,.07); border-color:rgba(0,229,255,.24); }
html[data-bm]:root .v2-bub__cat{
  display:block; margin-bottom:5px; font-size:11px; letter-spacing:.03em; color:var(--bm-text-3);
}
html[data-bm]:root .v2-bub__q{ display:block; font-size:15px; font-weight:600; color:var(--bm-text); }
html[data-bm]:root .v2-bub--bm{ font-size:15px; color:var(--bm-text); }
html[data-bm]:root .v2-bub--typing{ display:flex; gap:5px; padding:14px; }
html[data-bm]:root .v2-bub--typing i{
  width:6px; height:6px; border-radius:50%; background:var(--bm-text-3);
  animation:bm-typing 1.1s ease-in-out infinite;
}
html[data-bm]:root .v2-bub--typing i:nth-child(2){ animation-delay:.16s; }
html[data-bm]:root .v2-bub--typing i:nth-child(3){ animation-delay:.32s; }
@keyframes bm-typing{ 0%,60%,100%{ opacity:.28; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
html[data-bm]:root .v2-chat__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:center;
  padding:16px; border-top:1px solid var(--bm-line); background:rgba(255,255,255,.02);
}
html[data-bm]:root .v2-chat__replay{
  background:none; border:0; cursor:pointer; font-size:13px; color:var(--bm-text-3);
  text-decoration:underline; text-underline-offset:4px;
}
html[data-bm]:root .v2-chat__replay:hover{ color:var(--bm-cyan); }
@media (max-width:640px){
  html[data-bm]:root .v2-chat__body{ height:340px; }
  html[data-bm]:root .v2-msg{ max-width:96%; }
}

/* ============================================================================
   ١٤) لمسة على «كيف نعمل» — ترتيب بصريّ أعلى، بلا مسّ منطق المحرّك القائم
   ============================================================================ */
html[data-bm]:root .rail .step{ transition:transform .3s var(--ease), border-color .3s var(--ease); }
html[data-bm]:root .rail .step:hover{ transform:translateY(-3px); border-color:rgba(0,229,255,.35); }
html[data-bm]:root .rail .step-idx{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  filter:drop-shadow(0 0 10px rgba(0,229,255,.35));
}

/* ============================================================================
   ١٥) الفوتر — بناء جديد: شعار متحرّك + أعمدة + شريط أوامر تفاعليّ
   ============================================================================ */
html[data-bm]:root .v2-foot{ border-top:1px solid var(--bm-line); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
html[data-bm]:root .v2-foot__top{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr); gap:34px;
  padding:54px 0 34px;
}
html[data-bm]:root .v2-foot__say{ font-size:19px; line-height:1.8; color:var(--bm-text-2); margin:18px 0 20px; }
html[data-bm]:root .v2-foot__cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
html[data-bm]:root .v2-foot__cols h4{
  margin:0 0 12px; font-size:13px; letter-spacing:.05em; color:var(--bm-text-3);
  font-weight:600;
}
html[data-bm]:root .v2-foot__cols a{
  display:block; padding:5px 0; font-size:14.5px; color:var(--bm-text-2); text-decoration:none;
  transition:color .2s, transform .2s var(--ease);
}
html[data-bm]:root .v2-foot__cols a:hover{ color:var(--bm-cyan); transform:translateX(-3px); }
html[data-bm]:root .v2-term{
  margin:0 0 26px; padding:16px 18px; border-radius:18px;
  border:1px solid var(--bm-line); background:rgba(3,6,11,.55);
  direction:ltr; text-align:left;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-bm]:root .v2-term__ln{ display:block; font-size:12.5px; line-height:2.1; color:var(--bm-text-3); }
html[data-bm]:root .v2-term__ln b{ color:var(--bm-cyan); font-weight:500; }
html[data-bm]:root .v2-term__cmds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; direction:rtl; }
html[data-bm]:root .v2-term__cmds a{
  padding:7px 12px; border-radius:999px; font-size:12.5px; text-decoration:none;
  border:1px solid var(--bm-line); color:var(--bm-text-2);
  direction:ltr; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition:color .2s, border-color .2s, background-color .2s;
}
html[data-bm]:root .v2-term__cmds a:hover{
  color:var(--bm-cyan); border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.07);
}
html[data-bm]:root .v2-foot__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:18px 0 40px; border-top:1px solid var(--bm-line);
  font-size:12.5px; color:var(--bm-text-3);
}
html[data-bm]:root .v2-foot__bar .sep{ opacity:.4; }
html[data-bm]:root .v2-foot__bar .live{
  display:inline-flex; align-items:center; gap:7px; margin-inline-start:auto;
}
html[data-bm]:root .v2-foot__bar .live i{
  width:7px; height:7px; border-radius:50%; background:#3DDC97;
  box-shadow:0 0 0 0 rgba(61,220,151,.6); animation:bm-live 2.4s ease-out infinite;
}
@keyframes bm-live{ 0%{ box-shadow:0 0 0 0 rgba(61,220,151,.55) } 100%{ box-shadow:0 0 0 10px rgba(61,220,151,0) } }
@media (max-width:900px){
  html[data-bm]:root .v2-foot__top{ grid-template-columns:1fr; gap:26px; padding:40px 0 26px; }
  html[data-bm]:root .v2-foot__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .v2-foot__bar .live i{ animation:none; }
}

/* ============================================================================
   ١٨) عناصر مخفيّة بلا سبب — إصلاح مُقاس
   ----------------------------------------------------------------------------
   قِيس أنّ **١٥ من ٢٨** عنصرًا يحمل `.rv` بقي `opacity:0`، وأنّ نافذة المحادثة لم
   تبدأ أصلًا، وأنّ `.v2-stage` بقي فارغًا: لأنّ كشف `.rv` يعتمد على مراقب تقاطع
   لا يُطلق في تبويب غير مُقدَّم، ولأنّ حاوياتي تُملأ بالـJS **بعد** القياس.
   والعلاج: مكوّناتي **ظاهرة افتراضًا** — فالحركة تُضاف ولا يُبنى الظهور عليها.
   (وهو نفس المبدأ الذي بُني عليه محرّك «كيف نعمل»: لا نُخفي ما يعتمد ظهوره على JS.)
   ============================================================================ */
html[data-bm]:root .v2-logoband .rv,
html[data-bm]:root .v2-logoband [data-rv],
html[data-bm]:root #works .rv,
html[data-bm]:root #works [data-rv],
html[data-bm]:root #situations .rv,
html[data-bm]:root #situations [data-rv],
html[data-bm]:root .v2-stage,
html[data-bm]:root .v2-stage [data-rv],
html[data-bm]:root .v2-chat,
html[data-bm]:root .v2-chat [data-rv]{
  opacity:1 !important; transform:none !important; visibility:visible !important;
  animation:none !important;
}
/* لكن يبقى الظهور التدريجيّ لعنوان القسم، بلا اعتماد على المراقب */
@keyframes bm-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
html[data-bm]:root #works .sec-head,
html[data-bm]:root #situations .sec-head,
html[data-bm]:root .v2-stage,
html[data-bm]:root .v2-chat{ animation:bm-in .55s var(--ease) both !important; }
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root #works .sec-head,
  html[data-bm]:root #situations .sec-head,
  html[data-bm]:root .v2-stage,
  html[data-bm]:root .v2-chat{ animation:none !important; }
}

/* النمط النهاريّ: تسمية صريحة لمؤشّر الحالة بدل الاعتماد على لون الرمز */
html[data-bm]:root .v2-foot__bar .live span{ white-space:nowrap; }

/* ============================================================================
   ٢٠) وقاية أخيرة: البطل — لا يُبنى ظهوره على مراقب تقاطع
   قِيس أنّ كشف `.rv` لا يُطلق في تبويب غير مُقدَّم؛ ولو حدث ذلك للزائر لرأى
   صفحةً فارغة أعلاه. والبطل أوّل ما يُرى، فلا يُخاطَر به.
   ============================================================================ */
html[data-bm]:root .v2-hero .rv,
html[data-bm]:root .v2-hero [data-rv]{
  opacity:1 !important; transform:none !important; visibility:visible !important;
  animation:bm-in .6s var(--ease) both !important;
}
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .v2-hero .rv,
  html[data-bm]:root .v2-hero [data-rv]{ animation:none !important; }
}

/* ============================================================================
   ٢١) الشعار: الاتجاه في كلّ موضع، ولوح خلفه نهارًا
   ----------------------------------------------------------------------------
   سبب «الكلمة بالمقلوب في الفوتر» مقيس: `direction:ltr` مضبوط في barmejli.css
   على `.bm-mark barmejli-logo` **وحده** (شعار الأعلى). والكلمة تُبنى من حروف
   منفصلة في صفّ flex، فداخل سياق RTL تُرتَّب من اليسار إلى اليمين مقلوبةً.
   فالعلاج: الاتجاه يُفرض على **كلّ** عنصر شعار، في أيّ موضع.
   ولون الشعار `#00E5FF` مكتوب **داخل Shadow DOM** فلا يُغيَّر من خارجه — والحلّ
   ما اقترحتَه: **لوح خلفه**، فيبقى السماويّ مقروءًا وتظهر هالته.
   ============================================================================ */
html[data-bm]:root barmejli-logo{ direction:ltr !important; unicode-bidi:isolate !important; }
html[data-bm]:root .bm-mark barmejli-logo,
html[data-bm]:root .v2-logoband barmejli-logo,
html[data-bm]:root .v2-foot barmejli-logo{ display:inline-flex !important; }

/* ============================================================================
   ٢٤) الإيقاع داخل الداكن — بدل النمط النهاريّ المحذوف
   ----------------------------------------------------------------------------
   سبب وجود النهار أصلًا كان **التنويع**: ألّا تبدو الصفحة أرضيّة واحدة مسطّحة.
   وذلك يُعالَج داخل الهويّة نفسها بثلاث درجات أرضيّة، لا بهويّة ثانية تُقاتَل:
     works   #060A11  (ارتفاع خفيف عن الأرضيّة)
     quote   #0A1018→#060A11  (أعمق موضع في الصفحة)
     footer  #070C14→#04070C  (هبوط تدريجيّ إلى الأرضيّة الأمّ)
   والفرق مقصود أن يكون **ملحوظًا لا صارخًا**: ٢–٦ درجات في القناة، مع خطّ شعرة
   فاصل. فالانتقال يُحسّ ولا يُرى.
   ============================================================================ */
html[data-bm]:root .band--works{
  background:#060A11;
  border-top:1px solid rgba(255,255,255,.05);
}
html[data-bm]:root .band--quote{
  background:linear-gradient(180deg,#0A1018,#060A11);
  border-top:1px solid rgba(0,229,255,.10);
}
html[data-bm]:root .band--footer{
  background:linear-gradient(180deg,#070C14,#04070C);
  border-top:1px solid rgba(255,255,255,.06);
}
/* الأرضيّة الأمّ تبقى #04070C فتظلّ هي المرجع، والباقي يرتفع عنها */
html[data-bm]:root body{ background:#04070C; }

/* ============================================================================
   ٢٥) إعادة البناء — على أساس ٢٠ موقعًا عالميًّا قيسَت فعليًّا
   ----------------------------------------------------------------------------
   كلّ بند هنا له سند مقيس من الجولة (الأرقام في «مقترحات-إعادة-البناء»):
     • شارة إعلان صغيرة فوق العنوان .................. (fun.xyz · gitbook · nuxt)
     • كلمة واحدة بلون العلامة داخل العنوان ......... (٢ موقعًا)
     • شريحة أمر قابلة للنسخ بجانب الأزرار .......... (nuxt.studio)
     • لقطة المنتج الكبيرة في إطار متصفّح + تبويبات مرقّمة .... (٥/١٠ · ٣/١٠)
     • فوتر بلون العلامة ............................. (١/١٠ — set.space)
     • كشف بالتمرير موثوق ............................ (٨/١٠)
   والقاعدة الحاكمة: **البصمة تُبقى والمألوف يُتبع** — فأعمدة الأكواد والمحادثة
   تبقى (لا أحد في العشرين يفعلها)، والترتيب والتبويبات والفوتر تُتبع فيها الغالب.
   ============================================================================ */

/* ---- ٢٥-أ شارة الإعلان فوق العنوان ---- */
html[data-bm]:root .v3-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 10px; margin-bottom:18px;
  border:1px solid rgba(0,229,255,.28); border-radius:999px;
  background:linear-gradient(90deg, rgba(0,229,255,.10), rgba(124,77,255,.09));
  color:var(--bm-text-2); font-size:13px; text-decoration:none; white-space:nowrap;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
html[data-bm]:root .v3-pill:hover{ border-color:rgba(0,229,255,.55); transform:translateY(-1px); }
html[data-bm]:root .v3-pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--bm-cyan); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(0,229,255,.5); animation:bm-pulse 2.4s var(--ease) infinite;
}
@keyframes bm-pulse{
  0%{ box-shadow:0 0 0 0 rgba(0,229,255,.5) }
  70%{ box-shadow:0 0 0 7px rgba(0,229,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(0,229,255,0) }
}
html[data-bm]:root .v3-pill__b{ color:var(--bm-text); font-weight:600; }

/* ---- ٢٥-ب الكلمة المميّزة داخل العنوان ----
   التمييز **نصًّا** في موضع واحد مقصود (٢/١٠ يفعلونه)، بينما الغالب (٥/١٠) يجعله
   تعبئة فقط. فالأصل يبقى: التمييز يعمل حيث يعمل الضوء، ويُضاف هنا موضعٌ نصّيّ واحد. */
html[data-bm]:root .v3-hl{
  background-image:linear-gradient(100deg,#00E5FF,#7C4DFF 55%,#00E5FF);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:bm-hl 6s linear infinite;
  filter:drop-shadow(0 0 14px rgba(0,229,255,.32));
}
@keyframes bm-hl{ from{ background-position:0 0 } to{ background-position:200% 0 } }
@media (prefers-reduced-motion:reduce){
  html[data-bm]:root .v3-hl{ animation:none; background-position:50% 0; }
  html[data-bm]:root .v3-pill__dot{ animation:none; }
}

/* ---- ٢٥-ج شريحة الأمر القابلة للنسخ ----
   أخذتُها من nuxt.studio: أمر بجانب الزرّ يُنسَخ بضغطة — وتناسب هويّتنا الطرفيّة. */
html[data-bm]:root .v3-cmd{
  display:inline-flex; align-items:center; gap:10px; margin-top:16px;
  padding:9px 12px; border:1px solid var(--bm-line); border-radius:12px;
  background:rgba(255,255,255,.03); color:var(--bm-text-2);
  font:500 13px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction:ltr; cursor:pointer; text-align:left;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
html[data-bm]:root .v3-cmd:hover{ border-color:rgba(0,229,255,.42); background:rgba(0,229,255,.06); }
html[data-bm]:root .v3-cmd__p{ color:var(--bm-cyan); }
html[data-bm]:root .v3-cmd__cp{
  display:inline-flex; align-items:center; gap:5px; margin-inline-start:6px;
  padding-inline-start:11px; border-inline-start:1px solid var(--bm-line);
  color:var(--bm-text-3); font-size:12px;
}
html[data-bm]:root .v3-cmd.is-copied .v3-cmd__cp{ color:#3FD99A; }

/* ---- ٢٥-د تبويبات المنتج المرقّمة ----
   الغالب (٥/١٠) يضع لقطة UI كبيرة داخل إطار متصفّح، و٣/١٠ يضيف تبويبات مرقّمة.
   وعندنا **٨ لقطات حقيقيّة** لا ٤، فصارت التبويبات ٨ — لأنّ إخفاء نصف مادّتنا
   الحقيقيّة أسوأ من مخالفة العدد في المرجع. */
html[data-bm]:root .v2-dots{
  display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:thin;
  padding:4px 2px; max-width:100%;
}
html[data-bm]:root .v2-dots::-webkit-scrollbar{ height:6px }
html[data-bm]:root .v2-tab{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:9px 14px; border:1px solid var(--bm-line); border-radius:999px;
  background:rgba(255,255,255,.03); color:var(--bm-text-2);
  font:500 13px/1 var(--bm-font, "IBM Plex Sans Arabic", system-ui, sans-serif);
  cursor:pointer; white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
html[data-bm]:root .v2-tab:hover{ border-color:rgba(0,229,255,.42); color:var(--bm-text); }
html[data-bm]:root .v2-tab__n{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size:11.5px; color:var(--bm-cyan); direction:ltr;
}
html[data-bm]:root .v2-tab.is-on{
  background:linear-gradient(180deg, rgba(0,229,255,.16), rgba(124,77,255,.12));
  border-color:rgba(0,229,255,.5); color:var(--bm-text);
}
html[data-bm]:root .v2-tab.is-on .v2-tab__n{ color:var(--bm-text); }
@media (max-width:760px){
  html[data-bm]:root .v2-tab{ padding:8px 11px; font-size:12px }
}

/* ---- ٢٥-هـ الفوتر بلون العلامة (الفكرة الجسورة: ١/١٠ يفعلها) ----
   لم أُنفّذها برتقاليًّا كامل العرض كـset.space (يصير صارخًا ويقتل التباين)، بل
   **لوحًا مشبعًا بدرجات العلامة** يبقى غامقًا فيقرأ النصّ ويلمع الشعار. */
html[data-bm]:root .v3-panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(0,229,255,.16), transparent 58%),
    radial-gradient(120% 140% at 88% 100%, rgba(124,77,255,.20), transparent 62%),
    linear-gradient(150deg,#062026,#081428 52%,#160F3A);
  border-top:1px solid rgba(0,229,255,.24);
}
html[data-bm]:root .v3-panel__top{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:34px;
  align-items:start; padding:56px 0 34px;
}
html[data-bm]:root .v3-panel__say{
  margin:18px 0 20px; max-width:46ch; color:#CBE6F2; font-size:15.5px; line-height:1.85;
}
html[data-bm]:root .v3-panel__cta{ display:flex; gap:12px; flex-wrap:wrap; }
html[data-bm]:root .v3-panel__cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
  padding:34px 0; border-top:1px solid rgba(255,255,255,.10);
}
html[data-bm]:root .v3-panel__cols h4{
  margin:0 0 12px; font:600 12px/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.06em; color:var(--bm-cyan); text-transform:uppercase;
}
html[data-bm]:root .v3-panel__cols a{
  display:block; padding:5px 0; color:#B7D4E2; font-size:14px; text-decoration:none;
  transition:color .18s var(--ease), transform .18s var(--ease);
}
html[data-bm]:root .v3-panel__cols a:hover{ color:#EAF7FD; transform:translateX(-3px); }
html[data-bm]:root .v3-panel__cmd{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 0 40px; border-top:1px solid rgba(255,255,255,.10);
  font:500 13px/1.6 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color:#9FC4D6; direction:ltr; justify-content:flex-start;
}
html[data-bm]:root .v3-legal{
  background:rgba(0,0,0,.34); border-top:1px solid rgba(255,255,255,.07);
}
html[data-bm]:root .v3-legal .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:15px 0; color:var(--bm-text-3); font-size:12.5px;
}
html[data-bm]:root .v3-legal .live{ display:inline-flex; align-items:center; gap:7px }
html[data-bm]:root .v3-legal .live i{
  width:7px; height:7px; border-radius:50%; background:#3FD99A; display:inline-block;
  box-shadow:0 0 8px rgba(63,217,154,.8);
}
@media (max-width:900px){
  html[data-bm]:root .v3-panel__top{ grid-template-columns:1fr; gap:24px; padding:40px 0 26px }
  html[data-bm]:root .v3-panel__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
}

/* ---- ٢٥-و الكشف بالتمرير — موثوق هذه المرّة ----
   النمط الأكثر انتشارًا (٨/١٠)، وسبق أن أخفق عندنا لأنّ ظهور العناصر كان **مبنيًّا**
   على مراقب تقاطع لا يُطلق دائمًا. فالقاعدة الآن: **الظهور الافتراضيّ ظاهر**،
   والكشف يُضاف في المتصفّحات الداعمة عبر `animation-timeline` بلا JS. */
@supports (animation-timeline: view()){
  html[data-bm]:root .v3-rv{
    animation:bm-in linear both;
    animation-timeline:view();
    animation-range:entry 6% cover 24%;
  }
}

/* ---- ٢٥-ز ترشيد مُقاس: نسخة التوهّج داخل `.hm-spot` ----
   `.hm-spot` عنصر زخرفيّ `display:none` يحمل نسخة ثانية من العنوان (وهو من الأصل،
   ويُستعمل في تأثير المؤشّر). فتشغيل تدرّج متحرّك داخله **حركة لا تُرى أبدًا** —
   وقد أبلغ عنها الفحص صريحًا. تُوقف هنا، ولا يُمسّ العنصر نفسه. */
html[data-bm]:root .hm-spot .v3-hl{ animation:none !important; background-position:50% 0 !important; }

/* ============================================================================
   ٢٦) شريط الشعار: تكبير وإزالة الفراغ
   ----------------------------------------------------------------------------
   المطلوب: «كبّر صورة الشعار بالأعلى» و«ازل المسافة تحت الشعار».
   والفراغ كان من مصدرين مقيسين: `gap:10px` في حاوية الشريط، والهامش الافتراضيّ
   الذي يحمله `figure.portrait`/`figcaption`. وحُذف `<figcaption>` من المصدر
   (وسطر «Codificah Hub» معه)، ويُثبَّت هنا إخفاءٌ احتياطيّ فلا يعود لو أُعيد إدراجه.
   والتكبير عبر `--bm-fs` لأنّ المكوّن يقرأ حجمه منه (`font-size:var(--bm-fs)`)،
   فتظلّ النسب داخل الظلّ صحيحة — والتكبير بـ`transform` كان سيُبقي النصّ صغيرًا.
   ============================================================================ */
html[data-bm]:root .v3-logobandwrap{ gap:0 !important; }
html[data-bm]:root .v2-logoband{ padding:34px 0 10px !important; }
html[data-bm]:root .v2-logoband .seal,
html[data-bm]:root .v2-logoband .portrait,
html[data-bm]:root .v2-logoband .bm-mark{ margin:0 !important; }
html[data-bm]:root .v2-logoband figcaption{ display:none !important; }
html[data-bm]:root .v2-logoband .bm-fallback{ display:none !important; }
/* التكبير قبل هذه الجولة رفع `--bm-fs` وحدها فانكسر التناسب المُصمَّم:
   المكوّن يعرّف `--bm-ws = 0.64 × --bm-fs` **بالنسبة لا بالرقم**، فرفع الرموز
   وحدها جعل الكلمة **أربع درجات** تحتها لا درجتين. فالعلاج أن تُرفع الثلاثة
   بنفس العامل ×1.42، فتعود النسبة إلى ما قصده المصمّم:
     الرموز 52→74 · الكلمة 33→**53** (0.72 لطلب «درجة أو درجتين») · الفراغ 26→37
   و`--bm-gap` يبقى 0.5 × `--bm-fs` كما كان (26/52). */
html[data-bm]:root .v2-logoband barmejli-logo{
  --bm-fs:clamp(46px, 7.2vw, 74px);
  --bm-ws:clamp(33px, 5.2vw, 53px);
  --bm-gap:clamp(23px, 3.6vw, 37px);
  font-size:clamp(46px, 7.2vw, 74px);
}
/* شعار الفوتر كان على نسبة المكوّن الأصليّة (0.64) والأعلى على 0.72 ⇒ **هويّتان
   في صفحة واحدة**. يُوحَّد النسبة على 0.72 مع إبقائه أصغر (فهو فوتر)، والفراغ يبقى
   0.5 × `--bm-fs` كما في المصدر. والقيم مشتقّة من `clamp` المكوّن المقيس
   (34→52 و17→26) مضروبةً في 0.72 و0.5 — لا مُقدَّرة. */
html[data-bm]:root .v2-foot barmejli-logo{
  --bm-ws:clamp(24px, 2.6vw, 37px);
  --bm-gap:clamp(17px, 1.8vw, 26px);
}
@media (max-width:640px){
  html[data-bm]:root .v2-logoband{ padding:22px 0 6px !important; }
  html[data-bm]:root .v2-logoband barmejli-logo{
    --bm-fs:clamp(34px, 10vw, 48px);
    --bm-ws:clamp(24px, 7.2vw, 35px);
    --bm-gap:clamp(17px, 5vw, 24px);
    font-size:clamp(34px, 10vw, 48px);
  }
}

/* ============================================================================
   ٢٧) قطع الفيض الأفقيّ بنيويًّا
   ----------------------------------------------------------------------------
   الفحص أبلغ فيضًا **١٢px** عند 390 في أوّل رسم فقط (387 مقابل 375)، ثم استقرّ
   إلى 375==375 في ٨ عيّنات. والمصدر عنصر زخرفيّ في طبقة الخلفيّة قبل أن يُقصّ.
   وبدل مطاردة السبب الظرفيّ، يُقطع الاحتمال من أصله: `overflow-x:clip` على
   `main` والفوتر — و`clip` لا `hidden` كي لا يُنشئ حاوية تمرير تكسر أيّ `sticky`
   داخلهما. والترويسة خارج `main` فلا يُمسّ ثباتها.
   ============================================================================ */
html[data-bm]:root main,
html[data-bm]:root footer.band--footer{ overflow-x:clip; }

/* ============================================================================
   ٢٨) النوافذ المنبثقة: نموذج التواصل + متابعة الطلبات
   ----------------------------------------------------------------------------
   الطلب: «ازل نافذة الاتصال كامله واجعلها نافذه منبثقه تشتغل عند الضغط»،
   و«بالاعلى بالهيدر ضع اختصار لمتابعة الطلبات… إدخال بيانات تذكرته ويظهر معلوماتها».
   وأهمّ قرار هنا: **متابعة الطلبات تُعرض بصفحة `/track` القائمة داخل إطار** لا
   بمنطق مُعاد كتابته. سببانه: (١) الصفحة مُختبَرة وتستقبل `code`+`contact` فعلًا،
   (٢) إعادة بناء العقد في مكان ثانٍ تُنشئ حقيقة مزدوجة تنحرف عند أوّل تغيير.
   ============================================================================ */
html[data-bm]:root .v3-modal{
  position:fixed; inset:0; z-index:220;
  display:grid; place-items:center; padding:18px;
}
html[data-bm]:root .v3-modal[hidden]{ display:none !important; }
html[data-bm]:root .v3-modal__bd{
  position:absolute; inset:0; background:rgba(2,6,12,.74);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}
html[data-bm]:root .v3-modal__box{
  position:relative; width:min(780px, 100%); max-height:88vh; overflow:auto;
  padding:26px 26px 22px; border-radius:22px;
  border:1px solid rgba(0,229,255,.24);
  background:linear-gradient(180deg,#081019,#04070C);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.92);
  animation:bm-mod .22s var(--ease) both;
}
@keyframes bm-mod{ from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }
html[data-bm]:root .v3-modal__x{
  position:absolute; top:14px; inset-inline-end:14px;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:1px solid var(--bm-line); background:rgba(255,255,255,.04);
  color:var(--bm-text-2); font-size:19px; line-height:1;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
html[data-bm]:root .v3-modal__x:hover{ color:#EAF7FD; border-color:rgba(0,229,255,.5); }
html[data-bm]:root .v3-modal h3{
  margin:0 0 8px; font-size:clamp(20px, 2.5vw, 29px); line-height:1.35; padding-inline-end:44px;
}
html[data-bm]:root .v3-modal__sub{ margin:0 0 20px; color:var(--bm-text-2); font-size:14px; line-height:1.8; }
html[data-bm]:root .v3-modal iframe{
  width:100%; height:min(68vh, 600px); border:0; border-radius:14px; background:#04070C;
}
html[data-bm]:root body.v3-lock{ overflow:hidden; }

/* اختصار التذاكر في الترويسة */
html[data-bm]:root .v3-hdr-link{
  background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:7px 10px; border-radius:9px; color:var(--bm-text-2);
  font:500 13.5px/1 var(--bm-font, "IBM Plex Sans Arabic", system-ui, sans-serif);
  transition:color .18s var(--ease), background .18s var(--ease);
}
html[data-bm]:root .v3-hdr-link:hover{ color:var(--bm-text); background:rgba(255,255,255,.06); }
@media (max-width:900px){
  html[data-bm]:root .v3-hdr-link{ display:none; }  /* على الجوال تبقى متاحة داخليًّا */
  html[data-bm]:root .v3-modal__box{ padding:20px 16px 16px; border-radius:18px; }
}

/* ============================================================================
   ٢٩) الدعوة صارت جملة أطول: «شاركنا رؤيتك، ودع التطوير لنا» (٣٠ حرفًا)
   ----------------------------------------------------------------------------
   وُحِّدت في ستّة مواضع بعد أن كانت ثلاثة ألوان («أخبرنا بفكرتك» · «ناقش فكرتك»
   · «ناقش فكرتك الآن») — وصوت واحد أقوى من ثلاثة.
   وطولها يقتضي انسحابًا مهذّبًا من الترويسة على الشاشات المتوسّطة كي لا يتزاحم
   مع اختصار «متابعة الطلبات» واللغة والقائمة. والدعوة تبقى متاحة هناك في
   البطل والفوتر وفي درج القائمة عبر «تواصل». */
html[data-bm]:root .v2-cta{ white-space:nowrap; }
@media (max-width:1180px){
  html[data-bm]:root .v2-hdr .v2-cta{ display:none; }
}

/* ============================================================================
   Codificah Hub — سلّم الطباعة الموحّد  (2026-10-09)
   توحيد المقاسات على سلّم واحد واضح: --fs-1 … --fs-7
   h1 28.5 · h2 25 · h3 21 · body 17 · lead 19   (والوزن 600 للجميع)
   لا تغيير في الألوان ولا في البنية. والعربية تحتاج ارتفاع سطر أوسع،
   فلم يُضيَّق أيّ line-height — بل رُفع حيث كان أضيق من نصّ عربيّ مريح.
   ============================================================================ */
html[data-bm]:root{
  --fs-1:17px;    /* نصّ أساسيّ · body */
  --fs-2:19px;    /* مقدّمة · lead */
  --fs-3:21px;    /* h3 */
  --fs-4:25px;    /* h2 */
  --fs-5:28.5px;  /* h1 */
  --fs-6:34px;    /* عنوان عرضيّ */
  --fs-7:40px;    /* عنوان عرضيّ كبير */
}
html[data-bm]:root .v2-hero .hm,
html[data-bm]:root h1{
  font-size:var(--fs-5) !important; font-weight:600 !important; line-height:1.3 !important;
}
html[data-bm]:root .sec-head h2,
html[data-bm]:root .v2-h2,
html[data-bm]:root h2{
  font-size:var(--fs-4) !important; font-weight:600 !important; line-height:1.3 !important;
}
html[data-bm]:root h3{ font-size:var(--fs-3) !important; font-weight:600 !important; line-height:1.4 !important; }
html[data-bm]:root h4{ font-size:var(--fs-3) !important; font-weight:600 !important; }
html[data-bm]:root .sec-head .lead,
html[data-bm]:root .v2-hero .lead,
html[data-bm]:root .lead{
  font-size:var(--fs-2) !important; font-weight:600 !important; line-height:1.8 !important;
}
html[data-bm]:root body{ font-size:var(--fs-1); }

/* ============================================================================
   إصلاح سلّم العناوين — 2026-10-09
   القواعد الجديدة أعلاه (توحيد المقاسات) تحمل !important فغلبت مقاسات العرض،
   فصار عنوان البطل 28.5px ثابتًا وأكبر من h2 بـ3.5px فقط، فلا هرميّة بصريًّا.
   نُعيد طبقة العرض من سلّم الهوية نفسه: --fs-7 للبطل و--fs-6 للعناوين القسميّة.
   الجسم والمقدّمة والعناوين الفرعيّة تبقى كما وُحِّدت (17 / 19 / 21 / 25).
   ============================================================================ */
html[data-bm]:root .v2-hero .hm{
  font-size:clamp(28px,3.4vw,var(--fs-7)) !important;
  line-height:1.22 !important;
}
html[data-bm]:root .sec-head h2,
html[data-bm]:root .v2-h2,
html[data-bm]:root .v2-hero h2{
  font-size:clamp(22px,2.4vw,var(--fs-6)) !important;
  line-height:1.28 !important;
}
html[data-bm]:root .v2-stage__h{
  font-size:clamp(21px,2vw,var(--fs-5)) !important;
  line-height:1.3 !important;
}
html[data-bm]:root .v2-counter span{
  font-size:clamp(26px,3vw,var(--fs-6)) !important;
}