/* ============================================================
   ايجاد | performance.css
   ------------------------------------------------------------
   بيتحمّل بعد style.css عشان يتجاوز القواعد التقيلة.
   ما بيغيّرش الشكل — بيغيّر إزاي المتصفح بيرسمه.

   الترتيب حسب التأثير الفعلي على التقل:
     ١. مزج الصفحة كلها (mix-blend-mode)
     ٢. تمويه الخلفية (backdrop-filter)
     ٣. رسم التدرّج المخروطي كل فريم
     ٤. رسم الأقسام اللي برة الشاشة
   ============================================================ */

/* ============================================================
   ١ — طبقة الضوضاء
   طبقة ثابتة على الشاشة كلها بـ mix-blend-mode. ده بيجبر
   المتصفح يمزج محتوى الصفحة كله في كل فريم سكرول.
   وصورتها أصلًا مش موجودة على السيرفر، يعني تكلفة بدون مقابل.
   ============================================================ */
.noise-overlay{display:none !important;}

/* ============================================================
   ٢ — تمويه الخلفية
   backdrop-filter أغلى خاصية في CSS: بيعيد تمويه اللي ورا
   العنصر مع كل حركة. استبدلناه بخلفية صلبة شبه شفافة —
   الفرق البصري شبه معدوم والفرق في الأداء كبير.
   ============================================================ */
.video-frame,
.bento-grid,
.bento-card,
.center-icon-inner,
.step-card,
.svc-visual,
.svc-list,
.svc-item{
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}
.bento-card,
.step-card,
.svc-item{background-color:rgba(31,25,87,.72) !important;}
.bento-grid,
.svc-list,
.svc-visual{background-color:rgba(23,18,66,.6) !important;}
.video-frame{background-color:rgba(16,13,44,.8) !important;}

/* ============================================================
   ٣ — الإطار الناري
   التدرّج المخروطي المتحرك بيتعاد رسمه بالكامل كل فريم،
   ومضروب في عدد الكروت. خليناه يلف عند المرور بس.
   ============================================================ */
.service-card::before,
.svs-card::before{animation:none !important;}
.service-card:hover::before{animation:fire-rotate 3s linear infinite !important;}
.svs-card:hover::before{animation:fire-rotate 6s linear infinite !important;}

/* ============================================================
   ٤ — الأقسام اللي برة الشاشة
   content-visibility بيخلي المتصفح يتخطى تخطيط ورسم أي قسم
   لسه ما وصلتوش. contain-intrinsic-size بيحجزله ارتفاع
   تقريبي عشان شريط السكرول ما ينطش.
   ============================================================ */
#process,
#app-showcase,
#portfolio,
#pricing,
#testimonials,
#faq,
#latest-articles{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* ============================================================
   ٥ — إيقاف الحركة والتبويب مقفول
   ٢٣ أنيميشن مستمر كانوا شغالين حتى والصفحة في الخلفية.
   الكلاس بيتضاف من performance.js
   ============================================================ */
body.is-idle *,
body.is-idle *::before,
body.is-idle *::after{
  animation-play-state:paused !important;
}

/* ============================================================
   ٦ — الهيرو
   ============================================================ */

/* مفيش ارتفاع محجوز بالتقدير — الحروف نفسها موجودة طول
   الوقت وواخدة مكانها، سواء ظاهرة أو مخفية. يعني ارتفاع
   العنوان ثابت رياضيًا ومفيش أي حاجة بتتحرك. */
.hero h1{margin-bottom:24px;}

/* ---------- الكتابة المتحركة ---------- */
.hero-type .ht-fixed{color:var(--text);}
.hero-type .ht-word{font-style:normal;color:var(--emerald);}

/* طبقتين فوق بعض:
   -------------------------------------------------------
   «الشبح» نسخة من الجملة كاملة، مخفية بالـ visibility —
   مخفية بس لسه واخدة مكانها بالكامل. هي اللي بتحدّد
   ارتفاع العنوان، فالارتفاع مربوط بالجملة الكاملة طول
   الوقت ومفيش أي حاجة بتتحرك وهو بيكتب أو بيمسح.

   و«الحية» هي اللي بيتكتب فيها فعليًا، طافية فوق الشبح
   بالـ absolute فمش بتاخد مساحة خالص. */
.hero-type{position:relative;}

.hero-type .ht-ghost{visibility:hidden;}

.hero-type .ht-live{
  position:absolute;
  top:0;
  inset-inline-start:0;
  inset-inline-end:0;
}

/* المؤشّر بيقف في آخر النص المكتوب، فبيتحرك معاه
   من غير ما نحرّك أي عنصر */
.hero-type .ht-caret{
  display:inline-block;
  width:2px;
  height:.72em;
  margin-inline-start:.1em;
  vertical-align:-.02em;
  background:linear-gradient(180deg,var(--emerald),rgba(239,68,40,.35));
  border-radius:2px;
  animation:ht-pulse 1.6s ease-in-out infinite;
}
@keyframes ht-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.18;}
}

/* وهي واقفة بالجملة كاملة، المؤشّر بيهدى أكتر */
.hero-type.is-resting .ht-caret{
  animation-duration:2.4s;
  opacity:.6;
}

/* الكروت العايمة بتتخفي على الشاشات المتوسطة —
   كانت بتزوّد ارتفاع الهيرو من غير ما تبان كويس */
@media (max-width:1150px){
  .float-card{display:none;}
}

.hero-sub{max-width:660px;margin-inline:auto;}
.hero-cta-group{margin-top:30px;}

/* ============================================================
   ٧ — شريط الأرقام
   نصوص عارية من غير كروت. الفخامة جاية من التباعد
   والتدرّج اللوني والخط الذهبي الرفيع، مش من الصناديق.
   ============================================================ */
.hero-trust{
  margin-top:clamp(52px,7vw,84px) !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,3vw,40px);
  max-width:900px;
  margin-inline:auto !important;
  padding-top:clamp(28px,3.5vw,40px);
  border-top:1px solid var(--line);
}

.trust-item{
  padding:0 !important;
  border:0 !important;
  text-align:center;
  position:relative;
}
.trust-item:last-child{border:0 !important;}

/* فاصل شعري بين الأعمدة بدل الحدود السميكة */
.trust-item:not(:last-child)::after{
  content:"";position:absolute;
  top:14%;bottom:14%;inset-inline-start:calc(clamp(18px,3vw,40px) / -2);
  width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 30%,var(--line) 70%,transparent);
}

.trust-num{
  font-size:clamp(30px,4.6vw,46px) !important;
  font-weight:900 !important;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,#fff 0%,#ffd9cf 35%,var(--emerald) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:filter .4s ease;
}

/* خط ذهبي رفيع تحت الرقم بيتمدّ عند المرور */
.trust-item::before{
  content:"";position:absolute;
  left:50%;transform:translateX(-50%);
  top:calc(1em + clamp(30px,4.6vw,46px) * .55);
  width:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width .5s cubic-bezier(.22,.9,.3,1), opacity .4s ease;
  opacity:.55;
}
.trust-item:hover::before{width:54px;opacity:1;}
.trust-item:hover .trust-num{filter:brightness(1.12);}

.trust-label{
  font-size:12px !important;
  color:var(--text-faint) !important;
  margin-top:20px !important;
  line-height:1.6;
  letter-spacing:.04em;
  font-weight:600;
}

@media (max-width:760px){
  .hero-trust{grid-template-columns:repeat(2,1fr);gap:30px 18px;}
  .trust-item:nth-child(2)::after{display:none;}
  .trust-label{font-size:11.5px !important;margin-top:16px !important;}
}
@media (max-width:400px){
  .hero-trust{grid-template-columns:1fr 1fr;gap:26px 12px;}
  .trust-item::after{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* لو المستخدم طالب تقليل الحركة، الجملة بتظهر كاملة
     من غير كتابة ولا مؤشّر (performance.js بيتولى ده) */
  .hero-type .ht-caret{display:none;}
}


/* ============================================================
   ٨ — الموبايلات في قسم تصميم المتاجر
   كل جهاز بيتمايل بزاوية مختلفة وبيطفو بإيقاع مختلف،
   فالمشهد يبان حي مش صورة ثابتة.
   ============================================================ */
.phones-row{perspective:1200px;}

.phone-shot{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),
             box-shadow .6s ease;
}

/* الجهاز اليمين — مايل للداخل وطافي لتحت */
.phones-row .phone-shot:first-child{
  transform:rotateY(14deg) rotate(3deg) translateY(10px);
  animation:phone-drift-a 7s ease-in-out infinite;
}
/* الأوسط — واقف قدام ومرفوع */
.phones-row .phone-shot-mid{
  transform:translateY(-14px) scale(1.04);
  animation:phone-drift-b 6s ease-in-out infinite;
}
/* الشمال — مايل للناحية التانية */
.phones-row .phone-shot:last-child{
  transform:rotateY(-14deg) rotate(-3deg) translateY(10px);
  animation:phone-drift-c 8s ease-in-out infinite;
}

@keyframes phone-drift-a{
  0%,100%{transform:rotateY(14deg) rotate(3deg) translateY(10px);}
  50%    {transform:rotateY(10deg) rotate(1.6deg) translateY(-6px);}
}
@keyframes phone-drift-b{
  0%,100%{transform:translateY(-14px) scale(1.04);}
  50%    {transform:translateY(-30px) scale(1.055) rotate(-1deg);}
}
@keyframes phone-drift-c{
  0%,100%{transform:rotateY(-14deg) rotate(-3deg) translateY(10px);}
  50%    {transform:rotateY(-10deg) rotate(-1.6deg) translateY(-8px);}
}

/* عند المرور على الصف كله: الأجهزة بتستوي وتتقارب */
.phones-row:hover .phone-shot{animation-play-state:paused;}
.phones-row:hover .phone-shot:first-child{transform:rotateY(6deg) rotate(1deg) translateY(0);}
.phones-row:hover .phone-shot-mid{transform:translateY(-20px) scale(1.06);}
.phones-row:hover .phone-shot:last-child{transform:rotateY(-6deg) rotate(-1deg) translateY(0);}

.phone-shot:hover{box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 46px rgba(239,68,40,.14);}

@media (max-width:700px){
  .phones-row{perspective:none;}
  .phones-row .phone-shot,
  .phones-row .phone-shot-mid{animation:none;transform:none;}
}

/* ============================================================
   ٩ — سلايدر المقالات
   ============================================================ */
.blog-slider{position:relative;}

.blog-slider__viewport{
  overflow:hidden;
  padding:8px 6px 14px;
  margin:-8px -6px -14px;
}

.blog-slider__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 48px) / 3);
  gap:24px;
  transition:transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.blog-slider.is-drag .blog-slider__track{transition:none;}

/* ---------- الكارت ---------- */
.blog-slider .post-card{
  height:100%;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(168deg,rgba(35,28,96,.62),rgba(15,12,44,.82));
  border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),
             border-color .45s ease, box-shadow .45s ease;
}
.blog-slider .post-card:hover{
  transform:translateY(-7px);
  border-color:rgba(239,68,40,.38);
  box-shadow:0 30px 62px rgba(0,0,0,.5);
}
.blog-slider .post-card-link{
  display:flex;flex-direction:column;height:100%;
  color:inherit;text-decoration:none;
}

.blog-slider .post-card-image{
  position:relative;overflow:hidden;
  /* 429×268 — نفس مقاس الصور اللي بترفعها */
  aspect-ratio:429 / 268;background:#0e0b2c;flex-shrink:0;
}
.blog-slider .post-card-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.blog-slider .post-card:hover .post-card-image img{transform:scale(1.08);}
/* تلاشي أسفل الصورة يوصّلها بجسم الكارت */
.blog-slider .post-card-image::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(15,12,44,.95),transparent);
  pointer-events:none;
}
.blog-slider .post-card-placeholder{
  width:100%;height:100%;
  background:linear-gradient(140deg,#2b2175,#4a2a8c 55%,#c23015);
}

.blog-slider .post-card-body{
  padding:20px 22px 24px;
  display:flex;flex-direction:column;flex:1;
}
.blog-slider .post-card-cat{
  align-self:flex-start;
  font-size:11.5px;font-weight:700;color:var(--gold-light,#f0dcb0);
  background:rgba(212,175,122,.12);
  border:1px solid rgba(212,175,122,.28);
  padding:4px 12px;border-radius:100px;margin-bottom:13px;
}
.blog-slider .post-card h3{
  font-size:17.5px;font-weight:800;line-height:1.55;
  color:var(--text);margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-slider .post-card p{
  font-size:13.5px;line-height:1.85;color:var(--text-dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:16px;
}
/* سطر القراءة بيتولد من الـCSS — مش محتاج تعديل في البليد */
.blog-slider .post-card-body::after{
  content:"اقرأ المقال ←";
  margin-top:auto;
  font-size:13px;font-weight:700;color:var(--emerald);
  transition:letter-spacing .35s ease;
}
.blog-slider .post-card:hover .post-card-body::after{letter-spacing:.04em;}

/* ---------- التنقل ---------- */
.blog-slider__nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:30px;
}
.blog-slider__arrow{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--text);display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,opacity .25s ease;
}
.blog-slider__arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.blog-slider__arrow:hover:not(:disabled){background:var(--emerald);border-color:transparent;}
.blog-slider__arrow:disabled{opacity:.28;cursor:not-allowed;}
.blog-slider__arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.blog-slider__dots{display:flex;gap:8px;}
.blog-slider__dot{
  width:8px;height:8px;border-radius:50%;background:var(--line);
  border:0;padding:0;cursor:pointer;transition:all .3s ease;
}
.blog-slider__dot.is-on{width:26px;border-radius:100px;background:var(--emerald);}

@media (max-width:980px){
  .blog-slider__track{grid-auto-columns:calc((100% - 24px) / 2);}
}
@media (max-width:640px){
  .blog-slider__track{grid-auto-columns:100%;gap:18px;}
  .blog-slider .post-card h3{font-size:16.5px;}
}


/* ============================================================
   ١٠ — آراء العملاء على الجوال
   الأعمدة الرأسية المتحركة مش مناسبة لشاشة ضيقة —
   بتاخد ارتفاع كبير والكروت بتعدّي بسرعة.
   بقت شريط أفقي واحد بالسحب والالتقاط.
   ============================================================ */
@media (max-width:900px){
  .testi-columns{
    display:flex !important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;
    padding:4px 20px 16px;
    margin-inline:-20px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
  }
  .testi-columns::-webkit-scrollbar{display:none;}
  .testi-columns.is-dragging{cursor:grabbing;scroll-snap-type:none;}

  /* الأعمدة بتذوب فالكروت تبقى أولاد مباشرين للشريط */
  .testi-col{
    display:contents !important;
    animation:none !important;
    margin-top:0 !important;
  }

  .testi-card{
    flex:0 0 clamp(248px,76vw,330px);
    scroll-snap-align:center;
    margin:0 !important;
  }

  .testi-columns::after{
    content:"";flex:0 0 1px;
  }
}

/* تلميح السحب تحت الشريط */
@media (max-width:900px){
  .testi-hint{
    display:block;text-align:center;
    font-size:12px;color:var(--text-faint);
    margin-top:14px;
  }
}
.testi-hint{display:none;}

/* ============================================================
   ١١ — السحب بالماوس لأي شريط تمرير أفقي
   اللمس شغّال أصلاً بشكل طبيعي. ده بيضيف نفس السلوك
   للماوس على الديسكتوب والتابلت.
   ============================================================ */
[data-drag-scroll]{cursor:grab;}
[data-drag-scroll].is-dragging{cursor:grabbing;user-select:none;}
[data-drag-scroll].is-dragging a{pointer-events:none;}


/* ============================================================
   ١٢ — شرايط المنصات
   ============================================================ */

/* ---------- سرعة الشريط اللي فوق ----------
   الرقم ده مدة اللفة الكاملة. أكبر = أبطأ.
   الأصل كان 42s في style.css، والسطر ده بيتجاوزه.

      42s = السرعة القديمة
      70s = الحالي
     100s = بطيء جدًا وهادي

   غيّر الرقم وبس — مش محتاج تلمس style.css خالص. */
.partners__row{animation-duration:70s;}


/* خانة اللوجو الناقص: بدل ما تبقى فراغ، إطار متقطّع
   واضح إنه مكان محجوز — تحطّ اللوجو وتشتغل على طول */
.partner__slot.is-empty{
  background:rgba(255,255,255,.05) !important;
  border:1px dashed rgba(255,255,255,.2);
}
.partner__slot.is-empty img{display:none;}



/* ============================================================
   ١٣ — الشريط المنقسم اللي تحت
   ============================================================ */

/* ---------- حجم اللوجوهات ----------
   --logo-h هو ارتفاع اللوجو. أكبر = أوضح.
   وكبّرت ارتفاع الشريط معاه عشان يفضل في نفس النِسَب. */
.cb{--logo-h:34px;}
.cb__half{height:104px;}
.cb-logo img{max-width:150px;}

@media (max-width:760px){
  .cb{--logo-h:26px;--gap:34px;}
  .cb__half{height:76px;}
  .cb-logo img{max-width:118px;}
}
@media (max-width:420px){
  .cb{--logo-h:22px;--gap:26px;}
  .cb__half{height:66px;}
  .cb-logo img{max-width:98px;}
}

/* ---------- علامة إيجاد في النص ----------
   الرقم اتشال، ومكانه علامة البراند عند التقاء
   النصّين. حجمها بيتظبط بالمقاس لوحده فمفيش حاجة
   بتطلع كبيرة على الجوال. */
.cb__mid strong{display:none;}

.cb-mark{
  display:block;
  margin-inline:auto;
  width:auto;
  height:clamp(26px,3.4vw,44px);
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(239,68,40,.45));
  animation:cb-mark-pulse 3s ease-in-out infinite;
}
@keyframes cb-mark-pulse{
  0%,100%{filter:drop-shadow(0 0 12px rgba(239,68,40,.38));}
  50%    {filter:drop-shadow(0 0 22px rgba(239,68,40,.7));}
}

/* الفتحة بقت أضيق لأنها مابقتش شايلة رقم */
.cb{--midw:92px;}
@media (max-width:760px){ .cb{--midw:64px;} }
@media (max-width:420px){ .cb{--midw:52px;} }

/* الحدّ لازم يفضل أطول من الشريط عشان يطلع من فوق وتحت،
   والشريط كبر فلازم يكبر معاه */
.cb__bar{height:116px;}
@media (max-width:760px){ .cb__bar{height:88px;} }
@media (max-width:420px){ .cb__bar{height:78px;} }


/* ============================================================
   ١٤ — نعومة السكرول
   ============================================================ */

/* .bg-mesh عليها will-change:transform وهي مش بتتحرك خالص.
   يعني المتصفح بيحجزلها طبقة مستقلة بحجم الشاشة كلها فيها
   ٥ تدرجات لونية كبيرة — ذاكرة كارت شاشة بتتحرق على حاجة
   ساكنة. بنلغي الحجز. */
.bg-mesh{will-change:auto !important;}

/* الزينة اللي ورا المحتوى (النجوم واللمعات والكرات
   والشهب) بتفضل شغالة على طول وبتزاحم السكرول على
   الكارت. بنوقفها وانت بتنزل وترجع تشتغل بعدها بلحظة —
   محدش بيبص للنجوم وهو بيسكرول. */
body.is-scrolling .star-layer,
body.is-scrolling .bg-sparkle,
body.is-scrolling .ambient-orb,
body.is-scrolling .footer-orb,
body.is-scrolling .footer-meteor,
body.is-scrolling .blob-1,
body.is-scrolling .blob-2{
  animation-play-state:paused !important;
}

/* الشرايط المتحركة بتفضل شغالة حتى وهي برة الشاشة.
   الكلاس ده بيتحط من الجافاسكريبت لما الشريط يطلع برة. */
.is-offscreen .partners__row,
.is-offscreen .cb__row,
.is-offscreen .cb__bar{
  animation-play-state:paused !important;
}