/* ========================= CSS (أضِفه إلى services.css) ========================= */
.svx-skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.svx-skip:focus{ left:8px; top:8px; width:auto; height:auto; padding:.4rem .6rem; background:#111; color:#fff; border-radius:8px; z-index:1000; }

.svx-wrap{ padding-block:48px 80px; }
.svx-hero{ text-align:center; margin-bottom:18px; }
.svx-hero__title{ font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem); }
.svx-hero__lead{ color:var(--nx-text-2, #aab); max-width:780px; margin:8px auto 16px; }

/* Chips sticky */
.svx-chips{ position:sticky; top:8px; z-index:6; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; backdrop-filter:blur(8px) saturate(120%); padding:8px 6px; }
.svx-chip{ padding:.5rem 1rem; border-radius:999px; font-weight:800; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:inherit; text-decoration:none; transition:.2s; }
.svx-chip:hover{ transform:translateY(-1px); }
.svx-chip.is-active{ background:linear-gradient(135deg,#6b2bd8,#8a5ae6); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(107,43,216,.28); }

/* Rows */
.svx-row{ display:grid; grid-template-columns: 1.1fr 1fr; gap:22px; align-items:center; margin:30px 0; }
.svx-row--alt{ grid-template-columns: 1fr 1.1fr; }
.svx-row__media img{ width:100%; height:auto; border-radius:18px; box-shadow:0 14px 44px rgba(0,0,0,.24); transition:transform .3s ease; }
.svx-row__text h2{ font-size:clamp(1.4rem,3vw,2rem); margin-bottom:6px; }
.svx-bullets{ margin:10px 0 14px; padding:0 1rem; }
.svx-bullets li{ margin:.3rem 0; }

/* Buttons + ripple */
.svx-btn{ position:relative; display:inline-block; border-radius:12px; padding:.7rem 1.1rem; font-weight:800; text-decoration:none; color:#fff; background:linear-gradient(135deg,#6b2bd8,#8a5ae6); border:0; box-shadow:0 12px 28px rgba(107,43,216,.28); transition:transform .18s ease; }
.svx-btn:hover{ transform:translateY(-2px); }
.svx-btn--ghost{ background:transparent; color:inherit; border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.svx-btn::after{
  content:""; position:absolute; inset:auto 50% 50% auto; width:0;height:0; background:rgba(255,255,255,.35);
  border-radius:50%; transform:translate(-50%,-50%); transition:width .45s ease,height .45s ease,opacity .5s;
}
.svx-btn:active::after{ width:220px; height:220px; opacity:0; }

/* Testimonials */
.svx-testimonials{ margin:36px 0; text-align:center; }
.svx-testimonials h3{ margin-bottom:14px; }
.svx-t-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.svx-t{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:16px; }
.svx-t blockquote{ margin:0 0 8px; }

/* FAQ */
.svx-faqs{ margin:32px 0; }
.svx-faq{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.8rem 1rem; margin:.6rem 0; }
.svx-faq > summary{ cursor:pointer; font-weight:800; }
.svx-faq[open]{ box-shadow:0 10px 28px rgba(0,0,0,.20); }

/* Pricing */
.svx-pricing{ margin:40px 0; text-align:center; }
.svx-p-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch; }
.svx-p{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px; display:grid; gap:.6rem; }
.svx-p--pop{ border-color:#8a5ae6; box-shadow:0 18px 44px rgba(107,43,216,.28); }
.svx-p .price{ font-weight:900; }

/* CTA ثابت */
.svx-fab-cta{ position:fixed; inset:auto 16px 16px 16px; display:flex; gap:8px; justify-content:center; z-index:50; }
@media (min-width: 768px){ .svx-fab-cta{ inset:auto 24px 24px auto; } }

/* Light mode tweaks (اختياري) */
html[data-bs-theme="light"] .svx-t,
html[data-bs-theme="light"] .svx-faq,
html[data-bs-theme="light"] .svx-p{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.08); }






/* ===== Testimonials Slider ===== */
.svx-t-head{
  text-align:center; margin: 10px 0 16px; font-weight:900; font-size:clamp(1.2rem,2.2vw,1.6rem);
}
.svx-t-slider{
  position:relative; overflow:hidden;
  padding: 10px clamp(8px, 2.4vw, 18px) 24px;
}
.svx-t-track{
  display:flex; gap:16px;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.svx-t-card{
  flex: 0 0 clamp(280px, 32vw, 360px);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: clamp(14px, 2.2vw, 18px);
  color: inherit;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  position: relative;
}
html[data-bs-theme="light"] .svx-t-card{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,15,26,.10);
}
.svx-t-card blockquote{
  margin: 0 0 10px;
  line-height: 1.85;
  position: relative;
  padding-inline-start: 26px;
}
.svx-t-card blockquote::before,
.svx-t-card blockquote::after{
  content: "“";
  position:absolute; inset: -6px auto auto 0;
  font-weight:900; opacity:.5; color:#d6ff96; font-size: 22px;
}
[dir="ltr"] .svx-t-card blockquote{ padding-inline-start: 26px; }
[dir="ltr"] .svx-t-card blockquote::before{ left:0; right:auto; }
[dir="rtl"] .svx-t-card blockquote{ padding-inline-end: 26px; }
[dir="rtl"] .svx-t-card blockquote::before{ right:0; left:auto; content:"“"; }

.svx-t-card figcaption{
  opacity:.75; font-size:.95rem;
}

/* Dots */
.svx-t-dots{
  display:flex; gap:8px; justify-content:center; margin-top:14px;
}
.svx-t-dot{
  inline-size: 26px; block-size: 6px;
  border-radius: 999px; background: rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.18);
  transition: transform .25s, background .25s;
  cursor: pointer;
}
html[data-bs-theme="light"] .svx-t-dot{
  background: rgba(11,15,26,.12);
  border-color: rgba(11,15,26,.10);
}
.svx-t-dot.is-active{
  background: linear-gradient(135deg, #6b2bd8, #8a5ae6);
  transform: scale(1.15);
}

/* لمسة لطيفة عند الهوفر */
.svx-t-card:hover{ transform: translateY(-3px); transition: transform .25s ease; }



/* ===== خدمات: شبكة صفين تتناوب تلقائيًا مع دعم RTL/LTR ===== */
.svx-row{
  --gap: clamp(18px,3vw,28px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media text";
  gap: var(--gap);
  align-items:center;
  padding: clamp(16px,2.4vw,26px);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
html[data-bs-theme="light"] .svx-row{
  background: rgba(11,15,26,.04);
  border-color: rgba(11,15,26,.10);
}
.svx-row.in{ opacity:1; transform:none; }

.svx-row__media{ grid-area: media; display:grid; place-items:center; }
.svx-row__text { grid-area: text; }

.svx-row__media picture, .svx-row__media img{
  max-width:min(520px, 92%); height:auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
  transition: transform .35s ease;
}
.svx-row:hover .svx-row__media img{ transform: translateY(-3px); }

.svx-row__text h2{ font-weight:900; font-size:clamp(1.3rem,2.5vw,1.9rem); margin:0 0 8px; }
.svx-row__text p{ color: var(--muted, #aab3c2); margin:0 0 10px; }
.svx-bullets{ margin:0 0 12px; padding-inline-start: 1.1rem; }
.svx-bullets li{ margin:.25rem 0; }
.svx-cta{ display:flex; flex-wrap:wrap; gap:10px; }

/* تناوب تلقائي: الصف الزوجي يعكس المناطق */
.svx-row:nth-of-type(even){ grid-template-areas: "text media"; }

/* دعم اتجاه الصفحة: في LTR نعكس المنطق تلقائياً */
html[dir="ltr"] .svx-row{ grid-template-areas: "text media"; }
html[dir="ltr"] .svx-row:nth-of-type(even){ grid-template-areas: "media text"; }

/* حركة “Flip” عند تمرير الماوس: تبديل مؤقت للترتيب */
.svx-row.is-swapped{ grid-template-areas: "text media"; }
html[dir="ltr"] .svx-row.is-swapped{ grid-template-areas: "media text"; }

/* استجابة */
@media (max-width: 980px){
  .svx-row,
  html[dir="ltr"] .svx-row,
  .svx-row:nth-of-type(even),
  html[dir="ltr"] .svx-row:nth-of-type(even),
  .svx-row.is-swapped,
  html[dir="ltr"] .svx-row.is-swapped{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "text";
  }
}

/* يجعل عناصر النص داخل كل صف تظهر بالتتابع */
.svx-row__text > *{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, 0s); /* نضبطها من JS */
}

/* عند دخول الصف للرؤية */
.svx-row.in .svx-row__text > *{
  opacity: 1;
  transform: none;
}

/* كلمات العنوان/الفقرة تُعرض كلمة-كلمة */
.svx-word{
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: var(--w-delay, 0s); /* نضبطها من JS */
}

/* لما يدخل الصف للرؤية تُظهر الكلمات */
.svx-row.in .svx-word{
  opacity: 1;
  transform: none;
}



.svx-clients-grid{
  --nx1: var(--nx-primary, #6b2bd8);
  --nx2: var(--nx-primary-2, #8a5ae6);
  --fg:  var(--nx-text, #fff);
  --muted: var(--nx-text-2, #a1a1b2);
}
html[data-bs-theme="light"] .svx-clients-grid{ --fg:#0b0f1a; --muted:#5a6072; }

/* =================== SECTION HEAD =================== */
.svx-cg-head{
  font-weight: 900;
  text-align: center;
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  background: linear-gradient(90deg, var(--nx1), var(--nx2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =================== GRID =================== */
.svx-cg-wrap{
  --min: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  gap: clamp(12px, 2.4vw, 18px);
  padding-inline: clamp(10px, 2vw, 14px);
}

/* =================== CARD =================== */
.svx-cg-card{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  padding: 14px;
  border-radius: 18px;
  color: var(--fg);
  background: rgba(17,21,29,.86);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
html[data-bs-theme="light"] .svx-cg-card{
  background: rgba(255,255,255,.92);
  border-color: rgba(11,15,26,.10);
}
.svx-cg-card.in{ opacity:1; transform:none; }
.svx-cg-card:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 22px 56px rgba(0,0,0,.30); }

/* ICON BOX */
.svx-cg-icon{
  inline-size: 56px; block-size: 56px; display:grid; place-items:center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(107,43,216,.20), rgba(138,90,230,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.svx-cg-icon svg{ display:block; }

/* TEXTS */
.svx-cg-name{ margin:0 0 4px; font-weight:900; font-size: 1.05rem; }
.svx-cg-loc{ margin:0; color: var(--muted); font-size:.95rem; }

/* Small devices tweak */
@media (max-width:480px){
  .svx-cg-wrap{ --min: 200px; }
}