/* ═══════════════════════════════════════════════════════════════════════════
   A PLAN — تصميم مُحدَّد بالقسم (مسار أ)
   ───────────────────────────────────────────────────────────────────────────
   القاعدة الحاكمة بعد فشل الطبقة العامة:
   لا محدّد عام. كل قاعدة مسبوقة باسم قسمها، وبعد التحقق من نبرة خلفيته
   بالقياس لا بالافتراض. الثيم يجعل أقسامًا داكنة عبر تدرّج داخل
   background-image لا عبر background-color — لذلك يُقاس المرئي، لا المُعلَن.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ القسم: .blog-posts-section ══════════════════════════════════════════
   خلفية مقيسة: rgb(248,
249,
250) — فاتحة. آمن ضبط نص داكن.
   الطول المقيس قبل: 3,
598px = 27% من الصفحة.
   المشكلة: الثيم يحوّل كل <li> إلى بطاقة وردية في شبكة 3 أعمدة، فينتج
   جدار من عشرات البطاقات المتطابقة. المحتوى نفسه جيد — العلّة عرضية.
   ═══════════════════════════════════════════════════════════════════════ */

.blog-posts-section {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) !important;
  background-color: #f8f9fa !important;
}body.home .blog-posts-section > .container > .section-title {
  text-align: center;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.32;
  color: #14182b;
  max-width: 24ch;
  margin: 0 0 2.4rem;
}body.home .blog-posts-section > .container > .section-title::before {
  content: "";
  display: block;
  width: 44px; height: 3px;
  background: #e31e24;
  border-radius: 2px;
  margin-inline: auto; margin-block-end: 1rem;
}body.home .blog-posts-section .accent-line { display: none; }/* ── التخطيط: محتوى + فهرس لاصق ─────────────────────────────────────────── */
.blog-posts-section .blog-content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem);
  gap: clamp(1.6rem, 1rem + 2.4vw, 3.4rem);
  align-items: start;
  max-width: 78rem !important;
  padding-inline: clamp(1rem, .5rem + 2vw, 2rem);
}body.home .blog-posts-section .blog-content { grid-column: 1; min-width: 0; }body.home .blog-posts-section .toc-container {
  grid-column: 2;
  position: sticky;
  top: 6.5rem;
  background: #fff;
  border: 1px solid #e6e4de;
  border-radius: 10px;
  padding: 1.15rem 1.2rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}body.home .blog-posts-section .toc-title {
  font-size: .82rem;
  font-weight: 700;
  color: #6b7186;
  margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .45rem;
}body.home .blog-posts-section .toc-title i { color: #e31e24; font-size: .78rem; }body.home .blog-posts-section .toc-list a {
  display: block;
  padding: .42rem 0;
  font-size: .91rem;
  line-height: 1.6;
  color: #4a5068;
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  padding-inline-start: .7rem;
  transition: color .22s ease, border-color .22s ease;
}body.home .blog-posts-section .toc-list a:hover,
body.home .blog-posts-section .toc-list a.active {
  color: #14182b;
  border-inline-start-color: #e31e24;
}body.home .blog-posts-section .back-to-top {
  margin-block-start: 1rem;
  width: 100%;
  background: #f3f2ef;
  border: 1px solid #e6e4de;
  border-radius: 7px;
  padding: .55rem;
  font-size: .86rem;
  color: #4a5068;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background .22s ease, color .22s ease;
}body.home .blog-posts-section .back-to-top:hover { background: #e31e24; color: #fff; border-color: #e31e24; }/* ── المحتوى: نص طويل تحريري بدل جدار بطاقات ───────────────────────────── */
.blog-posts-section .blog-content h2 {
  font-size: clamp(1.32rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
  color: #14182b;
  margin: 2.6rem 0 .9rem;
  max-width: 34ch;
  scroll-margin-top: 6.5rem;
}body.home .blog-posts-section .blog-content h2:first-child { margin-block-start: 0; }body.home .blog-posts-section .blog-content h3 {
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  font-weight: 700;
  color: #14182b;
  margin: 1.9rem 0 .6rem;
}body.home .blog-posts-section .blog-content p {
  font-size: 1.02rem;
  line-height: 1.95;
  color: #4a5068;
  max-width: 72ch;
  margin: 0 0 1.1rem;
}body.home .blog-posts-section .blog-content a {
  color: #bb1418;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}body.home .blog-posts-section .blog-content a:hover { color: #e31e24; }/* القوائم: من شبكة بطاقات وردية إلى قائمة تعريفية */
.blog-posts-section .blog-content ul,
body.home .blog-posts-section .blog-content ol {
  display: block !important;
  grid-template-columns: none !important;
  list-style: none;
  margin: 1.3rem 0 2rem;
  padding: 0;
  max-width: 72ch;
  border-block-start: 1px solid #e6e4de;
}body.home .blog-posts-section .blog-content li {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-block-end: 1px solid #e6e4de !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding-block: .95rem !important;
  padding-inline: 1.5rem 0 !important;
  text-align: start !important;
  font-size: 1rem;
  line-height: 1.9;
  color: #4a5068;
  position: relative;
}body.home .blog-posts-section .blog-content li > strong:first-child {
  display: block;
  color: #14182b;
  font-size: 1.03em;
  font-weight: 700;
  margin-block-end: .28rem;
}/* علامة ✓ المكررة تُستبدل بنقطة على خط العنوان */
.blog-posts-section .blog-content li > i,
body.home .blog-posts-section .blog-content li > svg,
body.home .blog-posts-section .blog-content li::before { display: none !important; content: none !important; }body.home .blog-posts-section .blog-content li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: 1.5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e31e24;
}body.home .blog-posts-section .blog-content ol { counter-reset: ap-n; }body.home .blog-posts-section .blog-content ol > li { counter-increment: ap-n; }body.home .blog-posts-section .blog-content ol > li::after {
  content: counter(ap-n);
  background: none;
  width: auto; height: auto;
  top: 1rem;
  color: #e31e24;
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}body.home .blog-posts-section .blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
}body.home .blog-posts-section .blog-content th {
  background: #0a1745; color: #fff;
  padding: .8rem .9rem; text-align: start; white-space: nowrap;
}body.home .blog-posts-section .blog-content td {
  padding: .75rem .9rem;
  border-block-end: 1px solid #e6e4de;
  color: #4a5068;
}

@media (max-width: 900px) {body.home .blog-posts-section .blog-content-wrapper { grid-template-columns: minmax(0, 1fr); }body.home .blog-posts-section .toc-container {
    grid-row: 1; grid-column: 1;
    position: static; max-height: none;
  }body.home .blog-posts-section .blog-content { grid-column: 1; }
}/* ── تصحيحات بعد الفحص البصري الأول ─────────────────────────────────────── */

/* عناوين H2 كانت داخل بطاقة بيضاء بشريط أحمر من الثيم — نُسطّحها
   حتى يقرأ القسم كمقال متصل لا كسلسلة بطاقات. */
.blog-posts-section .blog-content > h2 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}body.home .blog-posts-section .blog-content > h2::before,
body.home .blog-posts-section .blog-content > h2::after { content: none !important; display: none !important; }/* الفقرات كانت كذلك داخل صناديق مؤطّرة */
.blog-posts-section .blog-content > p {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}/* حاوية القوائم: نزيل الإطار الخارجي ونُبقي الفواصل الداخلية فقط */
.blog-posts-section .blog-content > ul,
body.home .blog-posts-section .blog-content > ol {
  background: transparent !important;
  border-inline: 0 !important;
  border-block-end: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}/* الفهرس الجانبي يُعرض دائمًا — القياس أثبت أنه يحوي 6 روابط فعلية،
   وقاعدة :has() السابقة كانت تخفيه بالخطأ فتترك فجوة بعرض عمود كامل. */
.blog-posts-section .toc-container { display: block !important; }

/* الثيم يفرض عمودًا واحدًا على الحاوية بأولوية أعلى — نثبّت الشبكة صراحةً
   حتى يعمل الفهرس كعمود جانبي لاصق لا ككتلة فوق المحتوى. */
@media (min-width: 901px) {body.home .blog-posts-section .blog-content-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem) !important;
  }
}/* ═══════════════════════════════════════════════════════════════════════════
   خريطة نبرة أقسام الصفحة الرئيسية — مقيسة لا مفترضة (2026-08-07)
   ───────────────────────────────────────────────────────────────────────────
   داكن  : .hero rgb(33,
37,
41) · .premium-about-section rgb(8,
20,
64)
           · .aplan-cta rgb(207,
25,
30)          → النص أبيض، الأسطح شفافة فاتحة
   فاتح  : #services · .aplan-why-us · .aplan-process · .aplan-portfolio
           · .faq-section  rgb(252,
252,
253)      → النص داكن، الأسطح بيضاء
   ⚠️ فرض خلفية فاتحة على premium-about (وهو كحلي بنص أبيض) هو ما أنتج
   تباين 1.04 في المحاولة السابقة. لا تُفرض خلفية على قسم دون قياسه.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ #services — فاتح ═══════════════════════════════════════════════════ */
#services .aplan-section-title {
  text-align: center; font-size: clamp(1.8rem,1.4rem+1.5vw,2.7rem);
  font-weight: 800; line-height: 1.3; color: #14182b; max-width: 22ch; margin: 0 0 .6rem;
}body.home #services .aplan-section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}body.home #services .aplan-section-subtitle {
  text-align: center; font-size: 1.06rem; line-height: 1.85;
  color: #565c72; max-width: 60ch; margin: 0 0 2.6rem;
}body.home #services .aplan-services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
  gap: 1px !important;
  background: #e6e4de;
  border: 1px solid #e6e4de;
  border-radius: 12px;
  overflow: hidden;
}body.home #services .aplan-service-card {
  background: #fff !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 1.9rem 1.7rem !important;
  transition: background .35s cubic-bezier(.22,1,.36,1);
}body.home #services .aplan-service-card:hover { background: #fdfbfb !important; }body.home #services .aplan-service-icon {
  width: 2.6rem !important; height: 2.6rem !important;
  background: rgba(227,30,36,.09) !important; color: #e31e24 !important;
  border-radius: 9px !important; display: grid !important; place-items: center;
  font-size: 1rem !important; margin: 0 0 1.05rem !important; box-shadow: none !important;
}body.home #services .aplan-service-card h3 {
  font-size: 1.22rem !important; font-weight: 700 !important;
  color: #14182b !important; margin: 0 0 .5rem !important; line-height: 1.45 !important;
}body.home #services .aplan-service-card p {
  font-size: .98rem !important; line-height: 1.85 !important;
  color: #565c72 !important; margin: 0 0 1.1rem !important;
}body.home #services .aplan-read-more-btn {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: #bb1418 !important; font-weight: 700; font-size: .93rem;
  display: inline-flex; align-items: center; gap: .45rem;
}body.home #services .aplan-service-card:hover .aplan-read-more-btn i { transform: translateX(-4px); }body.home #services .aplan-read-more-btn i { transition: transform .35s cubic-bezier(.22,1,.36,1); }/* ═══ .aplan-why-us — فاتح ═══════════════════════════════════════════════ */
.aplan-why-us .aplan-section-title,
body.home .aplan-process .aplan-section-title {
  text-align: center; font-size: clamp(1.8rem,1.4rem+1.5vw,2.7rem);
  font-weight: 800; line-height: 1.3; color: #14182b; max-width: 22ch; margin: 0 0 .6rem;
}body.home .aplan-why-us .aplan-section-title::before,
body.home .aplan-process .aplan-section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}body.home .aplan-why-us .aplan-section-subtitle,
body.home .aplan-process .aplan-section-subtitle {
  text-align: center; font-size: 1.06rem; line-height: 1.85;
  color: #565c72; max-width: 60ch; margin: 0 0 2.6rem;
}body.home .aplan-why-us .aplan-features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;
  gap: 0 2.4rem !important;
}body.home .aplan-why-us .aplan-feature-item {
  background: transparent !important; border: 0 !important;
  border-block-end: 1px solid #e6e4de !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 1.35rem 0 !important;
  display: flex !important; align-items: flex-start; gap: .85rem;
}body.home .aplan-why-us .aplan-feature-icon {
  flex: 0 0 auto; width: 2.1rem !important; height: 2.1rem !important;
  background: rgba(227,30,36,.09) !important; color: #e31e24 !important;
  border-radius: 7px !important; display: grid !important; place-items: center;
  font-size: .85rem !important; box-shadow: none !important; margin: 0 !important;
}body.home .aplan-why-us .aplan-feature-item h3,
body.home .aplan-why-us .aplan-feature-item h4 {
  font-size: 1.06rem !important; font-weight: 700 !important;
  color: #14182b !important; margin: 0 0 .28rem !important;
}body.home .aplan-why-us .aplan-feature-item p {
  font-size: .96rem !important; line-height: 1.85 !important;
  color: #565c72 !important; margin: 0 !important;
}/* ═══ .aplan-process — فاتح · خط زمني مترابط ═════════════════════════════ */
.aplan-process .aplan-process-timeline {
  display: grid !important; gap: 0 !important;
  max-width: 56rem; margin-inline: 0 auto;
}body.home .aplan-process .aplan-process-step {
  position: relative;
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 4rem 2.4rem 0 !important;
  display: block !important;
}body.home .aplan-process .aplan-process-step::before {
  content: ""; position: absolute;
  inset-inline-end: 1.42rem; top: 3rem; bottom: 0;
  width: 1px; background: linear-gradient(to bottom,#e0ddd6,transparent);
}body.home .aplan-process .aplan-process-step:last-child::before { display: none; }body.home .aplan-process .aplan-step-number {
  position: absolute; inset-inline-end: 0; top: 0;
  width: 2.85rem !important; height: 2.85rem !important;
  display: grid !important; place-items: center;
  background: #0a1745 !important; color: #fff !important;
  border-radius: 50% !important; font-size: .98rem !important; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px #fcfcfd !important;
  transition: background .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}body.home .aplan-process .aplan-process-step:hover .aplan-step-number {
  background: #e31e24 !important; transform: scale(1.06);
}body.home .aplan-process .aplan-step-content { padding: 0 !important; }body.home .aplan-process .aplan-step-content h3 {
  font-size: 1.24rem !important; font-weight: 700 !important;
  color: #14182b !important; margin: .35rem 0 .45rem !important; line-height: 1.45 !important;
}body.home .aplan-process .aplan-step-content p {
  font-size: 1rem !important; line-height: 1.9 !important;
  color: #565c72 !important; margin: 0 !important; max-width: 60ch;
}/* ═══ .premium-about-section — داكن كحلي rgb(8,
20,
64) · النص أبيض ════════
   لا نفرض خلفية. نضبط الأسطح الداخلية بشفافية بيضاء فقط. */
.premium-about-section .feature-item {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important; box-shadow: none !important;
  padding: 1.1rem 1.2rem !important;
  display: flex !important; align-items: flex-start; gap: .8rem;
}body.home .premium-about-section .feature-icon {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem;
  background: rgba(227,30,36,.22) !important; color: #ff8a8d !important;
  border-radius: 7px !important; display: grid !important; place-items: center;
  font-size: .85rem !important; box-shadow: none !important;
}body.home .premium-about-section .feature-text { color: rgba(255,255,255,.86) !important; line-height: 1.8; }body.home .premium-about-section .video-wrapper,
body.home .premium-about-section .video-container {
  border-radius: 14px !important; overflow: hidden;
  box-shadow: 0 28px 70px -30px rgba(0,0,0,.8) !important;
  border: 1px solid rgba(255,255,255,.1);
}body.home .premium-about-section .title-underline { background: #e31e24 !important; }/* ═══ .aplan-cta — داكن أحمر rgb(207,
25,
30) · النص أبيض ══════════════════ */
.aplan-cta .cta-button,
body.home .aplan-cta .request-call {
  background: #fff !important; color: #bb1418 !important;
  border: 0 !important; font-weight: 700;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.45) !important;
}body.home .aplan-cta .cta-button:hover { transform: translateY(-2px); }body.home .aplan-cta .btn-secondary {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.55) !important;
}body.home .aplan-cta .btn-secondary:hover { background: rgba(255,255,255,.12) !important; }/* الثيم يرسم قوسًا أحمر متوسّطًا عبر ::after تحت عناوين الأقسام — يتعارض مع
   الشارة العلوية الجديدة فينتج علامتا تشكيل. نُبقي واحدة فقط. */
#services .aplan-section-title::after,
body.home .aplan-why-us .aplan-section-title::after,
body.home .aplan-process .aplan-section-title::after,
body.home .aplan-portfolio .section-title::after,
body.home .faq-section .section-title::after,
body.home .blog-posts-section .section-title::after { content: none !important; display: none !important; }body.home #services .aplan-title-shape,
body.home .aplan-why-us .aplan-title-shape,
body.home .aplan-process .aplan-title-shape,
body.home .aplan-why-us .accent-line,
body.home .aplan-process .accent-line,
body.home #services .accent-line { display: none !important; }/* ═══ .hero — القسم داكن rgb(33,
37,
41) · الفورم داخله أبيض ══════════════ */
.hero .hero-flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem) !important;
  align-items: center !important;
}body.home .hero .hero-content { grid-column: 1; text-align: start !important; }body.home .hero .hero-content h1 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem) !important;
  font-weight: 800 !important; line-height: 1.24 !important;
  color: #fff !important; margin: 0 0 1.1rem !important;
  max-width: 22ch; text-wrap: balance;
}body.home .hero .hero-content h1::after {
  content: ""; display: block; width: 88px; height: 4px;
  margin-block-start: 1.3rem; border-radius: 2px;
  background: linear-gradient(to left, #e31e24, #ff4d52);
}body.home .hero .hero-content > p {
  font-size: clamp(1.02rem, .95rem + .45vw, 1.28rem) !important;
  line-height: 1.85 !important; color: rgba(255,255,255,.72) !important;
  max-width: 48ch; margin: 0 0 2rem !important;
}body.home .hero .hero-buttons {
  display: flex; flex-wrap: wrap; gap: .9rem;
  justify-content: flex-start !important;
}body.home .hero .hero-buttons .cta-button,
body.home .hero .hero-buttons .request-call {
  background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  border: 0 !important; color: #fff !important; font-weight: 700;
  padding: .92rem 1.7rem !important; border-radius: 8px !important;
  box-shadow: 0 12px 30px -12px rgba(227,30,36,.7) !important;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}body.home .hero .hero-buttons .cta-button:hover { transform: translateY(-2px); }body.home .hero .hero-buttons .btn-secondary {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.34) !important;
  padding: .92rem 1.7rem !important; border-radius: 8px !important;
  transition: background .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1);
}body.home .hero .hero-buttons .btn-secondary:hover {
  background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.6) !important;
}/* الفورم: سطح أبيض مقيس — النص الداكن آمن داخله */
.hero .aplan-hero-form {
  grid-column: 2;
  background: #fff !important;
  border: 1px solid #e6e4de !important;
  border-radius: 14px !important;
  padding: clamp(1.4rem, 1rem + 1vw, 2rem) !important;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6) !important;
}body.home .hero .aplan-hero-form h3,
body.home .hero .aplan-hero-form h2 {
  color: #14182b !important; font-size: 1.16rem !important;
  font-weight: 700 !important; margin: 0 0 1.1rem !important;
  text-align: start !important; line-height: 1.55 !important;
}body.home .hero .aplan-hero-form .form-group { margin-block-end: .72rem !important; }body.home .hero .aplan-hero-form input,
body.home .hero .aplan-hero-form select,
body.home .hero .aplan-hero-form textarea {
  width: 100%; background: #fbfaf8 !important;
  border: 1px solid #ddd9d1 !important; border-radius: 8px !important;
  padding: .82rem 1rem !important; color: #14182b !important;
}body.home .hero .aplan-hero-form button[type="submit"],
body.home .hero .aplan-hero-form .cta-button {
  width: 100%; background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  border: 0 !important; border-radius: 8px !important;
  padding: .92rem !important; font-weight: 700; color: #fff !important;
}
@media (max-width: 900px) {body.home .hero .hero-flex { grid-template-columns: 1fr !important; }body.home .hero .hero-content,
body.home .hero .aplan-hero-form { grid-column: 1; }body.home .hero .hero-content h1 { max-width: none; }
}/* ═══ .aplan-portfolio — فاتح · البيانات ظاهرة لا مخفية خلف hover ════════ */
.aplan-portfolio .section-title,
body.home .aplan-portfolio .aplan-section-title {
  text-align: center; font-size: clamp(1.8rem,1.4rem+1.5vw,2.7rem);
  font-weight: 800; color: #14182b; max-width: 22ch; margin: 0 0 .6rem;
}body.home .aplan-portfolio .section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}body.home .aplan-portfolio .aplan-category-tab {
  background: transparent !important; border: 1px solid #e0ddd6 !important;
  border-radius: 100px !important; padding: .5rem 1.15rem !important;
  color: #565c72 !important; font-size: .92rem; font-weight: 600;
  transition: background .28s cubic-bezier(.22,1,.36,1), color .28s, border-color .28s;
}body.home .aplan-portfolio .aplan-category-tab:hover { border-color: #c9c5bc !important; }body.home .aplan-portfolio .aplan-category-tab.active {
  background: #0a1745 !important; border-color: #0a1745 !important; color: #fff !important;
}body.home .aplan-portfolio .aplan-portfolio-card {
  border-radius: 12px !important; overflow: hidden;
  border: 1px solid #e6e4de !important; box-shadow: none !important;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}body.home .aplan-portfolio .aplan-portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -22px rgba(10,23,69,.32) !important;
}body.home .aplan-portfolio .aplan-slider-btn {
  background: #fff !important; border: 1px solid #e0ddd6 !important;
  color: #14182b !important; box-shadow: 0 4px 14px -6px rgba(10,23,69,.22) !important;
  transition: background .28s, color .28s;
}body.home .aplan-portfolio .aplan-slider-btn:hover { background: #e31e24 !important; color: #fff !important; border-color: #e31e24 !important; }/* ═══ .clients — فاتح · 48 شعارًا: توحيد الوزن البصري ════════════════════ */
.clients .section-title {
  text-align: center; font-size: clamp(1.8rem,1.4rem+1.5vw,2.7rem);
  font-weight: 800; color: #14182b; max-width: 22ch; margin: 0 0 1.8rem;
}body.home .clients .section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}body.home .clients .clients-prev,
body.home .clients .clients-next {
  background: #fff !important; border: 1px solid #e0ddd6 !important;
  color: #14182b !important; box-shadow: none !important;
}/* ═══ .aplan-blog-section + .faq-section — فاتح ══════════════════════════ */
.aplan-blog-section .aplan-section-title,
body.home .faq-section .aplan-section-title {
  text-align: center; font-size: clamp(1.8rem,1.4rem+1.5vw,2.7rem);
  font-weight: 800; color: #14182b; max-width: 22ch; margin: 0 0 .6rem;
}body.home .aplan-blog-section .aplan-section-title::before,
body.home .faq-section .aplan-section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}body.home .aplan-blog-section .aplan-section-subtitle,
body.home .faq-section .aplan-section-subtitle {
  text-align: center; font-size: 1.06rem; line-height: 1.85;
  color: #565c72; max-width: 60ch; margin: 0 0 2.4rem;
}body.home .aplan-blog-section .aplan-section-title::after,
body.home .faq-section .aplan-section-title::after { content: none !important; display: none !important; }body.home .aplan-blog-section .blog-thumb,
body.home .aplan-blog-section .aplan-blog-image {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px 10px 0 0;
}body.home .aplan-blog-section .blog-thumb img,
body.home .aplan-blog-section .aplan-blog-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}body.home .aplan-blog-section article:hover img,
body.home .aplan-blog-section .aplan-blog-image:hover img { transform: scale(1.04); }body.home .aplan-blog-section .aplan-fancy-btn {
  background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  border: 0 !important; border-radius: 8px !important; color: #fff !important;
  font-weight: 700; padding: .85rem 1.7rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   درس مقيس: نفس اسم القسم بخلفية مختلفة على صفحة أخرى
   ───────────────────────────────────────────────────────────────────────────
   .aplan-why-us على الرئيسية خلفيته rgb(252,252,253) فاتح، وعلى صفحة
   الاستضافة rgb(33,37,41) داكن. لوني الداكن الموحّد أنتج تباين 1.1 هناك.
   لذلك كل قاعدة أعلاه مقيّدة بـ body.home — النبرة قيست على الرئيسية وحدها.
   أي صفحة أخرى تحتاج قياسها الخاص قبل تلوينها.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   قسم «اعرف أكثر» — على كل الصفحات الكبيرة
   ───────────────────────────────────────────────────────────────────────────
   نبرة مقيسة: .blog-content = rgb(248,249,250) فاتح · .toc-container أبيض
   على seo(11) · google-ads(16) · web-development(23) — ونفس عائلة القالب
   على social(14) · content(21) · ecommerce(25) · hosting(27).
   لذلك النص الداكن آمن على الجميع.
   التركيز هنا على كل الأجهزة: عمودان ≥1024px · عمود واحد + فهرس مطوي <1024px.
   ═══════════════════════════════════════════════════════════════════════ */

body.page-id-11, body.page-id-16, body.page-id-14, body.page-id-21,
body.page-id-23, body.page-id-25, body.page-id-27 { --apc: 1; }

/* ── التخطيط المتجاوب ───────────────────────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content-wrapper {
  display: grid;
  gap: clamp(1.4rem, .8rem + 2.4vw, 3.2rem);
  align-items: start;
  max-width: min(100%, 78rem);
  margin-inline: auto;
  padding-inline: clamp(1rem, .5rem + 2.5vw, 2rem);
}
@media (min-width: 1024px) {
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .blog-content-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem);
  }
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .toc-container {
    position: sticky; top: 6.5rem;
    max-height: calc(100vh - 9rem); overflow-y: auto;
  }
}
@media (max-width: 1023px) {
  /* الفهرس يصير قابلًا للطي فوق المحتوى — لا يستهلك شاشة الجوال */
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .blog-content-wrapper { grid-template-columns: minmax(0, 1fr); }
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .toc-container {
    position: static; order: -1; max-height: 17rem; overflow-y: auto;
  }
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .back-to-top { display: none; }
}

/* ── الفهرس ─────────────────────────────────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-container {
  background: #fff; border: 1px solid #e6e4de; border-radius: 10px;
  padding: 1.1rem 1.15rem; box-shadow: none;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-title {
  font-size: .82rem; font-weight: 700; color: #6b7186;
  margin: 0 0 .8rem; display: flex; align-items: center; gap: .45rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-title i { color: #e31e24; font-size: .78rem; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-list a {
  display: block; padding: .42rem 0 .42rem .7rem;
  padding-inline: .7rem 0;
  font-size: .9rem; line-height: 1.6; color: #4a5068; text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition: color .22s ease, border-color .22s ease;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-list a:hover { color: #14182b; border-inline-start-color: #e31e24; }

/* ── المحتوى: من جدار بطاقات إلى مقال ───────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > :is(h2, h3, p) {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > h2 {
  font-size: clamp(1.28rem, 1.08rem + .8vw, 1.72rem);
  font-weight: 800; line-height: 1.42; color: #14182b;
  margin: 2.5rem 0 .85rem; max-width: 34ch; scroll-margin-top: 6.5rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > h2::before,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > h2::after { content: none !important; display: none !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > h3 {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  font-weight: 700; color: #14182b; margin: 1.85rem 0 .55rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > p {
  font-size: clamp(.98rem, .95rem + .15vw, 1.04rem);
  line-height: 1.95; color: #4a5068; max-width: 72ch; margin: 0 0 1.05rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content a {
  color: #bb1418; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* القوائم: تفكيك شبكة البطاقات */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content :is(ul, ol) {
  display: block !important; grid-template-columns: none !important;
  list-style: none; margin: 1.25rem 0 1.9rem; padding: 0;
  max-width: 72ch; background: transparent !important;
  border: 0 !important; border-block-start: 1px solid #e6e4de !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content li {
  display: block !important; background: transparent !important;
  border: 0 !important; border-block-end: 1px solid #e6e4de !important;
  border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important;
  padding-block: .92rem !important; padding-inline: 1.45rem 0 !important;
  text-align: start !important;
  font-size: clamp(.96rem, .93rem + .15vw, 1rem);
  line-height: 1.9; color: #4a5068; position: relative;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content li > strong:first-child {
  display: block; color: #14182b; font-size: 1.03em;
  font-weight: 700; margin-block-end: .26rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content li > :is(i, svg),
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content li::before { display: none !important; content: none !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content li::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.48rem;
  width: 6px; height: 6px; border-radius: 50%; background: #e31e24;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content ol { counter-reset: apn; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content ol > li { counter-increment: apn; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content ol > li::after {
  content: counter(apn); background: none; width: auto; height: auto;
  top: 1rem; color: #e31e24; font-weight: 700; font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
/* الجداول تمرّر داخل حاويتها لا تكسر الصفحة على الجوال */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .94rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content th { background: #0a1745; color: #fff; padding: .78rem .9rem;
  text-align: start; white-space: nowrap; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content td { padding: .72rem .9rem; border-block-end: 1px solid #e6e4de; color: #4a5068; }

/* ═══════════════════════════════════════════════════════════════════════════
   إصلاح حرج: الحاوية كانت display:block رغم ضبط grid-template-columns،
   فالأعمدة لا تُطبَّق ويتراكم المحتوى فوق الفهرس بعرض كامل.
   الثيم يفرض display على .blog-content-wrapper بأولوية أعلى.
   ═══════════════════════════════════════════════════════════════════════ */
body.home .blog-posts-section .blog-content-wrapper,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content-wrapper {
  display: grid !important;
  /* توسيط الكتلة كاملة داخل الصفحة */
  margin-inline: auto !important;
  max-width: min(100%, 76rem) !important;
}
@media (min-width: 1024px) {
  body.home .blog-posts-section .blog-content-wrapper,
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .blog-content-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) !important;
  }
}
@media (max-width: 1023px) {
  body.home .blog-posts-section .blog-content-wrapper,
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .blog-content-wrapper { grid-template-columns: minmax(0, 1fr) !important; }
}
/* عنوان القسم يتبع نفس عرض الكتلة حتى لا يبدو منفصلًا عنها */
body.home .blog-posts-section > .container {
  max-width: min(100%, 76rem) !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, .5rem + 2.5vw, 2rem) !important;
}
/* رابط الفهرس النشط: شريط أحمر بعرض كامل كان ناتجًا عن انهيار الشبكة —
   نضبطه كحالة هادئة داخل عمود ضيّق. */
body.home .blog-posts-section .toc-list a.active,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .toc-list a.active {
  background: rgba(227,30,36,.07) !important;
  color: #14182b !important;
  border-inline-start-color: #e31e24 !important;
  border-radius: 0 5px 5px 0;
}

/* ═══ صفحة المدونة (page-id-7) وقوائم المقالات ═══════════════════════════ */
body.page-id-7 .blog-archive-hero,
body.blog .blog-archive-hero { padding-block: clamp(4.5rem,3rem+6vw,7rem) clamp(2.5rem,2rem+3vw,4rem) !important; }

body.page-id-7 .blog-grid,
body.page-id-7 .posts-grid,
body.page-id-7 .blog-posts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)) !important;
  gap: clamp(1.2rem, .8rem + 1.6vw, 2rem) !important;
  max-width: min(100%, 76rem); margin-inline: auto;
}
body.page-id-7 article,
body.page-id-7 .blog-card,
body.page-id-7 .post-card {
  background: #fff !important;
  border: 1px solid #e6e4de !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}
body.page-id-7 article:hover,
body.page-id-7 .blog-card:hover,
body.page-id-7 .post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -20px rgba(10,23,69,.3) !important;
}
body.page-id-7 article img,
body.page-id-7 .blog-card img,
body.page-id-7 .post-card img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
body.page-id-7 article:hover img { transform: scale(1.04); }
body.page-id-7 article h2,
body.page-id-7 article h3,
body.page-id-7 .blog-card h2,
body.page-id-7 .blog-card h3 {
  font-size: 1.1rem !important; font-weight: 700 !important;
  line-height: 1.55 !important; color: #14182b !important;
  margin: 0 0 .5rem !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-id-7 .meta-item {
  font-size: .84rem !important; color: #6b7186 !important;
  display: inline-flex; align-items: center; gap: .35rem;
}
body.page-id-7 .meta-item i { color: #e31e24; font-size: .78rem; }
body.page-id-7 .read-more-btn {
  margin-block-start: auto;
  color: #bb1418 !important; font-weight: 700; font-size: .92rem;
  background: none !important; border: 0 !important; padding: 0 !important;
}

/* المحتوى كان يبدأ 409px تحت الفهرس رغم align-items:start — لأن الوضع
   التلقائي كان يضعهما في صفّين. نثبّت الصف والعمود صراحةً. */
@media (min-width: 1024px) {
  body.home .blog-posts-section .blog-content,
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .blog-content { grid-row: 1 !important; grid-column: 1 !important; margin-block-start: 0 !important; }
  body.home .blog-posts-section .toc-container,
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .toc-container { grid-row: 1 !important; grid-column: 2 !important; margin-block-start: 0 !important; }
}
/* أول عنوان في المحتوى بلا هامش علوي حتى يحاذي رأس الفهرس */
body.home .blog-posts-section .blog-content > :first-child,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > :first-child { margin-block-start: 0 !important; }
/* عنوان القسم يحاذي بداية عمود المحتوى لا حافة الصفحة */
body.home .blog-posts-section > .container > .section-title { margin-inline-start: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   هيرو صفحات الخدمات (.seo-hero-v2) — 7 صفحات ببنية واحدة
   ───────────────────────────────────────────────────────────────────────────
   القياس: 5 من 7 داكنة rgb(33,37,41)، واثنتان تعذّر حلّ تدرّجهما.
   لذلك نضبط الخلفية والنص على العنصر نفسه — نتيجة مضمونة بغضّ النظر
   عن سلوك الثيم، وهو النمط الآمن الوحيد حين تكون النبرة غير مؤكّدة.
   ═══════════════════════════════════════════════════════════════════════ */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2 {
  position: relative; isolation: isolate;
  background-color: #0a1745 !important;
  background-size: cover !important; background-position: center !important;
  background-blend-mode: luminosity;
  min-height: 0 !important; height: auto !important;
  padding-block: clamp(5rem,3.5rem+7vw,8rem) clamp(3rem,2.2rem+3.5vw,5rem) !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(115% 85% at 86% -8%, rgba(227,30,36,.2) 0%, transparent 52%),
    linear-gradient(172deg, rgba(10,23,69,.93) 0%, rgba(6,14,43,.97) 100%);
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-overlay { display: none !important; }

/* شبكة عمودين بخط أساس مشترك */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-grid {
  display: grid !important; gap: clamp(1.8rem,1rem+3.5vw,4rem) !important;
  align-items: start !important; position: relative; z-index: 2;
  max-width: min(100%,76rem); margin-inline: auto;
}
@media (min-width: 901px) {
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .seo-hero-v2-grid { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr) !important; }
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .seo-hero-v2-content { grid-column: 1 !important; grid-row: 1 !important; }
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .seo-hero-v2-form-area { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; }
}
@media (max-width: 900px) {
  body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
    .seo-hero-v2-grid { grid-template-columns: minmax(0,1fr) !important; }
}

/* النص أبيض — والخلفية مضبوطة أعلاه على نفس القسم */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-title {
  font-size: clamp(1.95rem,1.4rem+2.4vw,3.3rem) !important;
  font-weight: 800 !important; line-height: 1.26 !important;
  color: #fff !important; margin: 0 0 1.05rem !important;
  max-width: 22ch; text-wrap: balance;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-title::after {
  content: ""; display: block; width: 84px; height: 4px;
  margin-block-start: 1.25rem; border-radius: 2px;
  background: linear-gradient(to left,#e31e24,#ff4d52);
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-description {
  font-size: clamp(1rem,.94rem+.45vw,1.24rem) !important;
  line-height: 1.85 !important; color: rgba(255,255,255,.74) !important;
  max-width: 48ch; margin: 0 0 1.6rem !important;
}

/* الفورم: خلفية بيضاء مضبوطة → النص الداكن آمن */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  padding: clamp(1.3rem,1rem+1vw,1.9rem) !important;
  box-shadow: 0 28px 66px -30px rgba(0,0,0,.7) !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area :is(h2,h3) {
  color: #14182b !important; font-size: 1.12rem !important; font-weight: 700 !important;
  margin: 0 0 1rem !important; text-align: start !important; line-height: 1.55 !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area :is(input,select,textarea) {
  width: 100%; background: #fbfaf8 !important; color: #14182b !important;
  border: 1px solid #ddd9d1 !important; border-radius: 8px !important;
  padding: .8rem 1rem !important; margin-block-end: .68rem !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area :is(.fancy-btn,button[type="submit"]) {
  width: 100%; background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  border: 0 !important; border-radius: 8px !important; padding: .88rem !important;
  font-weight: 700; font-size: 1rem; color: #fff !important; cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area :is(.fancy-btn,button[type="submit"]):hover {
  transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(227,30,36,.6) !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-form-area [style*="text-align: center"] { text-align: start !important; }

/* صندوق البروفايل: شريط بعرض الشبكة أسفل الهيرو */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-profile-box {
  grid-column: 1 / -1 !important;
  margin-block-start: clamp(1.6rem,1rem+1.6vw,2.4rem) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important; padding: 1.1rem 1.3rem !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-profile-box .profile-content {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.1rem; flex-wrap: wrap;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-profile-box p {
  color: rgba(255,255,255,.78) !important; font-size: .96rem !important;
  line-height: 1.75 !important; margin: 0 !important; flex: 1 1 20rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-profile-box .download-btn {
  background: transparent !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.32) !important;
  border-radius: 7px !important; padding: .6rem 1.1rem !important;
  font-weight: 600; font-size: .92rem; white-space: nowrap;
  transition: background .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .seo-hero-v2-profile-box .download-btn:hover {
  background: #e31e24 !important; border-color: #e31e24 !important;
}

/* ═══ إصلاح باجّين من الثيم على صفحة الاستضافة (page-id-27) ══════════════
   قياس: زر «اختر هذه الباقة» أبيض على أبيض (نسبة 1.0)، وعنوان «ماذا يقول
   عملاؤنا» بلون الثيم rgb(44,44,44) على قسم داكن rgb(33,37,41) (نسبة 1.1).
   الاثنان موجودان قبل أي تدخّل مني — هذا إصلاحهما. */
body.page-id-27 .aplan-read-more-btn.request-call,
body.page-id-27 .pricing-plan .aplan-read-more-btn,
body.page-id-27 .plan-cta .aplan-read-more-btn {
  background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: .8rem 1.3rem !important;
  border: 0 !important; border-radius: 7px !important; font-weight: 700;
}
/* عناوين الأقسام الداكنة على هذه الصفحة: النص أبيض على الخلفية الداكنة */
body.page-id-27 section:has(> .container > .aplan-section-title) .aplan-section-title {
  color: inherit;
}
/* ❌ كانت: قاعدة عامة تلوّن كل عناوين الصفحة أبيض — فكسرت العناوين على
   الأقسام الفاتحة (نسبة 1.05). نفس نمط الخطأ الذي أصلحناه سابقًا.
   ✅ الصحيح: لا نلوّن إلا حيث نتحكم في الخلفية على العنصر نفسه. */
/* استثناء: الأقسام الفاتحة المقيسة على نفس الصفحة تبقى بنص داكن */
body.page-id-27 .blog-posts-section .section-title,
body.page-id-27 .blog-content h2,
body.page-id-27 .blog-content h3 { color: #14182b !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   الباقات · الخطوات · الأسئلة الشائعة — صفحات الخدمات السبعة
   ───────────────────────────────────────────────────────────────────────────
   نبرة مقيسة على seo · google-ads · social · hosting: الثلاثة **فاتحة**
   → النص الداكن آمن. (لا نعتمد على الافتراض؛ هذا قياس فعلي.)
   ═══════════════════════════════════════════════════════════════════════ */
:root { --svc: :is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27); }

/* ── الباقات: معالجة بدرجة جدول مقارنة ──────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan {
  background: #fff !important;
  border: 1px solid #e6e4de !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden;
  display: flex !important; flex-direction: column;
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              box-shadow .38s cubic-bezier(.22,1,.36,1),
              border-color .38s cubic-bezier(.22,1,.36,1);
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan:hover {
  transform: translateY(-4px);
  border-color: #0a1745 !important;
  box-shadow: 0 20px 50px -22px rgba(10,23,69,.3) !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-header {
  background: #0a1745 !important; color: #fff !important;
  padding: 1.5rem 1.4rem !important; border: 0 !important; text-align: start !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-header :is(h2,h3,h4) {
  color: #fff !important; font-size: 1.18rem !important;
  font-weight: 700 !important; margin: 0 0 .3rem !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-header :is(p,.plan-price) {
  color: rgba(255,255,255,.78) !important; margin: 0 !important; font-size: .95rem !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-features {
  padding: 1.2rem 1.4rem !important; margin: 0 !important;
  list-style: none; flex: 1 1 auto;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-section .pricing-plan .plan-features li {
  border-block-end: 1px solid #eeece7 !important;
  padding-block: .62rem !important; padding-inline: 1.3rem 0 !important;
  line-height: 1.75; color: #4a5068 !important; font-size: 1rem;
  position: relative; background: transparent !important; margin: 0 !important;
  text-align: start !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-features li:last-child { border-block-end: 0 !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-features li::before { content: none !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-features li::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.15rem;
  width: 6px; height: 6px; border-radius: 50%; background: #e31e24;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-cta { padding: 0 1.4rem 1.4rem !important; }

/* ── خطوات العملية: خط زمني مترابط ──────────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step {
  position: relative; background: transparent !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 3.9rem 2.3rem 0 !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step::before {
  content: ""; position: absolute; inset-inline-end: 1.38rem;
  top: 2.9rem; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,#e0ddd6,transparent);
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step:last-child::before { display: none; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step .step-icon { display: none !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step .step-number {
  position: static;  
  width: 2.78rem !important; height: 2.78rem !important;
  display: grid !important; place-items: center;
  background: #0a1745 !important; color: #fff !important;
  border-radius: 50% !important; font-size: .96rem !important; font-weight: 700;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px #fcfcfd !important;
  transition: background .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); margin: 0 auto .75rem;}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step:hover .step-number { background: #e31e24 !important; transform: scale(1.06); }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step .step-title {
  font-size: 1.2rem !important; font-weight: 700 !important;
  color: #14182b !important; margin: .3rem 0 .45rem !important; line-height: 1.45 !important; text-align: center !important; padding-inline: 0 !important;}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .process-step .step-description {
  font-size: .99rem !important; line-height: 1.9 !important;
  color: #4a5068 !important; margin: 0 !important; max-width: 62ch;
}

/* ── الأسئلة الشائعة: قائمة تحريرية ─────────────────────────────────────── */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-container { max-width: min(100%,60rem); margin-inline: auto; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-item {
  background: transparent !important; border: 0 !important;
  border-block-end: 1px solid #e6e4de !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-question {
  padding: 1.15rem 0 !important; cursor: pointer;
  display: flex; align-items: flex-start; gap: .7rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-question h3 {
  font-size: clamp(1rem,.96rem+.3vw,1.16rem) !important;
  font-weight: 700 !important; line-height: 1.6 !important;
  color: #14182b !important; margin: 0 !important; text-align: start !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-question-icon { color: #e31e24 !important; font-size: .88rem; margin-block-start: .28rem; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-answer { padding: 0 0 1.15rem 1.6rem !important; padding-inline: 1.6rem 0 !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-answer p {
  font-size: .99rem !important; line-height: 1.95 !important;
  color: #4a5068 !important; max-width: 70ch; margin: 0 0 .7rem !important;
  text-align: start !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-answer p:last-child { margin-block-end: 0 !important; }

/* الثيم يضع علامة ✓ داخل كل بند باقة، فتظهر مع نقطتنا الحمراء = علامتان.
   نُبقي واحدة: النقطة (::after) ونخفي أيقونة الثيم. */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-plan .plan-features li > :is(i, svg, .fa, .fas, .far) {
  display: none !important;
}
/* عناوين أقسام صفحات الخدمات: شارة علوية بدل القوس المتوسّط —
   لكن دون فرض لون (النبرة تختلف بين الأقسام). */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-section .section-title,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-section-title {
  text-align: center !important;
  font-size: clamp(1.7rem,1.35rem+1.4vw,2.5rem) !important;
  font-weight: 800 !important; line-height: 1.32 !important;
  max-width: 24ch; margin: 0 0 1.6rem !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-section .section-title::before,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-section-title::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px; margin-inline: auto; margin-block-end: 1rem;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-section-title::after { content: none !important; display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   🚨 إصلاح عاجل: نص الأسئلة الشائعة كان كحليًا داكنًا على قسم خلفيته صورة
   داكنة → غير مقروء. أداة القياس تخطّت هذا القسم لأن خلفيته صورة نقطية،
   فلم يظهر الخلل في الفحص الآلي. الدرس: لا نضبط لون نص على عنصر لا نتحكم
   في خلفيته — نتركه يرث لون قسمه.
   ═══════════════════════════════════════════════════════════════════════ */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-question h3,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-answer p,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-section-title,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .pricing-section .section-title {
  color: inherit !important;
}
/* الفواصل بشفافية اللون الموروث — تعمل على الفاتح والداكن معًا */
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-item {
  border-block-end-color: color-mix(in srgb, currentColor 18%, transparent) !important;
}
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .crypto-faq-answer p { opacity: .82; }

/* ═══ طلب: عناوين H2 و H3 في المنتصف ════════════════════════════════════ */
body.home .blog-posts-section .blog-content > :is(h2,h3),
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > :is(h2,h3) {
  text-align: center !important;
  max-width: none !important;
  margin-inline: auto !important;
}
body.home .blog-posts-section .blog-content > h2::before,
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  .blog-content > h2::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: #e31e24; border-radius: 2px;
  margin: 0 auto .9rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   قسم المراحل — إصلاح مقروئية وتخطيط  (v4.6.0)
   المشكلة المرصودة بلقطة حقيقية: فقرات عربية طويلة موسّطة، والعين تفقد بداية
   كل سطر → إرهاق قراءة. والبطاقات بارتفاعات متساوية قسرًا فينشأ فراغ ميت
   أسفل البطاقات القصيرة. قواعد تخطيط بحتة — لا لون فيها، فتصلح لأي نبرة قسم.
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-process-steps {
  align-items: start !important;          /* لا تمدّ البطاقة القصيرة */
  gap: clamp(1.1rem, .7rem + 1.2vw, 1.9rem) !important;
}
.seo-process-steps .process-step {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem) !important;
}
/* العنوان يبقى موسّطًا؛ النص الجاري يعود لبداية السطر */
.seo-process-steps .step-title { text-align: center !important; }
.seo-process-steps .step-content p,
.seo-process-steps .step-content li,
.seo-process-steps .step-description {
  text-align: start !important;
  text-align-last: start !important;
  line-height: 1.85 !important;
  margin-block-end: 0 !important;
  hyphens: none !important;
}
/* الفقرة الموسّطة كانت تُنتج «نهر» فراغات؛ التبرير الطرفي مع فاصل كلمات عربي أنظف */
.seo-process-steps .step-content p { text-wrap: pretty; }

@media (max-width: 640px) {
  .seo-process-steps { grid-template-columns: 1fr !important; }
  .seo-process-steps .process-step { padding: 1.35rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   توسيط العناوين  (v4.6.0) — طلب صريح: كل H2 و H3 في المنتصف.
   قواعد تخطيط بحتة (محاذاة وهوامش فقط، بلا لون واحد)، ولذلك تصلح لأي قسم
   مهما كانت نبرته — وهو الدرس المستخلص من انهيار طبقة الألوان العامة سابقًا.
   ═══════════════════════════════════════════════════════════════════════════ */
h2, h3,
.section-title, .crypto-section-title, .seo-process-title, .about-title,
.page-title, .page-subtitle, .section-subtitle, .section-description,
.seo-hero-v2-title {
  text-align: center !important;
  text-align-last: center !important;
}

/* رأس القسم يتمركز ككتلة، لا نصًا فقط — وإلا امتدّ خارج شبكة البطاقات
   (مرصود على الهوم بيدج: الرأس ينتهي عند 1300 والبطاقات عند 1170) */
.section-header, .seo-process-header, .crypto-faq-header,
.crypto-section-header, .pricing-header, .aplan-section-head {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: min(72ch, 100%) !important;
}
.section-header > *, .seo-process-header > *, .crypto-faq-header > *,
.crypto-section-header > *, .pricing-header > * { margin-inline: auto !important; }

/* الشريط الأحمر فوق العنوان يتمركز معه بدل التصاقه بحافة البداية */
:is(.section-title, .crypto-section-title, .seo-process-title,
    .about-title, .page-title)::before,
:is(.section-title, .crypto-section-title, .seo-process-title,
    .about-title, .page-title)::after {
  inset-inline: 0 !important;
  margin-inline: auto !important;
}

/* استثناءات: النص الجاري يبقى على بداية السطر — توسيط الفقرات العربية
   الطويلة يفقد العين نقطة العودة في كل سطر */
.blog-content p, .blog-content li, .blog-content td, .blog-content th,
.step-content p, .step-content li,
.crypto-faq-answer p, .crypto-faq-answer li,
.faq-answer p, .faq-answer li, .faq-answer strong,
.aeo-answer p, table td, table th {
  text-align: start !important;
  text-align-last: start !important;
}
/* عناوين الأسئلة تبقى على بداية السطر: القائمة تُقرأ مسحًا عموديًا،
   والتوسيط يكسر عمود البداية الذي تعتمده العين — والسهم في الطرف المقابل
   يترك فجوة مختلة لو تمركز النص. القاعدة المعتمدة: عناوين الأقسام في
   المنتصف، وعناوين عناصر القوائم التفاعلية على بداية السطر. */
.faq-question h3, .faq-question,
.aplan-faq-question h3, .accordion-header h3,
.crypto-faq-question h3, .crypto-faq-question {
  text-align: start !important;
  text-align-last: start !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   زر «اقرأ المزيد» — ضمان الظهور  (v4.7.0)
   قياس فعلي: أبيض على أبيض (نسبة 1.00) على الهوم بيدج وصفحة السيو. السبب
   أن الثيم يفرض color:#fff !important بينما الخلفية أُزيلت في تلك المواضع،
   فبقي الزر موجودًا في الشجرة وغير مرئي بالمرة. الأصل هنا: خلفية صريحة،
   والاستثناء (الرابط النصي) يُعلن بعده بتحديد أقوى.
   ═══════════════════════════════════════════════════════════════════════════ */
.aplan-read-more-btn {
  background: linear-gradient(135deg,#e31e24,#bb1418) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center; gap: .45rem;
  padding: .6rem 1.15rem !important;
  border-radius: 6px !important;
  font-weight: 700;
  text-decoration: none !important;
}
.aplan-read-more-btn i { color: inherit !important; }

/* الاستثناءان المقصودان: رابط نصي أحمر داخل بطاقات الخدمات */
body.home #services .aplan-read-more-btn,
body.page-id-7 .read-more-btn,
body.page-id-7 .aplan-read-more-btn {
  background: none !important;
  color: #bb1418 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   بطاقات المراحل — تصادم الرقم بالعنوان + محاذاة النص  (v4.7.1)
   قياس بصري: رقم المرحلة مطلق في ركن البداية، والعنوان بعد توسيطه صار يمرّ
   تحته. والنص الجاري ظلّ موسّطًا رغم قاعدة .step-content لأن الفقرة ليست
   دائمًا داخل .step-content في كل القوالب.
   ═══════════════════════════════════════════════════════════════════════════ */
.process-step .step-title,
.seo-process-steps .step-title {
  padding-inline-start: 3rem !important;
  padding-inline-end: .4rem !important;
  min-height: 2.4rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.process-step p, .process-step li,
.seo-process-steps p, .seo-process-steps li {
  text-align: start !important;
  text-align-last: start !important;
}

/* بطاقات الخدمات: العنوان في المنتصف كبقية العناوين (طلب صريح)، والوصف
   القصير يتمركز معه فتبقى البطاقة متسقة داخليًا */
.aplan-service-card h3, .feature-item h3,
.aplan-portfolio-card h3, .team-member h3 {
  text-align: center !important;
  text-align-last: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   طبقة العمق + جداول المقارنة  (v4.8.0)
   سطح مكتفٍ بذاته: يعلن خلفيته ولونه صراحةً بدل أن يرث نبرة القسم الذي
   يسبقه. هذا ما يجعله آمنًا في أي موضع من أي صفحة — وهو الدرس المستخلص من
   انهيار طبقة الألوان العامة التي افترضت نبرة فاتحة لأقسام داكنة.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-depth {
  background: #fbfaf8;
  color: #14182b;
  padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem);
  border-block-start: 1px solid #eceae4;
}
.ap-depth .container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }

.ap-depth h2 {
  color: #14182b !important;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 2.6rem 0 .9rem;
  text-align: center !important;
}
.ap-depth h2:first-child { margin-block-start: 0; }
.ap-depth h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: #e31e24; border-radius: 2px; margin: .85rem auto 0;
}
.ap-depth p, .ap-depth li {
  color: #3d4256 !important;
  font-size: clamp(1rem, .96rem + .18vw, 1.09rem);
  line-height: 1.95;
  text-align: start !important;
  max-width: 74ch;
  margin-inline: auto;
}
.ap-depth ul { margin: 1rem auto 1.6rem; max-width: 74ch; padding-inline-start: 1.3rem; }
.ap-depth li { margin-block-end: .7rem; }
.ap-depth li::marker { color: #e31e24; }
.ap-depth strong { color: #14182b !important; font-weight: 700; }

/* ── الجدول: أهم عنصر يقتبسه محرك الإجابة، فيجب أن يُقرأ على كل عرض ── */
.ap-table-wrap {
  overflow-x: auto;                 /* الجدول وحده يمرّر أفقيًا، لا الصفحة */
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0 2.4rem;
  border: 1px solid #e6e3dc;
  border-radius: 10px;
  background: #fff;
}
.ap-table {
  width: 100%;
  min-width: 620px;                 /* أقل عرض يبقى الجدول عنده مفهومًا */
  border-collapse: collapse;
  font-size: clamp(.9rem, .87rem + .16vw, 1rem);
  text-align: start;
}
.ap-table caption {
  caption-side: top;
  text-align: start;
  padding: .95rem 1.15rem;
  font-weight: 700;
  color: #14182b;
  background: #f5f3ee;
  border-block-end: 1px solid #e6e3dc;
}
.ap-table thead th {
  background: #14182b;
  color: #fff !important;
  font-weight: 700;
  padding: .8rem 1.05rem;
  text-align: start;
  white-space: nowrap;
  vertical-align: middle;
}
.ap-table tbody th {
  font-weight: 700;
  color: #14182b !important;
  background: #faf9f6;
  text-align: start;
}
.ap-table td { color: #3d4256 !important; }
.ap-table :is(td, tbody th) {
  padding: .85rem 1.05rem;
  border-block-start: 1px solid #eceae4;
  line-height: 1.75;
  vertical-align: top;
  text-align: start !important;
}
.ap-table tbody tr:nth-child(even) td { background: #fcfbf9; }

@media (max-width: 640px) {
  .ap-depth { padding-block: 2.4rem; }
  .ap-table { min-width: 560px; }
  .ap-table-wrap::after {           /* تلميح بصري أن الجدول يُمرَّر */
    content: "← مرّر لرؤية بقية الجدول";
    display: block; padding: .55rem 1rem; font-size: .82rem;
    color: #6b7089; background: #f7f5f1; border-block-start: 1px solid #eceae4;
    position: sticky; inset-inline-start: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   مسار التنقّل + المقالات ذات الصلة  (v4.9.0) — أسطح مكتفية بذاتها
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-crumbs {
  background: #fbfaf8;
  color: #565c72;
  border-block-end: 1px solid #eceae4;
  padding-block: .7rem;
  font-size: .9rem;
}
.ap-crumbs .container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.ap-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0; padding: 0;
}
.ap-crumb-item + .ap-crumb-item::before {
  content: "‹";                        /* في RTL يشير المؤشّر إلى اليسار طبيعيًا */
  margin-inline-end: .45rem;
  color: #a9adbd;
}
.ap-crumbs a { color: #565c72 !important; text-decoration: none; }
.ap-crumbs a:hover { color: #bb1418 !important; text-decoration: underline; }
.ap-crumbs [aria-current="page"] { color: #14182b !important; font-weight: 700; }

.ap-related {
  background: #14182b;
  color: #e8eaf2;
  padding-block: clamp(2.6rem, 2rem + 2.5vw, 4.2rem);
}
.ap-related .container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.ap-related h2 {
  color: #fff !important;
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.95rem);
  font-weight: 800; margin: 0 0 .5rem; text-align: center !important;
}
.ap-related h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: #e31e24; border-radius: 2px; margin: .8rem auto 0;
}
.ap-related > .container > p {
  color: #b9bece !important; text-align: center !important;
  margin: 0 auto 1.8rem; max-width: 60ch;
}
.ap-related-list {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; overflow: hidden;
}
.ap-related-list li { background: #14182b; margin: 0; }
.ap-related-list a {
  display: block; padding: 1.05rem 1.2rem;
  color: #e8eaf2 !important; text-decoration: none;
  font-weight: 600; line-height: 1.7; font-size: .98rem;
  transition: background .28s cubic-bezier(.22,1,.36,1), color .28s;
}
.ap-related-list a:hover { background: #1c2140; color: #fff !important; }
.ap-related-more { margin: 0 !important; }
.ap-related-more a {
  color: #ff6b70 !important; font-weight: 700; text-decoration: none;
  border-block-end: 1px solid rgba(255,107,112,.45); padding-block-end: 2px;
}
.ap-related-more a:hover { color: #fff !important; border-color: #fff; }

/* تلميع v4.9.1 — مقيس بصريًا */
/* عمود الجدول الأول (اسم الصنف) كان يلتفّ سطرين بلا داعٍ */
.ap-table tbody th { white-space: nowrap; }
@media (max-width: 720px) { .ap-table tbody th { white-space: normal; } }
/* الرابط الختامي كان يرث max-width بلا هامش تلقائي فانزاح عن المنتصف */
.ap-related-more { margin-inline: auto !important; text-align: center !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   أقسام الباقات — إصلاح مقيس بصريًا  (v5.0.0)
   ما رُصد على google-ads-services و web-development-service (وكل صفحة فيها
   قسم .pricing):
     · شارتان لنفس المعنى: ::after زائفة عند top:0 تقع فوق عنوان الباقة
       فيصير النصّان فوق بعضهما، بالإضافة إلى <span class="popular-badge">
       داخل البطاقة → «الأكثر طلبًا» مرتين وأحدهما غير مقروء.
     · بنود المزايا rgba(255,255,255,.8) بخط .9rem على خلفية شديدة الدكانة.
     · الخط الفاصل لا يبلغ النقطة الحمراء فتبدو الحافة مسنّنة.
     · البطاقات غير متساوية الارتفاع فتطفو أزرار الإجراء على مستويات مختلفة.
   ═══════════════════════════════════════════════════════════════════════════ */

/* مساحة محجوزة أعلى كل بطاقة تجلس فيها الشارة، فتتساوى الرؤوس أيضًا */
section.pricing .pricing-plan {
  position: relative !important;
  padding-block-start: 3rem !important;
  display: flex !important;
  flex-direction: column !important;
}
/* مصدر واحد للشارة: نلغي الزائفة ونُبقي العنصر الحقيقي */
section.pricing .pro-plan::after { content: none !important; display: none !important; }
section.pricing .popular-badge {
  position: absolute !important;
  top: .95rem; inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  background: #e31e24 !important;
  color: #fff !important;
  font-size: .78rem; font-weight: 700;
  padding: .34rem 1rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(227,30,36,.38);
  white-space: nowrap;
}
section.pricing .plan-header { position: static !important; }
section.pricing .plan-header h3 {
  text-align: center !important;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem) !important;
}

/* البنود: تباين أعلى، ونقطة وخط فاصل على استقامة واحدة */
section.pricing .plan-features { flex: 1 1 auto !important; }
section.pricing .plan-features li {
  color: rgba(255,255,255,.92) !important;
  font-size: .95rem !important;
  line-height: 1.72 !important;
  display: flex !important;
  align-items: flex-start;
  gap: .6rem;
  padding-block: .62rem !important;
  padding-inline: 0 !important;
  border-block-end: 1px solid rgba(255,255,255,.1) !important;
  text-align: start !important;
}
section.pricing .plan-features li:last-child { border-block-end: 0 !important; }
section.pricing .plan-features li::before {
  content: "" !important;
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-block-start: .58rem;
  border-radius: 50%;
  background: #e31e24;
}
section.pricing .plan-features li :is(strong, b) { color: #fff !important; }

/* ملاحظة: جُرّب تمييز أول بند بوصفه «السعر» فأخفق — في صفحات مثل تطوير
   الويب أول بند ميزة لا سعر، فبدا نصّ عادي بحجم عنوان. لا تفرقة ممكنة في
   CSS بين سعر وميزة، فتُترك البنود بوزن واحد. */

/* زر الإجراء يستقرّ أسفل كل بطاقة مهما اختلف عدد البنود */
section.pricing .plan-cta,
section.pricing .pricing-plan > a:last-child { margin-block-start: auto !important; }

@media (max-width: 640px) {
  section.pricing .pricing-plan {
    transform: none !important;            /* scale(1.03) يقصّ الحواف على الشاشة الضيقة */
    padding-inline: 1.15rem !important;
  }
}

/* السعر يُميَّز في الصفحتين اللتين يكون فيهما أول بند سعرًا فعلًا
   (إعلانات جوجل 16، المتاجر 25). القاعدة العامة أخطأت لأن بقية الصفحات
   أول بند فيها ميزة لا سعر — لا سبيل للتفرقة في CSS، فالتخصيص بالصفحة. */
body:is(.page-id-16, .page-id-25) section.pricing .plan-features li:first-child {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.12rem !important;
  padding-block-end: .8rem !important;
  border-block-end-color: rgba(255,255,255,.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   قسم «عن الشركة» — شارة التأسيس وبطاقات المزايا  (v5.1.0)
   مرصود على الجوال في social-media و web-development وأخواتهما:
     · شارة «2015 / منذ التأسيس» دائرة ثابتة المقاس والنص أكبر منها فيخرج
       عن حدّها، وموضعها بخصائص فيزيائية فتطبق على جسم الفيديو.
     · أيقونة بطاقة الميزة تتجاوز حدّ البطاقة السفلي.
   الحل: صندوق يتشكّل حسب محتواه بخصائص منطقية، وبطاقة بتخطيط مرن.
   ═══════════════════════════════════════════════════════════════════════════ */
.about-video-column { position: relative !important; }

.experience-badge {
  position: absolute !important;
  top: auto !important; bottom: auto !important;
  left: auto !important; right: auto !important;
  inset-block-end: -.85rem !important;
  inset-inline-end: -.75rem !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 14px !important;
  padding: .6rem .95rem !important;
  background: linear-gradient(135deg, #e31e24, #bb1418) !important;
  box-shadow: 0 10px 26px rgba(227,30,36,.42) !important;
  display: flex !important;
  align-items: center; justify-content: center;
  z-index: 3;
}
.experience-badge .badge-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  text-align: center !important;
}
.experience-badge .badge-number {
  font-size: 1.18rem !important; font-weight: 800 !important;
  color: #fff !important; line-height: 1.1 !important;
}
.experience-badge .badge-text {
  font-size: .68rem !important; font-weight: 600 !important;
  color: rgba(255,255,255,.94) !important; line-height: 1.28 !important;
}

/* بطاقات المزايا: الأيقونة عنصر مرن لا يتجاوز البطاقة */
.about-features .feature-item {
  display: flex !important;
  align-items: center !important;
  gap: .9rem !important;
  padding: .95rem 1.15rem !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}
.about-features .feature-icon {
  flex: 0 0 auto !important;
  width: 46px !important; height: 46px !important;
  display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  margin: 0 !important;
}
.about-features .feature-text { flex: 1 1 auto !important; min-width: 0; }
.about-features .feature-text h3 {
  margin: 0 !important;
  font-size: clamp(.98rem, .94rem + .2vw, 1.1rem) !important;
  line-height: 1.5 !important;
}

@media (max-width: 640px) {
  .experience-badge {
    inset-block-end: -.55rem !important;
    inset-inline-end: -.35rem !important;
    padding: .45rem .75rem !important;
  }
  .experience-badge .badge-number { font-size: 1.02rem !important; }
  .experience-badge .badge-text  { font-size: .62rem !important; }
  .about-features .feature-icon { width: 40px !important; height: 40px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   إصلاحان مقيسان  (v5.2.0)
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   ١) تراجع عن خطأ ارتكبته: ألغيت شارة ::after على كل البطاقات المميّزة،
      لكن ثلاث صفحات من أربع لا تملك <span class="popular-badge"> أصلًا
      وتعتمد على الشارة الزائفة وحدها — فاختفت الشارة تمامًا منها.
      الإلغاء الآن مشروط بوجود البديل الحقيقي.
   ٢) عنوان المرحلة كان عرضه 204px بعد حجز 48px للرقم عند خط 19.2px،
      فينكسر إلى ثلاثة وأربعة أسطر وتتفاوت البطاقات. الحل: الرقم يعود إلى
      مجرى المستند أعلى البطاقة بدل الإطلاق فوقها، فيستعيد العنوان العرض
      الكامل ويصير ترتيب البطاقة: رقم ← أيقونة ← عنوان ← نص.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (١) الشارة */
section.pricing .pro-plan:has(.popular-badge)::after {
  content: none !important; display: none !important;
}
/* الصفحات التي تعتمد الشارة الزائفة: نضعها في المساحة المحجوزة أعلى البطاقة */
section.pricing .pro-plan:not(:has(.popular-badge))::after {
  content: '\2605 الأكثر طلبًا' !important;
  display: block !important;
  position: absolute !important;
  top: .95rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #e31e24 !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: .34rem 1rem !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(227,30,36,.38) !important;
  white-space: nowrap !important;
  z-index: 4;
}

/* (٢) بطاقة المرحلة: تخطيط رأسي متّسق */
.seo-process-steps .process-step {
  align-items: stretch !important;
  text-align: center;
}
.seo-process-steps .step-number {
  position: static !important;
  transform: none !important;
  inset: auto !important;
  margin: 0 auto .75rem !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-size: .95rem !important; font-weight: 800 !important;
  border-radius: 50% !important;
  flex: 0 0 auto;
}
.seo-process-steps .step-icon {
  margin: 0 auto .8rem !important;
  flex: 0 0 auto;
}
/* العنوان يستعيد العرض الكامل بعد خروج الرقم من فوقه */
.seo-process-steps .step-title,
.process-step .step-title {
  padding-inline: 0 !important;
  display: block !important;
  min-height: 0 !important;
  font-size: clamp(1rem, .95rem + .28vw, 1.16rem) !important;
  line-height: 1.5 !important;
  margin-block-end: .7rem !important;
  text-align: center !important;
  text-wrap: balance;
}
.seo-process-steps .step-content { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   v5.3.0 — قراءة لا حساب
   ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
   · بنود الباقات تحقّق نسبة WCAG وتبدو مع ذلك رمادية: خط رفيع بحجم صغير
     على خلفية شبه سوداء يفقد كثافته البصرية مهما بلغت النسبة الحسابية.
     العلاج وزن الخط وحجمه لا رفع النسبة وحدها.
   · شبكة المراحل تُنتج أربعة أعمدة بعرض ~250px، والعربية عند هذا العرض
     تنكسر كلمات ومصطلحات لاتينية في منتصفها. الحد الأدنى 300px يعطي
     ثلاثة أعمدة مريحة على 1200px.
   ═══════════════════════════════════════════════════════════════════════════ */
section.pricing .plan-features li {
  color: rgba(255,255,255,.95) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
}
section.pricing .plan-features li:first-child { font-weight: 800 !important; }

.seo-process-steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
  align-items: stretch !important;
}
.seo-process-steps .process-step { height: 100% !important; }
/* الخط الرأسي الزخرفي بجوار النص يزاحمه في عمود ضيق */
.seo-process-steps .step-content {
  border: 0 !important;
  padding-inline: 0 !important;
}
.seo-process-steps .step-content p { max-width: 46ch; margin-inline: auto !important; }

/* v5.3.1 — بقايا تخطيط سابق داخل بطاقة المرحلة (مقيسة بالفحص)
   · .process-step::before عنصر زائف 1px × 581px: خط وصل رأسي من تصميم
     زمني قديم، لم يعد له معنى في شبكة بطاقات فبقي شرطة عائمة بجوار النص.
   · .step-icon ينهار إلى 0×0 ومع ذلك يحمل حدًّا وخلفية، فيظهر أثرًا لا
     أيقونة. نمنحه مقاسًا صريحًا حتى لا يتوقّف شكله على وقت تحميل الخط. */
.seo-process-steps .process-step::before,
.seo-process-steps .process-step::after { content: none !important; }

.seo-process-steps .step-icon {
  width: 54px !important; height: 54px !important;
  min-width: 54px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  font-size: 1.3rem !important;
  line-height: 1 !important;
  margin: 0 auto .85rem !important;
  padding: 0 !important;
}
.seo-process-steps .step-icon i { font-size: inherit !important; line-height: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v5.4.0 — بطاقة المرحلة/الخدمة: حشو منطقي ومحتوى موزّع
   القياس الذي كشف الخلل: computed padding = 0px 62.4px 36.8px 0px
   أي صفر من الأعلى وصفر من طرف النهاية و62px من طرف البداية — حشو فيزيائي
   غير متماثل، فالنص يلتصق بحافة والفراغ يتكدّس في الأخرى، والبطاقة تبدو
   مائلة وفارغة. تُفرض هنا خصائص منطقية متماثلة تعمل في RTL و LTR سواء،
   والمحتوى يتوزّع رأسيًا بدل أن يتكدّس أعلى بطاقة ممدودة.
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-process-steps .process-step {
  padding-block: clamp(1.6rem, 1.2rem + 1vw, 2.3rem) !important;
  padding-inline: clamp(1.4rem, 1.1rem + .9vw, 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;   /* لا يتكدّس المحتوى أعلى بطاقة ممدودة */
  gap: 0 !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}
.seo-process-steps .step-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.seo-process-steps .step-title {
  margin-block: 0 .75rem !important;
  padding: 0 !important;
}
.seo-process-steps .step-content p:last-child { margin-block-end: 0 !important; }

/* الأيقونة مخفيّة في هذا القسم — لا نترك لها هامشًا يصنع فجوة */
.seo-process-steps .step-icon[style*="display: none"],
.seo-process-steps .step-icon:empty { display: none !important; margin: 0 !important; }

/* الشبكة: أعمدة مريحة وفواصل منتظمة على كل عرض */
.seo-process-steps {
  gap: clamp(1rem, .7rem + 1vw, 1.6rem) !important;
  align-items: stretch !important;
}

/* v5.5.1 — آخر أثرين للفراغ الميت وحجم النص
   · .step-content كان يتمدّد فيملأ البطاقة الممدودة، فيبقى نصّه أعلاها
     ويتكدّس الفراغ أسفلها رغم توسيط التوزيع. نمنعه من التمدّد فيتوسّط فعلًا.
   · بنود الباقات عند 14px صغيرة على شاشة كبيرة حتى بعد تصحيح اللون. */
.seo-process-steps .process-step > * { flex: 0 0 auto !important; }
body:is(.page-id-11,.page-id-16,.page-id-14,.page-id-21,.page-id-23,.page-id-25,.page-id-27)
  section.pricing .plan-features li,
section.pricing .plan-features li {
  font-size: clamp(.95rem, .92rem + .18vw, 1.04rem) !important;
  line-height: 1.75 !important;
}


/* v5.6.0 — الفصل بنبرة القسم لا برقم الصفحة
   الموقع فيه قسما باقات مختلفان: section.pricing بتدرّج داكن،
   و .pricing-section بخلفية فاتحة (الاستضافة). قاعدة واحدة كانت تلوّن
   الاثنين، فأيّ لون يصلح لأحدهما يُعمي الآخر. هذا هو نفس الخطأ الذي أنتج
   نصًا كحليًا على قسم كحلي سابقًا — والعلاج أن يُشتق اللون من نبرة القسم. */
.pricing-section .plan-features li,
.pricing-section .plan-features li:first-child {
  color: #4a5068 !important;
  border-block-end-color: #eeece7 !important;
}
.pricing-section .plan-header :is(h2,h3,h4) { color: #14182b !important; }
.pricing-section .plan-features li :is(strong,b) { color: #14182b !important; }
.pricing-section .plan-features li:first-child { color: #14182b !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v5.7.0 — آخر فشلين تباين مقيسين (كلاهما هامشي لكنه دون العتبة)
   · شارة تصنيف المدوّنة: #e31e24 على #fce9e9 = 4.00 والمطلوب 4.5.
     الأحمر الفاتح على وردي فاتح لا يبلغ العتبة؛ التدرّج الأغمق من الهوية
     نفسها (#bb1418) يعطي 5.57 دون تغيير الطابع اللوني.
   · وصف إحصائية الفريق: أبيض على var(--brand-red) المرندر rgb(230,53,58)
     = 4.27. تعميق خلفية القسم قليلًا يرفعها إلى 5.6 ويبقى داخل الهوية.
   ═══════════════════════════════════════════════════════════════════════════ */
.category-tag,
a.category-tag { color: #bb1418 !important; }

/* قاعدة الثيم لهذا القسم داخل <style> في الصفحة، فتغلب ملفًا خارجيًا
   عند تساوي التحديد. نرفع التحديد بجسم المستند لتُحسم لصالحنا. */
body section.team-stats,
body .team-stats,
html body .team-stats { background-color: #cc1a20 !important; }
body .team-stats :is(.stat-description, .stat-number, h2, h3, p) { color: #fff !important; }

/* رابط سياقي داخل متن المقال — يبقى داخل مجرى القراءة لا ككتلة إعلانية */
.ap-ilink {
  margin: 1.15rem 0 !important;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid rgba(227,30,36,.35);
  font-size: .99rem;
  line-height: 1.9;
}
.ap-ilink a {
  color: #bb1418 !important;
  font-weight: 700;
  text-decoration: none;
  border-block-end: 1px solid rgba(187,20,24,.35);
}
.ap-ilink a:hover { border-block-end-color: #bb1418; }

/* ═══════════════════════════════════════════════════════════════════════════
   الأسئلة الشائعة للصفحات المؤسسية — سطح مكتفٍ بذاته
   يستخدم <details>/<summary> فيعمل بلا جافاسكربت، ويبقى المحتوى مقروءًا
   لمحركات البحث حتى وهو مطويّ.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-faq {
  background: #fff;
  color: #14182b;
  padding-block: clamp(2.6rem, 2rem + 2.5vw, 4.4rem);
  border-block-start: 1px solid #eceae4;
}
.ap-faq .container { max-width: 880px; margin-inline: auto; padding-inline: 1.25rem; }
.ap-faq > .container > h2 {
  color: #14182b !important;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  font-weight: 800; text-align: center !important; margin: 0 0 2rem;
}
.ap-faq > .container > h2::after {
  content: ""; display: block; width: 48px; height: 3px;
  background: #e31e24; border-radius: 2px; margin: .85rem auto 0;
}
.ap-faq-item {
  border: 1px solid #e6e3dc;
  border-radius: 10px;
  background: #fbfaf8;
  margin-block-end: .7rem;
  overflow: hidden;
}
.ap-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  display: flex; align-items: center; gap: .7rem;
  transition: background .22s ease;
}
.ap-faq-item > summary::-webkit-details-marker { display: none; }
.ap-faq-item > summary::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 1.3rem; font-weight: 700; line-height: 1;
  color: #e31e24; flex: 0 0 auto;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.ap-faq-item[open] > summary::after { content: "−"; }
.ap-faq-item > summary:hover { background: #f5f3ee; }
.ap-faq-item h3 {
  margin: 0 !important;
  font-size: clamp(1rem, .96rem + .3vw, 1.14rem) !important;
  font-weight: 700 !important;
  color: #14182b !important;
  line-height: 1.6 !important;
  text-align: start !important;
  text-align-last: start !important;
}
.ap-faq-a { padding: 0 1.15rem 1.15rem; }
.ap-faq-a p {
  margin: 0 !important;
  color: #3d4256 !important;
  font-size: 1rem; line-height: 1.95;
  text-align: start !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   البورتفوليو والعملاء — من شريحة واحدة إلى شبكة كاملة  (v6.0.0)
   القياس: قسم الأعمال يحوي 26 عملًا وقسم العملاء 48 شعارًا، ويُعرض من كلٍّ
   منهما عنصر واحد في المرة. أي أن أقوى إشارتَي ثقة على الصفحة محجوبتان خلف
   خمس وعشرين نقرة، ولا يراهما زائر واحد من كل عشرة. الشبكة تعرض الكل دفعة
   واحدة، وتُبقي المحتوى مرئيًا للقارئ ولمحرك البحث معًا.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الأعمال ── */
body.home .aplan-slider-track {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
  gap: clamp(1rem, .7rem + 1vw, 1.6rem) !important;
  transform: none !important;         /* السكربت يضع تحويلًا سطريًا لكل شريحة */
  width: auto !important;
  transition: none !important;
}
body.home .aplan-slider-item {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  transform: none !important;
}
body.home .aplan-portfolio-card {
  width: auto !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid #e6e4de;
  background: #fff;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
body.home .aplan-portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px -14px rgba(10,23,69,.24);
}
body.home .aplan-portfolio-card img {
  width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
/* أسهم التنقّل لم يعد لها عمل بعد عرض الكل */
body.home .aplan-portfolio .aplan-slider-btn,
body.home .aplan-portfolio .swiper-button-next,
body.home .aplan-portfolio .swiper-button-prev { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   قسم «كيف نعمل معك» — تصحيح اتجاه  (v6.1.0)
   القياس على الجوال: .aplan-step-number موضعه بـ left:0 فيزيائيًا، فيجلس على
   الطرف الأيسر في صفحة اتجاهها RTL — أي على الطرف الخطأ — بينما الحشو
   المحجوز له (padding-right: 64px) على الطرف الأيمن. النتيجة: فراغ محجوز
   في جهة، ورقم يصطدم بالعنوان في الجهة المقابلة.
   العلاج خصائص منطقية تنقلب مع الاتجاه تلقائيًا.
   ═══════════════════════════════════════════════════════════════════════════ */
body.home .aplan-process-step {
  position: relative !important;
  padding-inline: 4.4rem 0 !important;
  padding-block: 0 0 !important;
  margin-block-end: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem) !important;
  text-align: start !important;
}
body.home .aplan-step-number {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  top: 0 !important;
  width: 2.9rem !important; height: 2.9rem !important;
  display: grid !important; place-items: center !important;
  border-radius: 50% !important;
  font-weight: 800 !important;
  z-index: 2;
}
body.home .aplan-step-content { text-align: start !important; }
body.home .aplan-step-content h3 {
  text-align: start !important;
  margin: .35rem 0 .5rem !important;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem) !important;
  line-height: 1.5 !important;
}
body.home .aplan-step-content p {
  text-align: start !important;
  text-align-last: start !important;
  margin: 0 !important;
  line-height: 1.9 !important;
  max-width: 62ch;
}
/* خط الوصل الزمني ينتقل إلى طرف البداية ليمرّ بمنتصف الأرقام */
body.home .aplan-process-timeline::before,
body.home .aplan-process-step::before {
  left: auto !important;
  right: auto !important;
  inset-inline-start: 1.45rem !important;
  inset-inline-end: auto !important;
  transform: none !important;
}
@media (max-width: 640px) {
  body.home .aplan-process-step { padding-inline: 3.9rem 0 !important; }
  body.home .aplan-step-number { width: 2.6rem !important; height: 2.6rem !important; }
  body.home .aplan-process-timeline::before,
  body.home .aplan-process-step::before { inset-inline-start: 1.3rem !important; }
}

/* نصوص بطاقات النتائج — تُخفى أيضًا في المسار المُولَّد بجافاسكربت.
   السبب نفسه: النص لا يطابق اللقطة التي بجواره، واللقطة وحدها هي الدليل. */
.viewport-info-title, .viewport-info-text,
.result-showcase .viewport-info { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   تصغير زر قائمة الجوال  (v6.5.0)
   القياس: الزر 32×26 بقضبان بيضاء سُمكها 3px داخل هيدر ارتفاعه 98px —
   أثقل عنصر في الهيدر بعد الشعار ويقرأ كخطأ مقاس لا كأيقونة.
   الحل: رسم 22×16 بقضبان 2px داخل صندوق لمس ثابت 44×44 (الحد الأدنى للمس)،
   مع إعادة معايرة إزاحة X عند الفتح لهندسة الارتفاع الجديد (7px بدل 10).
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-menu-toggle {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  padding: 14px 11px !important;
}
.mobile-menu-toggle span { height: 2px !important; }
.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   شريط الأدلة — قسم النتائج  (v6.5.0)
   القياس قبل التغيير: كاروسيل بصورة واحدة تُبدَّل كل 6 ثوانٍ، اللقطة (وهي
   الدليل الوحيد بعد إزالة النصوص) تُرسم 288×99px على شاشة 390 داخل إطار
   فارغ ارتفاعه 500px + شريط عنوان كحلي يكرّر عنوان القسم + سهمان + 9 نقاط
   + عدّاد ينكسر اتجاهه («9 / 3»). المساحة الطبيعية للقطات 1280×430–530.
   البديل: شريط snap أفقي تُبنى فيه كل اللقطات كبطاقات كاملة غير مقصوصة،
   بحافة الشريحة التالية بادية (peek) بدل الأسهم، وبلا تشغيل تلقائي —
   ومؤشر تقدّم خيطي مع عدّاد «ن من ك» لا ينكسر في RTL.
   السطح مكتفٍ بذاته: بطاقة بيضاء وحدود مقيسة على خلفية القسم البيضاء.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-evidence { display: block; }
.ap-evidence-strip {
  display: flex;
  gap: clamp(.7rem, .5rem + 1vw, 1.1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding-block: 6px 12px;
  padding-inline: 4px;
  scrollbar-width: none;
  cursor: grab;
}
.ap-evidence-strip::-webkit-scrollbar { display: none; }
.ap-evidence-strip:focus-visible { outline: 2px solid #E31E24; outline-offset: 2px; }
/* أثناء السحب بالماوس نعطّل الالتقاط حتى لا يقاوم اليد، ويعود عند الإفلات */
.ap-evidence-strip.is-drag {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.ap-evidence-card {
  flex: 0 0 86%;
  scroll-snap-align: start;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(10, 23, 69, .12);
  border-radius: 12px;
  padding: 8px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .ap-evidence-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(10, 23, 69, .28);
  }
}
/* اللقطة كاملة بلا قصّ: العرض محكوم والارتفاع من نسبة الأبعاد المصرّح بها */
.ap-evidence-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 7px;
}
/* مؤشر التقدّم: خيط 3px + عدّاد «ن من ك» بأرقام جدولية حتى لا يهتز */
.ap-evidence-meta {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-block-start: .35rem;
  padding-inline: 4px;
}
.ap-evidence-track {
  flex: 1;
  block-size: 3px;
  background: rgba(10, 23, 69, .12);
  border-radius: 2px;
  overflow: hidden;
}
.ap-evidence-fill {
  block-size: 100%;
  inline-size: 8%;
  background: #E31E24;
  border-radius: 2px;
}
.ap-evidence-count {
  font-size: .82rem;
  font-weight: 700;
  color: #4A5068;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* الجوال: الشريط ينزف حتى حافتَي الشاشة (حاوية القسم مقيسة بهامش 15px)
   فتتسع البطاقة إلى 86% من 390 بدل 86% من 360 — كل بكسل يخدم قراءة اللقطة */
@media (max-width: 639px) {
  .ap-evidence { margin-inline: -15px; }
  .ap-evidence-strip { padding-inline: 15px; scroll-padding-inline: 15px; }
  .ap-evidence-meta { padding-inline: 15px; }
}
/* التابلت: شريحة ونصف تعلن قابلية التمرير */
@media (min-width: 640px) {
  .ap-evidence-card { flex-basis: 58%; }
}
/* الويب: بطاقتان كاملتان + حافة ثالثة، فيُستغل العرض وتبقى اللقطة ~530px */
@media (min-width: 1024px) {
  .ap-evidence-card { flex-basis: calc(46% - 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-evidence-card { transition: none; }
  .ap-evidence-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   فسيفساء شركاء النجاح  (v6.5.0 — تستبدل جدار v6.3.x المرفوض)
   القياس: 48 شعارًا غير متجانس المصادر؛ التحليل البكسلي في المتصفح يكشف
   ~ثلثها بخلفية داكنة مدمجة في الصورة أو فنّ أبيض شفاف لا يظهر على سطح
   فاتح. أي سطح موحّد يخفي ثلث الشعارات حتمًا.
   الحل: فسيفساء بفواصل شعرية تصنَّف بلاطاتها آليًا (canvas — نفس الأصل):
   بلاطة بيضاء + مزج multiply يمحو الخلفيات البيضاء المدمجة، وبلاطة كحلية
   + مزج screen يمحو الخلفيات الداكنة — فيُقرأ كل شعار على سطحه الصحيح،
   والبلاطات الكحلية المتناثرة تصير نقشًا مقصودًا بلون الهوية لا خطأً.
   الجوال: أعمدة snap أفقية (3 صفوف × 16 عمودًا) بارتفاع ثابت ~220px بدل
   عمود رأسي يبتلع الشاشة. الويب: شبكة 8×6 مغلقة تمامًا (48 = 8×6 بلا يتيم).
   ═══════════════════════════════════════════════════════════════════════════ */
.clients, .clients-section { padding-block: clamp(2.2rem, 1.7rem + 2vw, 3.6rem) !important; }
.clients .aplan-section-title, .clients .section-title,
.clients-section .section-title { margin-block-end: 1rem !important; }
/* شارة العدد: الرقم الحقيقي المحسوب من العناصر ذاتها، لا رقم مُدّعى */
.ap-mosaic-count {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  margin-block: 0 1.3rem;
  background: #fff;
  border: 1px solid rgba(10, 23, 69, .12);
  color: #14182B;
  border-radius: 999px;
  padding: .34rem .95rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
}
.ap-mosaic {
  border: 1px solid rgba(10, 23, 69, .14);
  border-radius: 14px;
  background: rgba(10, 23, 69, .10); /* يظهر كخيوط شعرية عبر فجوات 1px */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 1px;
  scrollbar-width: none;
}
.ap-mosaic::-webkit-scrollbar { display: none; }
.ap-mosaic-grid {
  display: grid;
  gap: 1px;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 72px);
  grid-auto-columns: 118px;
  width: max-content;
}
.ap-tile {
  display: grid;
  place-items: center;
  background: #fff;
  padding: 12px 14px;
  min-inline-size: 0;
  scroll-snap-align: start;
}
/* الشعار: احتواء كامل بلا قصّ (الثيم يفرض cover فيقصّ) + توحيد رمادي */
.ap-tile .client-logo-img {
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  inline-size: auto !important;
  block-size: auto !important;
  object-fit: contain !important;
  filter: grayscale(1) opacity(.78) !important;
  mix-blend-mode: multiply;
  transform: none !important;
  transition: filter .3s ease;
}
.ap-tile--dark { background: #101B45; }
.ap-tile--dark .client-logo-img {
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(1.08) opacity(.92) !important;
}
@media (hover: hover) {
  .ap-tile:hover .client-logo-img { filter: none !important; }
  .ap-tile--dark:hover .client-logo-img { filter: grayscale(1) brightness(1.35) opacity(1) !important; }
}
/* الويب: شبكة مغلقة 8 أعمدة (48 = 8×6) بلا تمرير ولا صف ناقص */
@media (min-width: 1024px) {
  .ap-mosaic { overflow: hidden; scroll-snap-type: none; }
  .ap-mosaic-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 76px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-tile .client-logo-img { transition: none; }
}
/* أدوات السلايدر القديمة (أسهم/نقاط سوايبر) تبقى مخفية في أي مسار تراجع */
.clients :is(.clients-next, .clients-prev, .swiper-button-next, .swiper-button-prev,
              .swiper-pagination, .swiper-scrollbar),
.clients-section :is(.clients-next, .clients-prev, .swiper-button-next, .swiper-button-prev,
              .swiper-pagination, .swiper-scrollbar) { display: none !important; }
.clients :is(.swiper, .clients-swiper, .clients-slider-container),
.clients-section :is(.swiper, .clients-swiper, .clients-slider-container) { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   شريط التواصل السفلي  (v6.5.0 — يستبدل مجموعة v6.2.0 المرفوضة)
   القياس قبل التغيير: زر دائري يتوسّع بنقرة إلى إجراءات مسمّاة — أي أن
   الإجراءات الثلاثة كلها خلف نقرة إضافية وأيقونة مجرّدة، والمالك رفضه.
   البديل: شريط لاصق أسفل الشاشة بإجراءات منصوصة دائمة الظهور — واتساب
   واتصال هادئان على حبر كحلي (تباين 13+)، وطلب المكالمة شريحة حمراء
   (‏#E31E24 على أبيض = 4.63) — هدف اللمس 48px واحترام الحافة الآمنة.
   عنصر النموذج يُنقل بذاته فلا ينكسر ربط الثيم المفوَّض على .request-call.
   الويب ≥900: قرص مضغوط في الركن السفلي (بداية السطر) بدل شريط بعرض
   الصفحة — يبقي القناتين حاضرتين بأقل حجب ممكن، والهيدر أصلًا يحمل CTA.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-dock {
  position: fixed !important;
  z-index: 990;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: #14182B;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -10px 30px -12px rgba(10, 23, 69, .35);
  padding: 8px max(12px, env(safe-area-inset-right, 0px))
           calc(8px + env(safe-area-inset-bottom, 0px))
           max(12px, env(safe-area-inset-left, 0px));
}
/* المحتوى الأخير لا يُحجب: متنفَّس بارتفاع الشريط يختفي خلفه تمامًا */
body.ap-has-dock { padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

/* العناصر المنقولة تُصفّى من تثبيت الثيم (fixed/دائرة/تدرّج — كلها !important هناك) */
.ap-dock .ap-dock-item {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  flex: 1 1 0;
  width: auto !important;
  height: auto !important;
  min-block-size: 48px;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .2s ease, transform .15s ease;
}
.ap-dock .ap-dock-item:hover { background: rgba(255, 255, 255, .13) !important; transform: none !important; }
.ap-dock .ap-dock-item:active { transform: scale(.97) !important; }
.ap-dock .ap-dock-item i {
  font-size: 1.15rem !important;
  transform: none !important;
  color: #fff;
}
.ap-dock .ap-dock-item--wa i { color: #25D366; }   /* أيقونة على حبر: 8.8 */
.ap-dock .ap-dock-item--tel i { color: #9DB2FF; }  /* أزرق ناعم على حبر: 7+ */
.ap-dock .ap-dock-item--form {
  background: #E31E24 !important;
  flex-grow: 1.25;
}
.ap-dock .ap-dock-item--form:hover { background: #BB1418 !important; }
.ap-dock .ap-dock-label { letter-spacing: 0; }
.ap-dock .ap-dock-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* الويب: قرص في ركن بداية السطر — نفس موضع الأزرار العائمة السابقة */
@media (min-width: 900px) {
  .ap-dock {
    inset-inline: auto;
    inset-inline-start: 20px;
    inset-block-end: 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 7px;
    gap: 6px;
    box-shadow: 0 14px 34px -12px rgba(10, 23, 69, .5);
  }
  .ap-dock .ap-dock-item {
    flex: none;
    padding-inline: 1.05rem;
    min-block-size: 44px;
    border-radius: 999px;
    font-size: .88rem !important;
  }
  /* القرص يطفو كأداة ركن متعارف عليها؛ لا حاجة لمتنفَّس بعرض الصفحة */
  body.ap-has-dock { padding-block-end: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-dock .ap-dock-item { transition: none; }
}
/* الأزرار الأصلية تُخفى حتى تُنقل إلى الشريط — فلا زر عائم قديم يزاحم */
body .floating-whatsapp:not(.ap-dock-item),
body .floating-call-request:not(.ap-dock-item) { display: none !important; }

/* v6.5.1 — ثلاثة قياسات من لقطات النشر الأول:
   (١) ٢٨/٤٨ شعارًا مربّعًا فاض رأسيًا: سقف % على صورة داخل صفّ جريد ضمني
   auto لا يُحسم في دورة تحجيم المسارات (الصف الداخلي تمدّد 116px داخل بلاطة
   76px). السقف بالبكسل الصريح يقطع الدورة، وoverflow حزام أمان للبلاطة. */
.ap-tile { overflow: hidden; }
.ap-tile .client-logo-img { max-block-size: 48px !important; }
@media (min-width: 1024px) {
  .ap-tile .client-logo-img { max-block-size: 52px !important; }
}
/* (٢) فنّ البلاطات الكحلية بدا خافتًا بعد مزج screen فوق الكحلي — رفع
   الإضاءة يعيد وزنه البصري إلى مستوى جيران البلاطات البيضاء. */
.ap-tile--dark .client-logo-img {
  filter: grayscale(1) brightness(1.22) opacity(.95) !important;
}
@media (hover: hover) {
  .ap-tile--dark:hover .client-logo-img { filter: grayscale(1) brightness(1.5) opacity(1) !important; }
}
/* (٣) قرص الويب فوق الفوتر الداكن: حدّ ‎.08 يذوب في السطح المجاور —
   تقويته يحفظ حافة القرص على الأسطح الداكنة دون أن يصرخ على الفاتحة. */
@media (min-width: 900px) {
  .ap-dock { border-color: rgba(255, 255, 255, .16); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   الأعمال على الجوال — من عمود لا نهائي إلى شريط سحب  (v6.6.0)
   القياس: تحويل السلايدر إلى شبكة (v6.0.0) حلّ حجب ٢٦ عملًا خلف ٢٥ نقرة على
   الويب، لكنه أنتج على الجوال عمودًا من ٢٦ بطاقة بارتفاع ~٩٠٠px لكل بطاقة —
   نحو ٢٣ ألف بكسل من أصل ٣٦ ألفًا لطول الصفحة كلها. أي أن الزائر يمرّ
   بأربعين شاشة قبل أن يصل إلى بقية الصفحة.
   الحل: نفس منطق شريط الأدلة — سحب أفقي بـscroll-snap مع حافة الشريحة
   التالية ظاهرة، فيبقى المحتوى كله متاحًا في ارتفاع شاشة واحدة.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.home .aplan-slider-track {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .85rem !important;
    padding-inline: 1rem !important;
    padding-block-end: .6rem !important;
    scrollbar-width: none;
  }
  body.home .aplan-slider-track::-webkit-scrollbar { display: none; }
  body.home .aplan-slider-item {
    flex: 0 0 86% !important;      /* حافة الشريحة التالية تبقى ظاهرة */
    max-width: 86% !important;
    scroll-snap-align: center;
  }
  body.home .aplan-portfolio-card { height: 100% !important; }
  /* تلميح السحب بدل أسهم لا يلاحظها أحد */
  body.home .aplan-portfolio .aplan-slider-track::after {
    content: ""; flex: 0 0 .4rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   بطاقات الأعمال بلا نصوص  (v6.7.0 — قرار المالك: «نشيل الوصف من كل سلايدر»)
   طبقة العنوان/الوصف/الشارة حُذفت بنيويًا من المخرَج، فبقيت البطاقة لقطة
   نتائج خالصة. القياس بعد الحذف: البطاقة = صورة 16/9 فقط (~188px على 390
   بدل ~900px مع النصوص)، والشريط الأفقي (v6.6.0) يعرضها واحدةً بحافة —
   لا مساحة كبيرة ولا صور متراكمة رأسيًا.
   ═══════════════════════════════════════════════════════════════════════════ */
body.home .aplan-portfolio-card img { border-radius: 11px; }
/* نقاط المؤشر القديمة: ٢٦ نقطة لسلايدر لم يعد سلايدر شريحة-واحدة —
   ضجيج بلا وظيفة بعد الشبكة (ويب) وشريط السحب بالحافة البادية (جوال) */
body.home .aplan-portfolio .aplan-slider-dots { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   فهرس المقال المطوي  (v6.8.0)
   القياس على 390px: .blog-posts-section نصّ تعليمي صرف بلا صورة واحدة يبتلع
   7,219px من الرئيسية و9,396 من صفحة إعلانات جوجل و11,890 من صفحة السيو
   (43% من طولها). عناوينه أسئلة أصلًا، فيُطوى كل مقطع في details أصلية:
   القسم يصير فهرس أسئلة بارتفاع شاشة تقريبًا، والمصدر كامل للزواحف.
   السطح مكتفٍ بذاته: صفوف بيضاء بحبر كحلي فوق خلفية القسم الرمادية الفاتحة.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-folded .toc-container { display: none !important; } /* الفهرس المطوي حلّ محله */
.ap-folded .blog-content { max-width: 74ch; margin-inline: auto; }
details.ap-fold {
  background: #fff;
  border: 1px solid rgba(10, 23, 69, .12);
  border-radius: 11px;
  margin-block-end: .6rem;
}
details.ap-fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.05rem;
}
details.ap-fold summary::-webkit-details-marker { display: none; }
/* العنوان يحتفظ بوسم h2 لدلالته، ويُقاس كصفّ فهرس لا كعنوان قسم */
details.ap-fold summary h2 {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #14182B !important;
  line-height: 1.6 !important;
  letter-spacing: 0;
  text-align: start !important;
}
details.ap-fold summary::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem; height: .55rem;
  border-inline-end: 2px solid #E31E24;
  border-block-end: 2px solid #E31E24;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
details.ap-fold[open] summary::after { transform: rotate(-135deg); }
.ap-fold-body { padding: 0 1.05rem 1.05rem; }
.ap-fold-body p, .ap-fold-body li {
  color: #3d4256;
  font-size: .98rem;
  line-height: 1.9;
  letter-spacing: 0;
  text-align: start;
}
.ap-fold-body :is(h3, h4) { color: #14182B; letter-spacing: 0; }
.ap-folded .back-to-top { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  details.ap-fold summary::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   بطاقات المدونة المميّزة → صفوف إعلامية على الجوال  (v6.8.0)
   القياس: 3 بطاقات × 687px = 2,546px عمود صور رأسي على الرئيسية.
   ثلاث بطاقات لا تستحق شريط سحب؛ الصف المضغوط (مصغّرة بجانب العنوان) يعرضها
   في ~400px بلا إخفاء أي محتوى: الموجز يُشذَّب بصريًا بسطرين ويبقى في المصدر.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .aplan-blog-card {
    display: grid !important;
    grid-template-columns: 6.4rem 1fr;
    column-gap: .95rem;
    align-items: start;
    background: #fff;
    border: 1px solid rgba(10, 23, 69, .1);
    border-radius: 12px;
    padding: .8rem;
  }
  .aplan-blog-card .aplan-blog-image {
    grid-column: 1;
    grid-row: 1 / 4;
    margin: 0 !important;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 9px;
  }
  .aplan-blog-card .aplan-blog-image img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
  }
  .aplan-blog-card .aplan-blog-content { display: contents; }
  .aplan-blog-card .aplan-blog-meta {
    grid-column: 2; order: 1;
    font-size: .72rem !important;
    margin: 0 0 .3rem !important;
  }
  .aplan-blog-card .aplan-blog-title {
    grid-column: 2; order: 2;
    margin: 0 !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* الموجز وأي ذيل: سطران بصريًا، والمصدر كامل */
  .aplan-blog-card .aplan-blog-content > :not(.aplan-blog-meta):not(.aplan-blog-title) {
    grid-column: 2; order: 3;
    margin: .35rem 0 0 !important;
    font-size: .85rem !important;
    line-height: 1.7 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   خدماتنا على الجوال → صفوف مضغوطة  (v6.8.0)
   القياس: 7 بطاقات متطابقة (أيقونة + عنوان + فقرة + رابط) مكدّسة = 2,161px.
   الصف المضغوط: أيقونة صغيرة بجانب العنوان والفقرة بسطرين — القسم ~1,000px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .aplan-service-card {
    display: grid !important;
    grid-template-columns: 3rem 1fr;
    column-gap: .9rem;
    align-items: start;
    text-align: start !important;
    padding: .95rem 1rem !important;
  }
  .aplan-service-card .aplan-service-icon {
    grid-row: 1 / 4;
    width: 3rem !important; height: 3rem !important;
    min-width: 0 !important;
    font-size: 1.15rem !important;
    margin: 0 !important;
    display: grid; place-items: center;
  }
  .aplan-service-card h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
  }
  .aplan-service-card p {
    margin: .3rem 0 0 !important;
    font-size: .85rem !important;
    line-height: 1.7 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .aplan-service-card .aplan-read-more-btn {
    margin: .45rem 0 0 !important;
    padding: 0 !important;
    font-size: .85rem !important;
    background: transparent !important;
    justify-self: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   كاروسيل قصص النجاح (صفحة السيو) → شريط لقطات  (v6.8.0)
   القياس: عنصران بصورة + عنوان حالة + فقرة ادعاء في 1,685px رأسيًا.
   النصوص حُذفت بنيويًا بقرار المالك (اللقطة هي الدليل)، والصور تصير شريط
   سحب snap بنفس لغة شريط الأدلة.
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-case-study-carousel {
  display: flex !important;
  gap: .9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 4px 8px;
}
.seo-case-study-carousel::-webkit-scrollbar { display: none; }
.seo-case-study-item {
  flex: 0 0 86% !important;
  width: auto !important;
  scroll-snap-align: start;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  background: #fff;
  border: 1px solid rgba(10, 23, 69, .12);
  border-radius: 12px;
  padding: 8px;
}
.seo-case-study-image { margin: 0 !important; }
.seo-case-study-image img {
  width: 100% !important; height: auto !important;
  display: block;
  border-radius: 8px;
}
@media (min-width: 1024px) {
  .seo-case-study-item { flex-basis: calc(50% - .45rem) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   قسم الأسئلة المزخرف — إحكام  (v6.8.0)
   القياس: زخارف crypto-particle وحشوات واسعة تضيف مئات البكسلات فوق محتوى
   الأسئلة نفسه. تُزال الزخرفة وتُشدّ الحشوات؛ المحتوى لا يُمسّ.
   ═══════════════════════════════════════════════════════════════════════════ */
.crypto-faq-section .crypto-bg-animation { display: none !important; }
.crypto-faq-section { padding-block: clamp(2rem, 1.5rem + 2vw, 3.2rem) !important; }
.crypto-faq-section .crypto-faq-item { margin-block-end: .6rem !important; }
.crypto-faq-section .crypto-faq-question { padding: .85rem 1.05rem !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   صفحة محمد ناصر: سطر الصفة في H1 + قسم صفات الخبرة  (v6.8.0)
   القياس: H1 كان الاسم وحده (أخطر ضعف GEO في الصفحة)، والصفات السبع الجديدة
   كلها مسنودة بصفحات خدمات قائمة. الهيرو خلفيته نقشية داكنة والنص الأبيض
   لغتها القائمة — سطر الصفة يرث السطح بدرجة أوضح من السطر التعريفي المجاور.
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-h1-role {
  display: block;
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .85);
  letter-spacing: 0;
  line-height: 1.7;
  margin-block-start: .55rem;
}
.ap-nasser { background: #fff; padding-block: clamp(2.4rem, 1.8rem + 2.4vw, 4rem); }
.ap-nasser .container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
.ap-nasser h2 {
  color: #14182B;
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 30ch;
  margin: 2.2rem auto 0.9rem;
  text-align: center;
}
.ap-nasser h2:first-child { margin-block-start: 0; }
.ap-nasser h2::after {
  content: ""; display: block;
  width: 44px; height: 3px;
  background: #E31E24; border-radius: 2px;
  margin: .7rem auto 0;
}
.ap-nasser > .container > p, .ap-nasser .container > p {
  color: #3d4256;
  font-size: 1.02rem;
  line-height: 1.95;
  letter-spacing: 0;
  max-width: 72ch;
  margin: 0 auto 1.1rem;
  text-align: start;
}
.ap-nasser a { color: #BB1418; text-decoration: underline; text-underline-offset: 3px; }
/* الصفات: تدفّق تعريفي بفواصل شعرية، لا شبكة بطاقات متطابقة */
.ap-nasser-roles { max-width: 72ch; margin-inline: auto; }
.ap-nasser-roles .ap-role {
  padding-block: 1.05rem;
  border-block-start: 1px solid rgba(10, 23, 69, .1);
}
.ap-nasser-roles .ap-role:first-child { border-block-start: 0; }
.ap-nasser-roles h3 {
  color: #14182B;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
  margin: 0 0 .35rem;
}
.ap-nasser-roles h3::before {
  content: "";
  display: inline-block;
  width: .5rem; height: .5rem;
  background: #E31E24;
  border-radius: 50%;
  margin-inline-end: .55rem;
  vertical-align: .12em;
}
.ap-nasser-roles p {
  color: #3d4256;
  font-size: .97rem;
  line-height: 1.9;
  letter-spacing: 0;
  margin: 0;
}

/* v6.8.1 — إحكام مقيس بعد نشر 6.8.0 (الأرقام على 390px):
   صفوف الفهرس كانت 94-120px لأن السؤال يلتف لسطرين وثلاثة — سطر واحد
   للمطوي والسطور كلها عند الفتح؛ ومع شدّ الحشوات تنزل بوابة القسم <900. */
details.ap-fold { margin-block-end: .45rem; border-radius: 9px; }
details.ap-fold summary { padding: .6rem .9rem; }
details.ap-fold summary h2 { font-size: .95rem !important; line-height: 1.55 !important; }
details.ap-fold:not([open]) summary h2 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-folded { padding-block: 2rem !important; }
.ap-folded .section-title { font-size: 1.55rem !important; margin-block-end: 1rem !important; }
.ap-folded .blog-content-wrapper { margin-block: 0 !important; }

@media (max-width: 900px) {
  /* بطاقة الخدمة كانت 215px: الفقرة سطر واحد بصريًا (المصدر كامل) والحشوات أشد */
  .aplan-service-card { padding: .75rem .9rem !important; }
  .aplan-service-card p { -webkit-line-clamp: 1; margin-block-start: .2rem !important; }
  .aplan-service-card .aplan-read-more-btn { margin-block-start: .3rem !important; }
  .aplan-services-grid { gap: .7rem !important; }
  /* ترويسة قسم المدونة وزرّه كانا يزيدان على البطاقات الثلاث نفسها */
  .aplan-blog-section { padding-block: 2.2rem !important; }
  .aplan-blog-section .aplan-section-title { margin-block-end: .5rem !important; }
  .aplan-blog-grid { gap: .7rem !important; }
  .aplan-blog-section .aplan-fancy-btn { margin-block-start: 1rem !important; }
  /* التسعير: حشوة 70/80 وقوائم متباعدة على شاشة ضيقة */
  .pricing { padding-block: 44px 52px !important; }
  .pricing-plan { padding: 1.15rem !important; }
  .pricing .plan-features li { line-height: 1.65 !important; margin-block-end: .4rem !important; }
  /* قسم العملية المزخرف: شدّ الحشوات والقوائم دون مسّ المحتوى */
  .seo-process-section { padding-block: 2.5rem !important; }
  .seo-process-section li { line-height: 1.7 !important; margin-block-end: .5rem !important; }
  /* ترويسة الأسئلة المزخرفة: أشكال زخرفية تضيف ارتفاعًا بلا معنى */
  .crypto-section-header { margin-block-end: 1.1rem !important; }
  .crypto-title-shape, .crypto-title-decoration { display: none !important; }
  /* أقسام مؤسسية سمينة الحشو على الجوال */
  .aplan-why-us, .premium-about-section, .aplan-process { padding-block: 2.5rem !important; }
}

/* v6.8.2 — القياس: عنوان الصف داخل summary يحمل من الثيم حشوة 22/20/18px
   وdisplay:flow-root يُبطل صندوق القصّ، فالصف 86px بدل ~52. تصفير حشوة
   العنوان داخل الفهرس حصرًا وفرض صندوق القصّ عند الطيّ. */
details.ap-fold summary h2 {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  display: block !important;
}
details.ap-fold:not([open]) summary h2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* لقمات شدّ متبقية مقيسة على 390 (حشوات أقسام لا محتوى) */
@media (max-width: 900px) {
  .ap-depth { padding-block: 2.2rem !important; }
  .faq-section { padding-block: 2.4rem !important; }
  .ap-related { padding-block: 2.2rem !important; }
  .crypto-faq-section { padding-block: 1.9rem !important; }
  .pricing .plan-header { padding: 1rem !important; margin-block-end: .6rem !important; }
  .pricing .plan-cta { margin-block-start: .8rem !important; }
}

/* v6.8.3 — آخر لقمتين لهدف <15,000 على 390 (حشوات لا محتوى):
   الرئيسية زائدة 157px وseo زائدة 418px بعد كل ما سبق. */
@media (max-width: 900px) {
  .services, .aplan-cta { padding-block: 2.4rem !important; }
  .seo-hero-v2 { padding-block: 2.6rem 2.2rem !important; }
  .seo-case-studies-section { padding-block: 2rem !important; }
  .premium-about-section { padding-block: 2.2rem !important; }
  .seo-process-section .seo-process-header { margin-block-end: 1.2rem !important; }
  .seo-process-section h3 { margin-block: .9rem .5rem !important; }
}

/* v6.8.4 — بقية seo وحدها (+219): كثافة قوائم العملية والتسعير على 390،
   تصغير درجة لا إخفاء. */
@media (max-width: 900px) {
  .seo-process-section li { line-height: 1.6 !important; font-size: .92rem !important; }
  .pricing .plan-features li { font-size: .9rem !important; }
}

/* v6.8.5 — خطوات العملية (صفحات الخدمات): 8 بطاقات ضخمة (~250px للبطاقة:
   رقم كبير + أيقونة + عنوان + فقرة) = 2,351px على 390. الصف المضغوط:
   الرقم صغيرًا بجوار العنوان والفقرة بسطرين بصريًا (المصدر كامل) والأيقونة
   الزخرفية تُطوى — ألوان النص تبقى ألوان الثيم على سطحه الداكن نفسه. */
@media (max-width: 900px) {
  .seo-process-section .process-step {
    display: grid !important;
    grid-template-columns: 2.3rem 1fr;
    column-gap: .85rem;
    align-items: start;
    padding: .85rem .95rem !important;
    margin-block-end: .6rem !important;
  }
  .seo-process-section .step-number {
    grid-row: 1 / 3;
    width: 2.3rem !important; height: 2.3rem !important;
    min-width: 0 !important;
    font-size: .85rem !important;
    display: grid !important; place-items: center;
    margin: 0 !important;
  }
  .seo-process-section .step-number span { font-size: .85rem !important; }
  .seo-process-section .step-icon { display: none !important; }
  .seo-process-section .step-content { margin: 0 !important; }
  .seo-process-section .step-title {
    font-size: .98rem !important;
    margin: 0 0 .25rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0;
  }
  .seo-process-section .step-content p {
    font-size: .86rem !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* v6.8.6 — الثيم يوسّط نصوص بطاقة الخدمة فتبدو الصفوف الجانبية مفككة:
   محاذاة البداية لعناصر العمود النصي حصرًا على الجوال. */
@media (max-width: 900px) {
  .aplan-service-card :is(h3, p) { text-align: start !important; }
  .aplan-service-card .aplan-read-more-btn { justify-content: flex-start !important; }
}

/* v6.8.7 — علّتان مقيستان من لقطة 1440:
   (١) ‎-webkit-box مع RTL يقصّ أول حرف من عنوان الصف («نحسين» بدل «تحسين»)
       — القصّ الأسطر الواحد يتم بـ nowrap/ellipsis الآمن اتجاهيًا.
   (٢) حاوية المقال تبقى جريدًا بعمود TOC المخفي فتنزاح الصفوف عن المركز. */
.ap-folded .blog-content-wrapper { display: block !important; }
details.ap-fold:not([open]) summary h2 {
  display: block !important;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v6.8.8 — منطق الكاروسيل القديم يخفي الشرائح غير النشطة فيبقى الشريط
   بعنصر واحد بلا سحب ولا حافة (قيس sw=cw=360). إظهار الشرائح كلها؛
   الشريط هو الملاح. */
.seo-case-study-carousel .seo-case-study-item {
  display: block !important;
  visibility: visible !important;
}
/* v6.8.9 — الثيم يلفّ شرائح الكاروسيل (wrap) فترتصّ رأسيًا رغم الأساس 86% */
.seo-case-study-carousel { flex-wrap: nowrap !important; }

/* v6.9.0 — جذر علّة القصّ: العناوين ثنائية الاتجاه (عربي + مصطلح لاتيني
   بين قوسين) يبتلع فيها nowrap/line-clamp أول حرف عربي (إعادة ترتيب bidi).
   القصّ الكتلي بارتفاع سطر واحد لا يتدخل في البيدي أصلًا: السطر الأول يُعرض
   كاملًا سليم الاتجاه والباقي يُخفى تحت خط القصّ. والحاوية كانت منزاحة عن
   المركز ببقايا float عمود الفهرس الجانبي المخفي. */
details.ap-fold:not([open]) summary h2 {
  display: block !important;
  white-space: normal !important;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-height: 1.55 !important;
  max-block-size: 1.65em;
  overflow: hidden;
}
.ap-folded .blog-content {
  float: none !important;
  inline-size: auto !important;
  max-inline-size: 74ch;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* v6.9.1 — الجذر الفعلي لابتلاع أول حرف: عناوين المتن موسّطة من الثيم،
   فإذا زاد السطر عن صندوقه حرفين قُصّ من الطرفين معًا («تحسين»→«نحسين»
   و«(SEO)»→«(SEO؛»). محاذاة البداية تجعل أي فائض يلتف لسطر ثانٍ مخفي
   والحرف الأول مصون دائمًا. و74ch بخط Tajawal ≈ نصف المتوقع (المرجع رقم
   ضيق) فخُنقت الصفوف — الوحدة rem أصدق هنا. */
details.ap-fold summary h2 { text-align: start !important; }
.ap-folded .blog-content { max-inline-size: 46rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   إصلاحات ارتداد عاجلة  (v6.9.2 — من لقطات المالك)
   (١) بطاقات العملية على web-development: حاوية الثيم جريد بعمود 350px
   وjustify مركزي، فانكمشت البطاقة إلى 101px وعمود 1fr إلى صفر — العنوان
   37px عرضًا ينكسر حرفًا حرفًا. الحاوية تصير block كامل العرض والبطاقة
   تفرض عرضها وminmax(0,1fr) يمنع انهيار العمود.
   (٢) هيرو الخدمات: قصّة v6.8.3 وضعت أول سطر عند 69px تحت هيدر ثابت 98px.
   (٣) H1 ناصر: ارتفاع مثبّت 96px من الثيم يرصّ الاسم فوق سطر الصفة.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .seo-process-section .seo-process-steps {
    display: block !important;
    width: 100% !important;
  }
  .seo-process-section .process-step {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    grid-template-columns: 2.3rem minmax(0, 1fr) !important;
  }
  .seo-process-section .step-content {
    width: auto !important; max-width: none !important; min-width: 0 !important;
  }
  .seo-process-section .step-title { width: auto !important; min-width: 0 !important; }
  .seo-hero-v2 { padding-block: 7.5rem 2.2rem !important; }
}
.nasser-hero h1.page-title {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
}
/* v6.9.3 — عنوان الخطوة على web-development مكتوب عموديًا من الثيم
   (writing-mode) فبقي 37×84 حتى بعد تصحيح عرض البطاقة — يُعاد أفقيًا. */
@media (max-width: 900px) {
  .seo-process-section .step-title,
  .seo-process-section .step-content h3 {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
  }
}
/* v6.9.4 — الجذر المقيس أخيرًا: بطاقات web-development بلا .step-number،
   فوقع .step-content في العمود الأول (2.3rem=36.8px). تعيين الأعمدة صريح،
   والعمود الأول auto فيصفر حيث لا رقم ويبقى 2.3rem حيث يوجد. */
@media (max-width: 900px) {
  .seo-process-section .process-step {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .seo-process-section .step-number { grid-column: 1; }
  .seo-process-section .step-content {
    grid-column: 2 !important;
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   صفحة محمد ناصر — إعادة تشكيل  (v7.0.0)
   القياسات على 390: الهيرو 1,600px (شاشتان قبل أول محتوى)، القسمان السرديان
   المرقّمان 4,570+2,453، لقطات النتائج الست عمود 1,419، والصفحة 21,278.
   الأهداف: هيرو <750 · مستند <12,000 · لا تداخل ولا نص منكسر.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nasser-hero {
    padding-block: 7rem 1.7rem !important;
    min-height: 0 !important;
  }
  .nasser-hero .hero-badge {
    font-size: .8rem !important;
    padding: .35rem .8rem !important;
    margin-block: 0 .5rem !important;
  }
  .nasser-hero .profile-image-container {
    width: 92px !important; height: 92px !important;
    margin-block: .4rem .7rem !important;
  }
  .nasser-hero h1.page-title {
    display: block !important;
    font-size: 1.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    letter-spacing: 0;
  }
  .nasser-hero .ap-h1-role {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
    margin-block-start: .4rem !important;
    color: rgba(255, 255, 255, .88) !important;
  }
  .nasser-hero .page-subtitle {
    font-size: .93rem !important;
    margin-block: .45rem 0 !important;
  }
  .nasser-hero .page-description {
    font-size: .92rem !important;
    line-height: 1.75 !important;
    margin-block: .55rem 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* مزايا الهيرو: من أربع بطاقات ضخمة (689px) إلى رقاقات 2×2 (~150px) */
  .nasser-hero .about-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    margin-block: 1rem 0 !important;
  }
  .nasser-hero .feature-item {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    margin: 0 !important;
    padding: .55rem .6rem !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 10px !important;
    min-width: 0;
  }
  .nasser-hero .feature-icon {
    width: 1.9rem !important; height: 1.9rem !important;
    min-width: 1.9rem !important;
    font-size: .85rem !important;
    margin: 0 !important;
    display: grid !important; place-items: center;
  }
  .nasser-hero .feature-text { min-width: 0; }
  .nasser-hero .feature-text h3 {
    font-size: .76rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    color: #fff !important;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nasser-hero .feature-text p {
    font-size: .66rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .72) !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* لقطات النتائج الست: من عمود 1,419px إلى شريط snap بلغة شريط الأدلة */
  .results-section .results-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .8rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px 8px;
  }
  .results-section .results-grid::-webkit-scrollbar { display: none; }
  .results-section .result-item {
    flex: 0 0 86% !important;
    width: auto !important;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid rgba(10, 23, 69, .12);
    border-radius: 12px;
    padding: 6px;
    margin: 0 !important;
  }
  .results-section .result-item img { border-radius: 8px; }
  /* شدّ عام لأقسام الصفحة */
  .nasser-page .section-padding { padding-block: 2.2rem !important; }
  .nasser-page .premium-about-section { padding-block: 2.4rem !important; }
  .nasser-page .ap-related { padding-block: 2rem !important; }
  .ap-nasser { padding-block: 2.2rem !important; }
  .ap-nasser h2 { margin-block-start: 1.7rem; }
  .ap-nasser-roles .ap-role { padding-block: .85rem; }
  .ap-nasser-roles p { font-size: .93rem; line-height: 1.8; }
}
/* القسم المطوي كاملًا: صفّ العنوان أبيض مكتفٍ بذاته فوق أي خلفية قسم */
.ap-folded-sec { padding-block: 1.6rem !important; }
.ap-folded-sec > details.ap-fold--sec {
  max-inline-size: 46rem;
  margin-inline: auto;
}
details.ap-fold--sec summary h2 {
  font-size: 1.02rem !important;
  color: #14182B !important;
}
.ap-fold-body--sec { padding-block-start: .6rem; }
.ap-fold-body--sec .about-title { color: #14182B !important; }
/* سطر الصفة على الويب أيضًا: رصف مضمون تحت الاسم */
.nasser-hero h1.page-title { display: block !important; }
.nasser-hero .ap-h1-role { display: block !important; }

/* v7.0.1 — الميل الأخير لبوابتَي ناصر (هيرو <750 · مستند <12,000):
   هوامش الثيم البينية داخل الهيرو ~300px فوق مجموع العناصر نفسها؛ وقسما
   ap-nasser وap-depth أكبر كتلتين متبقيتين. و«رحلتي» انضمت لطيّ القصص
   (ثلاث قصص = ثلاثة صفوف فهرس، والمصدر كامل). */
@media (max-width: 900px) {
  .nasser-hero .container > * { margin-block: 0 !important; }
  .nasser-hero .profile-image-container { margin-block: .5rem !important; }
  .nasser-hero .page-subtitle { margin-block-start: .4rem !important; }
  .nasser-hero .page-description { margin-block-start: .5rem !important; }
  .nasser-hero .about-features { margin-block-start: .9rem !important; }
  .nasser-hero { padding-block: 6.8rem 1.5rem !important; }
  .ap-nasser h2 { margin-block: 1.4rem .7rem; font-size: 1.28rem; }
  .ap-nasser-roles p { font-size: .9rem; line-height: 1.75; }
  .ap-nasser .container > p { font-size: .95rem; line-height: 1.8; }
  .ap-nasser .ap-table th, .ap-nasser .ap-table td {
    padding: .5rem .6rem !important;
    font-size: .82rem !important;
    line-height: 1.6 !important;
  }
  .nasser-page .ap-depth li { margin-block-end: .45rem !important; line-height: 1.75 !important; }
  .nasser-page .ap-depth { padding-block: 1.9rem !important; }
}

/* v7.0.2 — الهيرو 996 والهدف <750: الرقاقات من شبكة 2×2 (254px) إلى صفّ
   snap أفقي واحد (~64px) بنفس لغة أشرطة الموقع، والوصف بسطرين. */
@media (max-width: 900px) {
  .nasser-hero .about-features {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block-end: 4px;
  }
  .nasser-hero .about-features::-webkit-scrollbar { display: none; }
  .nasser-hero .feature-item {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    max-width: 15rem;
  }
  .nasser-hero .feature-text h3 { -webkit-line-clamp: 1; font-size: .74rem !important; }
  .nasser-hero .feature-text p { display: none !important; } /* سطر تسويقي مصغّر؛ نصّه باقٍ في المصدر */
  .nasser-hero .page-description { -webkit-line-clamp: 2; }
  .nasser-hero { padding-block: 6.4rem 1.4rem !important; }
}
/* v7.0.3 — آخر 12px لبوابة الهيرو (750) */
@media (max-width: 900px) {
  .nasser-hero { padding-block: 6.3rem 1.3rem !important; }
  .nasser-hero .hero-badge { margin-block-end: .35rem !important; }
  .nasser-hero .profile-image-container { margin-block: .4rem !important; }
}
/* v7.0.4 — البقية (10px): هامش الرقاقات والذيل */
@media (max-width: 900px) {
  .nasser-hero .about-features { margin-block-start: .6rem !important; }
  .nasser-hero { padding-block-end: 1.1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   بوابة «لا نص منكسر ولا تقاطع»  (v7.1.0 — قياسات بوابة المالك على 390)
   (١) h3 المزايا في .aplan-why-us معصور إلى 57px داخل عنصر 360 — صفوف
       شبكية كبقية الموقع. (٢) خلايا جداول المقارنة 90-115px تلتف 4-5 أسطر:
       عرض أدنى للجدول والتمرير داخل غلافه المخصص لا في الصفحة.
   (٣) بادج «منذ 2015» الزخرفي يتقاطع مع عنوان مجاور على الجوال — معلومة
       مكررة (موجودة في بادج الهيرو) فيُطوى على الجوال. (٤) زر «التالي» في
       ترقيم المدونة 82px يلتف — عرض أدنى مريح.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .aplan-why-us .aplan-feature-item {
    display: grid !important;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    column-gap: .85rem;
    align-items: start;
    text-align: start !important;
  }
  .aplan-why-us .aplan-feature-item > :first-child { grid-row: 1 / 3; }
  .aplan-why-us .aplan-feature-item :is(h3, p) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: start !important;
    margin: 0 !important;
  }
  .aplan-why-us .aplan-feature-item h3 { font-size: .98rem !important; line-height: 1.5 !important; }
  .aplan-why-us .aplan-feature-item p { font-size: .86rem !important; line-height: 1.7 !important; margin-block-start: .25rem !important; }
  .ap-table-wrap { overflow-x: auto; scrollbar-width: thin; }
  .ap-table { min-inline-size: 560px; }
  .nasser-page .experience-badge { display: none !important; }
  .pagination .next, a.next.page-numbers, .nav-links .next {
    min-inline-size: 130px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}
/* v7.1.1 — عنصر المزايا: display:flex من الثيم بخصوصية أعلى يغلب الشبكة
   (الأعمدة طُبّقت والعرض لا) — رفع الخصوصية بسلسلة الثيم نفسها. */
@media (max-width: 900px) {
  .aplan-why-us .aplan-features-grid .aplan-feature-item,
  section.aplan-why-us .aplan-feature-item {
    display: grid !important;
  }
}
/* v7.1.2 — الجداول المفلوتة خارج ap-table (جداول المتن التعليمي داخل
   الطيّات وخلاياها 90-113px تلتف 5 أسطر): عرض أدنى وتمرير داخل جسد الطيّة. */
@media (max-width: 900px) {
  .ap-fold-body { overflow-x: auto; }
  .ap-fold-body table { min-inline-size: 560px; }
  .ap-fold-body table th, .ap-fold-body table td {
    min-inline-size: 0;
  }
}
/* v7.1.3 — (١) قاعدة قديمة في هذا الملف نفسه body.home…{display:flex!important}
   تغلب صفوف المزايا بخصوصية أعلى — تجاوز بنفس السلسلة وترتيب لاحق.
   (٢) 560px أدنى لجدول من 5 أعمدة يُبقي الخلية 113 — الرفع إلى 720. */
@media (max-width: 900px) {
  body.home .aplan-why-us .aplan-feature-item { display: grid !important; }
  .ap-table { min-inline-size: 720px; }
}
/* v7.1.4 — جداول 6-7 أعمدة: 720 يترك الخلية 97-117. أدنى 64rem وحشوة
   خلية مشدودة → كل خلية ≥120 والقراءة أفقية داخل غلاف التمرير. */
@media (max-width: 900px) {
  .ap-table { min-inline-size: 64rem; }
  .ap-table th, .ap-table td { padding: .55rem .6rem !important; }
}
/* v7.1.5 — رؤوس الجداول لا تلتف: الرأس عنوان قصير، ومنع التفافه يجعل
   الجدول يتسع لمحتواه مهما بلغت أعمدته، والغلاف يتكفل بالتمرير. */
@media (max-width: 900px) {
  .ap-table th { white-space: nowrap !important; }
}
/* v7.1.6 — رؤوس الصفوف (العمود الأول) فيها كسر سطر داخلي فتلتف سطرين
   بعرض 105: عرض أدنى 130 للعمود الأول يرضي بوابة الهندسة والعين معًا. */
@media (max-width: 900px) {
  .ap-table tbody th, .ap-table th[scope="row"] { min-inline-size: 130px; }
}
/* v7.1.7 — محتوى الأقسام الداكنة يدخل جسد الطيّة الأبيض بألوانه البيضاء
   (قيس: نص أبيض على أبيض داخل «صناعة الهوية»). السطح الأبيض يفرض حبره
   على كل سلالته — لا وراثة من نبرة القسم الأم. */
.ap-fold-body :is(p, li, span, strong, em, td, th, figcaption) { color: #3d4256 !important; }
.ap-fold-body :is(h3, h4, h5, h6) { color: #14182B !important; }
.ap-fold-body a { color: #BB1418 !important; }
.ap-fold-body .ap-table thead th { color: #fff !important; } /* رؤوس الجدول على شريطها الكحلي */

/* ═══════════════════════════════════════════════════════════════════════════
   رفع القصّ البصري نهائيًا  (v7.2.0 — قرار المالك: «البوكسات لا تعرض
   المحتوى كله على الموبايل»)
   القياس: line-clamp كان يحجب حتى 86% من نص الفقرة (45 من 318px). كل
   القصّات تُرفع، والضغط يتحقق بالتخطيط: خطوات العمليات details بعناوين
   صفّية والنص كاملًا عند الفتح (مفتوحة افتراضيًا على الويب عبر السكربت).
   ═══════════════════════════════════════════════════════════════════════════ */
.aplan-service-card p,
.aplan-blog-card .aplan-blog-title,
.aplan-blog-card .aplan-blog-content > :not(.aplan-blog-meta):not(.aplan-blog-title),
.nasser-hero .page-description,
.nasser-hero .feature-text h3,
.nasser-hero .feature-text p,
.seo-process-section .step-content p,
.aplan-why-us .aplan-feature-item p {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  max-block-size: none !important;
}
/* عناوين الفهرس المطوي: تلتف كاملة بدل سطر مقصوص */
details.ap-fold:not([open]) summary h2 {
  max-block-size: none !important;
  overflow: visible !important;
}
/* رقاقات هيرو ناصر: النص الكامل ظاهرًا — الرقاقة تتمدد رأسيًا بما يلزم */
@media (max-width: 900px) {
  .nasser-hero .feature-item { align-items: flex-start !important; }
  .nasser-hero .feature-text p { font-size: .68rem !important; }
  .nasser-hero .feature-item { max-width: 16rem; }
}
/* أكورديون خطوة العملية: العنوان صفّ نقر، والجسد نص كامل بألوان سطحه الأم
   (بطاقة الخطوة نفسها) — لا نفرض سطحًا جديدًا فلا ننسخ مشكلة الطيّات */
.ap-step-fold summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.ap-step-fold summary::-webkit-details-marker { display: none; }
.ap-step-fold summary::after {
  content: "";
  flex: 0 0 auto;
  width: .5rem; height: .5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  opacity: .6;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.ap-step-fold[open] summary::after { transform: rotate(-135deg); }
.ap-step-fold .step-title { margin: 0 !important; }
.ap-step-body { padding-block-start: .45rem; }
@media (prefers-reduced-motion: reduce) {
  .ap-step-fold summary::after { transition: none; }
}
@media (min-width: 901px) {
  .ap-step-fold summary { pointer-events: none; } /* الويب مفتوح دائمًا كمظهره الأصلي */
  .ap-step-fold summary::after { display: none; }
}
/* v7.2.1 — أزرار CTA: overflow:hidden زخرفي عليها يقدح كاشف القصّ بفارق
   تقريب (المعروض = الكامل بالبكسل) — يُرفع؛ لا شيء يُقصّ فيها أصلًا. */
.process-cta-btn, .crypto-cta-btn, .seo-process-cta a, .aplan-fancy-btn {
  overflow: visible !important;
}
/* v7.2.2 — عنوان بطاقة المقال في أرشيف المدونة كان يُقصّ بعد ثلاثة أسطر
   (المعروض 82 من 109px): العنوان هو المعلومة، يُعرض كاملًا. */
.post-card-title, h2.post-card-title {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  max-block-size: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   صندوق «احصل على استشارة مجانية»  (v7.3.0 — طلب المالك)
   القياس: النموذج حقلان وزر بلا هوية بصرية، داخل أسطح متباينة (هيرو داكن في
   الخدمات وقسم فاتح في صفحة ناصر). بطاقة بيضاء مكتفية بذاتها تصلح للسطحين،
   حقول ≥48px وخط 16px (أقل منه يفجّر تكبير iOS التلقائي)، والعناصر الأصلية
   كما هي فربط سكربت الثيم لا يُمسّ.
   ═══════════════════════════════════════════════════════════════════════════ */
.seo-hero-v2-form-area {
  background: #fff !important;
  border: 1px solid rgba(10, 23, 69, .12);
  border-radius: 16px;
  padding: 1.35rem 1.15rem 1.15rem;
  box-shadow: 0 18px 44px -22px rgba(10, 23, 69, .3);
  max-inline-size: 28rem;
  margin-inline: auto;
}
.seo-hero-v2-form-title {
  color: #14182B !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  text-align: center;
  margin: 0 0 .3rem !important;
}
.seo-hero-v2-form-area .form-subtitle {
  color: #4A5068 !important;
  font-size: .92rem !important;
  line-height: 1.7 !important;
  text-align: center;
  margin: 0 0 1rem !important;
}
.seo-hero-v2-form-area .contact-form { display: grid; gap: .75rem; }
.seo-hero-v2-form-area .form-group { margin: 0 !important; }
.seo-hero-v2-form-area .contact-form :is(input, select, textarea) {
  width: 100% !important;
  min-block-size: 48px;
  font-size: 16px !important;
  font-family: inherit !important;
  letter-spacing: 0;
  color: #14182B !important;
  background: #FBFAF8 !important;
  border: 1px solid rgba(10, 23, 69, .18) !important;
  border-radius: 10px !important;
  padding: .65rem .95rem !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.seo-hero-v2-form-area .contact-form :is(input, select, textarea)::placeholder { color: #69708A; }
.seo-hero-v2-form-area .contact-form :is(input, select, textarea):focus {
  outline: none !important;
  border-color: #E31E24 !important;
  box-shadow: 0 0 0 3px rgba(227, 30, 36, .14) !important;
}
.seo-hero-v2-form-area .contact-form button[type="submit"],
.seo-hero-v2-form-area .contact-form .aplan-fancy-btn {
  width: 100%;
  min-block-size: 50px;
  background: #E31E24 !important;
  color: #fff !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px -10px rgba(227, 30, 36, .55) !important;
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
.seo-hero-v2-form-area .contact-form button[type="submit"]:hover { background: #BB1418 !important; }
.seo-hero-v2-form-area .contact-form button[type="submit"]:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .seo-hero-v2-form-area .contact-form :is(input, button) { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   صفحة الفريق — إعادة تشكيل  (v7.3.0 — طلب المالك: «إعادة تطوير كاملة شكلًا»)
   القياس: 32 بطاقة عضو بعمود واحد فضفاض على الجوال + إحصاءات متراصة رأسيًا
   على قسم أحمر + تبويبات تلتف. الشكل الجديد: شبكة بطاقات 2/4، إحصاءات 2×2
   بأرقام اليوم المصحّحة (2015 · 7 · +25 · 24/7)، تبويبات شريط أفقي.
   جدول التخصصات وكتلتا الأسئلة والمقالات ومسار التنقل باقية كما هي.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-template-team .team-grid,
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; } }
.team-member {
  background: #fff !important;
  border: 1px solid rgba(10, 23, 69, .12) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: none !important;
  margin: 0 !important;
  width: auto !important;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
}
@media (hover: hover) {
  .team-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(10, 23, 69, .25) !important;
  }
}
.team-member .member-image { aspect-ratio: 1; overflow: hidden; }
.team-member .member-image img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block;
}
.team-member .member-info { padding: .7rem .75rem .85rem !important; text-align: center; }
.team-member .member-info h3 {
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: #14182B !important;
  letter-spacing: 0;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.team-member .member-info p {
  font-size: .76rem !important;
  color: #4A5068 !important;
  letter-spacing: 0;
  line-height: 1.6 !important;
  margin: .15rem 0 0 !important;
}
.team-member .read-more-btn {
  display: inline-block;
  margin-block-start: .45rem !important;
  font-size: .78rem !important;
  font-weight: 700;
  color: #BB1418 !important;
  background: transparent !important;
  border: 0 !important;
  padding: .25rem .4rem !important;
  cursor: pointer;
}
/* الإحصاءات على أحمر العلامة: شبكة 2×2 وأرقام اليوم المصحّحة */
.team-stats .container > div, .team-stats .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}
@media (min-width: 900px) { .team-stats .container > div, .team-stats .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.team-stats { padding-block: clamp(2rem, 1.6rem + 1.6vw, 3rem) !important; }
.team-stats .stat-item {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: .9rem .6rem !important;
  margin: 0 !important;
  text-align: center;
}
.team-stats .stat-number {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
}
.team-stats .stat-description {
  font-size: .8rem !important;
  line-height: 1.55 !important;
  margin: .2rem 0 0 !important;
  opacity: .95;
}
/* تبويبات الأقسام: شريط أفقي منزلق بدل الالتفاف */
.tabs, .team-tabs, .tab-buttons {
  display: flex !important;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 4px;
  scroll-snap-type: x proximity;
}
:is(.tabs, .team-tabs, .tab-buttons)::-webkit-scrollbar { display: none; }
:is(.tabs, .team-tabs, .tab-buttons) .tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  border-radius: 999px !important;
  padding: .5rem 1rem !important;
  font-size: .88rem !important;
  letter-spacing: 0;
  min-block-size: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   كتلة الصورة والاسم في هيرو ناصر  (v7.4.0 — ملاحظة المالك: «مش متناسقة
   مع اسمي خالص»)
   القياس: صورة 92×92 دائرية مقابل كتلة اسم 360×96 (رُبع الوزن)، والأصل
   1240×1832 رأسي يُقصّ ثلثه في دائرة تُظهر المكتب لا الوجه، وشارة تويتر
   ثلث قطر الصورة، وستة عناصر مكدسة رأسيًا بلا علاقة تكوينية.
   الحل: تكوين أفقي RTL — الصورة مستطيل مستدير بنسبة قريبة من الأصل
   (1:1.2) يرفع الوجه بـobject-position، بجانب كتلة الاسم/الدور محاذاة
   البداية، فيتوازن الثقلان ويقصر الهيرو. الشارة الاجتماعية تُطوى (روابط
   التواصل في الفوتر) بدل ثقلها على الصورة.
   ═══════════════════════════════════════════════════════════════════════════ */
.nasser-hero .social-badge { display: none !important; }
@media (max-width: 900px) {
  .nasser-hero .container {
    display: grid !important;
    grid-template-columns: 7.4rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    text-align: start !important;
  }
  .nasser-hero .container > * { grid-column: 1 / -1; }
  .nasser-hero .hero-badge {
    justify-self: start;
    margin-block-end: .8rem !important;
  }
  .nasser-hero .profile-image-container {
    grid-column: 1;
    grid-row: 2 / 4;
    width: 7.4rem !important;
    height: 8.9rem !important;
    border-radius: 16px !important;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .25);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55);
    margin: 0 !important;
  }
  .nasser-hero .profile-image-container img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 16% !important; /* الوجه في الثلث الأعلى من الأصل */
    border-radius: 0 !important;
  }
  .nasser-hero h1.page-title {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    text-align: start !important;
    font-size: 1.72rem !important;
    margin: 0 !important;
  }
  .nasser-hero .ap-h1-role {
    font-size: .95rem !important;
    margin-block-start: .3rem !important;
  }
  .nasser-hero .page-subtitle {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    text-align: start !important;
    margin-block-start: .35rem !important;
  }
  .nasser-hero .page-description {
    text-align: start !important;
    margin-block-start: .8rem !important;
  }
  .nasser-hero .about-features { justify-self: stretch; }
}
/* الويب: التكوين نفسه بمقاس أرحب داخل عمود مركزي */
@media (min-width: 901px) {
  .nasser-hero .container {
    display: grid !important;
    grid-template-columns: 11rem minmax(0, 640px);
    justify-content: center;
    column-gap: 2rem;
    align-items: center;
    text-align: start !important;
  }
  .nasser-hero .container > * { grid-column: 1 / -1; }
  .nasser-hero .hero-badge { justify-self: start; }
  .nasser-hero .profile-image-container {
    grid-column: 1;
    grid-row: 2 / 5;
    width: 11rem !important;
    height: 13.5rem !important;
    border-radius: 18px !important;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .25);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
    margin: 0 !important;
  }
  .nasser-hero .profile-image-container img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 16% !important;
    border-radius: 0 !important;
  }
  .nasser-hero :is(h1.page-title, .page-subtitle, .page-description) {
    grid-column: 2;
    text-align: start !important;
  }
  .nasser-hero h1.page-title { align-self: end; margin: 0 !important; }
  .nasser-hero .page-description { max-width: 60ch; }
}
/* v7.4.1 — شبكة الويب في الهيرو بعثرت الصفوف (الاسم هبط تحت الرقاقات).
   الويب يعود تكديسًا مركزيًا ببورتريه أكبر بنسبة الأصل — التكوين الأفقي
   يبقى للجوال حيث سياق ملاحظة المالك. */
@media (min-width: 901px) {
  .nasser-hero .container { display: block !important; text-align: center !important; }
  .nasser-hero .hero-badge { justify-self: auto; }
  .nasser-hero .profile-image-container {
    width: 11rem !important;
    height: 13.2rem !important;
    margin: 1rem auto 1.2rem !important;
  }
  .nasser-hero :is(h1.page-title, .page-subtitle, .page-description) {
    text-align: center !important;
  }
  .nasser-hero .page-description { max-width: 62ch; margin-inline: auto !important; }
}
/* v7.4.2 — شبكة الفريق: الثيم يفرض عمودًا واحدًا على أعمدة الشبكة تحديدًا
   (القياس: computed=342px) والتبويبات عمودية الاتجاه — فرضهما صراحة. */
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
:is(.tabs, .team-tabs, .tab-buttons) { flex-direction: row !important; flex-wrap: nowrap !important; }
:is(.tabs, .team-tabs, .tab-buttons) .tab { width: auto !important; }

/* غلاف قصة العميل بديلًا عن مشغّل فيديو مكسور (410) */
.ap-story-poster { width: 100%; height: auto; display: block; border-radius: inherit; object-fit: cover; }
.video-overlay.ap-no-video { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v7.6.0 — إعادة بناء ثلاثة أنماط مشتركة   (طلب المالك · 2026-08-09)
   ───────────────────────────────────────────────────────────────────────────
   قياسات 1440px التي استدعت هذه الطبقة (حاوية الصفحة 120→1320، مركزها 720):

   (١) عناوين الأقسام تلتصق بحافة البداية بدل أن تتوسّط.
       السبب: القاعدة تجمع `max-width: 22ch` مع `margin: 0 0 X` — والصندوق
       المحدود العرض بلا `margin-inline: auto` يبقى ملتصقًا بحافة البداية،
       و`text-align: center` يوسّط النصّ داخل الصندوق لا الصندوق في الصفحة.
       المقيس: ‎#clients .section-title‎ عند x=704 بعرض 596 — مركزه 1002 بدل 720.
       و‎.blog-posts-section .section-title‎ عند x=960 بعرض 336 — مركزه 1128.

   (٢) الخط الزمني «كيف نعمل معك» منزاح عن المركز 132px.
       السبب: `margin-inline: 0 auto` — صفر في طرف البداية وauto في النهاية،
       فالكتلة تُدفع كاملة إلى طرف البداية. المقيس: margin-inline = 0 / 264px.

   (٣) قسم المعرفة المطوي ينكمش إلى عمود 348px منزاح عن المركز.
       السبب: الحاوية تبقى `display: grid` بعمودين رغم أن عمود الفهرس
       الجانبي مخفيّ — فيبقى مكانه محجوزًا. قاعدة الإصلاح السابقة
       `.ap-folded .blog-content-wrapper{display:block}` نوعيتها (0,2,0)
       بينما `body.home .blog-posts-section .blog-content-wrapper` نوعيتها
       (0,3,1) — فالجريد يفوز رغم `!important` على الاثنين.

   (٤) بطاقات «المراحل» شبكة بطاقات متطابقة: حدود رفيعة، نص موسّط، فقرات
       مضبوطة الطرفين في عمود 370px، وصف أخير مبتور. والقسم نفسه يخدم
       نوعَي محتوى مختلفين — تسلسل («مراحل»/«خطوات») وكتالوج خدمات
       («خدمات»/«تخصصات») — والترقيم لا معنى له في الثاني.
       يفرّق بينهما `ap-proc-seq` / `ap-proc-cat` من mu-plugins/aplan-fold.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (١) توسيط عناوين الأقسام ───────────────────────────────────────────────
   لا نلغي `max-width` — فهو ما يمنع العنوان من الامتداد سطرًا واحدًا طويلًا.
   نضيف فقط ما ينقصه: توسيط الصندوق نفسه. */
body.home .blog-posts-section > .container > .section-title,
body.home .clients .section-title,
body.home .aplan-portfolio .section-title,
body.home .aplan-portfolio .aplan-section-title,
body.home .aplan-why-us .aplan-section-title,
body.home .aplan-process .aplan-section-title,
body.home .aplan-why-us .aplan-section-subtitle,
body.home .aplan-process .aplan-section-subtitle,
body.home #services .aplan-section-title,
body.home .aplan-blog-section .aplan-section-title,
body.home .faq-section .aplan-section-title,
body.home .faq-section .section-title,
.clients .section-title,
.aplan-why-us .aplan-section-title {
  margin-inline: auto !important;
}

/* ── (٢) الخط الزمني «كيف نعمل معك» يتوسّط ويأخذ عرض قراءة مريحًا ──────── */
body.home .aplan-process .aplan-process-timeline,
.aplan-process .aplan-process-timeline {
  margin-inline: auto !important;
  max-inline-size: 46rem !important;
  inline-size: 100% !important;
}

/* الخطوة: الرقم في طرف البداية والنصّ بجواره — شبكة صريحة بدل الحشو المطلق،
   فلا يعتمد الاصطفاف على تطابق قيمتين في قاعدتين متباعدتين. */
body.home .aplan-process .aplan-process-step {
  display: grid !important;
  grid-template-columns: 2.9rem minmax(0, 1fr) !important;
  column-gap: 1.15rem !important;
  align-items: start !important;
  padding: 0 !important;
  margin-block-end: clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem) !important;
  text-align: start !important;
}
body.home .aplan-process .aplan-step-number {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  inline-size: 2.9rem !important;
  block-size: 2.9rem !important;
  margin: 0 !important;
}
body.home .aplan-process .aplan-step-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0 !important;
  text-align: start !important;
}
/* `text-align-last: center !important` مفروضة على كل h2/h3 في الموقع من قاعدة
   جامعة. وهي — لا `text-align` — ما يحكم العنوان المكوَّن من سطر واحد، فبقيت
   العناوين موسّطة رغم ضبط المحاذاة. لا بد من إبطال الاثنتين معًا. */
body.home .aplan-process .aplan-step-content h3,
body.home .aplan-process .aplan-step-content p {
  text-align: start !important;
  text-align-last: start !important;
  max-inline-size: none !important;
}
/* خط الوصل يمرّ بمركز الأرقام (2.9rem ÷ 2 = 1.45rem) ويجسر الفجوة للخطوة التالية */
body.home .aplan-process .aplan-process-step::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 1.45rem !important;
  inset-inline-end: auto !important;
  inset-block: 3.25rem calc(-1 * clamp(1.5rem, 1.1rem + 1.3vw, 2.4rem)) !important;
  inline-size: 1px !important;
  background: linear-gradient(to bottom, #dcd9d2, rgba(220, 217, 210, 0)) !important;
  transform: none !important;
}
body.home .aplan-process .aplan-process-step { position: relative !important; }
body.home .aplan-process .aplan-process-step:last-child::before { content: none !important; }
body.home .aplan-process .aplan-process-timeline::before { content: none !important; }

@media (max-width: 640px) {
  body.home .aplan-process .aplan-process-step {
    grid-template-columns: 2.4rem minmax(0, 1fr) !important;
    column-gap: .85rem !important;
  }
  body.home .aplan-process .aplan-step-number {
    inline-size: 2.4rem !important; block-size: 2.4rem !important;
    font-size: .88rem !important;
  }
  body.home .aplan-process .aplan-process-step::before {
    inset-inline-start: 1.2rem !important;
    inset-block-start: 2.75rem !important;
  }
}

/* ── (٣) قسم المعرفة المطوي: عمودان على الديسكتوب بدل عمود منكمش ────────
   النوعية هنا (0,4,1) لتتجاوز `body.home .blog-posts-section .blog-content-wrapper`
   ذات (0,3,1) التي تفرض الجريد. */
body .blog-posts-section.ap-folded .blog-content-wrapper,
body.home .blog-posts-section.ap-folded .blog-content-wrapper {
  display: block !important;
  grid-template-columns: none !important;
  max-inline-size: min(100%, 74rem) !important;
  margin-inline: auto !important;
  padding-inline: clamp(1rem, .5rem + 2vw, 2rem) !important;
}
body .blog-posts-section.ap-folded .toc-container,
body .blog-posts-section.ap-folded .back-to-top { display: none !important; }

body .blog-posts-section.ap-folded .blog-content {
  float: none !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: .7rem !important;
}
@media (min-width: 1080px) {
  body .blog-posts-section.ap-folded .blog-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem 1.15rem !important;
  }
}

/* الصف: سطح أبيض بحدّ كحلي شعري — لا ظل في السكون، والظل إشارة تفاعل فقط */
body .ap-folded details.ap-fold {
  background: #fff !important;
  border: 1px solid rgba(10, 23, 69, .11) !important;
  border-radius: 12px !important;
  margin-block-end: 0 !important;
  block-size: fit-content !important;
  transition: border-color .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s cubic-bezier(.22,1,.36,1);
}
body .ap-folded details.ap-fold:hover {
  border-color: rgba(10, 23, 69, .2) !important;
  box-shadow: var(--ap-shadow-sm, 0 1px 2px rgba(10,23,69,.05), 0 2px 8px -4px rgba(10,23,69,.08)) !important;
}
body .ap-folded details.ap-fold[open] {
  border-color: rgba(10, 23, 69, .18) !important;
}
body .ap-folded details.ap-fold summary {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .9rem !important;
  padding: .95rem 1.1rem !important;
  list-style: none !important;
}
/* العنوان يلتفّ طبيعيًا. القصّ السابق (`max-block-size: 1.65em` + overflow)
   كان علاجًا لابتلاع أول حرف في العناوين ثنائية الاتجاه — والسبب الحقيقي
   كان التوسيط، وقد زال. الالتفاف الطبيعي لا يبتر شيئًا أصلًا. */
body .ap-folded details.ap-fold summary h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #14182b !important;
  text-align: start !important;
  max-block-size: none !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-line-clamp: none !important;
  border-radius: 0 !important;
}
/* العلامة زائد/ناقص: لا اتجاه لها، فلا تنقلب خطأً في RTL كما تفعل الأسهم */
body .ap-folded details.ap-fold summary::after {
  content: "" !important;
  flex: 0 0 auto !important;
  inline-size: .78rem !important;
  block-size: .78rem !important;
  margin-block-start: .38rem !important;
  border: 0 !important;
  transform: none !important;
  background:
    linear-gradient(#e31e24, #e31e24) center / 100% 2px no-repeat,
    linear-gradient(#e31e24, #e31e24) center / 2px 100% no-repeat !important;
  transition: background-size .25s cubic-bezier(.22,1,.36,1) !important;
}
body .ap-folded details.ap-fold[open] summary::after {
  background:
    linear-gradient(#e31e24, #e31e24) center / 100% 2px no-repeat,
    linear-gradient(#e31e24, #e31e24) center / 0 100% no-repeat !important;
}
body .ap-folded details.ap-fold summary::-webkit-details-marker { display: none !important; }

/* القوس اللاتيني داخل عنوان عربي: إن انكسر عبر سطرين انقلبت حدوده بصريًا
   («ASO - App Store)» في سطر و«(Optimization» في التالي). العزل bdi يصحّح
   الترتيب، وnowrap للأقواس القصيرة يمنع الكسر من أصله. يضعهما aplan-fold.php. */
.ap-bidi { unicode-bidi: isolate; }
.ap-nb { white-space: nowrap; }

body .ap-folded .ap-fold-body {
  padding: 0 1.1rem 1.05rem !important;
  border-block-start: 1px solid rgba(10, 23, 69, .08) !important;
  margin-block-start: .1rem !important;
  padding-block-start: .85rem !important;
}
body .ap-folded .ap-fold-body :is(p, li, h3, h4, h5) {
  text-align: start !important;
  text-align-last: start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .ap-folded .ap-fold-body :is(p, li) {
  font-size: .99rem !important;
  line-height: 1.95 !important;
  color: #3d4256 !important;
}
body .ap-folded .ap-fold-body p {
  padding: 0 !important;
  margin: 0 0 .75rem !important;
}
body .ap-folded .ap-fold-body p:last-child { margin-block-end: 0 !important; }

/* القوائم داخل المطويّة: علامة الصح كانت `left: 18px` مع `padding-left: 55px`
   — خصائص فيزيائية في صفحة RTL، فالعلامة تجلس في الطرف المقابل لبداية
   النصّ. الخصائص المنطقية تضعها حيث يبدأ السطر فعلًا. */
body .ap-folded .ap-fold-body :is(ul, ol) {
  display: block !important;
  grid-template-columns: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 0 .75rem !important;
  padding: 0 !important;
  list-style: none !important;
}
body .ap-folded .ap-fold-body li {
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  padding: 0 !important;
  padding-inline-start: 1.5rem !important;
  padding-inline-end: 0 !important;
  margin-block-end: .55rem !important;
}
body .ap-folded .ap-fold-body li:last-child { margin-block-end: 0 !important; }
body .ap-folded .ap-fold-body li::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: .1rem !important;
  inset-inline-end: auto !important;
  left: auto !important; right: auto !important;
  inset-block-start: .72em !important;
  transform: none !important;
  inline-size: .42rem !important;
  block-size: .42rem !important;
  min-inline-size: 0 !important;
  border-radius: 50% !important;
  background: #e31e24 !important;
  color: transparent !important;
  font-size: 0 !important;
  display: block !important;
}
body .ap-folded .ap-fold-body li strong {
  display: inline !important;
  color: #14182b !important;
  font-size: inherit !important;
  margin: 0 !important;
}
body .ap-folded .ap-fold-body a { color: #bb1418 !important; text-decoration: underline; text-underline-offset: 3px; }

/* عنوان قسم المعرفة يتوسّط فوق العمودين */
body .blog-posts-section.ap-folded > .container > .section-title,
body .blog-posts-section.ap-folded .section-title {
  margin-inline: auto !important;
  text-align: center !important;
  max-inline-size: 28ch !important;
}
body.home .blog-posts-section.ap-folded > .container { max-inline-size: min(100%, 74rem) !important; }

/* ── (٤‑أ) «مراحل / خطوات» — تسلسل مرقّم بخطّ وصل، لا شبكة بطاقات ────────── */
.seo-process-section.ap-proc-seq .seo-process-steps {
  display: block !important;
  grid-template-columns: none !important;
  max-inline-size: 50rem !important;
  margin-inline: auto !important;
  gap: 0 !important;
}
.seo-process-section.ap-proc-seq .seo-process-steps .process-step {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 3rem minmax(0, 1fr) !important;
  column-gap: 1.3rem !important;
  align-items: start !important;
  block-size: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.9rem !important;
  text-align: start !important;
}
.seo-process-section.ap-proc-seq .seo-process-steps .process-step:last-child { margin-block-end: 0 !important; }
.seo-process-section.ap-proc-seq .seo-process-steps .step-number {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  inline-size: 3rem !important;
  block-size: 3rem !important;
  min-inline-size: 3rem !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #0a1745 !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: 0 0 0 6px var(--ap-proc-bg, #fdf7f7) !important;
  z-index: 1 !important;
  transition: background-color .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1) !important;
}
.seo-process-section.ap-proc-seq .seo-process-steps .process-step:hover .step-number {
  background: #e31e24 !important;
  transform: scale(1.05) !important;
}
/* الأيقونة تُحذف هنا: الرقم هو العلامة، وعلامتان تتنافسان على العين نفسها */
.seo-process-section.ap-proc-seq .seo-process-steps .step-icon { display: none !important; }
.seo-process-section.ap-proc-seq .seo-process-steps .step-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  inline-size: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: start !important;
}
.seo-process-section.ap-proc-seq .seo-process-steps .step-title {
  text-align: start !important;
  text-align-last: start !important;
  text-wrap: pretty !important;
  font-size: clamp(1.06rem, 1rem + .32vw, 1.22rem) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: .42rem 0 .55rem !important;
  padding: 0 !important;
  max-inline-size: none !important;
}
/* الضبط لطرفين يفتح أنهارًا بيضاء في العربية عند سطر قصير — محاذاة البداية */
.seo-process-section.ap-proc-seq .seo-process-steps :is(.step-content p, .step-description, .ap-step-body p, .ap-step-body li) {
  text-align: start !important;
  text-align-last: start !important;
  max-inline-size: none !important;
  margin-inline: 0 !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
}
/* خط الوصل بين الأرقام: مركز الدائرة 3rem ÷ 2 = 1.5rem */
.seo-process-section.ap-proc-seq .seo-process-steps .process-step::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 1.5rem !important;
  inset-inline-end: auto !important;
  inset-block: 3.35rem -1.9rem !important;
  inline-size: 1px !important;
  background: linear-gradient(to bottom, rgba(10,23,69,.16), rgba(10,23,69,.04)) !important;
  transform: none !important;
  display: block !important;
}
.seo-process-section.ap-proc-seq .seo-process-steps .process-step:last-child::before { content: none !important; }
.seo-process-section.ap-proc-seq .seo-process-steps .process-step::after { content: none !important; }

/* ── (٤‑ب) «خدمات / تخصصات» — كتالوج متوازٍ: لا ترقيم ولا صناديق ────────── */
.seo-process-section.ap-proc-cat .seo-process-steps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
  gap: 0 clamp(1.6rem, 1rem + 2vw, 3rem) !important;
  max-inline-size: 72rem !important;
  margin-inline: auto !important;
  align-items: stretch !important;
}
.seo-process-section.ap-proc-cat .seo-process-steps .process-step {
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0, 1fr) !important;
  column-gap: .95rem !important;
  align-items: start !important;
  block-size: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-block-end: 1px solid rgba(10, 23, 69, .1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 0 !important;
  margin: 0 !important;
  text-align: start !important;
}
/* الترقيم بلا معنى في قائمة غير متسلسلة */
.seo-process-section.ap-proc-cat .seo-process-steps .step-number { display: none !important; }
.seo-process-section.ap-proc-cat .seo-process-steps .step-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  inline-size: 2.4rem !important;
  block-size: 2.4rem !important;
  min-inline-size: 2.4rem !important;
  margin: .15rem 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: rgba(227, 30, 36, .09) !important;
  color: #e31e24 !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.seo-process-section.ap-proc-cat .seo-process-steps .step-icon i { font-size: inherit !important; color: inherit !important; }
.seo-process-section.ap-proc-cat .seo-process-steps .step-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  inline-size: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: start !important;
}
.seo-process-section.ap-proc-cat .seo-process-steps .step-title {
  text-align: start !important;
  text-align-last: start !important;
  text-wrap: pretty !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  margin: 0 0 .45rem !important;
  padding: 0 !important;
}
.seo-process-section.ap-proc-cat .seo-process-steps :is(.step-content p, .step-description, .ap-step-body p, .ap-step-body li) {
  text-align: start !important;
  text-align-last: start !important;
  max-inline-size: none !important;
  margin-inline: 0 !important;
  font-size: .98rem !important;
  line-height: 1.9 !important;
}
.seo-process-section.ap-proc-cat .seo-process-steps .process-step::before,
.seo-process-section.ap-proc-cat .seo-process-steps .process-step::after { content: none !important; }

/* ── المطويّة داخل الخطوة (تُفتح افتراضيًا فوق 900px) ───────────────────── */
.seo-process-section details.ap-step-fold { margin: 0 !important; }
.seo-process-section details.ap-step-fold > summary {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: .8rem !important;
  list-style: none !important;
  padding: 0 !important;
  cursor: pointer;
}
.seo-process-section details.ap-step-fold > summary::-webkit-details-marker { display: none !important; }
/* القاعدة القديمة تدير العلامة 45° لتصنع شفرون من ركن مربع — ومع علامة
   الزائد يتحوّل الدوران إلى ✕. لا بد من إبطاله صراحة. */
.seo-process-section details.ap-step-fold > summary::after {
  content: "" !important;
  flex: 0 0 auto !important;
  inline-size: .72rem !important;
  block-size: .72rem !important;
  margin-block-start: .78rem !important;
  border: 0 !important;
  transform: none !important;
  background:
    linear-gradient(#e31e24, #e31e24) center / 100% 2px no-repeat,
    linear-gradient(#e31e24, #e31e24) center / 2px 100% no-repeat !important;
  transition: background-size .25s cubic-bezier(.22,1,.36,1) !important;
}
.seo-process-section details.ap-step-fold[open] > summary::after {
  transform: none !important;
  background:
    linear-gradient(#e31e24, #e31e24) center / 100% 2px no-repeat,
    linear-gradient(#e31e24, #e31e24) center / 0 100% no-repeat !important;
}
/* فوق 900px تُفتح كلها، فالعلامة تصير ضوضاء بلا وظيفة */
@media (min-width: 901px) {
  .seo-process-section details.ap-step-fold > summary::after { display: none !important; }
  .seo-process-section details.ap-step-fold > summary { cursor: default; }
}
.seo-process-section .ap-step-body { padding: 0 !important; }
.seo-process-section .ap-step-body > :last-child { margin-block-end: 0 !important; }

/* رأس القسم يتوسّط فوق العمود الجديد */
.seo-process-section .seo-process-header { max-inline-size: 46rem !important; margin-inline: auto !important; }
/* balance يمنع بقاء كلمة يتيمة في سطر ثانٍ («… إعلانات / جوجل») */
.seo-process-section .seo-process-title { text-align: center !important; margin-inline: auto !important; text-wrap: balance; }
body.home .blog-posts-section > .container > .section-title,
body.home .clients .section-title,
body.home .aplan-process .aplan-section-title,
body .blog-posts-section.ap-folded .section-title { text-wrap: balance; }

/* الأشكال الهندسية الزخرفية: خُفّفت — كانت تزاحم النص على الشاشات المتوسطة */
.seo-process-section .geometric-shapes { opacity: .45 !important; }
@media (max-width: 900px) { .seo-process-section .geometric-shapes { display: none !important; } }

@media (max-width: 640px) {
  .seo-process-section.ap-proc-seq .seo-process-steps .process-step {
    grid-template-columns: 2.5rem minmax(0, 1fr) !important;
    column-gap: .9rem !important;
    margin-block-end: 1.5rem !important;
  }
  .seo-process-section.ap-proc-seq .seo-process-steps .step-number {
    inline-size: 2.5rem !important; block-size: 2.5rem !important;
    min-inline-size: 2.5rem !important; font-size: .85rem !important;
  }
  .seo-process-section.ap-proc-seq .seo-process-steps .process-step::before {
    inset-inline-start: 1.25rem !important;
    inset-block: 2.85rem -1.5rem !important;
  }
  .seo-process-section.ap-proc-cat .seo-process-steps .process-step { padding-block: 1.2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7.7.0 — صفحة المقال المفرد (single.php)   (طلب المالك · 2026-08-09)
   ───────────────────────────────────────────────────────────────────────────
   الجذر المشترك لكل العلل المقيسة: مكوّنات الصفحة (صندوق الكاتب، صندوق
   الدعوة، تنقّل المقالات) تقع **داخل** ‎.blog-content‎، فترث تنسيق فقرات
   المقال — وهو تنسيق يرسم على كل ‎<p>‎ خلفية بيضاء وحدودًا جانبية وحشوًا
   ‎0 30px 20px‎ ليصنع «بطاقة» للمتن. النتيجة المقيسة على 1440:

     · ‎.cta-box p‎  → background #fff مع color rgba(255,255,255,.88)
       أي **نصّ أبيض على أبيض: الجملة مختفية تمامًا**، ويظهر مكانها شريط
       أبيض عرضه 1016px داخل صندوق أحمر. (هذا هو تنافر ألوان الـCTA.)
     · ‎.author-bio p‎ → خلفية بيضاء وحشو 30px، فتبدو صندوقًا داخل صندوق.
     · ‎.author-role‎ → يرث الحشو ‎0 30px 20px‎ فوق ‎border-radius: 20px‎،
       فتخرج «حبّة» غير متماثلة، ولونها رمادي ‎#495057‎ لا الأحمر المقصود.
     · ‎.author-avatar img‎ → قاعدة لاحقة تصغّره إلى ‎50×50‎ بزوايا ‎12px‎
       وإطار أحمر ‎3px‎ — لا دائرة 120px كما تنصّ القاعدة الأولى.
     · الصورة نفسها Gravatar بـ‎d=mm‎ (لا حساب للمستخدم) = الشبح الرمادي.
       تُعالَج في ‎mu-plugins/aplan-author-avatar.php‎ بصورة محلية.
     · على 390px يبقى الصندوق صفًّا أفقيًا، فينضغط عمود النصّ إلى ~100px
       وتلتفّ كل كلمتين على سطر.

   العلاج: إبطال تنسيق متن المقال داخل المكوّنات أولًا، ثم بناء كل مكوّن
   على حدة. هذه الطبقة لا تلمس تنسيق المتن نفسه.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (٠) إبطال تسرّب تنسيق المتن إلى المكوّنات ──────────────────────────── */
.blog-content :is(.cta-box, .author-box, .post-navigation, .related-posts-section)
  :is(p, h2, h3, h4, ul, ol, li) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.blog-content :is(.cta-box, .author-box, .post-navigation, .related-posts-section)
  :is(ul, ol) { display: block !important; grid-template-columns: none !important; }
.blog-content :is(.cta-box, .author-box, .post-navigation, .related-posts-section)
  li::before { content: none !important; }

/* ── (١) صندوق الكاتب ───────────────────────────────────────────────────── */
.author-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(10, 23, 69, .1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem) !important;
  margin-block: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important;
  overflow: visible !important;
  transition: border-color .28s cubic-bezier(.22,1,.36,1) !important;
}
/* الدائرة الحمراء الزخرفية خلف الزاوية: زينة بلا معنى تزاحم الصورة */
.author-box::before { content: none !important; }
/* الصندوق ليس قابلًا للنقر — الرفع عند المرور يَعِد بتفاعل غير موجود */
.author-box:hover { transform: none !important; box-shadow: none !important; border-color: rgba(10, 23, 69, .18) !important; }

/* الجذر المقيس: `.author-avatar` يرث قاعدة مكوّن آخر (دائرة حرف أولى حمراء)
   تفرض `width/height: 50px` و`background: red` و`display: flex`. فالحاوية
   50px والصورة بداخلها 60px بإطار أحمر 3px — تفيض عن حاويتها، ويظهر الأحمر
   كحلقة حول شبح Gravatar. تُضبط الحاوية والصورة معًا هنا. */
.author-box .author-avatar {
  grid-column: 1 !important;
  width: clamp(3.5rem, 3rem + 2.2vw, 5.5rem) !important;
  height: clamp(3.5rem, 3rem + 2.2vw, 5.5rem) !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  background: #f2f3f6 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: block !important;
  border: 1px solid rgba(10, 23, 69, .12) !important;
}
.author-box .author-avatar img,
.author-avatar img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
}
.author-info { grid-column: 2 !important; min-inline-size: 0 !important; }

.author-info h3,
.author-name {
  display: block !important;
  font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem) !important;
  font-weight: 700 !important;
  color: #14182b !important;
  text-align: start !important;
  text-align-last: start !important;
  margin: 0 0 .2rem !important;
}
/* أيقونة قلم بجوار الاسم بينما الصورة الشخصية بجواره مباشرة — علامتان لمعنى واحد */
.author-name i { display: none !important; }

.author-bio { margin: 0 !important; }
.author-bio,
.author-bio p,
.author-info p:not(.author-role) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #3d4256 !important;
  font-size: 1rem !important;
  line-height: 1.9 !important;
  text-align: start !important;
  text-align-last: start !important;
  max-inline-size: 68ch !important;
}

/* الوظيفة بلون العلامة. تأتي بعد قاعدة الفقرات وبنوعية أعلى، وإلا ابتلعها
   `.author-info p` (وهو ما كان يحدث: رمادي بدل الأحمر). */
.author-box .author-info p.author-role,
.author-role {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #bb1418 !important;
  font-weight: 600 !important;
  font-size: .93rem !important;
  line-height: 1.6 !important;
  margin: 0 0 .75rem !important;
  max-inline-size: none !important;
  text-align: start !important;
  text-align-last: start !important;
}
.author-bio p { margin: 0 0 .5rem !important; }
.author-bio p:last-child { margin-block-end: 0 !important; }

.author-social {
  display: flex !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  margin-block-start: 1.1rem !important;
}
.author-social a,
.author-social .social-link {
  inline-size: 2.25rem !important;
  block-size: 2.25rem !important;
  width: auto; height: auto;
  border-radius: 50% !important;
  background: #fff !important;
  color: #565c72 !important;
  border: 1px solid rgba(10, 23, 69, .14) !important;
  font-size: .95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .25s cubic-bezier(.22,1,.36,1),
              color .25s cubic-bezier(.22,1,.36,1),
              border-color .25s cubic-bezier(.22,1,.36,1) !important;
}
.author-social a:hover,
.author-social .social-link:hover {
  background: #e31e24 !important;
  color: #fff !important;
  border-color: #e31e24 !important;
  transform: none !important;
}

/* ── (٢) صندوق الدعوة إلى الإجراء ───────────────────────────────────────── */
.cta-box {
  padding: clamp(1.8rem, 1.4rem + 1.6vw, 2.9rem) clamp(1.2rem, 1rem + 1.4vw, 2.2rem) !important;
  border-radius: 16px !important;
  text-align: center !important;
  margin-block: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important;
}
.cta-box :is(h3, p) {
  max-inline-size: 44rem !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-align-last: center !important;
}
.cta-box h3 {
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  text-wrap: balance;
  margin-block: 0 .65rem !important;
}
/* كانت خلفيتها بيضاء ولونها أبيض — الجملة مختفية بالكامل */
.cta-box p {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, .93) !important;
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
  margin-block: 0 1.6rem !important;
}
.cta-box .cta-button {
  display: inline-block !important;
  background: #fff !important;
  color: #bb1418 !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: .95rem 2.1rem !important;
  border-radius: 50px !important;
  border: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35) !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) !important;
}
.cta-box .cta-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45) !important;
}

/* ── (٣) تنقّل المقالات ─────────────────────────────────────────────────── */
.nav-posts { gap: clamp(1rem, .8rem + 1vw, 1.75rem) !important; }
.nav-post {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(10, 23, 69, .1) !important;
  border-radius: 12px !important;
  padding: clamp(1.1rem, .9rem + 1vw, 1.75rem) !important;
  box-shadow: none !important;
  transition: border-color .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) !important;
}
.nav-post:hover {
  transform: none !important;
  border-color: rgba(227, 30, 36, .45) !important;
  box-shadow: var(--ap-shadow-sm, 0 1px 2px rgba(10,23,69,.05), 0 2px 8px -4px rgba(10,23,69,.08)) !important;
}
.nav-post .nav-label {
  font-size: .85rem !important;
  color: #6b7186 !important;
  font-weight: 600 !important;
  margin: 0 0 .5rem !important;
}
.nav-post .nav-link {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  color: #14182b !important;
  align-items: flex-start !important;
  gap: .55rem !important;
  text-decoration: none !important;
}
.nav-post .nav-link:hover { color: #bb1418 !important; transform: none !important; }
.nav-post .nav-link i { margin-block-start: .35rem; flex: 0 0 auto; color: #e31e24 !important; }
/* طبقة الأساس تقلب كل ‎.fa-arrow-left‎ في RTL لتصحيح أسهم صُمّمت لـLTR.
   لكن سهم «المقال التالي» مكتوب أصلًا لاتجاه RTL (التالي = يسارًا)،
   فالقلب يعيده يمينًا — أي يشير إلى الخلف. يُستثنى هنا. */
[dir="rtl"] .post-navigation .fa-arrow-left,
[dir="rtl"] .nav-post .fa-arrow-left { transform: none !important; }

@media (max-width: 640px) {
  .nav-posts { grid-template-columns: minmax(0, 1fr) !important; }
  .author-box { gap: 1rem !important; }
  .cta-box .cta-button { inline-size: 100%; max-inline-size: 20rem; }
}
/* على الهواتف الضيقة يبتلع عمود الصورة ربع العرض فينضغط سطر النصّ إلى ~18 حرفًا.
   الصورة تصعد إلى صفّها الخاص ويأخذ النصّ العرض كاملًا. */
@media (max-width: 480px) {
  .author-box {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .85rem !important;
  }
  .author-box .author-avatar {
    grid-column: 1 !important;
    width: 3.4rem !important;
    height: 3.4rem !important;
  }
  .author-info { grid-column: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v7.8.0 — صفحة المدونة: شريط التصنيفات   (طلب المالك · 2026-08-09)
   ───────────────────────────────────────────────────────────────────────────
   المقيس على 1440:
     · ‎.blog-filter-section‎ = ‎position: sticky; top: 70px; z-index: 100‎
       وارتفاعه **239px** — أي 27% من ارتفاع الشاشة يلاحق القارئ طوال الصفحة،
       ويغطّي صفًّا كاملًا من بطاقات المقالات أثناء التمرير (مثبت باللقطة).
     · التصنيفات التسعة ‎flex-wrap: wrap‎ داخل صندوق 947px، فتلتفّ على
       **ثلاثة صفوف** آخرها حبّة يتيمة. على 390px تصير **ثمانية صفوف**
       بارتفاع 602px — أكثر من نصف الشاشة قبل أوّل مقال.
   العلاج: الشريط يتحرّر من التثبيت، والحبّات تصير **صفًّا واحدًا يُسحب أفقيًا**
   بارتفاع ثابت — النمط المعتاد لشرائط التصنيف، ويكشف حافّته أنّ وراءه المزيد.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── الشريط لم يعد ملاحقًا ──────────────────────────────────────────────── */
.blog-filter-section {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  padding-block: 1rem !important;
  background: #fff !important;
  border-block-end: 1px solid rgba(10, 23, 69, .1) !important;
  border-block-start: 0 !important;
  box-shadow: none !important;
}

.filter-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1rem !important;
  min-inline-size: 0 !important;
}

.filter-label {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  margin: 0 !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  color: #6b7186 !important;
  white-space: nowrap !important;
}
.filter-label i { color: #e31e24 !important; font-size: .82rem !important; }

/* ── صفّ واحد يُسحب أفقيًا ──────────────────────────────────────────────── */
.category-filters {
  flex: 1 1 auto !important;
  min-inline-size: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: .5rem !important;
  padding-block: .15rem .5rem !important;
  margin-block: 0 !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(10, 23, 69, .2) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.category-filters::-webkit-scrollbar { height: 4px; }
.category-filters::-webkit-scrollbar-track { background: transparent; }
.category-filters::-webkit-scrollbar-thumb {
  background: rgba(10, 23, 69, .16);
  border-radius: 4px;
}
.category-filters:hover::-webkit-scrollbar-thumb { background: rgba(10, 23, 69, .3); }

.filter-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
  display: inline-flex !important;
  align-items: center !important;
  gap: .4rem !important;
  padding: .52rem .9rem !important;
  margin: 0 !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #3d4256 !important;
  border: 1px solid rgba(10, 23, 69, .14) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .22s cubic-bezier(.22,1,.36,1),
              color .22s cubic-bezier(.22,1,.36,1),
              border-color .22s cubic-bezier(.22,1,.36,1) !important;
}
.filter-btn:hover {
  background: #fff !important;
  color: #bb1418 !important;
  border-color: rgba(227, 30, 36, .45) !important;
  transform: none !important;
}
/* المحدَّد كحليّ لا أحمر: الأحمر في هذا الموقع لغة الدعوة إلى الإجراء،
   واستعماله لحالة اختيار يجعل الفلتر يبدو زرًّا للضغط. */
.filter-btn.active {
  background: #0a1745 !important;
  color: #fff !important;
  border-color: #0a1745 !important;
}
.filter-btn i { font-size: .76rem !important; opacity: .8 !important; }
.filter-btn .count {
  font-size: .78rem !important;
  font-weight: 600 !important;
  opacity: .58 !important;
  font-variant-numeric: tabular-nums;
}
.filter-btn.active .count { opacity: .78 !important; }

@media (max-width: 700px) {
  /* التسمية تعلو الشريط فيأخذ الشريط عرض الشاشة كاملًا */
  .filter-container { flex-wrap: wrap !important; gap: .55rem !important; }
  .filter-label { flex: 1 1 100% !important; min-inline-size: 0 !important; }
  /* لا بدّ من `flex-shrink: 1` مع `min-inline-size: 0`. مع `flex: 1 0 100%`
     يمتنع العنصر عن الانكماش دون عرض محتواه، فينفجر إلى 1817px بدل أن
     يُقصّ ويُسحب — والصفحة لا تفيض (belt الجسم) فتصير البقيّة غير قابلة
     للوصول أصلًا: أسوأ من الالتفاف. */
  .category-filters {
    flex: 1 1 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    /* ينزف إلى حافّة الشاشة ليقول بوضوح إنّ وراءه المزيد */
    margin-inline: -15px !important;
    padding-inline: 15px !important;
  }
}

/* ── الهيرو: إحكام الإيقاع الرأسي وتنظيف شريط المسار ────────────────────── */
.blog-archive-hero { padding-block: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem) !important; }
.blog-archive-hero .breadcrumbs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
  margin-block-end: 1.1rem !important;
}
.blog-archive-hero .breadcrumbs,
.blog-archive-hero .breadcrumbs a,
.blog-archive-hero .breadcrumbs span {
  color: rgba(255, 255, 255, .8) !important;
  font-size: .85rem !important;
}
.blog-archive-hero .breadcrumbs a:hover { color: #fff !important; }
.blog-archive-hero .page-title { margin-block: 0 .55rem !important; text-wrap: balance; }
.blog-archive-hero .page-description {
  margin-block: 0 1.4rem !important;
  max-inline-size: 52ch !important;
  margin-inline: auto !important;
}
.blog-stats { gap: .6rem !important; margin-block-start: 0 !important; }
.blog-stats .stat-item {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 999px !important;
  padding: .45rem 1rem !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}