/* ============================================================
   صفحة تفاصيل الخدمة
   نصف القطر صفر، بلا ظلال، بلا تدرّجات - التزامًا بالهوية.
   الحركة تتبع نظام motion.css: المحور 32°، والمُدد 180/420/900،
   والتيسير --mo-ease، والتتابع 60 مللي. كل حالة مخفية معلّقة على
   html.js، فبدون جافاسكربت تظهر الصفحة كاملة.
   ============================================================ */

/* ---------- الترويسة ---------- */
.svd-hero{
  position:relative;overflow:hidden;
  background:var(--graphite);color:var(--bone);
  padding-block:clamp(32px, 5vw, 62px) clamp(34px, 5vw, 60px);
}
.svd-hero-bg{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;display:block;filter:brightness(.6);
}
/* حجاب مصمت لا متدرّج. مع تخفيض السطوع يبقى النصّ فوق 4.5:1
   مهما كانت الصورة مضيئة. */
.svd-hero-scrim{position:absolute;inset:0;display:block;background:rgba(14,15,16,.72);}
.svd-hero-in{position:relative;z-index:1;}

.svd-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  /* المحيطي يعطي 4.08 على الهيرو ونصّ المسار صغير - العظمي الباهت
     يرفعه إلى 8.14 ويبقى أخفت من العنوان فلا يزاحمه. */
  font-size:12px;color:var(--on-dark);margin-block-end:18px;
}
.svd-crumb a{color:var(--on-dark);text-decoration:none;}
.svd-crumb a:hover{text-decoration:underline;}
/* الصفحة الحالية أنصع من الرابط، فيُقرأ الموضع بلا لون إضافي */
.svd-crumb span:last-child{color:var(--bone);}

.svd-ico{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:46px;block-size:46px;margin-block-end:16px;
  border:1px solid rgba(242,239,233,.28);color:var(--bone);
}
.svd-ico svg{inline-size:24px;block-size:24px;}
.svd-ico .svc-ico-file{inline-size:24px;block-size:24px;object-fit:contain;}

.svd-hero h1{
  font-size:clamp(28px, 4.4vw, 46px);line-height:1.15;
  margin:0 0 12px;color:var(--bone);
}
.svd-lede{
  font-size:clamp(15px, 1.7vw, 18px);line-height:1.65;
  color:var(--on-dark);max-width:60ch;margin:0;
}
.svd-acts{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:26px;}
/* زرّ ثانوي على الداكن: الحدّ العظمي لا يزاحم زرّ الفعل الأزرق */
.btn.btn-ghost{
  background:transparent;color:var(--bone);
  border:1px solid rgba(242,239,233,.45);
}
.btn.btn-ghost:hover{border-color:var(--bone);background:rgba(242,239,233,.08);}

/* ---------- شريط المؤشّرات ---------- */
.svd-metrics{background:var(--surface-dark);color:var(--bone);}
.svd-mx{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.svd-mx > li{
  padding-block:22px;padding-inline-end:20px;padding-inline-start:20px;
  border-inline-start:1px solid rgba(242,239,233,.18);
}
.svd-mx > li:first-child{border-inline-start:0;padding-inline-start:0;}
.svd-mx b{
  display:block;font-size:clamp(19px, 2.4vw, 26px);font-weight:700;
  line-height:1.2;color:var(--bone);
}
.svd-mx span{
  display:block;margin-block-start:6px;
  /* 4.21 بالمحيطي ترسب لنصّ بهذا الحجم؛ العظمي الباهت 8.40 */
  font-size:12.5px;line-height:1.6;color:var(--on-dark);
}

/* ---------- عناوين ونصّ ---------- */
.svd-h2{font-size:22px;margin-block:44px 20px;}
.svd-h2:first-child{margin-block-start:0;}
.svd-p{font-size:15px;line-height:1.85;color:rgba(21,24,27,.78);}

/* ---------- الانفوجراف المتحرّك: مسار العمل ----------
   القضيب يُرسم من الأعلى للأسفل، ثم تصل النقطة وتثبت - مبدأ «الوصول
   والتثبيت». عنصر واحد يتحرّك في كل لحظة، والتتابع 60 مللي بين الخطوات. */
.svd-flow{list-style:none;margin:0;padding:0;}
.svd-step{position:relative;padding-inline-start:52px;padding-block-end:26px;}
.svd-step:last-child{padding-block-end:0;}

.svd-step-rail{
  position:absolute;inset-block:0;inset-inline-start:15px;
  inline-size:1px;background:var(--line);
}
/* آخر خطوة: كعب قصير تحت النقطة لا خطّ ممتدّ إلى فراغ */
.svd-step:last-child .svd-step-rail{block-size:16px;inset-block-end:auto;}

.svd-step-dot{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:32px;block-size:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--signal);background:var(--paper);
  font-family:var(--font-mono, monospace);font-size:12px;color:var(--signal);
}
.svd-step-dot i{font-style:normal;}
.svd-step-txt h3{font-size:16px;margin:6px 0 6px;line-height:1.4;}
.svd-step-txt p{font-size:14px;line-height:1.75;color:var(--muted);margin:0;max-width:62ch;}

html.js .svd-flow .svd-step-rail{transform:scaleY(0);transform-origin:top;}
html.js .svd-flow .svd-step-dot{opacity:0;transform:translate(-14%,34%);}
html[dir="rtl"].js .svd-flow .svd-step-dot{transform:translate(14%,34%);}

html.js .svd-flow.is-mo .svd-step-rail{
  animation:svdRail var(--mo-base) var(--mo-ease) forwards;
  animation-delay:calc(var(--i, 0) * var(--mo-stagger));
}
html.js .svd-flow.is-mo .svd-step-dot{
  animation:sbStack3 var(--mo-base) var(--mo-ease) forwards;
  animation-delay:calc(var(--i, 0) * var(--mo-stagger) + var(--mo-fast));
  opacity:1;
}
@keyframes svdRail{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ---------- ما تشمله الخدمة ---------- */
.svd-inc{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svd-inc > li{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--card);padding:14px 16px;
  font-size:14px;line-height:1.6;
}
.svd-tick{
  inline-size:17px;block-size:17px;flex-shrink:0;margin-block-start:2px;
  color:var(--signal);
}

/* ---------- أفكار ---------- */
.svd-ideas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
}
.svd-ideas > li{
  background:var(--card);padding:20px;
  border-block-start:2px solid var(--signal);
}
.svd-ideas h3{font-size:15px;margin:0 0 8px;line-height:1.45;}
.svd-ideas p{font-size:13.5px;line-height:1.7;color:var(--muted);margin:0;}

/* ---------- أسئلة شائعة ---------- */
.svd-faq{border-block-start:1px solid var(--line);}
.svd-faq details{border-block-end:1px solid var(--line);}
.svd-faq summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:15px;font-size:14.5px;font-weight:600;line-height:1.55;
}
.svd-faq summary::-webkit-details-marker{display:none;}
.svd-faq summary:hover{color:var(--signal);}
.svd-faq summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
/* علامة + تصير - عند الفتح: خطّان مستقيمان، بلا استدارة */
.svd-faq-x{position:relative;inline-size:13px;block-size:13px;flex-shrink:0;}
.svd-faq-x::before,.svd-faq-x::after{
  content:"";position:absolute;background:currentColor;
  inset-inline-start:0;inset-block-start:6px;inline-size:13px;block-size:1px;
}
.svd-faq-x::after{transform:rotate(90deg);transition:transform var(--mo-fast) var(--mo-ease);}
.svd-faq details[open] .svd-faq-x::after{transform:rotate(0deg);}
.svd-faq details p{
  margin:0;padding-block:0 16px;
  font-size:13.5px;line-height:1.8;color:var(--muted);max-width:70ch;
}

/* ---------- الجوال ---------- */
@media (max-width:760px){
  .svd-hero-scrim{background:rgba(14,15,16,.76);}
  .svd-mx > li{
    border-inline-start:0;padding-inline-start:0;
    border-block-start:1px solid rgba(242,239,233,.18);
  }
  .svd-mx > li:first-child{border-block-start:0;}
  .svd-acts .btn{flex:1 1 100%;text-align:center;}
}

/* ---------- تقليل الحركة ----------
   المحتوى يظهر كاملًا وثابتًا: تقليل الحركة لا يعني إخفاء شيء. */
@media (prefers-reduced-motion: reduce){
  html.js .svd-flow .svd-step-rail,
  html.js .svd-flow.is-mo .svd-step-rail{transform:scaleY(1);animation:none !important;}
  html.js .svd-flow .svd-step-dot,
  html.js .svd-flow.is-mo .svd-step-dot{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
  .svd-faq-x::after{transition:none;}
}

/* ---------- أيقونة الترويسة ----------
   القاعدة العامّة في main.css تخفي كل مسار .svc-ico حتى يصله محرّك
   الحركة. الأداة mo-draw على الغلاف هي ما يرسمها هنا (دراسة 32). */
.svd-ico .svc-ico{inline-size:24px;block-size:24px;}

/* ---------- انفوجراف الخدمة ----------
   شكل خطّي لكل خدمة يُرسم عند وصوله: الهيكل ثم التفصيل ثم الجزء الحيّ،
   والكتل المصمتة تصعد من قاعدتها. دراستا 32 «الرسم» و04 «الصعود». */
.svd-figwrap{
  background:var(--sand-2);
  border-block:1px solid var(--line);
  padding-block:clamp(26px, 4vw, 44px);
}
.svd-fig{
  display:flex;align-items:center;justify-content:center;
  color:var(--graphite);
}
.svc-fig{
  inline-size:min(560px, 100%);block-size:auto;display:block;
}
/* الكتل المصمتة بلون الإشارة: نقطة الجذب الوحيدة في الشكل */
.svc-fig .f-r{fill:var(--signal);stroke:none;}
.svc-fig .f-c{color:var(--signal);}

/* الحالة المبدئية: المسارات غير مرسومة والكتل منكمشة على قاعدتها */
html.js .svc-fig path{stroke-dasharray:100;stroke-dashoffset:100;}
html.js .svc-fig .f-r{transform:scaleY(0);transform-origin:bottom;}

html.js .mo-fig.is-mo .svc-fig .f-a{animation:svDraw var(--mo-long) var(--mo-ease) forwards;}
html.js .mo-fig.is-mo .svc-fig .f-b{animation:svDraw var(--mo-long) var(--mo-ease) 180ms forwards;}
/* الجزء الحيّ يُرسم ثم ينبض، فالشكل حيّ لا جامد - كما في أيقونات البطاقات */
html.js .mo-fig.is-mo .svc-fig .f-c{
  animation:svDraw var(--mo-long) var(--mo-ease) 360ms forwards,
            svPulse 3.6s ease-in-out 1.6s infinite;
}
html.js .mo-fig.is-mo .svc-fig .f-r{
  animation:sbRise var(--mo-base) var(--mo-ease) forwards;
  animation-delay:calc(420ms + var(--k, 0) * var(--mo-stagger));
}
/* بلا جافاسكربت يظهر الشكل مرسومًا كاملًا */
html:not(.js) .svc-fig path{stroke-dashoffset:0;}

@media (prefers-reduced-motion: reduce){
  html.js .svc-fig path{stroke-dashoffset:0;animation:none !important;}
  html.js .svc-fig .f-r{transform:none;animation:none !important;}
}

/* ---------- المشهد ثلاثي الأبعاد ----------
   حين يركّب service-scene.js لوحته يحمل الغلاف has-scene فيختفي
   الشكل المسطّح؛ وقبل ذلك (أو بلا WebGL) يبقى الاحتياط ظاهرًا. */
.svd-fig{position:relative;flex-direction:column;}
.svc-canvas{display:block;inline-size:100%;}
.svd-fig.has-scene .svc-fig{display:none;}