@charset "UTF-8";
/* ---------------------------------------------------------------
   ١) الهيرو
   ------------------------------------------------------------- */
.pages-hero {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
}
.pages-hero img {
  position: absolute;
  inset: 0;
}
.pages-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pages-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(1deg, rgba(18, 31, 62, 0.9) 0%, rgba(18, 31, 62, 0) 100%);
}
.dark-mode .pages-hero__mask {
  background: linear-gradient(1deg, rgba(170, 184, 197, 0.9) 0%, rgba(170, 184, 197, 0) 100%);
}
@media (max-width: 991px) {
  .pages-hero {
    height: 200px;
  }
}

/* ---------------------------------------------------------------
   ٢) كارت العنوان
   ------------------------------------------------------------- */
.pages-header {
  top: -119px;
  margin-bottom: -119px;
  z-index: 5;
}
@media (max-width: 991px) {
  .pages-header {
    top: -80px;
    margin-bottom: -80px;
  }
}
.pages-header__mask {
  position: absolute;
  inset: 8px 8px -8px 8px;
  border-radius: 32px;
  opacity: 0.5;
  background: var(--white);
  z-index: 1;
}
.pages-header__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 40px;
}
@media (max-width: 991px) {
  .pages-header__body {
    padding: 24px;
  }
}
.pages-header__body--with-art {
  padding-inline-end: 284px;
}
@media (max-width: 1199px) {
  .pages-header__body--with-art {
    padding-inline-end: 200px;
  }
}
@media (max-width: 991px) {
  .pages-header__body--with-art {
    padding-inline-end: 24px;
  }
}
.pages-header__icon {
  box-shadow: 0 8px 24px -12px var(--primary);
}
.pages-header__title {
  font-size: 40px;
  line-height: 1.25;
}
@media (max-width: 991px) {
  .pages-header__title {
    font-size: 26px;
  }
}
.pages-header__subtitle {
  font-size: 18px;
  max-width: 640px;
  line-height: 1.8;
}
@media (max-width: 991px) {
  .pages-header__subtitle {
    font-size: 15px;
  }
}
.pages-header__overlay-img {
  width: 220px;
  height: 220px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  top: auto;
}
@media (max-width: 991px) {
  .pages-header__overlay-img {
    width: 120px;
    height: 120px;
    bottom: auto;
    top: 8px;
    opacity: 0.35;
  }
}
.rtl .pages-header__overlay-img {
  right: auto;
  left: 24px;
}

/* ---------------------------------------------------------------
   ٣) فهرس جانبي لاصق - بيتبني من عناوين الصفحة نفسها
   ------------------------------------------------------------- */
.pages-toc {
  position: sticky;
  top: 96px;
}
.pages-toc__title {
  letter-spacing: 0.04em;
}
.pages-toc__link {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.25s ease;
}
.pages-toc__link:hover {
  color: var(--primary);
  background: var(--gray-100);
  text-decoration: none;
}
.pages-toc__link.is-active {
  color: var(--primary);
  background: var(--primary-20, rgba(88, 80, 236, 0.08));
  font-weight: bold;
}

/* ---------------------------------------------------------------
   ٤) المحتوى
   ------------------------------------------------------------- */
.pages-content {
  padding: 48px;
}
@media (max-width: 991px) {
  .pages-content {
    padding: 24px;
  }
}
.pages-content p {
  color: var(--gray-500);
  margin-top: 16px;
  font-size: 17px;
  line-height: 2;
}
.pages-content > p:first-child {
  font-size: 19px;
  color: var(--black);
  line-height: 1.9;
}
.pages-content img, .pages-content video, .pages-content iframe {
  border-radius: 16px;
  max-width: 100% !important;
}
.pages-content h1, .pages-content h2, .pages-content h3 {
  font-weight: bold;
  color: var(--black);
  scroll-margin-top: 100px;
  line-height: 1.45;
}
.pages-content h2 {
  font-size: 26px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-200, #e9ecef);
}
@media (max-width: 991px) {
  .pages-content h2 {
    font-size: 21px;
    margin-top: 40px;
    padding-top: 28px;
  }
}
.pages-content h3 {
  font-size: 20px;
  margin-top: 32px;
}
.pages-content h2:first-child,
.pages-content h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pages-content ul {
  list-style: none !important;
  padding-inline-start: 0 !important;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1199px) {
  .pages-content ul {
    grid-template-columns: 1fr;
  }
}
.pages-content ul li {
  list-style: none !important;
  position: relative;
  padding: 16px 20px;
  padding-inline-start: 56px;
  border-radius: 16px;
  background: var(--gray-100);
  border: 1px solid transparent;
  color: var(--black);
  font-size: 16px;
  line-height: 1.9;
  transition: all 0.25s ease;
}
.pages-content ul li::before {
  content: "";
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  opacity: 0.95;
}
.pages-content ul li:hover {
  background: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px var(--secondary);
}
.pages-content ol {
  padding-inline-start: 24px;
  margin-top: 20px;
}
.pages-content ol li {
  color: var(--gray-500);
  font-size: 17px;
  line-height: 2;
  margin-top: 8px;
}
.pages-content ul li p,
.pages-content ol li p {
  margin-top: 0;
  color: inherit;
  font-size: inherit;
}
.pages-content blockquote {
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--gray-100);
  font-size: 18px;
  color: var(--black);
}
.pages-content table {
  width: 100%;
  margin-top: 24px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
}
.pages-content table th, .pages-content table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 15px;
}
.pages-content table th {
  background: var(--gray-100);
  color: var(--black);
  font-weight: bold;
}
.pages-content table tr:last-child td {
  border-bottom: 0;
}
.pages-content .btn {
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  transition: all 0.25s ease;
}
.pages-content .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px var(--primary);
}
.pages-content p:has(> .btn:only-child) {
  display: inline-block;
  margin-inline-end: 12px;
}

/* ---------------------------------------------------------------
   ٥) عدّة صفحات البيع (landing)

   FOX: صفحات زي /pages/for-companies كانت عناوين وفقرات ورا بعض من غير
   أي إيقاع بصري - نص بيوصف خدمات، مش صفحة بتقنع شركة تتعاقد. الكلاسات
   دي بتتكتب جوّه محتوى الصفحة نفسه من لوحة التحكم، يعني أي صفحة بيع
   جديدة تقدر تستخدمها من غير ما نلمس الكود تاني.

   كل حاجة هنا متداخلة جوّه .pages-content عن قصد: قواعد المحتوى العامة
   (p / ul / h3) قوية، ولازم الترتيب الخاص بالكروت يغلبها.
   ------------------------------------------------------------- */
.pages-content {
  /* ---- ٥-٠ علامة فوكس الباهتة في الخلفية ----
     رأس التعلب بالخطوط الهندسية - نفس اللي في اللوجو - بيتحط كبير وباهت
     جدًا على جنب الصفحة، نصّه برّه عمود المحتوى، فبيبان كشكل مجرّد مش
     كلوجو متكرر. مكانه مربوط بترتيب عناوين h2 في الصفحة نفسها، وعدد
     العناوين وطول المحتوى قبلها مختلفين من صفحة للتانية، فبينزل كل مرة
     في مكان مختلف من غير ما نكتب قاعدة لكل صفحة. */
  /* ---- ٥-١ الجملة الافتتاحية ---- */
  /* ---- ٥-٢ شريط الأرقام ---- */
  /* ---- ٥-٣ صورة جنب نص ---- */
  /* ---- ٥-٤ كروت الخدمات ---- */
  /* ---- ٥-٥ خطوات العمل ---- */
  /* ---- ٥-٦ قطاعات / وسوم ---- */
  /* ---- ٥-٧ اقتباس / وعد ---- */
  /* ---- ٥-٨ معرض صور ---- */
  /* ---- ٥-٩ شريط الدعوة للتواصل ---- */
  /* ---- ٥-١٠ الأزرار ---- */
}
.pages-content .fox-landing {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.pages-content .fox-landing > h2 {
  position: relative;
}
.pages-content .fox-landing > h2:nth-of-type(4n + 1)::before,
.pages-content .fox-landing > h2:nth-of-type(4n + 3)::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: url("/store/fox/fox-mark.png") no-repeat center/contain;
  opacity: 0.06;
}
.dark-mode .pages-content .fox-landing > h2:nth-of-type(4n + 1)::before,
.dark-mode .pages-content .fox-landing > h2:nth-of-type(4n + 3)::before {
  opacity: 0.1;
  filter: brightness(2.6);
}
.pages-content .fox-landing > h2:nth-of-type(4n + 1)::before {
  width: 560px;
  height: 833px;
  top: -260px;
  right: -190px;
  transform: rotate(-10deg);
}
.pages-content .fox-landing > h2:nth-of-type(4n + 3)::before {
  width: 480px;
  height: 715px;
  top: 60px;
  left: -170px;
  transform: rotate(8deg) scaleX(-1);
}
@media (max-width: 1199px) {
  .pages-content .fox-landing > h2::before {
    display: none;
  }
}
.pages-content .fox-hook {
  margin: 0;
  padding: 32px 36px;
  border-radius: 24px;
  background: var(--gray-100);
}
.pages-content .fox-hook p {
  margin-top: 0;
  font-size: 22px;
  line-height: 1.75;
  color: var(--black);
  font-weight: bold;
}
.pages-content .fox-hook p + p {
  margin-top: 12px;
  font-size: 17px;
  font-weight: normal;
  color: var(--gray-500);
}
@media (max-width: 991px) {
  .pages-content .fox-hook {
    padding: 22px;
  }
  .pages-content .fox-hook p {
    font-size: 18px;
  }
  .pages-content .fox-hook p + p {
    font-size: 15px;
  }
}
.pages-content .fox-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 1199px) {
  .pages-content .fox-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pages-content .fox-stat {
  padding: 24px 20px;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  text-align: center;
  transition: all 0.25s ease;
}
.pages-content .fox-stat__num {
  display: block;
  font-size: 34px;
  font-weight: bold;
  line-height: 1.2;
  color: var(--primary);
}
.pages-content .fox-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-500);
}
.pages-content .fox-stat:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 16px 32px -22px var(--secondary);
}
@media (max-width: 991px) {
  .pages-content .fox-stat {
    padding: 18px 12px;
  }
  .pages-content .fox-stat__num {
    font-size: 26px;
  }
  .pages-content .fox-stat__label {
    font-size: 13px;
  }
}
.pages-content .fox-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 32px;
}
.pages-content .fox-split--flip .fox-split__media {
  order: 2;
}
.pages-content .fox-split__media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--gray-100);
}
.pages-content .fox-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform 0.5s ease;
}
.pages-content .fox-split__media:hover img {
  transform: scale(1.04);
}
.pages-content .fox-split__body h3 {
  margin-top: 0;
  font-size: 24px;
}
.pages-content .fox-split__body p {
  font-size: 16px;
  line-height: 1.95;
}
@media (max-width: 1199px) {
  .pages-content .fox-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pages-content .fox-split--flip .fox-split__media {
    order: 0;
  }
}
.pages-content .fox-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.pages-content .fox-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1199px) {
  .pages-content .fox-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .pages-content .fox-cards {
    grid-template-columns: 1fr;
  }
}
.pages-content .fox-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: all 0.28s ease;
}
.pages-content .fox-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--gray-100);
}
.pages-content .fox-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform 0.5s ease;
}
.pages-content .fox-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pages-content .fox-card h3 {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.5;
}
.pages-content .fox-card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.9;
}
.pages-content .fox-card ul {
  display: block;
  margin-top: 14px;
}
.pages-content .fox-card ul li {
  padding: 0;
  padding-inline-start: 28px;
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 8px;
}
.pages-content .fox-card ul li::before {
  top: 4px;
  inset-inline-start: 4px;
  width: 18px;
  height: 18px;
  background-size: 11px;
}
.pages-content .fox-card ul li:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}
.pages-content .fox-card__link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 15px;
  font-weight: bold;
  color: var(--primary);
}
.pages-content .fox-card__link:hover {
  text-decoration: none;
  color: var(--secondary);
}
.pages-content .fox-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 22px 44px -28px var(--secondary);
}
.pages-content .fox-card:hover .fox-card__media img {
  transform: scale(1.05);
}
.pages-content .fox-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  counter-reset: foxstep;
  padding-inline-start: 0;
  list-style: none;
}
.pages-content .fox-steps li {
  position: relative;
  counter-increment: foxstep;
  list-style: none;
  margin-top: 0;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 15px;
  line-height: 1.9;
  transition: all 0.25s ease;
}
.pages-content .fox-steps li::before {
  content: counter(foxstep);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
}
.pages-content .fox-steps li b, .pages-content .fox-steps li strong {
  display: block;
  color: var(--black);
  font-size: 17px;
  margin-bottom: 4px;
}
.pages-content .fox-steps li:hover {
  background: var(--white);
  box-shadow: 0 18px 36px -26px var(--secondary);
  transform: translateY(-3px);
}
@media (max-width: 1199px) {
  .pages-content .fox-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .pages-content .fox-steps {
    grid-template-columns: 1fr;
  }
}
.pages-content .fox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-inline-start: 0;
  list-style: none;
}
.pages-content .fox-pills li {
  list-style: none;
  margin-top: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--gray-100);
  border: 1px solid transparent;
  color: var(--black);
  font-size: 15px;
  line-height: 1.6;
  transition: all 0.25s ease;
}
.pages-content .fox-pills li::before {
  display: none;
}
.pages-content .fox-pills li:hover {
  border-color: var(--primary);
  background: var(--white);
  transform: none;
  box-shadow: none;
}
.pages-content .fox-quote {
  margin-top: 32px;
  padding: 32px 36px;
  border-radius: 24px;
  background: var(--gray-100);
}
.pages-content .fox-quote p {
  margin-top: 0;
  font-size: 20px;
  line-height: 1.8;
  color: var(--black);
}
.pages-content .fox-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 14px;
  color: var(--gray-500);
}
@media (max-width: 991px) {
  .pages-content .fox-quote {
    padding: 22px;
  }
  .pages-content .fox-quote p {
    font-size: 17px;
  }
}
.pages-content .fox-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
  padding-inline-start: 0;
  list-style: none;
}
.pages-content .fox-gallery li {
  list-style: none;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.pages-content .fox-gallery li::before {
  display: none;
}
.pages-content .fox-gallery li:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
}
.pages-content .fox-gallery li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
  transition: transform 0.5s ease;
}
.pages-content .fox-gallery li:hover img {
  transform: scale(1.06);
}
@media (max-width: 991px) {
  .pages-content .fox-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pages-content .fox-cta {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
  padding: 44px 48px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
  color: var(--white);
}
.pages-content .fox-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.pages-content .fox-cta > * {
  position: relative;
  z-index: 1;
}
.pages-content .fox-cta h3 {
  margin-top: 0;
  color: var(--white);
  font-size: 27px;
  line-height: 1.5;
}
.pages-content .fox-cta p {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
}
.pages-content .fox-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
@media (max-width: 991px) {
  .pages-content .fox-cta {
    padding: 28px 22px;
  }
  .pages-content .fox-cta h3 {
    font-size: 21px;
  }
  .pages-content .fox-cta p {
    font-size: 15px;
  }
}
.pages-content .fox-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 14px;
  background: var(--white);
  color: var(--primary);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  border: 2px solid var(--white);
  transition: all 0.25s ease;
}
.pages-content .fox-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6);
}
.pages-content .fox-btn--ghost {
  background: transparent;
  color: var(--white);
}
.pages-content .fox-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}
.pages-content .fox-btn--solid {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.pages-content .fox-btn--solid:hover {
  box-shadow: 0 16px 30px -18px var(--primary);
}
.pages-content .fox-btn--outline {
  background: transparent;
  border-color: var(--gray-200);
  color: var(--black);
}
.pages-content .fox-btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 16px 30px -22px var(--secondary);
}
.pages-content .fox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------------------------------------------------------------
   ٦) ظهور تدريجي عند التمرير
   ------------------------------------------------------------- */
.pages-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pages-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pages-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}