/* ===================================================================
   X0T — القالب التحريري لصفحة الخدمة
   نظام قابل لإعادة الاستخدام: بطل · تحدّي · قدرات · خريطة نظام · أثر · دعوة
   كل الحركة CSS خالص — لا مكتبات ولا جافاسكربت إضافي.
   =================================================================== */

body.x0t-mg .svE{
  --svE-gap:clamp(44px,6vw,96px);
  display:block;
}

/* سلّم طباعي واحد يحكم الصفحة كلها */
body.x0t-mg .svE-h1{
  font-size:clamp(1.9rem,4vw,3.4rem);font-weight:900;letter-spacing:0;line-height:1.2;
  color:var(--mg-text);margin:0;max-width:min(15em,100%);text-wrap:balance;
}
body.x0t-mg .svE-h2{
  font-size:clamp(1.45rem,2.7vw,2.35rem);font-weight:900;letter-spacing:0;line-height:1.28;
  color:var(--mg-text);margin:0;text-wrap:balance;
}
body.x0t-mg .svE-lead{
  font-size:clamp(15.5px,1.35vw,19px);line-height:1.75;color:var(--mg-text-2);
  max-width:52ch;margin:clamp(20px,2.4vw,30px) 0 0;
}
body.x0t-mg .svE-sec{padding-block:var(--svE-gap);position:relative}
body.x0t-mg .svE .wrap{max-width:var(--wrap);padding-inline:var(--mg-shell)}
body.x0t-mg .svE-head{max-width:min(820px,100%);margin-bottom:clamp(38px,5vw,72px)}
body.x0t-mg .svE-head--center{margin-inline:auto;text-align:center}
body.x0t-mg .svE-head .eyebrow{margin-bottom:18px}
/* شارة مرقّمة: 01 — التحدّي */
body.x0t-mg .svE-num{
  color:var(--mg-muted);font-variant-numeric:tabular-nums;
}
body.x0t-mg .svE-num::after{content:" — ";color:var(--mg-hair2)}

/* ===================================================================
   1) البطل
   =================================================================== */
body.x0t-mg .svE-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--mg-hair);
  padding-block:clamp(24px,3vw,44px) clamp(34px,4.4vw,64px);
}
body.x0t-mg .svE-hero__glow{
  position:absolute;top:-46vh;inset-inline-start:-12vw;z-index:0;pointer-events:none;
  width:72vw;height:72vw;max-width:1050px;max-height:1050px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--mg-a-rgb),var(--mg-glow)),rgba(var(--mg-b-rgb),calc(var(--mg-glow) * .5)) 46%,transparent 68%);
  filter:blur(54px);
}
body.x0t-mg .svE-hero__inner{position:relative;z-index:1}
body.x0t-mg .svE-hero__grid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(26px,4vw,54px);
}
body.x0t-mg .svE-hero__cta{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,44px);
}

/* الرسم المفاهيمي: عُقد متّصلة تنبض — بديل عن صورة نمطية */
body.x0t-mg .svE-hero__viz{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto;
  border-radius:14px;overflow:hidden;border:1px solid var(--mg-hair);background:var(--mg-panel);
}
body.x0t-mg .svE-viz__photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.55) brightness(.5);
}
html[data-theme="light"] body.x0t-mg .svE-viz__photo{filter:saturate(.7) brightness(1.06) contrast(.92);opacity:.5}
body.x0t-mg .svE-viz__scrim{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(var(--mg-bg-rgb),.35),rgba(var(--mg-bg-rgb),.9) 72%);
}
body.x0t-mg .svE-viz__net{
  position:absolute;inset:0;width:100%;height:100%;color:var(--mg-soft);
}
body.x0t-mg .svE-viz__cap{
  position:absolute;z-index:2;inset-inline:clamp(14px,3%,24px);bottom:clamp(14px,3%,24px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;
  font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--mg-muted);
  background:rgba(var(--mg-bg-rgb),.6);backdrop-filter:blur(6px);
  border:1px solid var(--mg-hair);border-radius:100px;padding:9px 14px;
}
body.x0t-mg .svE-viz__cap span{white-space:nowrap}
body.x0t-mg .svE-viz__cap span + span::before{content:"·";margin-inline-end:14px;color:var(--mg-hair2)}
body.x0t-mg .svE-viz__links path{
  stroke-dasharray:8 8;opacity:.5;
  animation:svE-dash 3.4s linear infinite;
}
@keyframes svE-dash{to{stroke-dashoffset:-32}}
body.x0t-mg .svE-viz__nodes circle{opacity:.85}
body.x0t-mg .svE-viz__core{
  fill:none;stroke:currentColor;stroke-width:1.5;
  transform-origin:160px 160px;animation:svE-core 4.6s ease-in-out infinite;
}
@keyframes svE-core{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:.55}}

/* ===================================================================
   2) التحدّي — تخطيط غير متماثل
   =================================================================== */
body.x0t-mg .svE-problem__grid{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,90px);align-items:start;
}
body.x0t-mg .svE-problem__say{position:sticky;top:104px}
body.x0t-mg .svE-problem__say .eyebrow{margin-bottom:18px}
body.x0t-mg .svE-problem__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--mg-hair)}
body.x0t-mg .svE-problem__list li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,34px);
  padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--mg-hair);margin:0;
}
body.x0t-mg .svE-problem__n{
  font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--mg-soft);padding-top:6px;
}
body.x0t-mg .svE-problem__list h3{
  font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:900;line-height:1.4;margin:0 0 8px;
}
body.x0t-mg .svE-problem__list p{color:var(--mg-muted);font-size:15px;line-height:1.8;margin:0}

/* ===================================================================
   3) القدرات — صفوف تحريرية مرقّمة
   =================================================================== */
body.x0t-mg .svE-rows{border-top:1px solid var(--mg-hair)}
body.x0t-mg .svE-row{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:clamp(44px,5vw,84px) 1fr auto;
  gap:clamp(16px,2.4vw,40px);align-items:center;
  padding:clamp(26px,3.4vw,44px) clamp(14px,1.6vw,26px);
  border-bottom:1px solid var(--mg-hair);
}
body.x0t-mg .svE-row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(var(--mg-a-rgb),.09);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--mg-ease);
}
body.x0t-mg .svE-row:hover::before{transform:scaleY(1)}
body.x0t-mg .svE-row__idx{
  font-size:clamp(13px,1.2vw,17px);font-weight:900;color:var(--mg-muted);
  transition:color .4s var(--mg-ease);
}
body.x0t-mg .svE-row:hover .svE-row__idx{color:var(--mg-soft)}
body.x0t-mg .svE-row__title{
  font-size:clamp(1.1rem,1.9vw,1.62rem);font-weight:900;line-height:1.34;margin:0;
  color:var(--mg-text);transition:color .4s var(--mg-ease);
}
body.x0t-mg .svE-row:hover .svE-row__title{color:var(--mg-soft)}
body.x0t-mg .svE-row__desc{
  color:var(--mg-muted);font-size:15px;line-height:1.8;margin:10px 0 0;max-width:62ch;
}
body.x0t-mg .svE-row__tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:340px}
body.x0t-mg .svE-row__tags span{
  font-size:11.5px;font-weight:700;color:var(--mg-muted);white-space:nowrap;
  border:1px solid var(--mg-hair);border-radius:100px;padding:6px 14px;
  transition:border-color .4s var(--mg-ease),color .4s var(--mg-ease);
}
body.x0t-mg .svE-row:hover .svE-row__tags span{border-color:var(--mg-hair2);color:var(--mg-text)}

/* ===================================================================
   4) خريطة النظام — محطّات متّصلة
   =================================================================== */
body.x0t-mg .svE-flow{background:var(--mg-panel);border-block:1px solid var(--mg-hair)}
body.x0t-mg .svE-map{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;
}
body.x0t-mg .svE-map__step{
  position:relative;padding:clamp(46px,5vw,64px) clamp(8px,1vw,16px) 0;text-align:center;margin:0;
}
/* الخيط الواصل */
body.x0t-mg .svE-map__step::before{
  content:"";position:absolute;top:clamp(16px,1.7vw,22px);inset-inline-start:50%;
  width:100%;height:1px;background:var(--mg-hair);
}
body.x0t-mg .svE-map__step:last-child::before{display:none}
body.x0t-mg .svE-map__dot{
  position:absolute;top:calc(clamp(16px,1.7vw,22px) - 6px);inset-inline-start:calc(50% - 6px);
  width:12px;height:12px;border-radius:50%;background:var(--mg-panel);
  border:1.5px solid var(--mg-hair2);transition:.45s var(--mg-ease);
}
body.x0t-mg .svE-map__step::after{
  content:"";position:absolute;top:calc(clamp(16px,1.7vw,22px) - 12px);
  inset-inline-start:calc(50% - 12px);width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--mg-a-rgb),.5),transparent 66%);
  opacity:0;transform:scale(.5);transition:.5s var(--mg-ease);
}
body.x0t-mg .svE-map__step:hover .svE-map__dot,
body.x0t-mg .svE-map__step.in .svE-map__dot{
  background:var(--mg-grad);border-color:transparent;transform:scale(1.25);
}
body.x0t-mg .svE-map__step:hover::after,
body.x0t-mg .svE-map__step.in::after{opacity:1;transform:scale(1)}
body.x0t-mg .svE-map__n{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--mg-soft);
  margin-bottom:8px;
}
body.x0t-mg .svE-map__step h3{
  font-size:clamp(.92rem,1.15vw,1.08rem);font-weight:900;line-height:1.4;margin:0 0 8px;
}
body.x0t-mg .svE-map__step p{
  color:var(--mg-muted);font-size:13px;line-height:1.65;margin:0;
  max-width:20ch;margin-inline:auto;
}

/* ===================================================================
   5) الأثر
   =================================================================== */
body.x0t-mg .svE-impact__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--mg-hair);border:1px solid var(--mg-hair);
}
body.x0t-mg .svE-impact__cell{
  background:var(--mg-bg);padding:clamp(26px,3vw,44px);min-height:clamp(160px,15vw,200px);
  display:flex;flex-direction:column;gap:12px;
  transition:background .45s var(--mg-ease);
}
body.x0t-mg .svE-impact__cell:hover{background:var(--mg-hover)}
body.x0t-mg .svE-impact__cell h3{
  font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:900;line-height:1.4;margin:0;
}
body.x0t-mg .svE-impact__cell p{color:var(--mg-muted);font-size:14.5px;line-height:1.8;margin:0}

/* ===================================================================
   6) الدعوة
   =================================================================== */
body.x0t-mg .svE-cta{padding-block:0 var(--svE-gap)}
body.x0t-mg .svE-cta__box{
  background:var(--mg-panel);border:1px solid var(--mg-hair);border-radius:14px;
  padding:clamp(40px,6vw,90px) clamp(24px,4vw,72px);text-align:center;
  position:relative;overflow:hidden;
}
body.x0t-mg .svE-cta__box::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% -20%,rgba(var(--mg-a-rgb),calc(var(--mg-glow) + .04)),transparent 62%);
}
body.x0t-mg .svE-cta__box > *{position:relative}
body.x0t-mg .svE-cta__box .svE-h2{max-width:min(680px,100%);margin-inline:auto}
body.x0t-mg .svE-cta__box p{
  color:var(--mg-muted);font-size:15.5px;line-height:1.85;
  max-width:min(620px,100%);margin:18px auto 0;
}
body.x0t-mg .svE-cta__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(28px,3.4vw,42px);
}

/* المحتوى الحرّ */
body.x0t-mg .svE-body .entry-content{max-width:min(760px,100%)}

/* ===================================================================
   7) الاستجابة — 1280 / 1024 / 768 / 430 / 390 / 375
   =================================================================== */
@media (max-width:1200px){
  body.x0t-mg .svE-map{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(26px,4vw,44px)}
  body.x0t-mg .svE-map__step:nth-child(4n)::before{display:none}
}
@media (max-width:1024px){
  body.x0t-mg .svE-hero__grid{grid-template-columns:1fr;gap:clamp(30px,6vw,48px)}
  body.x0t-mg .svE-hero__viz{max-width:420px}
  body.x0t-mg .svE-problem__grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  body.x0t-mg .svE-problem__say{position:static}
  body.x0t-mg .svE-impact__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  body.x0t-mg .svE-row{grid-template-columns:auto 1fr;row-gap:14px}
  body.x0t-mg .svE-row__tags{grid-column:1 / -1;justify-content:flex-start;max-width:none}
}
@media (max-width:768px){
  body.x0t-mg .svE-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.x0t-mg .svE-map__step::before{display:none}
  body.x0t-mg .svE-map__step:nth-child(4n)::before{display:none}
}
@media (max-width:480px){
  body.x0t-mg .svE{--svE-gap:clamp(44px,12vw,66px)}
  body.x0t-mg .svE-h1{max-width:none}
  body.x0t-mg .svE-hero__viz{max-width:100%}
  body.x0t-mg .svE-map{grid-template-columns:1fr;row-gap:22px}
  body.x0t-mg .svE-map__step{
    padding:0 0 0 0;text-align:start;
    display:grid;grid-template-columns:auto 1fr;gap:14px;
    border-bottom:1px solid var(--mg-hair);padding-bottom:20px;
  }
  body.x0t-mg .svE-map__step:last-child{border-bottom:0}
  body.x0t-mg .svE-map__dot{position:static;inset:auto;margin-top:7px}
  body.x0t-mg .svE-map__step::after{display:none}
  body.x0t-mg .svE-map__n{grid-column:2;margin-bottom:4px}
  body.x0t-mg .svE-map__step h3,
  body.x0t-mg .svE-map__step p{grid-column:2;max-width:none;margin-inline:0}
  body.x0t-mg .svE-impact__grid{grid-template-columns:1fr}
  body.x0t-mg .svE-cta__actions .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  body.x0t-mg .svE-viz__links path,
  body.x0t-mg .svE-viz__core{animation:none}
}

/* ===================================================================
   خلفية قسم البطل (حقل «صورة خلفية الهيرو» في ميتا الخدمة)
   الصورة طبقة تحت المحتوى، وفوقها حجاب متدرّج يقوى ناحية النصّ.
   ‎.svE-hero__inner‎ عنده z-index:1 فالمحتوى يبقى فوق كل هذه الطبقات.
   =================================================================== */
body.x0t-mg .svE-hero__art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.5;filter:saturate(.85);
}
body.x0t-mg .svE-hero__scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to left,
    rgba(var(--mg-bg-rgb),.40),
    rgba(var(--mg-bg-rgb),.80) 50%,
    rgba(var(--mg-bg-rgb),.94));
}
body.x0t-mg .svE-hero__ov{position:absolute;inset:0;z-index:0;pointer-events:none}
/* الوهج الافتراضي يزاحم الصورة، فنخفّفه عند وجود خلفية */
body.x0t-mg .svE-hero--art .svE-hero__glow{opacity:.45}
@media (max-width:860px){
  body.x0t-mg .svE-hero__scrim{
    background:linear-gradient(to bottom,
      rgba(var(--mg-bg-rgb),.62),
      rgba(var(--mg-bg-rgb),.88) 60%,
      rgba(var(--mg-bg-rgb),.96));
  }
}