/* ===================================================================
   X0T — صفحة الخدمات على تخطيط magnetofficial.com/services.html
   نفس البنية: هيرو ضخم ← شريط صورة بتعليق ← شبكة بطاقات مرقّمة
   ← خطوات العمل بخطّ علوي ← نداء ختامي.

   فروق مقصودة عن المصدر:
   - الاتجاه RTL، فكل الحشو والحدود بخصائص منطقية (inline-start/end).
   - الخطّ العربي Cairo لا يتحمّل مقاسات Archivo Black المتطرّفة ولا
     line-height:1 ولا text-transform:uppercase، فالمقاسات أصغر
     وارتفاعات الأسطر أوسع حتى لا تتقاطع الحروف والتشكيل.
   - الأكسنت هو تدرّج X0T لا الليموني.
   =================================================================== */

body.x0t-mg .mgs{
  --mgs-shell:var(--mg-shell);
  --mgs-maxw:1560px;
}

/* ===================================================================
   1) هيرو الصفحة
   =================================================================== */
body.x0t-mg .mgs-hero{
  position:relative;overflow:hidden;
  padding:clamp(64px,9vh,120px) var(--mgs-shell) clamp(32px,4.6vh,60px);
}
body.x0t-mg .mgs-hero__art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.30;
}
body.x0t-mg .mgs-hero__art::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(var(--mg-bg-rgb),.94),rgba(var(--mg-bg-rgb),.35) 55%,transparent 78%),
    linear-gradient(0deg,var(--mg-bg),transparent 55%);
}
body.x0t-mg .mgs-hero__glow{
  position:absolute;z-index:0;pointer-events:none;
  inset-inline-end:-10%;top:-20%;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(var(--mg-a-rgb),.22),transparent 62%);
}
body.x0t-mg .mgs-hero__inner{
  position:relative;z-index:2;max-width:var(--mgs-maxw);margin:0 auto;
}
body.x0t-mg .mgs-hero h1{
  font-weight:900;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(34px,5.6vw,84px);
  max-width:19ch;margin:clamp(18px,2.6vw,30px) 0 0;
  color:var(--mg-text);
}
body.x0t-mg .mgs-hero h1 .mgs-hl{
  background:var(--mg-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.x0t-mg .mgs-hero__sub{
  margin-top:clamp(20px,2.6vw,32px);max-width:62ch;
  font-size:clamp(15px,1.3vw,19px);color:var(--mg-text-2);line-height:1.75;
}
body.x0t-mg .mgs-hero__cta{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.2vw,40px);
}

/* ===================================================================
   2) شريط الصورة بتعليق
   =================================================================== */
body.x0t-mg .mgs-band{
  max-width:var(--mgs-maxw);margin:0 auto;
  padding:clamp(10px,3vw,40px) var(--mgs-shell) 0;
}
body.x0t-mg .mgs-band__frame{
  position:relative;overflow:hidden;
  border:1px solid var(--mg-hair2);border-radius:14px;
  aspect-ratio:16/6.4;background:#000;
  box-shadow:0 40px 110px -55px rgba(var(--mg-a-rgb),.30),0 30px 70px -30px rgba(0,0,0,.9);
}
body.x0t-mg .mgs-band__frame img{width:100%;height:100%;object-fit:cover;display:block}
body.x0t-mg .mgs-band__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to left,rgba(8,8,12,.78),rgba(8,8,12,.18) 48%,transparent 72%),
    linear-gradient(0deg,rgba(8,8,12,.72),transparent 44%);
}
body.x0t-mg .mgs-band__cap{
  position:absolute;z-index:2;
  inset-inline-start:clamp(22px,3vw,44px);
  bottom:clamp(18px,3vw,36px);
  max-width:32ch;
}
body.x0t-mg .mgs-band__cap .eyebrow{margin-bottom:12px}
body.x0t-mg .mgs-band__cap p{
  font-weight:900;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(20px,2.4vw,36px);color:#fff;margin:0;
}
body.x0t-mg .mgs-band__cap p .mgs-hl{
  background:var(--mg-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (max-width:680px){
  body.x0t-mg .mgs-band__frame{aspect-ratio:4/3}
  body.x0t-mg .mgs-band__cap{max-width:24ch}
}

/* ===================================================================
   3) شبكة بطاقات الخدمات
   =================================================================== */
body.x0t-mg .mgs-sec{
  padding:clamp(46px,6vw,96px) var(--mgs-shell);
}
body.x0t-mg .mgs-sec--tight{padding-top:clamp(30px,5vw,70px)}
body.x0t-mg .mgs-wrap{max-width:var(--mgs-maxw);margin:0 auto}

body.x0t-mg .mgs-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2vw,26px);
}
body.x0t-mg .mgs-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--mg-panel);
  border:1px solid var(--mg-hair);border-radius:10px;
  padding:clamp(26px,3vw,48px);
  transition:transform .5s var(--mg-ease),border-color .5s var(--mg-ease),background .5s var(--mg-ease);
}
body.x0t-mg .mgs-card:hover{
  transform:translateY(-8px);
  border-color:var(--mg-hair2);
  background:var(--mg-hover);
}
/* الرابط يغطّي البطاقة كلها دون أن يبتلع النصّ للقارئ الآلي */
body.x0t-mg .mgs-card__link{position:absolute;inset:0;z-index:3;border-radius:inherit}

body.x0t-mg .mgs-card__ico{
  width:48px;height:48px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--mg-hair2);border-radius:12px;
  margin-bottom:24px;font-size:19px;
  color:var(--mg-soft);
  transition:border-color .5s var(--mg-ease),color .5s var(--mg-ease);
}
body.x0t-mg .mgs-card:hover .mgs-card__ico{border-color:var(--mg-soft)}

body.x0t-mg .mgs-card__num{
  font-weight:900;color:var(--mg-dim);
  font-size:14px;letter-spacing:.1em;
}
body.x0t-mg .mgs-card__title{
  font-weight:900;letter-spacing:-.02em;line-height:1.28;
  font-size:clamp(21px,2.2vw,34px);
  margin:8px 0 14px;color:var(--mg-text);
}
body.x0t-mg .mgs-card__desc{
  font-size:15px;color:var(--mg-muted);line-height:1.7;margin:0 0 22px;
}
body.x0t-mg .mgs-card__tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;
}
body.x0t-mg .mgs-card__tags span{
  font-size:12px;color:var(--mg-muted);
  border:1px solid var(--mg-hair);border-radius:100px;
  padding:7px 14px;
  transition:border-color .4s var(--mg-ease),color .4s var(--mg-ease);
}
body.x0t-mg .mgs-card:hover .mgs-card__tags span{
  border-color:var(--mg-hair2);color:var(--mg-text);
}

/* ===================================================================
   4) رأس القسم
   =================================================================== */
body.x0t-mg .mgs-head{margin-bottom:clamp(30px,4vw,58px)}
body.x0t-mg .mgs-head h2{
  font-weight:900;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(26px,4vw,58px);
  max-width:20ch;margin:clamp(14px,1.8vw,22px) 0 0;color:var(--mg-text);
}

/* ===================================================================
   5) خطوات العمل — خطّ علوي ونقطة تضيء
   =================================================================== */
body.x0t-mg .mgs-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,30px);
}
body.x0t-mg .mgs-step{
  position:relative;padding-top:40px;
  border-top:2px solid var(--mg-hair);
  transition:border-color .5s var(--mg-ease);
}
body.x0t-mg .mgs-step.in{border-top-color:var(--mg-soft)}
body.x0t-mg .mgs-step__dot{
  position:absolute;top:-7px;inset-inline-start:0;
  width:12px;height:12px;border-radius:50%;
  background:var(--mg-hair2);
  transition:background .5s var(--mg-ease),box-shadow .5s var(--mg-ease);
}
body.x0t-mg .mgs-step.in .mgs-step__dot{
  background:var(--mg-soft);
  box-shadow:0 0 18px rgba(var(--mg-a-rgb),.65);
}
body.x0t-mg .mgs-step__num{
  font-weight:900;font-size:13px;letter-spacing:.1em;color:var(--mg-dim);
}
body.x0t-mg .mgs-step h3{
  font-weight:900;letter-spacing:-.02em;line-height:1.25;
  font-size:clamp(19px,2.1vw,32px);
  margin:10px 0 14px;color:var(--mg-text);
}
body.x0t-mg .mgs-step p{
  font-size:14px;color:var(--mg-muted);line-height:1.7;margin:0;
}

/* ===================================================================
   6) النداء الختامي
   =================================================================== */
body.x0t-mg .mgs-cta{
  position:relative;overflow:hidden;
  padding:clamp(60px,9vw,140px) var(--mgs-shell);
}
body.x0t-mg .mgs-cta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 100%,rgba(var(--mg-a-rgb),.20),transparent 70%);
}
body.x0t-mg .mgs-cta__wrap{
  position:relative;z-index:2;
  max-width:var(--mgs-maxw);margin:0 auto;text-align:center;
}
body.x0t-mg .mgs-cta h2{
  font-weight:900;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(30px,5vw,80px);
  max-width:20ch;margin:18px auto 0;color:var(--mg-text);
}
body.x0t-mg .mgs-cta p{
  margin:clamp(16px,2vw,24px) auto 0;max-width:56ch;
  font-size:clamp(15px,1.25vw,18px);color:var(--mg-text-2);line-height:1.75;
}
body.x0t-mg .mgs-cta__btns{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3.6vw,44px);
}

/* ===================================================================
   7) الاستجابة
   =================================================================== */
@media (max-width:1000px){
  body.x0t-mg .mgs-steps{grid-template-columns:repeat(2,1fr);gap:clamp(22px,4vw,36px)}
}
@media (max-width:760px){
  body.x0t-mg .mgs-grid{grid-template-columns:1fr}
  body.x0t-mg .mgs-steps{grid-template-columns:1fr}
  body.x0t-mg .mgs-hero{padding-top:clamp(56px,10vh,96px)}
}

/* ===================================================================
   بطاقة الخدمة بصورتها الخاصّة
   الصورة طبقة تحت المحتوى، وفوقها تدرّج قاتم يشتدّ للأسفل حيث الوصف
   والوسوم — فتظهر الصورة في أعلى البطاقة ويبقى كلّ نصّ فوق أرضية مصمتة.
   =================================================================== */
body.x0t-mg .mgs-card--img{overflow:hidden;background:var(--mg-bg)}
body.x0t-mg .mgs-card--img:hover{background:var(--mg-bg)}
body.x0t-mg .mgs-card__bg{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.66;filter:saturate(.85);
  transition:opacity .6s var(--mg-ease),transform .9s var(--mg-ease);
}
body.x0t-mg .mgs-card--img::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--mg-bg-rgb),.95) 0%,
    rgba(var(--mg-bg-rgb),.88) 42%,
    rgba(var(--mg-bg-rgb),.54) 100%);
}
/* المحتوى فوق الطبقتين (الرابط يحتفظ بـ z-index:3 الخاصّ به) */
body.x0t-mg .mgs-card--img > .mgs-card__ico,
body.x0t-mg .mgs-card--img > .mgs-card__num,
body.x0t-mg .mgs-card--img > .mgs-card__title,
body.x0t-mg .mgs-card--img > .mgs-card__desc,
body.x0t-mg .mgs-card--img > .mgs-card__tags{position:relative;z-index:2}
body.x0t-mg .mgs-card--img:hover .mgs-card__bg{opacity:.72;transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  body.x0t-mg .mgs-card--img:hover .mgs-card__bg{transform:none}
}