/* ======================================================
   نقطة تواصل — ملف التنسيقات (styles.css)
   ------------------------------------------------------
   • هذا الملف مفصول عن index.html ويُربط به عبر:
     <link rel="stylesheet" href="styles.css">
   • تمت إعادة ترتيب وتنسيق الكود بالكامل.
   • المتغيرات العامة (الألوان/الزوايا/الخط) في :root بالأسفل.
   ====================================================== */

:root {
  --mosab-red: #b02a44;
  --mosab-red-2: #d97186;
  --mosab-dark: #202020;
  --mosab-text: #666666;
  --mosab-border: rgba(0, 0, 0, 0.055);
  --mosab-shadow: 0 12px 34px rgba(0, 0, 0, 0.055);
  --mosab-shadow-red: 0 14px 34px rgba(202, 53, 79, 0.11);
  --mosab-radius-lg: 30px;
  --mosab-radius-md: 22px;
  --mosab-font: "Amazon-Ember", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--mosab-font);
  min-height: 100%;
  background: #ffffff;
  color: var(--mosab-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(20, 20, 25, 0.035) 1px, transparent 1.35px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(20, 20, 25, 0.018) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(180deg, rgba(20, 20, 25, 0.016) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #fbfbfa 100%);
  transform: translateY(var(--mosab-bg-y, 0));
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

.cp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(20, 20, 25, 0.06);
  transition:
    box-shadow 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease;
}

.cp-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.95);
}

.cp-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cp-logo img {
  height: 46px;
  display: block;
}

.cp-header-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(176, 42, 68, 0.4);
  color: var(--mosab-red);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-header-cta:hover {
  background: var(--mosab-red);
  border-color: var(--mosab-red);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(176, 42, 68, 0.24);
}

.cp-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cp-header-cta-secondary {
  background: var(--mosab-red);
  border-color: var(--mosab-red);
  color: #fff;
}
.cp-header-cta-secondary:hover {
  background: #1d1a1b;
  border-color: #1d1a1b;
}
@media (max-width: 520px) {
  .cp-header-actions {
    gap: 6px;
  }
  .cp-header-cta-secondary {
    display: none;
  }
}

@media (max-width: 600px) {
  .cp-header-inner {
    padding: 12px 16px;
  }

  .cp-logo img {
    height: 38px;
  }

  .cp-header-cta {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }
}

.cp-hero {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding: 120px 20px 80px;
}

.cp-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.cp-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 12, 14, 0.62) 0%, rgba(15, 12, 14, 0.48) 45%, rgba(15, 12, 14, 0.78) 100%),
    radial-gradient(circle at 50% 40%, transparent 0%, rgba(15, 12, 14, 0.35) 100%);
  z-index: 1;
}

.cp-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
}

.cp-hero-badge {
  animation: cpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cp-hero h1 {
  animation: cpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.cp-hero-sub {
  animation: cpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.cp-hero-btn {
  animation: cpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}

@keyframes cpFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-hero-badge,
  .cp-hero h1,
  .cp-hero-sub,
  .cp-hero-btn {
    animation: none;
  }
}

.cp-hero-badge {
  display: inline-block;
  padding: 9px 24px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.95);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.cp-hero h1 {
  color: #fff;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.3px;
  margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.cp-hero h1 span {
  color: #fff;
  font-weight: 800;
  position: relative;
}

.cp-hero h1 span::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mosab-red-2), transparent);
  opacity: 0.7;
}

.cp-hero-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  max-width: 540px;
  margin: 0 auto 32px;
}

.cp-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-hero-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--mosab-dark);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.cp-scroll-ind {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  display: flex;
  justify-content: center;
}

.cp-scroll-ind i {
  width: 4px;
  height: 10px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  animation: cpBounce 1.5s infinite;
}

@keyframes cpBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: 0.4;
  }
}

@media (max-width: 768px) {
  .cp-hero {
    min-height: 640px;
    padding: 90px 16px 56px;
  }

  .cp-hero h1 {
    font-size: 30px;
  }

  .cp-hero-sub {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .cp-hero h1 {
    font-size: 25px;
  }

  .cp-hero-sub {
    margin-bottom: 20px;
  }

  .cp-hero-btn {
    padding: 14px 28px;
    font-size: 14px;
  }
}

.cp-blobs-section {
  direction: rtl;
  padding: 64px 20px 54px;
  max-width: 1280px;
  margin: 0 auto;
}

.cp-blobs-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
}

.cp-blobs-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(176, 42, 68, 0.2);
  box-shadow:
    0 10px 28px rgba(176, 42, 68, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.cp-blobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.cp-blob-item {
  text-align: center;
  padding: 16px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-blob-item:hover {
  transform: translateY(-6px);
}

.cp-blob {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.cp-blob-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.cp-blob-image-slot {
  position: relative;
  z-index: 2;
  width: 115%;
  height: 115%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-blob-image-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.cp-blob--1 .cp-blob-bg {
  fill: #e8ede4;
}

.cp-blob--2 .cp-blob-bg {
  fill: #dfe7e3;
}

.cp-blob--3 .cp-blob-bg {
  fill: #f5dcd6;
}

.cp-blob-title {
  font-weight: 800;
  font-size: 30px;
  color: var(--mosab-dark);
  margin-bottom: 16px;
  letter-spacing: -0.25px;
  line-height: 1.35;
}

.cp-blob-desc {
  font-size: 16px;
  color: var(--mosab-text);
  line-height: 1.9;
  font-weight: 400;
  max-width: 330px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .cp-blobs-section {
    padding: 48px 18px 42px;
  }

  .cp-blobs-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 430px;
    margin: 0 auto;
  }

  .cp-blob {
    width: 240px;
    height: 240px;
    margin-bottom: 28px;
  }

  .cp-blob-title {
    font-size: 26px;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .cp-blobs-section {
    padding: 42px 14px 36px;
  }

  .cp-blob {
    width: 210px;
    height: 210px;
  }

  .cp-blob-title {
    font-size: 24px;
  }

  .cp-blob-desc {
    font-size: 15px;
  }
}

.mosab-process,
.mosab-tech,
.mosab-pricing,
.mosab-faq {
  direction: rtl;
  background: transparent;
}

.mosab-process-container,
.mosab-tech-container,
.mosab-pricing-container,
.mosab-faq-container {
  width: 100%;
  margin: 0 auto;
}

.mosab-process-container {
  max-width: 1160px;
}

.mosab-tech-container {
  max-width: 1000px;
}

.mosab-pricing-container {
  max-width: 1180px;
}

.mosab-faq-container {
  max-width: 900px;
}

.mosab-process-head span,
.mosab-tech-head span,
.mosab-pricing-head span,
.mosab-faq-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55));
  border: 1px solid rgba(176, 42, 68, 0.2);
  box-shadow:
    0 10px 28px rgba(176, 42, 68, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
}

.mosab-process-head span::before,
.mosab-tech-head span::before,
.mosab-pricing-head span::before,
.mosab-faq-head span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mosab-red);
  box-shadow: 0 0 0 4px rgba(176, 42, 68, 0.14);
  flex-shrink: 0;
}

.mosab-process-head,
.mosab-tech-head,
.mosab-pricing-head,
.mosab-faq-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px;
}

.cp-section-title {
  margin: 6px 0 0;
  color: var(--mosab-dark);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.4px;
}

@media (max-width: 600px) {
  .cp-section-title {
    font-size: 26px;
  }
}

.mosab-process-head p,
.mosab-pricing-head p,
.mosab-faq-head p {
  margin-top: 14px;
  color: var(--mosab-text);
  font-size: 16px;
  line-height: 1.9;
}

.mosab-process {
  padding: 56px 20px 48px;
}

.mosab-process-head span {
  margin-bottom: 12px;
}

.mosab-process-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: center;
}

.mosab-process-preview {
  min-height: 360px;
  padding: 22px;
  border-radius: var(--mosab-radius-lg);
  background: #ffffff;
  border: 1px solid var(--mosab-border);
  box-shadow: var(--mosab-shadow);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mosab-preview-card {
  width: 100%;
  max-width: 420px;
  padding: 18px;
  border-radius: 26px;
  background: #fff;
  text-align: center;
  border: 1px solid rgba(202, 53, 79, 0.1);
  box-shadow: 0 12px 30px rgba(202, 53, 79, 0.075);
}

.mosab-preview-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px;
  display: block;
  transition: opacity 0.4s ease;
}

.mosab-preview-card h3 {
  margin-bottom: 10px;
  color: var(--mosab-dark);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  transition: opacity 0.4s ease;
}

.mosab-preview-card p {
  color: var(--mosab-text);
  font-size: 15px;
  line-height: 1.85;
  transition: opacity 0.4s ease;
}

.mosab-process-steps {
  display: grid;
  gap: 14px;
}

.mosab-process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: var(--mosab-radius-md);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--mosab-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.045);
  cursor: pointer;
  transition: 0.3s ease;
  text-align: right;
  font-family: inherit;
}

.mosab-process-step span {
  min-width: 48px;
  height: 34px;
  border-radius: 999px;
  background: #f1f1f1;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}

.mosab-process-step h3 {
  margin-bottom: 6px;
  color: var(--mosab-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.mosab-process-step p {
  color: var(--mosab-text);
  font-size: 14.5px;
  line-height: 1.75;
}

.mosab-process-step.is-active {
  border-color: rgba(202, 53, 79, 0.22);
  box-shadow: var(--mosab-shadow-red);
  background: rgba(255, 255, 255, 0.88);
}

.mosab-process-step.is-active span {
  background: var(--mosab-red);
  color: #fff;
}

.mosab-tech {
  padding: 48px 20px;
}

.mosab-tech-head {
  margin-bottom: 28px;
}

.mosab-tech-head h2 {
  margin-top: 4px;
  font-size: 32px;
  font-weight: 700;
  color: var(--mosab-dark);
  line-height: 1.5;
  letter-spacing: -0.4px;
}

.mosab-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mosab-tech-item {
  position: relative;
  min-height: 150px;
  padding: 26px 18px;
  border-radius: 22px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.35s ease;
}

.mosab-tech-item:hover,
.mosab-tech-item.is-active {
  transform: translateY(-6px);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.mosab-tech-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.mosab-tech-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.85;
  filter: brightness(0) saturate(100%) invert(27%) sepia(86%) saturate(1600%) hue-rotate(335deg) brightness(95%)
    contrast(95%);
}

.mosab-tech-item:hover .mosab-tech-icon,
.mosab-tech-item.is-active .mosab-tech-icon {
  transform: scale(1.08);
  background: var(--mosab-red);
  border-color: var(--mosab-red);
}

.mosab-tech-item:hover .mosab-tech-icon img,
.mosab-tech-item.is-active .mosab-tech-icon img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.mosab-tech-item h3 {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--mosab-dark);
  line-height: 1.6;
}

.mosab-tech-item p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--mosab-text);
  font-size: 13.5px;
  line-height: 1.75;
  transition: all 0.3s ease;
}

.mosab-tech-item:hover p,
.mosab-tech-item.is-active p {
  max-height: 90px;
  opacity: 1;
  margin-top: 10px;
}


/* ===================== START STEPS ===================== */
.cp-start-steps {
  direction: rtl;
  padding: 56px 20px 52px;
  background: transparent;
}

.cp-start-steps-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.cp-start-steps-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}

.cp-start-steps-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(176, 42, 68, 0.18);
  box-shadow:
    0 10px 28px rgba(176, 42, 68, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.cp-start-steps-head span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mosab-red);
  box-shadow: 0 0 0 4px rgba(176, 42, 68, 0.13);
  flex-shrink: 0;
}

.cp-start-steps-head p {
  margin-top: 12px;
  color: var(--mosab-text);
  font-size: 16px;
  line-height: 1.9;
}

.cp-start-steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.cp-start-steps-grid::before {
  content: "";
  position: absolute;
  top: 52px;
  right: 16.5%;
  left: 16.5%;
  height: 1px;
  background: rgba(176, 42, 68, 0.16);
  z-index: 0;
}

.cp-start-step {
  position: relative;
  z-index: 1;
  min-height: 235px;
  padding: 30px 26px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.055);
  box-shadow: var(--mosab-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s ease;
}

.cp-start-step::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  top: -74px;
  left: -64px;
  border: 1px solid rgba(176, 42, 68, 0.11);
  pointer-events: none;
}

.cp-start-step::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  right: 26px;
  bottom: 26px;
  background: rgba(176, 42, 68, 0.32);
  box-shadow:
    -18px -12px 0 rgba(176, 42, 68, 0.12),
    -38px 5px 0 rgba(32, 32, 32, 0.10);
  pointer-events: none;
}

.cp-start-step:hover {
  transform: translateY(-5px);
  border-color: rgba(176, 42, 68, 0.16);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.075);
}

.cp-start-step-icon {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(176, 42, 68, 0.20);
  color: var(--mosab-red);
  font-size: 20px;
  font-weight: 900;
  box-shadow:
    0 12px 28px rgba(176, 42, 68, 0.10),
    0 0 0 8px rgba(176, 42, 68, 0.045);
}


.cp-start-step-icon svg {
  width: 27px;
  height: 27px;
  display: block;
}

.cp-start-step-content {
  position: relative;
  z-index: 2;
}

.cp-start-step h3 {
  margin-bottom: 10px;
  color: var(--mosab-dark);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
}

.cp-start-step p {
  color: var(--mosab-text);
  font-size: 15.5px;
  line-height: 1.9;
}

@media (max-width: 900px) {
  .cp-start-steps {
    padding: 46px 14px 42px;
  }

  .cp-start-steps-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
    margin: 0 auto;
  }

  .cp-start-steps-grid::before {
    top: 62px;
    bottom: 62px;
    right: 31px;
    left: auto;
    width: 1px;
    height: auto;
  }

  .cp-start-step {
    min-height: auto;
    padding: 22px 86px 22px 22px;
    text-align: right;
  }

  .cp-start-step-icon {
    position: absolute;
    top: 22px;
    right: 20px;
    width: 54px;
    height: 54px;
    margin: 0;
    font-size: 18px;
  }

  .cp-start-step h3 {
    font-size: 20px;
  }

  .cp-start-step p {
    font-size: 14.5px;
  }
}

@media (max-width: 420px) {
  .cp-start-step {
    padding-left: 18px;
    padding-right: 78px;
  }

  .cp-start-step-icon {
    right: 17px;
    width: 50px;
    height: 50px;
    font-size: 17px;
  }
}

.mosab-pricing {
  padding: 56px 20px;
  border-top: 1px solid rgba(20, 20, 25, 0.05);
}

.mosab-pricing-head {
  margin-bottom: 16px;
}

.mosab-pricing-head h2 {
  margin-bottom: 14px;
  color: #202020;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.4px;
}

.cp-price-note {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px;
  color: var(--mosab-text);
  font-size: 14px;
}

.cp-price-note b {
  color: var(--mosab-red);
}

.mosab-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.mosab-price-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(252, 252, 252, 0.76) 100%);
  border: 1px solid rgba(202, 53, 79, 0.14);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease;
}

.mosab-price-card:hover {
  transform: translateY(-7px);
  border-color: rgba(202, 53, 79, 0.24);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.mosab-price-card.is-featured {
  border-color: rgba(202, 53, 79, 0.3);
  background:
    radial-gradient(circle at top right, rgba(202, 53, 79, 0.075), transparent 42%),
    radial-gradient(circle at bottom left, rgba(112, 112, 112, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(250, 250, 250, 0.82) 100%);
  box-shadow:
    0 24px 60px rgba(202, 53, 79, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.mosab-price-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--mosab-red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(176, 42, 68, 0.24);
}

.mosab-price-image {
  height: 230px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  padding: 16px;
}

.mosab-price-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}

.mosab-price-content {
  padding: 26px 24px 24px;
}

.mosab-price-content h3 {
  margin-bottom: 8px;
  color: #2c2c2c;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  letter-spacing: -0.2px;
}

.mosab-price-subtitle {
  margin: 0 auto 22px;
  color: #666;
  font-size: 14.5px;
  line-height: 1.9;
  text-align: center;
  min-height: 52px;
}

.mosab-price-features {
  list-style: none;
  margin-bottom: 24px;
  display: grid;
  gap: 12px;
}

.mosab-price-features li {
  position: relative;
  padding-right: 30px;
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}

.mosab-price-features li::before {
  position: absolute;
  right: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.mosab-price-features .is-included::before {
  content: "✓";
  background: rgba(202, 53, 79, 0.1);
  color: var(--mosab-red);
}

.mosab-price-features .is-excluded {
  color: #9b9b9b;
}

.mosab-price-features .is-excluded::before {
  content: "×";
  background: rgba(112, 112, 112, 0.1);
  color: #707070;
}

.cp-price-billing {
  width: fit-content;
  margin: 2px auto 12px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(176, 42, 68, 0.09);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.4;
}

.mosab-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  margin: 0 0 6px;
  direction: rtl;
}

.mosab-price strong {
  color: #1d1a1b;
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.8px;
}

.mosab-price span {
  color: #555;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.mosab-price-custom strong {
  font-size: clamp(28px, 2.8vw, 36px);
}

.cp-price-monthly {
  /* السعر الشهري مرجع ثانوي فقط؛ السعر السنوي هو الأساسي */
  width: fit-content;
  max-width: 100%;
  margin: 6px auto 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8a8a8a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

.cp-price-includes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0 0 20px;
  color: #6f6f6f;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.7;
  text-align: center;
}

.cp-price-includes span {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.cp-price-includes span:not(:last-child)::after {
  content: "•";
  margin-inline-start: 14px;
  color: rgba(176, 42, 68, 0.45);
}

.cp-price-tax {
  text-align: center;
  font-size: 12.5px;
  color: #8a8a8a;
  line-height: 1.7;
  margin-bottom: 20px;
}

.mosab-price-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: #1d1a1b;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  transition: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.mosab-price-btn:hover {
  background: var(--mosab-red);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(202, 53, 79, 0.22);
}

.mosab-price-card.is-featured .mosab-price-btn {
  background: var(--mosab-red);
  box-shadow: 0 16px 34px rgba(202, 53, 79, 0.18);
}

.mosab-price-card.is-featured .mosab-price-btn:hover {
  background: #2b2b2b;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.mosab-faq {
  padding: 56px 20px;
  border-top: 1px solid rgba(20, 20, 25, 0.05);
}

.mosab-faq-head {
  margin-bottom: 24px;
}

.mosab-faq-head h2 {
  margin-bottom: 12px;
  font-size: 32px;
  font-weight: 700;
  color: var(--mosab-dark);
  letter-spacing: -0.4px;
}

.mosab-faq-list {
  display: grid;
  gap: 14px;
}

.mosab-faq-item {
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(14px);
  transition: 0.25s ease;
}

.mosab-faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 20px 22px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--mosab-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: right;
  gap: 14px;
}

.mosab-faq-question span {
  font-size: 22px;
  color: var(--mosab-red);
  transition: 0.25s ease;
  flex-shrink: 0;
}

.mosab-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  color: var(--mosab-text);
  font-size: 14.5px;
  line-height: 1.9;
  transition: all 0.3s ease;
}

.mosab-faq-item.is-open .mosab-faq-answer {
  max-height: 240px;
  padding: 0 22px 18px;
}

.mosab-faq-item.is-open .mosab-faq-question span {
  transform: rotate(45deg);
}

.cp-final {
  direction: rtl;
  max-width: 1180px;
  margin: 36px auto;
  padding: 60px 32px;
  border-radius: 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #b02a44 0%, #c4385a 50%, #962039 100%);
  color: #fff;
  box-shadow: 0 26px 60px rgba(176, 42, 68, 0.3);
}

.cp-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
}

.cp-final > * {
  position: relative;
  z-index: 1;
}

.cp-final h2 {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.cp-final p {
  font-size: 17px;
  opacity: 0.92;
  margin-bottom: 30px;
  line-height: 1.8;
}

.cp-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cp-final a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 52px;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-final-btn-primary {
  background: #fff;
  color: #b02a44;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.cp-final-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(8px);
}

.cp-final a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 600px) {
  .cp-final {
    padding: 48px 22px;
    margin: 40px 14px;
  }

  .cp-final h2 {
    font-size: 26px;
  }

  .cp-final-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cp-final a {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 14px 18px;
    font-size: 14px;
  }
}

.cp-footer {
  direction: rtl;
  background: #1a1a1a;
  color: #cfcfcf;
  padding: 56px 20px 0;
}

.cp-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 40px;
}

.cp-footer-brand img {
  height: 54px;
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.cp-footer-brand p {
  font-size: 14px;
  line-height: 1.9;
  color: #9a9a9a;
  max-width: 320px;
}

.cp-footer h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 18px;
}

.cp-footer ul {
  list-style: none;
  display: grid;
  gap: 12px;
}

.cp-footer ul a {
  color: #b9b9b9;
  font-size: 14px;
  transition: 0.2s ease;
}

.cp-footer ul a:hover {
  color: var(--mosab-red-2);
}

.cp-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d8d8d8;
  font-size: 15px;
  font-weight: 700;
  direction: ltr;
}


.cp-footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.cp-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.25s ease;
}

.cp-footer-social a:hover {
  color: #fff;
  background: var(--mosab-red);
  border-color: var(--mosab-red);
  transform: translateY(-2px);
}

.cp-footer-social svg {
  width: 19px;
  height: 19px;
}

@media (max-width: 850px) {
  .cp-footer-social {
    justify-content: center;
  }
}

.cp-pay {
  margin-top: 40px;
  padding: 26px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.cp-pay span {
  display: block;
  font-size: 13px;
  color: #8a8a8a;
  margin-bottom: 14px;
  font-weight: 600;
}

.cp-pay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.cp-pay-list img {
  width: 68px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
}

.cp-footer-addr {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.95;
  color: #9a9a9a;
  max-width: 300px;
}

.cp-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 22px;
  text-align: center;
  font-size: 13px;
  color: #8a8a8a;
}

.cp-footer-legal span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-footer-legal bdi {
  color: #b9b9b9;
  font-weight: 700;
}

.cp-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: #8a8a8a;
}

.cp-copy a {
  color: var(--mosab-red-2);
}

@media (max-width: 850px) {
  .cp-footer-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .cp-footer-brand p {
    max-width: none;
    margin: 0 auto;
  }

  .cp-footer-brand img {
    margin-inline: auto;
  }

  .cp-footer-addr {
    max-width: none;
    margin-inline: auto;
  }
}

@media (max-width: 1000px) {
  .mosab-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .mosab-process-layout {
    grid-template-columns: 1fr;
  }

  .mosab-tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mosab-process,
  .mosab-tech,
  .mosab-pricing,
  .mosab-faq {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mosab-tech-head h2,
  .mosab-pricing-head h2,
  .mosab-faq-head h2 {
    font-size: 27px;
  }

  .mosab-tech-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .mosab-tech-grid {
    grid-template-columns: 1fr;
  }
}

.cp-reveal {
  opacity: 0;
  transform: translateY(26px);
}

.cp-reveal.cp-shown {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mosab-tech-grid .cp-reveal.cp-shown:nth-child(2n) {
  transition-delay: 0.06s;
}

.mosab-tech-grid .cp-reveal.cp-shown:nth-child(3n) {
  transition-delay: 0.12s;
}

.mosab-pricing-grid .cp-reveal.cp-shown:nth-child(2) {
  transition-delay: 0.1s;
}

.mosab-pricing-grid .cp-reveal.cp-shown:nth-child(3) {
  transition-delay: 0.2s;
}

.mosab-process-steps .cp-reveal.cp-shown:nth-child(2) {
  transition-delay: 0.08s;
}

.mosab-process-steps .cp-reveal.cp-shown:nth-child(3) {
  transition-delay: 0.16s;
}

.mosab-faq-list .cp-reveal.cp-shown {
  transition-duration: 0.55s;
}

.mosab-faq-list .cp-reveal.cp-shown:nth-child(odd) {
  transition-delay: 0.05s;
}

@keyframes cpFloatIn {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mosab-tech-item.cp-shown {
  animation: cpFloatIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

:root {
  --cp-soft-red: #fff3f5;
  --cp-soft-red-2: #ffe8ed;
  --cp-soft-gray: #f7f7f7;
  --cp-soft-gray-2: #eeeeee;
  --cp-soft-blue: #f2f7ff;
  --cp-soft-blue-2: #e4f0ff;
  --cp-blue: #2f6fed;
  --cp-green: #159957;
}

.cp-usecases {
  direction: rtl;
  padding: 56px 20px 52px;
  background: transparent;
}

.cp-usecases-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.cp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  align-items: stretch;
}

.cp-usecase-card,
.cp-usecase-story {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.055);
  box-shadow: var(--mosab-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cp-usecase-card {
  min-height: 320px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-usecase-card:hover,
.cp-usecase-story:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.075);
}

.cp-usecase-large {
  grid-column: span 7;
}

.cp-usecase-small {
  grid-column: span 5;
}

.cp-usecase-story {
  grid-column: 1 / -1;
  padding: 36px;
}

.cp-usecase-card--employees {
  background:
    radial-gradient(circle at top right, rgba(0, 0, 0, 0.045), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, var(--cp-soft-gray) 56%, var(--cp-soft-gray-2) 100%);
}

.cp-usecase-card--reputation {
  background:
    radial-gradient(circle at top right, rgba(176, 42, 68, 0.115), transparent 38%),
    linear-gradient(135deg, #fff 0%, var(--cp-soft-red) 54%, var(--cp-soft-red-2) 100%);
  border-color: rgba(176, 42, 68, 0.1);
}

.cp-usecase-story {
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.09), transparent 34%),
    radial-gradient(circle at bottom left, rgba(176, 42, 68, 0.045), transparent 38%),
    linear-gradient(135deg, #fff 0%, var(--cp-soft-blue) 58%, var(--cp-soft-blue-2) 100%);
}

.cp-usecase-tag--gray {
  color: #333;
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.045);
}

.cp-usecase-tag--red {
  color: var(--mosab-red);
  border-color: rgba(176, 42, 68, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(176, 42, 68, 0.075);
}

.cp-usecase-tag--blue {
  color: var(--cp-blue);
  border-color: rgba(47, 111, 237, 0.15);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(47, 111, 237, 0.075);
}

.cp-usecase-content {
  position: relative;
  z-index: 2;
  max-width: 47%;
}

.cp-usecase-small .cp-usecase-content {
  max-width: 47%;
}

.cp-usecase-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(176, 42, 68, 0.14);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 8px 20px rgba(176, 42, 68, 0.07);
}

.cp-usecase-card h3,
.cp-usecase-story h3 {
  margin: 16px 0 12px;
  color: var(--mosab-dark);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.25px;
}

.cp-usecase-card p,
.cp-usecase-story p {
  color: var(--mosab-text);
  font-size: 15.5px;
  line-height: 1.9;
}

.cp-usecase-visual {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  max-width: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.cp-usecase-small .cp-usecase-visual {
  width: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 0;
}

.cp-usecase-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.07));
}

.cp-usecase-small .cp-usecase-visual img {
  object-fit: cover;
  filter: none;
}

.cp-usecase-story-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: center;
}

.cp-usecase-story-img {
  width: 100%;
  max-width: 430px;
  margin-inline-start: auto;
  border-radius: 22px;
  display: block;
  object-fit: contain;
}

.cp-usecase-line {
  border: 0;
  border-top: 1px solid rgba(32, 32, 32, 0.18);
  margin: 28px 0 24px;
}

.cp-usecase-core {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 22px;
}

.cp-usecase-core-title {
  color: var(--mosab-dark);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.45;
}

.cp-usecase-mini h4 {
  color: var(--mosab-dark);
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 6px;
}

.cp-usecase-mini p {
  font-size: 13.5px;
  line-height: 1.75;
}

.cp-usecase-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 12px;
  background: rgba(176, 42, 68, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cp-usecase-mini-icon svg {
  width: 22px;
  height: 22px;
}

.cp-usecase-mini:nth-of-type(2) .cp-usecase-mini-icon {
  background: rgba(21, 153, 87, 0.1);
}

.cp-usecase-mini:nth-of-type(2) .cp-usecase-mini-icon svg path {
  stroke: var(--cp-green);
}

.cp-usecase-mini:nth-of-type(3) .cp-usecase-mini-icon {
  background: rgba(47, 111, 237, 0.1);
}

.cp-usecase-mini:nth-of-type(3) .cp-usecase-mini-icon svg path {
  stroke: var(--cp-blue);
}

.cp-usecase-mini:nth-of-type(4) .cp-usecase-mini-icon {
  background: rgba(176, 42, 68, 0.1);
}

.cp-usecase-mini:nth-of-type(4) .cp-usecase-mini-icon svg path {
  stroke: var(--mosab-red);
}

@media (max-width: 980px) {
  .cp-usecase-large,
  .cp-usecase-small {
    grid-column: 1 / -1;
  }

  .cp-usecase-card {
    min-height: 290px;
  }

  .cp-usecase-content {
    max-width: 50%;
  }

  .cp-usecase-small .cp-usecase-content {
    max-width: 47%;
  }

  .cp-usecase-story-inner {
    grid-template-columns: 1fr;
  }

  .cp-usecase-story-img {
    margin-inline: auto;
  }

  .cp-usecase-core {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .cp-usecases {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cp-usecase-card {
    min-height: auto;
    padding: 26px 22px;
    display: block;
  }

  .cp-usecase-content,
  .cp-usecase-small .cp-usecase-content {
    max-width: none;
  }

  .cp-usecase-card h3,
  .cp-usecase-story h3 {
    font-size: 23px;
  }

  .cp-usecase-visual,
  .cp-usecase-small .cp-usecase-visual {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    margin-top: 22px;
    padding: 0;
    pointer-events: auto;
  }

  .cp-usecase-visual img {
    height: auto;
    max-height: 260px;
    object-fit: contain;
  }

  .cp-usecase-small .cp-usecase-visual {
    height: 190px;
    border-radius: 20px;
    overflow: hidden;
  }

  .cp-usecase-small .cp-usecase-visual img {
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .cp-usecase-story {
    padding: 26px 22px;
  }
}

.cp-customer-use {
  direction: rtl;
  padding: 0 20px;
  background: transparent;
  /* لا تثبيت ولا ارتفاع طويل — القسم بارتفاع طبيعي مع تبديل تلقائي (autoplay) */
}

.cp-customer-container {
  max-width: 1180px;
  margin: 0 auto;
  position: static;        /* أُلغي التثبيت — لا scroll-jacking */
  padding: 64px 0;
}

.cp-customer-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}

.cp-customer-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
  border: 1px solid rgba(176, 42, 68, 0.18);
  box-shadow:
    0 10px 26px rgba(176, 42, 68, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--mosab-red);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.cp-customer-head span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mosab-red);
  box-shadow: 0 0 0 4px rgba(176, 42, 68, 0.13);
  flex-shrink: 0;
}

.cp-customer-head h2 {
  margin: 0 0 12px;
  color: var(--mosab-dark);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.5px;
}

.cp-customer-head p {
  color: var(--mosab-text);
  font-size: 16px;
  line-height: 1.9;
}

.cp-customer-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 540px;
  overflow: hidden;
  border-radius: 32px;
  background: #151515;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.1);
}

.cp-customer-media {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: #f4f4f4;
}

.cp-customer-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cp-customer-layer.is-active {
  opacity: 1;
  pointer-events: auto;
}

.cp-customer-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.035) translateY(8px);
}

.cp-customer-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 21, 21, 0.2), transparent 42%);
  pointer-events: none;
}

.cp-customer-content {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(176, 42, 68, 0.14), transparent 30%),
    linear-gradient(135deg, #151515 0%, #212121 100%);
}

.cp-customer-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 62px;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.cp-customer-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cp-customer-card::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 0;
  background: var(--mosab-red);
  transition: height 0.75s 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.cp-customer-card.is-active::before {
  height: 100%;
}

.cp-customer-icon {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  color: #fff;
  background: rgba(176, 42, 68, 0.95);
  box-shadow: 0 16px 34px rgba(176, 42, 68, 0.24);
}

.cp-customer-icon svg {
  width: 31px;
  height: 31px;
  display: block;
}

.cp-customer-card h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(27px, 3.1vw, 44px);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.cp-customer-card p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  line-height: 2;
}

.cp-customer-dots {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  z-index: 5;
}

.cp-customer-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0;
  transition: 0.25s ease;
}

.cp-customer-dot.is-active {
  background: var(--mosab-red);
  border-color: var(--mosab-red);
  transform: scale(1.55);
}

.cp-customer-step {
  position: absolute;
  left: 28px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 800;
  letter-spacing: 1px;
  direction: ltr;
}

@media (max-width: 900px) {
  .cp-customer-use {
    margin-top: clamp(48px, 9vh, 84px);
    padding: 56px 14px 64px;
    /* بدون min-height طويل — القسم بارتفاع طبيعي والتبديل تلقائي */
    position: relative;
    z-index: 2;
    isolation: isolate;
    background: #fff;
  }

  .cp-customer-container {
    padding: 0;
  }

  .cp-customer-head {
    margin-bottom: 16px;
  }

  .cp-customer-head h2 {
    font-size: 26px;
    line-height: 1.35;
  }

  .cp-customer-head p {
    font-size: 14.5px;
    line-height: 1.75;
  }

  .cp-customer-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 26px;
  }

  .cp-customer-media {
    min-height: clamp(220px, 31vh, 280px);
  }

  .cp-customer-content {
    min-height: clamp(300px, 39vh, 360px);
  }

  .cp-customer-card {
    padding: 30px 24px 54px;
  }

  .cp-customer-card h3 {
    font-size: 24px;
  }

  .cp-customer-card p {
    font-size: 15px;
    line-height: 1.82;
  }

  .cp-customer-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    margin-bottom: 16px;
  }

  .cp-customer-icon svg {
    width: 26px;
    height: 26px;
  }

  .cp-customer-dots {
    top: auto;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }

  .cp-customer-step {
    display: none;
  }
}

@media (max-height: 780px) and (min-width: 901px) {
  .cp-customer-container {
    top: 8px;
    padding: 28px 0;
  }

  .cp-customer-head {
    margin-bottom: 20px;
  }

  .cp-customer-shell,
  .cp-customer-media,
  .cp-customer-content {
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .cp-customer-use {
    margin-top: clamp(56px, 10vh, 96px);
    padding-top: 58px;
    /* بدون min-height طويل */
  }

  .cp-customer-head span {
    margin-bottom: 12px;
    padding: 8px 16px;
    font-size: 11.5px;
  }

  .cp-customer-media {
    min-height: clamp(205px, 29vh, 245px);
  }

  .cp-customer-content {
    min-height: clamp(300px, 38vh, 350px);
  }

  .cp-customer-card {
    padding: 28px 22px 58px;
  }
}

.cp-how-new {
  padding: 68px 20px 60px;
}

/* عرض صورة الخطوة فقط في معاينة الويب لتجنب تكرار نصوص الخطوات */
.cp-how-new .mosab-preview-card h3,
.cp-how-new .mosab-preview-card p {
  display: none;
}
.cp-how-new .mosab-preview-card img {
  margin-bottom: 0;
}

.cp-how-new .mosab-process-head {
  margin-bottom: 34px;
}

.cp-how-new .cp-section-title {
  margin-top: 4px;
}

.cp-how-new .mosab-process-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 56px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.cp-how-new .mosab-process-steps {
  display: block;
}

.cp-how-new .mosab-process-step {
  position: relative;
  display: block;
  padding: 22px 0 22px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.085);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}

.cp-how-new .mosab-process-step:last-child {
  border-bottom: 0;
}

.cp-how-new .mosab-process-step:hover,
.cp-how-new .mosab-process-step.is-active {
  transform: none;
  background: transparent;
  border-color: rgba(0, 0, 0, 0.085);
  box-shadow: none;
}

.cp-how-new .mosab-process-step > span {
  min-width: 44px;
  height: auto;
  display: inline-block;
  margin-inline-end: 8px;
  border-radius: 0;
  background: transparent !important;
  color: #b8b8b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  direction: ltr;
  vertical-align: top;
  transition: color 0.25s ease;
}

.cp-how-new .mosab-process-step > div {
  display: inline-block;
  width: calc(100% - 62px);
  vertical-align: top;
}

.cp-how-new .mosab-process-step h3 {
  margin: 0;
  color: #b8b8b8;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  transition: color 0.25s ease;
}

.cp-how-new .mosab-process-step p {
  max-height: 0;
  margin: 0;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--mosab-text);
  font-size: 15px;
  line-height: 1.85;
  transition:
    max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    padding-top 0.32s ease;
}

.cp-how-new .mosab-process-step.is-active > span,
.cp-how-new .mosab-process-step.is-active h3 {
  color: var(--mosab-dark);
}

.cp-how-new .mosab-process-step.is-active p {
  max-height: 110px;
  opacity: 1;
  padding-top: 8px;
}

.cp-how-progress {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}

.cp-how-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mosab-dark);
}

.cp-how-new.is-running .mosab-process-step.is-active .cp-how-progress i {
  animation: cpHowProgress 6.5s linear forwards;
}

@keyframes cpHowProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.cp-how-new .mosab-process-preview {
  min-height: 430px;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  /* خلفية بيضاء نظيفة مع الحفاظ على روح الأشكال السابقة */
  background: #ffffff;
  border: 1px solid rgba(176, 42, 68, 0.12);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.055),
    0 14px 34px rgba(176, 42, 68, 0.06);
  backdrop-filter: none;
}

.cp-how-new .mosab-preview-card {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 430px;
  padding: 28px 24px 26px;
  border-radius: 0;
  /* بدون تدرجات ثقيلة: الأبيض هو الأساس حتى تتناسق الصور المفرغة */
  background: #ffffff;
  border: 0;
  box-shadow: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* الشكل الدائري القديم لكن بلون الهوية ووضوح أنظف */
.cp-how-new .mosab-preview-card::before {
  content: "";
  position: absolute;
  left: -72px;
  bottom: -72px;
  width: 286px;
  height: 286px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 14px,
    rgba(176, 42, 68, 0.18) 15px 17px,
    transparent 18px 30px
  );
  opacity: 0.52;
  pointer-events: none;
  z-index: 0;
}

/* الدائرة الصغيرة السابقة مع لون أوضح من الهوية */
.cp-how-new .mosab-preview-card::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 34px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--mosab-red) 0 38%, rgba(176, 42, 68, 0.13) 38% 100%);
  opacity: 0.48;
  pointer-events: none;
  z-index: 0;
}

.cp-how-new .mosab-preview-card img {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  height: auto;
  max-height: 320px;
  object-fit: contain;
  margin: 0 auto 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.08));
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.cp-how-new .mosab-preview-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 12px;
  color: var(--mosab-dark);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.45;
}

.cp-how-new .mosab-preview-card p {
  position: relative;
  z-index: 2;
  max-width: 460px;
  color: var(--mosab-text);
  font-size: 16.5px;
  line-height: 1.95;
}

/* صور الخطوات داخل كروت الجوال غير مستخدمة الآن: الصورة الموحدة تتبدل من المعاينة */
.cp-how-mobile-img {
  display: none;
}

@media (max-width: 900px) {
  .cp-how-new {
    padding: 52px 14px 44px;
  }

  .cp-how-new .mosab-process-layout {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
    max-width: 520px;
    margin: 0 auto;
  }

  /* الجوال: صورة واحدة موحدة تتغير حسب الخطوة النشطة */
  .cp-how-new .mosab-process-preview {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(176, 42, 68, 0.12);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055), 0 8px 20px rgba(176, 42, 68, 0.05);
  }

  .cp-how-new .mosab-preview-card {
    position: relative;
    min-height: 0;
    padding: 12px 10px;
    border-radius: 0;
    background: #ffffff;
    display: block;
    overflow: hidden;
    isolation: isolate;
  }

  /* الجوال: إظهار نفس روح الأشكال بدل الخلفية اللونية المسطحة */
  .cp-how-new .mosab-preview-card::before,
  .cp-how-new .mosab-preview-card::after {
    display: block;
    z-index: 0;
  }

  .cp-how-new .mosab-preview-card img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 300px;
    height: auto;
    margin: 0;
    object-fit: contain;
    padding: 0;
    border-radius: 0;
    filter: drop-shadow(0 14px 22px rgba(176, 42, 68, 0.10));
  }

  /* نخفي نص المعاينة في الجوال حتى لا يتكرر؛ النص يظهر في قائمة الخطوات */
  .cp-how-new .mosab-preview-card h3,
  .cp-how-new .mosab-preview-card p {
    display: none;
  }

  .cp-how-new .mosab-process-steps {
    display: block;
  }

  .cp-how-new .mosab-process-step {
    display: block;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.085);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  .cp-how-new .mosab-process-step:last-child {
    border-bottom: 0;
  }

  .cp-how-new .mosab-process-step:hover,
  .cp-how-new .mosab-process-step.is-active {
    transform: none;
    border-color: rgba(0, 0, 0, 0.085);
    background: transparent;
    box-shadow: none;
  }

  .cp-how-new .mosab-process-step > span {
    min-width: 42px;
    height: auto;
    display: inline-block;
    margin: 0 0 0 8px;
    border-radius: 0;
    background: transparent !important;
    color: #b8b8b8;
    font-size: 13px;
    font-weight: 800;
    vertical-align: top;
  }

  .cp-how-new .mosab-process-step > div {
    display: inline-block;
    width: calc(100% - 58px);
    vertical-align: top;
  }

  .cp-how-new .mosab-process-step h3 {
    margin: 0;
    color: #b8b8b8;
    font-size: 20px;
    line-height: 1.45;
  }

  .cp-how-new .mosab-process-step p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    color: var(--mosab-text);
    font-size: 14.5px;
    line-height: 1.85;
  }

  .cp-how-new .mosab-process-step.is-active > span,
  .cp-how-new .mosab-process-step.is-active h3 {
    color: var(--mosab-dark);
  }

  .cp-how-new .mosab-process-step.is-active p {
    max-height: 95px;
    opacity: 1;
    padding-top: 8px;
  }

  .cp-how-progress {
    display: block;
  }
}

@media (max-width: 520px) {
  .cp-how-new .mosab-process-layout {
    max-width: none;
  }

  .cp-how-new .mosab-process-preview {
    border-radius: 22px;
  }

  .cp-how-new .mosab-process-step {
    padding: 16px 0;
  }

  .cp-how-new .mosab-process-step h3 {
    font-size: 19px;
  }
}

/* ======================================================
   Motion polish — حركات خفيفة ومتسقة
   الهدف: إحساس فاخر بدون إزعاج أو تأثير على الأداء.
====================================================== */
:root {
  --cp-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --cp-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --cp-motion-fast: 220ms;
  --cp-motion-med: 520ms;
  --cp-motion-slow: 780ms;
}

@keyframes cpSoftRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cpImageSettle {
  from {
    opacity: 0;
    transform: translateY(12px) scale(1.015);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cpSubtlePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.88;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* ظهور موحّد لكل الأقسام */
.cp-reveal.cp-shown {
  animation: cpSoftRise var(--cp-motion-slow) var(--cp-ease-soft) both;
}

/* تعاقب خفيف داخل الشبكات بدون مبالغة */
.cp-blobs-grid .cp-reveal.cp-shown:nth-child(2),
.cp-usecases-grid .cp-reveal.cp-shown:nth-child(2),
.mosab-tech-grid .cp-reveal.cp-shown:nth-child(2),
.mosab-pricing-grid .cp-reveal.cp-shown:nth-child(2) {
  animation-delay: 0.07s;
}

.cp-blobs-grid .cp-reveal.cp-shown:nth-child(3),
.cp-usecases-grid .cp-reveal.cp-shown:nth-child(3),
.mosab-tech-grid .cp-reveal.cp-shown:nth-child(3),
.mosab-pricing-grid .cp-reveal.cp-shown:nth-child(3) {
  animation-delay: 0.14s;
}

/* حركة Hover موحّدة للكروت المهمة */
.cp-blob-item,
.cp-usecase-card,
.cp-usecase-story,
.cp-usecase-image-card,
.mosab-tech-item,
.mosab-price-card,
.mosab-faq-item,
.mosab-process-step {
  will-change: transform;
}

.cp-blob-item:hover,
.cp-usecase-card:hover,
.cp-usecase-story:hover,
.cp-usecase-image-card:hover,
.mosab-tech-item:hover,
.mosab-price-card:hover,
.mosab-faq-item:hover {
  transform: translateY(-4px);
}

/* الصور تظهر وكأنها تستقر داخل التصميم */
.cp-blob-item.cp-shown .cp-blob-image-slot img,
.cp-usecase-card.cp-shown .cp-usecase-visual img,
.cp-usecase-story.cp-shown .cp-usecase-story-img,
.mosab-price-card.cp-shown .mosab-price-image img,
.cp-customer-shell.cp-shown .cp-customer-layer.is-active img {
  animation: cpImageSettle var(--cp-motion-slow) var(--cp-ease-soft) both;
}

/* قسم كيف يعمل: انتقال ألطف للصورة الموحدة والمؤشر */
.cp-how-new .mosab-preview-card img {
  will-change: opacity, transform;
}

.cp-how-new .mosab-process-step.is-active h3,
.cp-how-new .mosab-process-step.is-active p {
  animation: cpSoftRise var(--cp-motion-med) var(--cp-ease-soft) both;
}

.cp-how-new .mosab-process-step.is-active .cp-how-progress i {
  box-shadow: 0 0 18px rgba(176, 42, 68, 0.18);
}

/* قسم هل سيستخدمها العميل: انتقال الصورة والنقاط بشكل أنعم */
.cp-customer-layer.is-active img {
  transform: scale(1.01);
  transition:
    transform 900ms var(--cp-ease-soft),
    opacity 720ms var(--cp-ease-soft);
}

.cp-customer-dot.is-active {
  animation: cpSubtlePulse 1.8s var(--cp-ease-soft) infinite;
}

.cp-customer-card.is-active .cp-customer-icon {
  animation: cpSoftRise 620ms var(--cp-ease-soft) both;
}

/* الأسئلة الشائعة: فتح ناعم ومريح */
.mosab-faq-answer,
.mosab-process-step p,
.cp-customer-card,
.cp-customer-layer {
  will-change: opacity, transform, max-height;
}

/* تحسين خاص بقسم تجربة العميل: انتقال أوضح ومتسق بين الصور والنصوص */
@keyframes cpCustomerImageIn {
  0% {
    opacity: 0;
    transform: scale(1.06) translateY(14px);
    filter: saturate(0.94) contrast(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1.01) translateY(0);
    filter: saturate(1) contrast(1);
  }
}

@keyframes cpCustomerTextIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp-customer-layer {
  transition: opacity 720ms var(--cp-ease-soft);
}

.cp-customer-layer.is-active img {
  animation: cpCustomerImageIn 1050ms var(--cp-ease-soft) both;
}

.cp-customer-card.is-active h3,
.cp-customer-card.is-active p {
  animation: cpCustomerTextIn 620ms var(--cp-ease-soft) both;
}

.cp-customer-card.is-active p {
  animation-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* ===================== CUSTOMER LOSS STAT BANNER ===================== */
.cp-stat-banner {
  direction: rtl;
  padding: 12px 20px 56px;
  background: transparent;
}

.cp-stat-promo {
  /* مساحة محسوبة للطبقات الخلفية حتى تكون الإزاحة متساوية */
  --cp-stat-layer-gap: 10px;
  --cp-stat-layer-space: 24px;
  width: min(1060px, 100%);
  margin: 0 auto;
  position: relative;
  padding: 0 0 var(--cp-stat-layer-space) var(--cp-stat-layer-space);
}

.cp-stat-promo::before,
.cp-stat-promo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--cp-stat-layer-space);
  left: var(--cp-stat-layer-space);
  border-radius: 7px;
  pointer-events: none;
}

/* الطبقة الأولى: نفس حجم الكرت مع إزاحة ثابتة للأسفل واليسار */
.cp-stat-promo::before {
  background: rgba(176, 42, 68, 0.1);
  transform: translate(calc(var(--cp-stat-layer-gap) * -1), var(--cp-stat-layer-gap));
  z-index: 1;
}

/* الطبقة الثانية: ضعف الإزاحة تمامًا حتى يظهر التباعد متسقًا */
.cp-stat-promo::after {
  background: rgba(176, 42, 68, 0.055);
  transform: translate(calc(var(--cp-stat-layer-gap) * -2), calc(var(--cp-stat-layer-gap) * 2));
  z-index: 0;
}

.cp-stat-promo-card {
  position: relative;
  z-index: 2;
  min-height: 178px;
  border-radius: 7px;
  overflow: hidden;
  padding: 42px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at 82% 84%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, #8f1f35 0%, #b02a44 50%, #6f182a 100%);
  box-shadow:
    0 20px 45px rgba(176, 42, 68, 0.2),
    0 10px 26px rgba(0, 0, 0, 0.08);
}

.cp-stat-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.08)),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1.3px) 0 0 / 28px 28px;
  opacity: 0.32;
}

.cp-stat-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 840px;
  color: #fff;
  font-size: clamp(22px, 2.35vw, 34px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.2px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);
}

.cp-stat-quote strong {
  font-weight: 900;
  color: #fff;
  font-size: 1.25em;
  padding-inline: 4px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

@media (max-width: 700px) {
  .cp-stat-banner {
    padding: 8px 14px 42px;
  }
  .cp-stat-promo {
    --cp-stat-layer-gap: 8px;
    --cp-stat-layer-space: 18px;
  }
  .cp-stat-promo-card {
    min-height: 156px;
    padding: 30px 22px;
    border-radius: 8px;
  }
  .cp-stat-quote {
    font-size: 20px;
    line-height: 1.85;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cp-stat-banner.cp-shown .cp-stat-promo-card {
    animation: cpStatCardIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .cp-stat-banner.cp-shown .cp-stat-promo::before {
    animation: cpStatLayerIn 760ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  }
  .cp-stat-banner.cp-shown .cp-stat-promo::after {
    animation: cpStatLayerIn 820ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both;
  }
}

@keyframes cpStatCardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cpStatLayerIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* زر واتساب عائم صغير وثابت */
.cp-whatsapp-float {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 2147483000 !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.54);
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateZ(0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  animation: cpWhatsAppFloat 2.6s ease-in-out infinite;
}

.cp-whatsapp-float::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(37, 211, 102, 0.34);
  animation: cpWhatsAppPulse 2.6s ease-out infinite;
}

.cp-whatsapp-float svg {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: block;
}

.cp-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.04);
  background: #1fc25c;
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.42);
}

@keyframes cpWhatsAppFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes cpWhatsAppPulse {
  0% {
    transform: scale(0.88);
    opacity: 0.55;
  }
  70%,
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

@media (max-width: 600px) {
  .cp-whatsapp-float {
    right: 14px !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    width: 46px;
    height: 46px;
  }
  .cp-whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cp-whatsapp-float,
  .cp-whatsapp-float::before {
    animation: none;
  }
}


/* ======================================================
   كيف تعمل — أشكال مخصصة لكل خطوة داخل بطاقة المعاينة
   ------------------------------------------------------
   الهدف: إبقاء الخلفية بيضاء، مع تغيير الزخرفة حسب الخطوة
   حتى تبدو كل صورة مفرغة متناسقة ولها شخصية بصرية خاصة.
====================================================== */
.cp-how-new .mosab-process-preview.cp-how-shape-1 {
  border-color: rgba(176, 42, 68, 0.14);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.055),
    0 14px 34px rgba(176, 42, 68, 0.065);
}

.cp-how-new .mosab-preview-card.cp-how-shape-1::before {
  left: -72px;
  right: auto;
  top: auto;
  bottom: -72px;
  width: 286px;
  height: 286px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 14px,
    rgba(176, 42, 68, 0.18) 15px 17px,
    transparent 18px 30px
  );
  opacity: 0.52;
}

.cp-how-new .mosab-preview-card.cp-how-shape-1::after {
  left: 34px;
  right: auto;
  top: 34px;
  bottom: auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--mosab-red) 0 38%, rgba(176, 42, 68, 0.13) 38% 100%);
  opacity: 0.48;
}

/* الخطوة الثانية: أقواس حركة ولمسات تفاعلية حول الصورة */
.cp-how-new .mosab-process-preview.cp-how-shape-2 {
  border-color: rgba(217, 113, 134, 0.22);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.052),
    0 14px 34px rgba(217, 113, 134, 0.075);
}

.cp-how-new .mosab-preview-card.cp-how-shape-2::before {
  right: -96px;
  left: auto;
  top: 42px;
  bottom: auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 47%, rgba(176, 42, 68, 0.20) 48% 50%, transparent 51% 62%, rgba(217, 113, 134, 0.18) 63% 65%, transparent 66%),
    radial-gradient(circle at center, rgba(176, 42, 68, 0.045), transparent 62%);
  opacity: 0.78;
}

.cp-how-new .mosab-preview-card.cp-how-shape-2::after {
  left: 34px;
  right: auto;
  top: auto;
  bottom: 42px;
  width: 150px;
  height: 88px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(176, 42, 68, 0.22) 0 32%, transparent 32% 100%) 0 18px / 100% 4px no-repeat,
    linear-gradient(90deg, rgba(217, 113, 134, 0.20) 0 54%, transparent 54% 100%) 0 42px / 100% 4px no-repeat,
    linear-gradient(90deg, rgba(32, 32, 32, 0.12) 0 42%, transparent 42% 100%) 0 66px / 100% 4px no-repeat;
  opacity: 0.8;
}

/* الخطوة الثالثة: نقاط اتصال ومسارات محادثة تعكس المتابعة والتحويل */
.cp-how-new .mosab-process-preview.cp-how-shape-3 {
  border-color: rgba(176, 42, 68, 0.16);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.055),
    0 14px 34px rgba(176, 42, 68, 0.08);
}

.cp-how-new .mosab-preview-card.cp-how-shape-3::before {
  left: -46px;
  right: auto;
  top: 44px;
  bottom: auto;
  width: 270px;
  height: 240px;
  border-radius: 42px;
  background:
    radial-gradient(circle at 22% 30%, rgba(176, 42, 68, 0.28) 0 8px, transparent 9px),
    radial-gradient(circle at 58% 22%, rgba(217, 113, 134, 0.26) 0 7px, transparent 8px),
    radial-gradient(circle at 74% 62%, rgba(176, 42, 68, 0.22) 0 9px, transparent 10px),
    linear-gradient(28deg, transparent 0 31%, rgba(176, 42, 68, 0.16) 31.4% 32.4%, transparent 33% 100%),
    linear-gradient(145deg, transparent 0 45%, rgba(32, 32, 32, 0.09) 45.5% 46.5%, transparent 47% 100%);
  opacity: 0.8;
}

.cp-how-new .mosab-preview-card.cp-how-shape-3::after {
  right: 34px;
  left: auto;
  bottom: 36px;
  top: auto;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(176, 42, 68, 0.18) 0 24%, transparent 25% 42%, rgba(176, 42, 68, 0.16) 43% 45%, transparent 46% 64%, rgba(217, 113, 134, 0.14) 65% 67%, transparent 68%);
  opacity: 0.82;
}

@media (max-width: 900px) {
  .cp-how-new .mosab-process-preview.cp-how-shape-1,
  .cp-how-new .mosab-process-preview.cp-how-shape-2,
  .cp-how-new .mosab-process-preview.cp-how-shape-3 {
    background: #ffffff;
  }

  .cp-how-new .mosab-process-preview.cp-how-shape-1 {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055), 0 8px 20px rgba(176, 42, 68, 0.055);
  }

  .cp-how-new .mosab-process-preview.cp-how-shape-2 {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055), 0 8px 20px rgba(217, 113, 134, 0.065);
  }

  .cp-how-new .mosab-process-preview.cp-how-shape-3 {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.055), 0 8px 20px rgba(176, 42, 68, 0.075);
  }
}


/* ======================================================
   ضبط نهائي لمعاينة كيف تعمل
   ------------------------------------------------------
   • الصور في الكمبيوتر تأخذ مساحة أكبر داخل الكرت.
   • أشكال كل خطوة تظهر أيضًا في الجوال بدل التدرج اللوني.
====================================================== */
@media (min-width: 901px) {
  .cp-how-new .mosab-preview-card {
    padding: 24px 22px 24px;
  }

  .cp-how-new .mosab-preview-card img {
    width: min(100%, 580px);
    max-height: 340px;
  }
}

@media (max-width: 900px) {
  .cp-how-new .mosab-preview-card.cp-how-shape-1::before {
    left: -86px;
    bottom: -96px;
    width: 230px;
    height: 230px;
    opacity: 0.46;
  }

  .cp-how-new .mosab-preview-card.cp-how-shape-1::after {
    left: 18px;
    top: 18px;
    width: 72px;
    height: 72px;
    opacity: 0.38;
  }

  .cp-how-new .mosab-preview-card.cp-how-shape-2::before {
    right: -118px;
    top: -28px;
    width: 260px;
    height: 260px;
    opacity: 0.62;
  }

  .cp-how-new .mosab-preview-card.cp-how-shape-2::after {
    left: 18px;
    bottom: 22px;
    width: 116px;
    height: 68px;
    opacity: 0.56;
  }

  .cp-how-new .mosab-preview-card.cp-how-shape-3::before {
    left: -72px;
    top: 16px;
    width: 220px;
    height: 188px;
    opacity: 0.58;
  }

  .cp-how-new .mosab-preview-card.cp-how-shape-3::after {
    right: 18px;
    bottom: 18px;
    width: 90px;
    height: 90px;
    opacity: 0.54;
  }

  .cp-how-new .mosab-preview-card img {
    width: 100%;
    max-height: 320px;
  }
}

/* ======================================================
   ضمان اتصال الحروف العربية — إصلاح نهائي وشامل
   ------------------------------------------------------
   السبب: letter-spacing (الموجب خصوصًا) يكسر اتصال الحروف
   العربية، وتظهر المشكلة بوضوح على Safari في الآيفون.
   الحل المضمون: إلغاء التباعد على كامل نصوص المستند العربي
   مع !important حتى لا يتغلب عليه أي تعريف آخر مهما كان
   ترتيبه أو أولويته (specificity)، فلا تتكرر المشكلة في
   أي عنصر حالي أو يُضاف مستقبلًا.
   ملاحظة: العناصر اللاتينية (أرقام/روابط) المعلّمة dir="ltr"
   لا يضيرها هذا لأنها أصلًا لا تعتمد على التباعد للقراءة.
   ====================================================== */
html[lang="ar"],
html[lang="ar"] * {
  letter-spacing: normal !important;
}