/* ══════════════════════════════════════════════════════════════════
   الخطوط · مستضافة عندنا لا عند غوغل

   كانت تُطلب من fonts.googleapis.com ومنه إلى fonts.gstatic.com: نطاقان
   غريبان، كل واحد يكلّف بحث DNS ومصافحة TLS قبل ما تُرسم كلمة واحدة.
   على شبكة موبايل عراقية هذا وحده يؤخّر ظهور النصّ نصف ثانية، وهو خارج
   سيطرتنا تماماً: لو تعثّر غوغل تعثّر موقعنا معه.

   صارت من proirq.com نفسه، والاتّصال به مفتوح أصلاً لأن الصفحة جاءت منه.
   فلا مصافحة جديدة ولا طرف ثالث ولا تتبّع.

   ونزّلنا المقاطع العربية واللاتينية فقط: السيريلي والفيتنامي ما يقرأهما
   أحد من زوّارنا. و unicode-range يخلّي المتصفّح ينزّل المقطع المستعمل
   بالصفحة لا كل الملفّات.

   المسارات مطلقة بقصد: الصفحات تُخدَم بعناوين نظيفة (/pricing)، والمسار
   النسبي يُحسب من مكان مختلف بكل صفحة فينكسر.
   ══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/plexmono-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;
  font-display:swap;src:url(/fonts/plexmono-latin-600.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/plexar-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;
  font-display:swap;src:url(/fonts/plexar-latin-400.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;
  font-display:swap;src:url(/fonts/plexar-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;
  font-display:swap;src:url(/fonts/plexar-latin-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/fonts/instrument-latin-400-700.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ══════════════════════════════════════════════════════════════════
   الخلفية المتّصلة · طبقة واحدة خلف الصفحة كلّها

   ── لماذا رجعنا عن الأشكال داخل الأقسام ──
   جرّبنا 21 مجسّماً موزّعة بالأقسام وبالدروز بينها، بمحرّك يحرّكها مع
   التمرير. ورفضها المالك حرفياً: «يتحركن ويايه ويه المستخدم وهذا الشي
   ماريده، اريدهن ثابت مكانهن» و«احذفهن كلهن» و«اريد الصفحة كلها جرّة
   وحدة مو اقسام». فالمطلوب صار عكس البناء السابق تماماً: لا عنصراً
   لكل قسم بل نسيجاً واحداً متّصلاً خلف الصفحة كلّها.

   ── لماذا هذا البناء بالذات ──
   عنصر مثبّت واحد يحمل الخلفية كلّها بتدرّجات CSS خالصة:
   · صفر طلب شبكة وصفر جافاسكربت وصفر حركة: أسرع ما يمكن بنيوياً،
     والسرعة شرط المالك الدائم.
   · مثبّت (fixed) فلا يُعاد رسمه مع التمرير، ولا «يمشي» مع الزائر:
     الوهج يقف بمكانه والمحتوى يجري فوقه، فتُقرأ الصفحة قطعةً واحدة.
   · z-index:-1 يضعه خلف كل شي بلا لمس أي قسم، والفواصل بين الأقسام
     باقية كما هي.

   ── التكوين ──
   وهجان برتقاليان كبيران بزاويتين متقابلتين (أعلى اليمين وأسفل اليسار،
   يتبادلان بالعرض الواسع) بشفافية لا تنافس النصّ، وشبكة نقاط خافتة
   جداً تعطي «الشي المرتّب» الّذي طلبه بلا أن تلفت نظراً لنفسها.
   الهاتف أوّلاً: القيم أدناه معايَرة على 390px، والعرض الواسع يكبّر
   الوهج ويرقّق الشبكة.
   ══════════════════════════════════════════════════════════════════ */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(34rem 30rem at 88% -4%,  rgba(249,115,22,.085), transparent 62%),
    radial-gradient(30rem 26rem at -12% 34%, rgba(253,143,58,.06),  transparent 60%),
    radial-gradient(38rem 34rem at 108% 72%, rgba(249,115,22,.055), transparent 62%),
    radial-gradient(26rem 24rem at 8% 104%,  rgba(230,84,0,.05),    transparent 58%),
    radial-gradient(rgba(189,60,0,.05) 1px, transparent 1.5px);
  background-size:auto,auto,auto,auto,26px 26px}
@media(min-width:720px){
  body::before{background:
    radial-gradient(52rem 44rem at 90% -6%,  rgba(249,115,22,.08),  transparent 62%),
    radial-gradient(44rem 38rem at -10% 38%, rgba(253,143,58,.055), transparent 60%),
    radial-gradient(56rem 48rem at 106% 74%, rgba(249,115,22,.05),  transparent 62%),
    radial-gradient(40rem 34rem at 6% 108%,  rgba(230,84,0,.045),   transparent 58%),
    radial-gradient(rgba(189,60,0,.04) 1px, transparent 1.5px);
  background-size:auto,auto,auto,auto,32px 32px}
}

/* ═══════════════════════════════════════════════════════════════
   شركة برو — نظام التصميم
   نهاري فقط · لون تمييز واحد · RTL أولاً
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  }

:root{
  /* ── سُلّم البرتقالي المملوك ──
     تشبّع 98-100% والقناة الزرقاء صفر بالدرجات الغامقة، فلا ينزلق للبني.
     500 هي هوية برو ولا تُستبدل. */
  --o50:#FFF5EB; --o100:#FFE5CC; --o200:#FFCB9E; --o300:#FFAB66; --o400:#FD8F3A;
  --o500:#F97316; --o600:#E65400; --o700:#BD3C00; --o800:#992B00; --o900:#7A1F00; --o950:#420F00;
  /* أبيض عليه 3.58:1. يجتاز هنا لأن .btn-p بهذا الموقع 18.88px غامق،
     وهو فوق حدّ «النصّ العريض» (18.66px غامق) فحدّه 3.0 لا 4.5.
     والشرط مقاس لا لون: أي زرّ يصغر تحت 18.66px يحتاج --o-btn أغمق
     (#CD4500 = 4.72:1)، وهو المستعمل بالمتاجر واللوحة والأكاديمية
     لأن أزرارها 14 إلى 16px. */
  --o-btn:#EB5600;

  /* ── محايدات دافئة ── (الأسود المائل للأزرق يجعل البرتقالي يبدو دخيلاً) */
  --ground:#FAF8F6; --surface:#FFFFFF; --raised:#F3EEEA;
  --ink:#141110; --muted:#5D544F; --faint:#736962;   /* 5.05:1 على الأرضية — 8A807A كان 3.64:1 وهو راسب AA */
  --line:#E4DCD6; --line-2:#EFE8E3;

  /* ── دلالية ── */
  --ok:#0F6E52; --wa:#17A94E; --warn:#8A5A00; --bad:#A8341A;

  /* ── طباعة ──
     Plex Arabic بلا وزن 800/900 — السقف 700.
     المونوسبيس للأرقام واللاتيني فقط، لا يمسّ حرفاً عربياً. */
  --ar:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --la:"Instrument Sans",system-ui,sans-serif;
  --mo:"IBM Plex Mono",ui-monospace,monospace;

  /* ── إيقاع ── وحدة 8px، ست قيم فقط */
  --u:8px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --pad:20px;              /* الهامش الجانبي — كل شي يحاذيه */

  /* ── حواف ── ثلاث قيم */
  --r-s:8px; --r-m:14px; --r-f:999px;

  /* ── حركة ── مدّتان ومنحنى واحد */
  --t:150ms; --t2:280ms; --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);font-family:var(--ar);
  font-size:16px;line-height:1.72;overflow-x:clip;
  font-synthesis-weight:none;      /* لا تزوير للوزن — يبان الخطأ بدل التشويه الصامت */
}

/* ═══ قواعد الطباعة العربية — ثلاثة أخطاء تكررت، هذي تمنعها ═══ */
/* ١) التباعد يفكّ الوصل الخطّي في العربية */
body *{letter-spacing:0}
/* ٢) النزلات العربية تحتاج مسافة — 1.10 تُلاصق السطور */
h1,h2,h3,h4{line-height:1.28;font-weight:700;text-wrap:balance}
/* ٣) المونوسبيس بلا حروف عربية — أي عربي عليه يُستبدل بخط ممطوط.
      لذلك لا قاعدة تفرض var(--mo) هنا: الأرقام تُعالَج بصنف .num
      وحده (أسفل الملف)، وهو لا يُوضع إلا على عنصر رقمه لاتيني. */

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--o700);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ground);border-radius:var(--r-s);
}

/* ═══ أزرار ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding-inline:1.5rem;border-radius:12px;
  font-family:inherit;font-weight:700;font-size:1.02rem;line-height:1.24;  /* أقل من 1.22 يقصّ نزلات العربية */
  border:1.5px solid transparent;cursor:pointer;
  transition:background var(--t),box-shadow var(--t),transform var(--t),border-color var(--t);
}
.btn svg{flex-shrink:0;opacity:.9}
/* أبيض على برتقالي غني — الحبر الغامق يقرأ موحلاً، والأبيض على #F97316 راسب 2.8:1 */
.btn-p{background:var(--o-btn);color:#fff;font-size:1.18rem;
  box-shadow:0 1px 1px rgba(120,42,0,.14), 0 9px 20px -10px rgba(235,86,0,.55)}
.btn-p:hover{background:#F55E00}
.btn-p:active{background:#D64E00;transform:translateY(1px)}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line);
  box-shadow:0 1px 1px rgba(20,17,16,.03)}
.btn-s:hover{border-color:var(--o300);color:var(--o700)}
.btn-s:active{background:var(--raised);transform:translateY(1px)}

/* ═══ حركة الرسومات ═══ */
.ill{display:block;overflow:visible}
.ill *{transform-box:fill-box;transform-origin:center}
@keyframes ill-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7%)}}
@keyframes ill-blink{0%,100%{opacity:1}50%{opacity:.18}}
@keyframes ill-rise{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes ill-spin{to{transform:rotate(360deg)}}
@keyframes ill-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.65}}
@keyframes ill-swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes ill-typing{0%{opacity:.2}40%{opacity:1}100%{opacity:.2}}
@keyframes ill-wave{0%,100%{transform:scale(.7);opacity:.7}50%{transform:scale(1.1);opacity:.1}}
.ill-float{animation:ill-float 4s ease-in-out infinite}
.ill-blink{animation:ill-blink 1.6s ease-in-out infinite}
.ill-spin{animation:ill-spin 9s linear infinite}
.ill-pulse{animation:ill-pulse 2.3s ease-in-out infinite}
.ill-swing{animation:ill-swing 3s ease-in-out infinite;transform-origin:top center}
.ill-wave{animation:ill-wave 2.5s ease-in-out infinite}
.ill-d1{animation-delay:-.5s}.ill-d2{animation-delay:-1s}.ill-d3{animation-delay:-1.5s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* الخط تحت «برو» يبدأ من width:0 — بدون هذا يختفي تماماً */
  .h1 .ac::after{width:100%!important}
  .h1 .ac{background:none;color:var(--o700)}
}

/* ═══════════════════════════════════════════════════════════════
   طبقة الرقيّ — التفاصيل التي تُحسّ ولا تُلاحَظ
   ═══════════════════════════════════════════════════════════════ */

/* ── ظلال متدرّجة الطبقات بدل ظل واحد مسطّح ──
   ظل قريب حاد + ظل بعيد ناعم = إحساس مادة حقيقية */
:root{
  --sh-1:0 1px 2px rgba(64,26,4,.045);
  --sh-2:0 1px 2px rgba(64,26,4,.05), 0 4px 10px -6px rgba(64,26,4,.09);
  --sh-3:0 1px 2px rgba(64,26,4,.05), 0 12px 28px -16px rgba(64,26,4,.16);
  --sh-o:0 1px 2px rgba(120,42,0,.14), 0 10px 24px -12px rgba(235,86,0,.5);
}

/* ── البطاقات: حدّ شعري داخلي يعطي حافة مصقولة ── */
.plan.pop,.offer.hot,.up.feature{box-shadow:var(--sh-3), inset 0 1px 0 rgba(255,255,255,.85)}

/* ── الصور: حدّ داخلي يمنع «الالتصاق» بالخلفية ── */
picture img{border-radius:inherit}
.secart,.wcard .art,.offer .art,.up .art{position:relative}
.secart::after,.wcard .art::after,.offer .art::after,.up .art::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(64,26,4,.055);
}

/* ── الأزرار: لمعة علوية خفيفة + انتقال بمنحنى واحد ── */
.btn-p{position:relative;overflow:hidden;box-shadow:var(--sh-o)}
.btn-p::before{content:"";position:absolute;inset:0 0 auto;height:50%;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.16),transparent)}
.btn-p:hover{box-shadow:0 1px 2px rgba(120,42,0,.16), 0 14px 30px -12px rgba(235,86,0,.62)}
.btn-s{box-shadow:var(--sh-1)}

/* ── الروابط والبطاقات القابلة للنقر: رفعة دقيقة ── */
@media(hover:hover){
  .wcard:hover,.ucard:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
}

/* ── الفواصل: تتلاشى عند الطرفين بدل خط صلب ── */
hr{background:linear-gradient(to left,transparent,var(--line) 12%,var(--line) 88%,transparent)}

/* ── الأرقام: خط رفيع أسفلها يوحّد خط الأساس البصري ── */
.plan .val,.up .val,.ucard .val,.offer .now{letter-spacing:-.01em}

/* ── التركيز: حلقة مزدوجة تشتغل فوق أي لون ── */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--o700);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ground), 0 0 0 5px rgba(189,60,0,.18);
}

/* ── العناوين: توازن سطور + منع اليتيم ── */
h1,h2{text-wrap:balance}
p,.desc,.lede,.sub{text-wrap:pretty}


/* ═══════════════════════════════════════════════════════════════
   طبقة الصور — «لا حواف حادّة»
   الأصول نوعان ويُعاملان معاملتين مختلفتين تماماً:
     .is-obj   جسم مفرد على نفس خلفية الموقع (#FAF8F6) → يطفو بلا صندوق،
               contain فلا يُقصّ، وتحته هالة دافئة تربطه بالصفحة.
     .is-scene مشهد يملأ إطاراً — cover داخل حواف واسعة ناعمة.
   ═══════════════════════════════════════════════════════════════ */
:root{ --r-l:20px; --r-xl:26px; }

/* ── جسم مفرد: بلا إطار، بلا قصّ ── */
.is-obj{border:0!important;background:transparent!important;overflow:visible!important;
  position:relative;display:block;isolation:isolate}
.is-obj::before{content:"";position:absolute;inset:14% 16% 6%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 64%,rgba(249,115,22,.07),transparent 70%)}
.is-obj picture{display:block}

/* ── مشهد: إطار بحواف واسعة + شعرة داخلية ── */
.is-scene{border-radius:var(--r-l);overflow:hidden;position:relative;
  box-shadow:0 1px 2px rgba(20,17,16,.05),0 8px 22px -14px rgba(20,17,16,.28)}
.is-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,17,16,.07)}
.is-scene img{border-radius:inherit}

/* الإطارات الكبيرة تأخذ الحافة الأوسع — الحادّ لا مكان له بالموقع */
.hero-art,.wcard,.offer,.mapbox,.up .art,.svcsec .art{border-radius:var(--r-xl)!important}
.hero-art .is-scene,.wcard .art,.offer .art{border-radius:inherit}

/* ── ميل خفيف: الجسم لا يقف بمواجهة الكاميرا ── */
.tilt-b{transform:rotate(1.8deg)}
@media(prefers-reduced-motion:reduce){.tilt-a,.tilt-b{transform:none}}

/* ═══════════════════════════════════════════════════════════════
   الكاروسيل — قاعدة عامة
   التصفّح بالعرض بدل صفحة تطول بلا نهاية. RTL: المتصفّح يعكس
   scrollLeft تلقائياً، فالحساب يعتمد على القيمة المطلقة.
   ═══════════════════════════════════════════════════════════════ */
.car{position:relative}
.car .trk{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-inline:var(--pad);padding-block:4px 6px;
  scroll-padding-inline-start:var(--pad);   /* بدونه تقف البطاقة عند 0 لا عند الهامش */
  /* الحوافّ تتلاشى فيبان أن ورا الحافّة يوجد المزيد */
  -webkit-mask-image:linear-gradient(to left,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);
          mask-image:linear-gradient(to left,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent)}
.car .trk::-webkit-scrollbar{display:none}
.car .trk::after{content:"";flex:0 0 1px}
/* الالتقاط من بداية البطاقة: أوّل بطاقة تلزق الحافّة اليمنى، و.narrow يبقى صفّين حقيقيّين */
.car .trk>*{flex:0 0 var(--cw,80%);max-width:var(--cmax,320px);scroll-snap-align:start}
/* آخر عنصر حشوة — يفتح نفَساً بعد آخر بطاقة، لا يُعدّ ولا يُلتقط ولا يبان بطاقة فارغة */
.car .trk>*:last-child{flex:0 0 calc(var(--pad) - 12px);max-width:none;scroll-snap-align:none}
.car.grab .trk{cursor:grab}
.car.grab .trk.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.car.wide{--cw:86%;--cmax:340px}
.car.narrow{--cw:47%;--cmax:180px}

/* شريط التقدّم + العدّاد */
.car .bar{display:flex;align-items:center;gap:10px;
  margin:10px var(--pad) 0;justify-content:center}
.car .prog{flex:0 1 96px;height:3px;border-radius:var(--r-f);background:var(--line-2);overflow:hidden}
.car .prog i{display:block;height:100%;border-radius:inherit;background:var(--o500);
  transition:transform var(--t2) var(--ease);transform-origin:right center}
/* «٢ من ٦» فيها حروف عربية — المونوسبيس يكسر وصلها، فتبقى على خط العربية */
.car .cnt{font-family:var(--ar);font-size:.72rem;font-weight:700;color:var(--faint);
  letter-spacing:0;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.car .trk{scroll-behavior:auto}.car .prog i{transition:none}}

/* ═══ الأرقام ═══
   صارت الأرقام لاتينية بكل الموقع، فالسبب القديم لبقاء .num على خط
   العربية — أن «٠١٢» محارف عربية يكسرها المونوسبيس — انتهى.
   ومع ذلك يبقى var(--ar)، وبسبب أقوى منه:
   .num ليست رقماً واقفاً بصندوقه، بل رقم ملاصق لكلمة عربية:
   «63 لغة»، «3 أيام للردّ»، وبصفّ الحقائق يقف «$150» و«24» جنب «سنة»،
   و«30-70» جنب «د.ع» — نفس الحجم ونفس السطر ولا يفصلهم غير شعرة.
   وPlex Sans Arabic يحمل لاتينيّه مرسوماً على ارتفاع سينه وسمك قلمه،
   فيقرأ الرقم من نفس العائلة حرفياً لا مجازاً. المونوسبيس هنا يوسّع
   الرقم ويخفّفه أمام الكلمة الملاصقة له فيبان ملصوقاً من موقع ثاني.
   مكان المونو هو الأرقام المعزولة داخل صناديقها (.plan .val و.offer .now
   وأمثالهما)، وهي تطلبه بنفسها داخل صفحاتها.
   والمطلوب من .num ثلاثة: عرض ثابت لكل رقم حتى لا ترقص الأعمدة،
   وأرقام صفّية (lnum) لأن خطّ الاحتياط أثناء swap قد يعطي old-style
   فينزل «5» تحت السطر ويقصر «1» فتنكسر المحاذاة، وتباعد صفر حيث
   يلامس الرقمُ حرفاً عربياً. */
.num{font-family:var(--ar);letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1}

/* القسم الذي يحمل كاروسيل يفقد هامشه الجانبي — الشريط يمتدّ لحافّة الشاشة */
section.bleed{padding-inline:0}
section.bleed>.wrap-in{padding-inline:var(--pad)}

/* الأصول تحمل قناة ألفا حقيقية (matte.py)، فالجسم وظلّه يطفوان فوق أي لون
   بلا مستطيل. mix-blend-mode والقناع البيضوي كانا علاجين سطحيين: الأول
   يفشل حين تكون البطاقة أفتح من الصورة، والثاني يقضم أطراف الجسم. حُذفا. */
.is-obj img{display:block}

/* حاوية flex تبتلع المسافة بين عقدة نصّ وعنصر — «عرض5مميزات».
   gen gap يعيدها. القاعدة عامة لأن الخطأ تكرّر ستّ مرات بهذا المشروع. */
.more,.kick,.facts>span,.eyebrow,.tsum,.stx{gap:.32ch}

/* ═══════════════════════════════════════════════════════════════
   الزرّ المميّز — .btn-p.hot
   الزرّ العادي لون مسطّح؛ هذا يتحرّك بثلاث طبقات:
     ١) تدرّج ثلاثي الألوان ينزلق ببطء (الخلفية المتحرّكة)
     ٢) لمعة تمرّ كل ٤ ثوانٍ — تُوحي بسطح لامع لا بمستطيل مطلي
     ٣) حافّة داخلية فاتحة أعلاه وظلّ ملوّن تحته = عمق حقيقي
   الحركة تُطفأ كاملة مع prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
/* .hot المتحرّك يُستعمل مرّة واحدة بالصفحة. تكراره ١٨ مرّة يعني ٥٤
   حركة لانهائية وزرّاً «مميّزاً» لا يميّز شيئاً. البقية تأخذ .grad:
   نفس التدرّج بلا حركة ولا تكلفة. */
.btn-p.grad,.btn-p.hot{
  position:relative;overflow:hidden;border:0;isolation:isolate;
  /* كل درجة تعبر 3:1 مقابل الأبيض. F97316 كانت 2.80:1 وFF8A3D كانت
     2.35:1 — أي أن نصّ الزرّ يرسب على نصف مساحته أثناء الانزلاق.
     ── تصحيح: العتبة هنا ليست 3:1 ──
     3:1 عتبة «النصّ الكبير»، وحدّها للعريض 18.66px. وكلا الزرّين
     يُرسم تحت الحدّ فعلياً: .grad حبره 16.64px داخل بطاقة الباقة على
     الحاسبة و16px على الهاتف، و.hot حبره 16.32px بافتتاحية الرئيسية
     (.hero-cta .btn يخفض 1.18rem إلى 1.02rem). فالعتبة الصحيحة 4.5:1،
     والتدرّج السابق كان بين 4.19:1 عند أغمق درجة و3.58:1 عند أفتحها،
     أي راسب على عرض الزرّ كلّه لا على نصفه.
     التدرّج أدناه: 5.73:1 و5.12:1 و4.81:1 — كلّها تعبر 4.5:1.
     وليس لوناً ثانياً: نفس البرتقالي بين --o600 و--o700، والسطوح
     والزخارف تبقى على #F97316 كما هي. */
  background:linear-gradient(100deg,#C44100,#B93A00 28%,#CB4400 50%,#B93A00 72%,#C44100);
  background-size:230% 100%;
  animation:btn-slide 7s linear infinite;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),      /* حافّة علوية = ضوء ساقط */
    inset 0 -1px 0 rgba(120,42,0,.22),
    0 2px 4px rgba(120,42,0,.18),
    0 12px 26px -12px rgba(235,86,0,.62);
}
@keyframes btn-slide{to{background-position:-230% 0}}
.btn-p.grad{animation:none;background-position:38% 0}
.btn-p.grad::before,.btn-p.grad::after{display:none}

/* اللمعة: شريط مائل يعبر السطح ثم يختفي طويلاً — لو تكرّر بسرعة صار مزعجاً */
.btn-p.hot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-140%);
  animation:btn-sheen 4.6s var(--ease) 1.4s infinite;
}
@keyframes btn-sheen{0%{transform:translateX(-140%)}26%,100%{transform:translateX(140%)}}

/* هالة ناعمة تنبض تحت الزرّ — تجذب العين بلا صراخ */
.btn-p.hot::after{
  content:"";position:absolute;inset:auto 12% -6px;height:16px;z-index:-2;
  background:radial-gradient(ellipse at center,rgba(249,115,22,.55),transparent 72%);
  filter:blur(7px);animation:btn-glow 3.4s ease-in-out infinite;
}
@keyframes btn-glow{0%,100%{opacity:.45}50%{opacity:1}}

.btn-p.hot:active{transform:translateY(1px) scale(.994)}

@media(prefers-reduced-motion:reduce){
  .btn-p.hot{animation:none;background-position:0 0}
  .btn-p.hot::before,.btn-p.hot::after{animation:none}
  .btn-p.hot::before{opacity:0}
}

/* ═══════════════════════════════════════════════════════════════
   فاصل الأقسام — همسة
   الأقسام أصلاً عندها padding-block:48px من كل جهة، فأي ارتفاع
   يضيفه الفاصل يتراكم مرّتين. النسخة السابقة (٤٨ بكسل × ١٢ فاصل)
   كانت تأكل ٥٧٦ بكسل من الصفحة لمجرّد خطوط.
   الآن: شعرة واحدة تذوب عند الطرفين، بلا ارتفاع خاص بها.
   ═══════════════════════════════════════════════════════════════ */
.sep{height:1px;border:0;margin:0 var(--pad);
  background:linear-gradient(to left,transparent,var(--line-2) 26%,
    var(--line) 50%,var(--line-2) 74%,transparent)}
.sep i{display:none}      /* الحبّة كانت تجذب النظر لفاصل لا يستحقّه */

/* ═══════════════════════════════════════════════════════════════
   لا زاوية حادّة في الموقع
   قرار المالك: «اريد الاطراف كلها منحنيه». بدل ملاحقة كل بطاقة
   على حدة، حدّ أدنى عام للانحناء يسري على كل ما يحمل خلفية أو
   إطاراً أو ظلّاً، ثم استثناءات صريحة لما يجب أن يبقى مستقيماً.
   ═══════════════════════════════════════════════════════════════ */
.secart,.band,.mapcard,.oform,.faq,.q,.plan,.up,.ucard,.svc,.wcard,
.offer,.xcard,.why,.stp,.mkind,.mrow,.count,.bacol,.review,.slink,.note,
.tgrp,.field input,.field select,.field textarea,.count,.dfact{
  border-radius:var(--r-m)}
/* البطاقات الكبيرة تأخذ الحافّة الأوسع */
.band,.svc,.wcard,.offer,.plan,.up,.mapcard,.oform,.faq,.review,.bacol{
  border-radius:var(--r-xl)}
/* الأزرار والحبّات دائرية الطرف */
.btn,.fchip,.gvb,.chip,.tag,.dfact,.pbadge,.wip{border-radius:var(--r-f)}
.btn-p,.btn-s{border-radius:14px}
/* الصور داخل أي إطار تتبع انحناء أبيها */
.secart img,.svc .ic img,.wcard .art img,.plan .tier img{border-radius:inherit}
/* ما تبقّى من حاويات تحمل خطّاً أو خلفية */
.facts,.pr,.who,.social,.tsum,.mtable,.jump,.dnext .row{border-radius:var(--r-m)}
.badge,.tg,.from,.once,.gc,.gi,.n{border-radius:var(--r-f)}

/* ── صفحات الأعمال والوظائف والأكاديمية ──
   القوائم أعلاه كُتبت قبل وجود هذي الصفحات الثلاث، فأصنافها ما دخلتها
   أبداً وبقيت حادّة على الهاتف — مخالفة صريحة لقرار المالك ظلّت مخفيّة
   لأن أحداً لم يقارن بطاقةً ببطاقة عبر الصفحات.
   الموضع هنا مقصود: بـtokens.css يسري الانحناء على الهاتف والحاسبة معاً.
   وضعه بـdesktop.css كان يعطي البطاقة نفسها حادّةً بالجوّال منحنيةً
   بالحاسبة، وهو تناقض أسوأ من العطل الأصلي. */
.jcard,.ccard,.paybox,.soonbox,.co,.dead{border-radius:var(--r-xl)}
.st,.enter{border-radius:var(--r-f)}
.crumb{border-radius:var(--r-s)}
/* الوحدات المطويّة بصفحة الكورس: حاوية بإطار، تُقرأ صندوقاً */
.unit,.empty{border-radius:var(--r-m)}
.drawer{border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:var(--r-xl);border-end-end-radius:var(--r-xl)}
/* استثناءات مقصودة: الفاصل خطّ، والخريطة مسار حرّ، والحجاب يغطّي الشاشة */
.sep,.scrim,#iraq,#iraq *{border-radius:0}

/* هدف القفزة تحت الشريط اللاصق: header.top لاصق بارتفاع 59px،
   فأي انتقال لقسم بـ#id كان يوقفه تحته ويقصّ عنوانه. شفناه
   بالمحاكي: «انتشارنا» مقصوصة نصفين عند /#map. */
:where(section[id]){scroll-margin-top:71px}

/* التذييل يحمل شكلين: بالحاسبة يفترقان بالجهتين، وبالهاتف الجهتان
   تتوحّدان بالوسط فيقعان فوق بعض. نفرّقهما رأسياً: الأوّل يبقى بأعلاه
   والثاني يهبط لقاعه، وبينهما روابط التذييل وعنوانه. */
@media(max-width:719px){
  /* التذييل بالهاتف 469px وشكلان بحجم .9 يحتاجان 522 فيتراكبان. نصغّرهما
     هنا وحدهما فيتّسعان متعاقبَين: فوق الروابط وتحت العنوان. */
  footer   footer   footer }