/* ==========================================================================
   050 STORE — CUSTOM CSS الكامل والمنظم

   ترتيب العناصر داخل الملف:
   1) السلايدر الرئيسي        .hero-050-main
   2) شريط الثقة              .trust-050-bar
   3) تصفح الأقسام            .shop-050-squares
   4) الهيرو المتحرك          .hero050
   5) بوب أب العروض           .popup050-slider
   6) تحسينات الأداء العامة

   ملاحظة: لا تحذف جزءًا منفردًا إلا إذا كنت متأكدًا من العنصر المرتبط به.
   ========================================================================== */


/* ==========================================================================
   العنصر 1: السلايدر الرئيسي — HERO-050-MAIN
   تعديل ارتفاع وعرض السلايدر الرئيسي على الديسكتوب
   ========================================================================== */


@media (min-width: 992px) {
  .hero-050-main {
    --hero-desktop-height: 500px; /* غيّرها إلى 680 أو 720 حسب النتيجة */
  }

  .hero-050-main,
  .hero-050-main .swiper,
  .hero-050-main .swiper-wrapper,
  .hero-050-main .swiper-slide {
    height: var(--hero-desktop-height) !important;
  }

  .hero-050-main .swiper-slide {
    padding: 18px 18px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .hero-050-main img,
  .hero-050-main picture img,
  .hero-050-main video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 22px !important;
  }
}






/* ==========================================================================
   العنصر 2: شريط الثقة — TRUST-050-BAR
   رفع مستقيم للبطاقة الواحدة دون ميلان الصف الكامل
   ========================================================================== */

.trust-050-bar {
  position: relative !important;
  transform: none !important;
  perspective: none !important;
  transform-style: flat !important;
}

.trust-050-bar .trust-050-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translate3d(0, 0, 0) !important;
  transform-origin: center center !important;
  transform-style: flat !important;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .34s ease,
    border-color .3s ease,
    background-color .3s ease !important;
}

.trust-050-bar .trust-050-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(
    135deg,
    rgba(16,103,255,.09),
    rgba(255,255,255,.82),
    rgba(212,175,55,.08)
  ) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}

.trust-050-bar .trust-050-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  border-radius: inherit !important;
  background: linear-gradient(
    115deg,
    rgba(16,103,255,.55),
    rgba(212,175,55,.5),
    rgba(16,103,255,.18)
  ) border-box !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}

.trust-050-bar .trust-050-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.trust-050-bar .trust-050-card img,
.trust-050-bar .trust-050-card svg,
.trust-050-bar .trust-050-card i {
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: center !important;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    filter .3s ease,
    color .3s ease !important;
}

.trust-050-bar .trust-050-card h3,
.trust-050-bar .trust-050-card h4,
.trust-050-bar .trust-050-card p,
.trust-050-bar .trust-050-card [class*="title"],
.trust-050-bar .trust-050-card [class*="desc"] {
  transform: none !important;
  animation: none !important;
  transition: color .3s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .trust-050-bar .trust-050-card:hover {
    transform: translate3d(0,-8px,0) scale(1.018) !important;
    box-shadow:
      0 18px 36px rgba(15,35,75,.12),
      0 8px 18px rgba(16,103,255,.08) !important;
    border-color: rgba(16,103,255,.25) !important;
  }

  .trust-050-bar .trust-050-card:hover::before,
  .trust-050-bar .trust-050-card:hover::after {
    opacity: 1 !important;
  }

  .trust-050-bar .trust-050-card:hover img,
  .trust-050-bar .trust-050-card:hover svg,
  .trust-050-bar .trust-050-card:hover i {
    transform: translate3d(0,-5px,0) scale(1.1) !important;
    filter: drop-shadow(0 8px 12px rgba(16,103,255,.24)) !important;
  }

  .trust-050-bar .trust-050-card:hover h3,
  .trust-050-bar .trust-050-card:hover h4,
  .trust-050-bar .trust-050-card:hover [class*="title"] {
    color: #1067ff !important;
  }
}

@media (hover:none), (pointer:coarse) {
  .trust-050-bar .trust-050-card,
  .trust-050-bar .trust-050-card:hover {
    transform: none !important;
  }

  .trust-050-bar .trust-050-card::before,
  .trust-050-bar .trust-050-card::after {
    display: none !important;
  }
}



/* ==========================================================================
   العنصر 3: تصفح الأقسام — SHOP-050-SQUARES
   انتقال سريع جدًا مع صورة بديلة جاهزة تملأ مساحة الصورة بالكامل
   ========================================================================== */

.shop-050-squares {
  position: relative !important;
}

.shop-050-squares .swiper-slide {
  position: relative !important;
  overflow: visible !important;
}

.shop-050-squares .swiper-slide > a {
  position: relative !important;
  display: block !important;
  color: inherit !important;
  text-decoration: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  isolation: isolate !important;
  -webkit-tap-highlight-color: transparent !important;
}

.shop-050-squares .category050-image-area {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #fff !important;
  isolation: isolate !important;
}

.shop-050-squares .category050-original-image {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transition: opacity .10s linear !important;
}

.shop-050-squares .category050-hover-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #fff !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(0,0,0) scale(1.015);
  transform-origin: center center !important;
  transition:
    opacity .10s linear,
    visibility 0s linear .10s !important;
  pointer-events: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

.shop-050-squares .category050-hover-image.is-ready {
  visibility: visible !important;
}

@media (hover:hover) and (pointer:fine) {
  .shop-050-squares .swiper-slide > a:hover .category050-hover-image.is-ready,
  .shop-050-squares .swiper-slide > a:focus-visible .category050-hover-image.is-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transition:
      opacity .10s linear,
      visibility 0s !important;
    animation: category050QuickPulse 1.65s ease-in-out infinite !important;
  }

  .shop-050-squares .swiper-slide > a:hover .category050-original-image,
  .shop-050-squares .swiper-slide > a:focus-visible .category050-original-image {
    opacity: 0 !important;
  }
}

@keyframes category050QuickPulse {
  0%,100% { transform: translate3d(0,0,0) scale(1.015); }
  50% { transform: translate3d(0,0,0) scale(1.055); }
}

.shop-050-squares .swiper-slide > a:focus-visible {
  outline: 2px solid rgba(212,175,55,.88) !important;
  outline-offset: 4px !important;
}

.shop-050-squares .swiper-slide h2,
.shop-050-squares .swiper-slide h3,
.shop-050-squares .swiper-slide h4,
.shop-050-squares .swiper-slide p,
.shop-050-squares .swiper-slide span:not(.category050-image-area),
.shop-050-squares .swiper-slide strong,
.shop-050-squares .swiper-slide [class*="title"],
.shop-050-squares .swiper-slide [class*="desc"],
.shop-050-squares .swiper-slide [class*="subtitle"] {
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.shop-050-squares .swiper-button-next,
.shop-050-squares .swiper-button-prev,
.shop-050-squares [class*="swiper-button"],
.shop-050-squares [class*="slider-arrow"] {
  animation: none !important;
  filter: none !important;
}

@media (hover:none), (pointer:coarse) {
  .shop-050-squares .category050-hover-image {
    display: none !important;
    animation: none !important;
  }

  .shop-050-squares .category050-original-image {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .shop-050-squares .category050-hover-image {
    animation: none !important;
    transition: opacity .08s linear !important;
  }
}



.hero050,
.hero050 *,
.hero050 *::before,
.hero050 *::after{ box-sizing:border-box; }

.hero050{
  --bg-0:#080503; --bg-1:#170F09; --bg-2:#2C170D;
  --copper:#E8804D; --copper-2:#F7B36B; --gold:#FFD98A;
  --copper-deep:#9A4A1F; --copper-deeper:#6E3213;
  --ink:#FBF6EF; --ink-dim:#D8C7B5; --ink-faint:#B39F8A;
  --text-ink:#FBF6EF; --text-dim:#D8C7B5; --text-faint:#B39F8A;
  --chip-bg:rgba(12,8,5,.82); --chip-border:rgba(232,128,77,.28);
  --slot: 2s;                  /* duration each item stays "active" in any scene */
  --cycle: 44s;                 /* full master loop: orbit 12s + flip-card 8s + laser 6s + real-image 14s + 4 quick 3D transitions */
  position:relative; display:flex;
  width:100vw; max-width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; margin-top:0; margin-bottom:0;
  min-height:clamp(480px, 50vh, 560px);
  overflow:hidden;
  contain:none;
  content-visibility:visible;
  background:radial-gradient(120% 140% at 85% 10%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  border-bottom:1px solid rgba(232,128,77,.14);
  font-family:"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  direction:rtl; text-align:right;
  isolation:isolate;
}

/* 🎨 نظام النكسس الهولوغرامي */
/* 🏬 صورة المتجر — خفيفة وخلفية أغمق لضمان وضوح الكتابة تماماً */
.hero050__store-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero050__store-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  filter:grayscale(.35) sepia(.14) brightness(.42) contrast(1.05) saturate(.9);
}
.hero050__store-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 140% at 85% 10%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  opacity:.82;
}

/* 🌫️ دخان مخملي داكن — كتل ضبابية ثابتة الشكل، تتحرك فقط بـ transform (خفيفة جداً على الأداء) */
.hero050__smoke{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.smoke-blob{
  position:absolute; border-radius:50%; filter:blur(70px); will-change:transform;
  background:radial-gradient(circle, rgba(15,8,4,.8) 0%, transparent 72%);
}
.smoke-blob--a{ width:52vw; height:52vw; top:-18%; right:-14%; animation:smokeDriftA 26s ease-in-out infinite; }
.smoke-blob--b{ width:44vw; height:60vw; bottom:-22%; left:-16%; background:radial-gradient(circle, rgba(58,32,19,.55) 0%, transparent 70%); animation:smokeDriftB 32s ease-in-out infinite; }
.smoke-blob--c{ width:36vw; height:36vw; top:30%; left:34%; opacity:.6; animation:smokeDriftC 22s ease-in-out infinite; }
@keyframes smokeDriftA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-4%,3%) scale(1.08); } }
@keyframes smokeDriftB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3%,-4%) scale(1.06); } }
@keyframes smokeDriftC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(3%,3%) scale(.94); } }

/* ✨ غبار عائم لامع — حقل نقاط واحد متحرك بـ background-position فقط (بدون عناصر DOM متعددة، أرخص أداء ممكن) */
.hero050__dust{
  position:absolute; inset:-15%; z-index:1; pointer-events:none; opacity:.5; will-change:transform;
  background-image:
    radial-gradient(circle, rgba(255,217,138,.55) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(247,179,107,.4) 1px, transparent 1.3px);
  background-size: 120px 120px, 120px 120px;
  background-position: 0 0, 60px 60px;
  animation: dustDrift 55s linear infinite;
}
@keyframes dustDrift{ from{ transform:translate(0,0); } to{ transform:translate(-120px,120px); } }

.hero050__bg-nexus { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.nexus-grid {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(232,128,77,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(232,128,77,0.05) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center;
  transform: perspective(500px) rotateX(60deg) translateY(-30%);
  opacity: 0.7; transform-origin: top;
}
.nexus-line {
  position:absolute; top:0; left:var(--l); width:1px; height:100%;
  background: linear-gradient(to bottom, transparent, rgba(255,217,138,0.2), transparent);
  animation: nexusFlow 8s linear infinite; animation-delay: var(--d);
}
@keyframes nexusFlow { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* ✨ نظام الجليتر السينمائي */
.hero050__glitter-container { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.glitter-spark {
  position:absolute; top:var(--top); left:var(--left);
  width:var(--sz); height:var(--sz); border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--copper-2));
  box-shadow: 0 0 calc(var(--sz) * 2) var(--gold), 0 0 calc(var(--sz) * 4) var(--copper);
  opacity:0; will-change: transform, opacity;
  animation: glitterFloat 5s ease-in-out infinite; animation-delay: var(--delay);
}
.glitter-star::before, .glitter-star::after {
  content:''; position:absolute; top:50%; left:50%; background:var(--gold); transform:translate(-50%, -50%);
}
.glitter-star::before { width:200%; height:20%; border-radius:99px; }
.glitter-star::after { width:20%; height:200%; border-radius:99px; }

@keyframes glitterFloat {
  0%, 100% { transform: translateY(0) scale(0.5); opacity: 0; filter: brightness(1); }
  50% { transform: translateY(-40px) scale(1.4); opacity: 0.9; filter: brightness(1.8) drop-shadow(0 0 6px var(--gold)); }
}

.hero050__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero050__orb{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.4; will-change:transform; }
.hero050__orb--a{ width:440px; height:440px; background:radial-gradient(circle, rgba(232,128,77,.32), transparent 70%); top:-100px; left:-80px; animation:drift050 14s ease-in-out infinite; }
.hero050__orb--b{ width:360px; height:360px; background:radial-gradient(circle, rgba(255,217,138,.2), transparent 70%); bottom:-120px; right:6%; animation:drift050 18s ease-in-out infinite reverse; }
@keyframes drift050{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(25px,-20px);} }

.hero050__badge{
  position:absolute; top:84px; left:28px; z-index:6; display:flex; align-items:center; gap:8px;
  background:rgba(10,8,18,.82); border:1px solid rgba(232,128,77,.25);
  padding:10px 18px; border-radius:99px; font-size:0.85rem; font-weight:500; color:var(--ink-dim);
}
.hero050__badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--copper-2); box-shadow:0 0 10px var(--copper-2); animation:pulse050 2s ease-in-out infinite; }
@keyframes pulse050{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.hero050__wc-bg{
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
  display:flex; align-items:center; justify-content:flex-start;
}
.hero050__wc-bg img{
  width:min(58%, 760px); height:auto; margin-inline-start:2%;
  opacity:.55; filter:saturate(1.1) drop-shadow(0 30px 60px rgba(0,0,0,.5));
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1) 60%, transparent 100%);
  animation: wcFloat 10s ease-in-out infinite;
}
@keyframes wcFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-14px) scale(1.02); } }

.hero050__wc-tag{
  position:absolute; top:84px; right:28px; z-index:6;
  background:var(--chip-bg); border:1px solid var(--chip-border); color:var(--ink-dim);
  padding:9px 18px; border-radius:99px; font-size:.82rem; font-weight:700;
}

.hero050__inner{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
  flex:1; gap:clamp(32px,5vw,80px); width:100%; max-width:1900px; margin:0 auto;
  padding:clamp(64px,9vh,90px) 6% clamp(36px,5vh,56px);
}

/* ⚡ عمود الكتابة + حركة تعويم مستمرة خفيفة (طلب: موشن للجزء اليمين) */
.hero050__copy{
  max-width:clamp(500px, 42vw, 750px); position:relative; z-index:2;
  animation: copyGentleFloat 9s ease-in-out infinite;
}
@keyframes copyGentleFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.instant-anim {
  opacity: 0; transform: translateY(25px); filter: blur(3px);
  animation: pureCssReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--td);
}
@keyframes pureCssReveal { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.hero050__mark-container { position:relative; display:inline-block; overflow:hidden; padding: 4px 0; }
.hero050__mark-text {
  unicode-bidi:isolate; direction:ltr; display:inline-flex; font-family:"IBM Plex Sans Arabic",sans-serif;
  font-weight:800; font-size:clamp(1.7rem, 1.4vw + 1.4rem, 3.1rem); letter-spacing:3px;
  color: var(--ink); position:relative; z-index:1;
  text-shadow: 0 0 22px rgba(232,128,77,.35);
}
.hero050__mark-text b { font-weight:400; color:var(--copper-2); letter-spacing:5px; margin-inline-start:5px; }

.chroma-sweep {
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 138, 0.8), transparent);
  transform: translateX(-100%); z-index:2; pointer-events:none;
  animation: metalSweep 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: 0.6s;
}
@keyframes metalSweep { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

.hero050__mark-line{ display:block; width:80px; height:4px; margin-top:14px; border-radius:2px; background:linear-gradient(90deg,var(--copper),var(--gold)); }

.hero050__eyebrow{
  display:inline-flex; align-items:center; gap:10px; color:var(--copper-2);
  font-size:clamp(.85rem, 0.4vw + 0.95rem, 1.5rem); font-weight:700; margin-top:28px; margin-bottom:24px; white-space:nowrap;
}
.hero050__eyebrow svg{ flex-shrink:0; width:clamp(14px, 0.5vw + 14px, 24px); height:clamp(14px, 0.5vw + 14px, 24px); }
.hero050__eyebrow-num{ unicode-bidi:isolate; direction:ltr; font-weight:800; }

.hero050__headline{
  font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:800; color:var(--text-ink);
  font-size:clamp(2.1rem, 2.8vw + 1.8rem, 5.2rem); line-height:1.28; margin:0 0 32px;
}
.glowing-gradient-text {
  display:inline-block;
  background: linear-gradient(90deg, var(--copper), var(--gold), var(--copper-2), var(--copper));
  background-size: 300% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: textShine 4s linear infinite;
}
@keyframes textShine { to { background-position: 300% center; } }

.hero050__ticker{ position:relative; height:46px; margin-bottom:40px; overflow:hidden; }
.hero050__tick{
  position:absolute; inset:0; margin:0; display:flex; align-items:center;
  font-size:clamp(.95rem, 0.4vw + 1.1rem, 1.8rem); font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0;
  animation-name:tickCyc; animation-duration:var(--cycle); animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-fill-mode:backwards;
  animation-delay:calc(var(--i) * var(--slot));
}
@keyframes tickCyc{
  0%{ opacity:0; transform:translateY(16px); }
  1.136%{ opacity:1; transform:translateY(0); }
  3.864%{ opacity:1; transform:translateY(0); }
  4.545%,100%{ opacity:0; transform:translateY(-16px); }
}

.hero050__cta{ display:flex; gap:16px; margin-bottom:28px; }
.btn050{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:16px 36px; border-radius:14px; font-weight:700; font-size:clamp(0.95rem, 0.2vw + 0.95rem, 1.3rem); text-decoration:none;
  white-space:nowrap; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.btn050--primary{ background:linear-gradient(120deg,var(--copper),var(--copper-2)); color:#1A0E08 !important; box-shadow:0 10px 26px -8px rgba(232,128,77,.55); }
.btn050--primary:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -8px rgba(232,128,77,.7); }
.btn050--ghost{ color:var(--ink) !important; border:1.5px solid rgba(247,243,237,.22); background:rgba(255,255,255,.03); }
.btn050--ghost:hover{ border-color:var(--copper-2); background:rgba(232,128,77,.1); transform:translateY(-3px); }

.hero050__tamara{
  display:inline-flex; align-items:center; gap:10px; margin-top:0; margin-bottom:34px;
  background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:12px;
  padding:9px 16px; width:fit-content;
}
.hero050__tamara span{ font-size:clamp(.78rem,.2vw + .8rem,1rem); font-weight:600; color:var(--ink-dim); }
.hero050__tamara img{ height:clamp(16px,1.2vw,20px); width:auto; display:block; }

.hero050__trust{ display:flex; gap:26px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.hero050__trust li{ display:flex; align-items:center; gap:9px; font-size:clamp(.8rem, 0.2vw + 0.85rem, 1.25rem); color:var(--ink-faint); font-weight:500; }
.hero050__trust svg{ width:clamp(16px, 0.3vw + 18px, 26px); height:clamp(16px, 0.3vw + 18px, 26px); color:var(--copper-2); flex-shrink:0; }

/* ---- مسرح العرض ثلاثي الأبعاد (4 مشاهد) ---- */
.hero050__stage{
  --node-size:clamp(46px, 3.6vw, 68px);
  --center-size:clamp(140px, 12vw, 200px);
  --device-size:clamp(62px, 6vw, 96px);
  position:relative; width:clamp(280px, 28vw, 440px); aspect-ratio:1/1; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  perspective:1400px; z-index:2;
  animation: stageGentleTilt 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}
@keyframes stageGentleTilt {
  0% { transform: rotateX(-4deg) rotateY(3deg) translateY(-5px); }
  100% { transform: rotateX(5deg) rotateY(-4deg) translateY(5px); }
}

.scene-orbit, .scene-flip, .scene-cyber, .scene-img{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  backface-visibility:hidden; will-change: transform, opacity;
}

.scene-orbit{ animation: orbitWrap var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite; }
.scene-flip { animation: sceneFlipWrap var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite; }
.scene-cyber{ animation: sceneCyberWrap var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite; }
.scene-img  { animation: sceneImgWrap var(--cycle) cubic-bezier(.4, 0, .2, 1) infinite; }

/* جدول المشاهد الأربعة على مسار الـ44 ثانية: أوربيت 0-27.27% / البطاقة 29.54-47.72% / الليزر 50-63.63% / الصور الحقيقية 65.9-97.72% */
@keyframes orbitWrap{
  0%{ opacity:1; transform:rotateY(0deg) scale(1); }
  27.273%{ opacity:1; transform:rotateY(0deg) scale(1); }
  29.545%{ opacity:0; transform:rotateY(-100deg) scale(.75); pointer-events:none; }
  97%{ opacity:0; transform:rotateY(-100deg) scale(.75); pointer-events:none; }
  97.727%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  100%{ opacity:1; transform:rotateY(0deg) scale(1); }
}
@keyframes sceneFlipWrap{
  0%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  28%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  29.545%{ opacity:1; transform:rotateY(0deg) scale(1); }
  47.727%{ opacity:1; transform:rotateY(0deg) scale(1); }
  50%{ opacity:0; transform:rotateY(-100deg) scale(.75); pointer-events:none; }
  100%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
}
@keyframes sceneCyberWrap{
  0%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  48%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  50%{ opacity:1; transform:rotateY(0deg) scale(1); }
  63.636%{ opacity:1; transform:rotateY(0deg) scale(1); }
  65.909%{ opacity:0; transform:rotateY(-100deg) scale(.75); pointer-events:none; }
  100%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
}
@keyframes sceneImgWrap{
  0%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  64%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
  65.909%{ opacity:1; transform:rotateY(0deg) scale(1); }
  97.727%{ opacity:1; transform:rotateY(0deg) scale(1); }
  99%{ opacity:0; transform:rotateY(-100deg) scale(.75); pointer-events:none; }
  100%{ opacity:0; transform:rotateY(100deg) scale(.75); pointer-events:none; }
}

/* ---- المشهد الأول: الحلقة المدارية (6 عناصر، تزامن كامل مع السهم/التوهج) ---- */
.hero050__ring{ position:relative; width:100%; height:100%; }
.hero050__ring-svg{ position:absolute; inset:0; width:100%; height:100%; }
.ring-track{ fill:none; stroke:rgba(232,128,77,.14); stroke-width:1; }
.ring-sweep{ fill:none; stroke:url(#sweepGrad050); stroke-width:2.2; stroke-dasharray:70 1050; stroke-linecap:round; transform-origin:200px 200px; animation:sweepSync var(--cycle) infinite; }
/* الخط يتحرك بسرعة ثابتة ومستمرة بلا توقف؛ يمر بزاوية كل جهاز بالضبط في نفس لحظة توهجه وظهور صورته وعبارته */
@keyframes sweepSync{
  0%{ transform:rotate(-105deg); animation-timing-function:linear; }
  27.273%{ transform:rotate(255deg); }
  95%{ transform:rotate(255deg); }
  96.5%{ transform:rotate(-105deg); }
  100%{ transform:rotate(-105deg); }
}

.hero050__nodes{ position:absolute; inset:0; }
.node050{
  position:absolute; top:var(--y); left:var(--x); width:var(--node-size); height:var(--node-size);
  margin:calc(var(--node-size) / -2); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(21,15,32,.9); border:1px solid rgba(232,128,77,.25); will-change: transform;
}
.node050 svg{ width:42%; height:42%; position:relative; z-index:2; opacity:.6; }
.node050::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg,var(--copper),var(--copper-2));
  box-shadow:0 0 25px rgba(232,128,77,.8); opacity:0; animation:nodeGlow var(--cycle) ease-in-out infinite backwards; animation-delay:calc(var(--i) * var(--slot));
}
.node050{ animation:nodeScale var(--cycle) ease-in-out infinite backwards; animation-delay:calc(var(--i) * var(--slot)); }
@keyframes nodeGlow{ 0%{opacity:0;} 1.136%{opacity:1;} 3.864%{opacity:1;} 4.545%,100%{opacity:0;} }
@keyframes nodeScale{ 0%{transform:scale(1);} 1.136%{transform:scale(1.15);} 3.864%{transform:scale(1.15);} 4.545%,100%{transform:scale(1);} }

.hero050__center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--center-size); height:var(--center-size); border-radius:20%;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center;
}
.hero050__center-glow{ position:absolute; inset:-30px; border-radius:50%; background:radial-gradient(circle, rgba(232,128,77,.28), transparent 70%); z-index:-1; animation:pulse050 3s ease-in-out infinite; }
.hero050__device{ position:relative; width:var(--device-size); height:var(--device-size); }
.device-item{
  position:absolute; inset:0; color:var(--copper-2); opacity:0; animation:deviceCyc var(--cycle) ease-in-out infinite backwards; animation-delay:calc(var(--i) * var(--slot));
}
.device-item svg{ width:100%; height:100%; stroke:currentColor; }
@keyframes deviceCyc{ 0%{ opacity:0; transform:scale(.6) rotate(-12deg); } 1.136%{ opacity:1; transform:scale(1) rotate(0deg); } 3.864%{ opacity:1; transform:scale(1) rotate(0deg); } 4.545%,100%{ opacity:0; transform:scale(.6) rotate(12deg); } }

.hero050__labels{ position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); height:clamp(24px,2vw,34px); }
.dl050{
  position:absolute; white-space:nowrap; inset-inline-start:50%; transform:translateX(-50%);
  font-size:clamp(.8rem,.4vw + .68rem,1.05rem); font-weight:700; color:var(--ink); background:rgba(10,8,18,.82);
  border:1px solid rgba(232,128,77,.25); padding:6px 20px; border-radius:99px; opacity:0;
  animation:tickCyc var(--cycle) ease-in-out infinite backwards; animation-delay:calc(var(--i) * var(--slot));
}

/* ---- المشهد الثاني: البطاقة الزجاجية (4 عناصر) ---- */
.flip-pedestal{
  position:absolute; left:50%; bottom:15%; width:52%; aspect-ratio:3.2/1; border:1.5px solid rgba(232,128,77,.35); border-radius:50%;
  background:radial-gradient(ellipse, rgba(232,128,77,.16) 0%, transparent 75%); transform:translateX(-50%) rotateX(72deg); animation:podRotate050 5s linear infinite;
}
@keyframes podRotate050{ to{ transform:translateX(-50%) rotateX(72deg) rotate(360deg); } }
.flip-hex{ position:absolute; left:50%; top:45%; width:66%; aspect-ratio:1/1; border:1px dashed rgba(232,128,77,.22); border-radius:38%; transform:translate(-50%,-50%); animation:hexSpin050 26s linear infinite; }
@keyframes hexSpin050{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.flip-card{ position:relative; width:min(68%,200px); aspect-ratio:1/1; perspective:900px; top: -5%; }
.flip-face{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:14px; border-radius:26px;
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.1); color:var(--copper-2); opacity:0; transform:rotateX(80deg);
}
.flip-face svg{ width:36px; height:36px; }
.flip-face p{ margin:0; color:var(--ink); font-weight:700; font-size:0.95rem; line-height:1.5; text-align:center; }

.flip-face--0{ animation:flipFace0 var(--cycle) ease-in-out infinite; }
.flip-face--1{ animation:flipFace1 var(--cycle) ease-in-out infinite; }
.flip-face--2{ animation:flipFace2 var(--cycle) ease-in-out infinite; }
.flip-face--3{ animation:flipFace3 var(--cycle) ease-in-out infinite; }

@keyframes flipFace0{ 29.545%{ opacity:0; transform:rotateX(80deg); } 30.682%,33.409%{ opacity:1; transform:rotateX(0deg); } 34.091%,100%{ opacity:0; transform:rotateX(-80deg); } }
@keyframes flipFace1{ 34.091%{ opacity:0; transform:rotateX(80deg); } 35.227%,37.955%{ opacity:1; transform:rotateX(0deg); } 38.636%,100%{ opacity:0; transform:rotateX(-80deg); } }
@keyframes flipFace2{ 38.636%{ opacity:0; transform:rotateX(80deg); } 39.773%,42.5%{ opacity:1; transform:rotateX(0deg); } 43.182%,100%{ opacity:0; transform:rotateX(-80deg); } }
@keyframes flipFace3{ 43.182%{ opacity:0; transform:rotateX(80deg); } 44.318%,47.045%{ opacity:1; transform:rotateX(0deg); } 47.727%,100%{ opacity:0; transform:rotateX(-80deg); } }

.flip-title-wrap, .cyber-title-wrap, .img-title-wrap { position:absolute; bottom:0; left:0; width:100%; display:flex; justify-content:center; pointer-events:none; }
.flip-title, .img-title{
  font-size:0.9rem; font-weight:700; color:var(--ink-dim); background:rgba(10,8,18,.85); border:1px solid rgba(232,128,77,.25); padding:6px 20px; border-radius:99px; white-space:nowrap;
}

/* ---- المشهد الثالث: عرض الليزر المستقبلي (3 عناصر) ---- */
.cyber-holo-pyramid { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform: rotateX(55deg); transform-style: preserve-3d; }
.cyber-pulse-ring {
  position:absolute; width: 65%; aspect-ratio: 1/1; border-radius: 50%; border: 2px solid var(--copper); opacity: 0;
  animation: laserPulseWave 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite; animation-delay: var(--ad);
}
@keyframes laserPulseWave {
  0% { transform: scale(0.6) translateZ(0); opacity: 1; filter: drop-shadow(0 0 2px var(--copper)); }
  100% { transform: scale(1.3) translateZ(40px); opacity: 0; filter: drop-shadow(0 0 12px var(--copper-2)); border-color: var(--gold); }
}

.cyber-showcase { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; top: -5%; }
.cyber-product {
  position:absolute; width:48%; height:48%; color:var(--copper-2); opacity:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:scale(.4) translateY(40px); filter:brightness(.4) blur(4px);
}
.cyber-product svg { width:100%; height:100%; }
.cyber-product--0{ animation:cyberItem0 var(--cycle) ease-in-out infinite; }
.cyber-product--1{ animation:cyberItem1 var(--cycle) ease-in-out infinite; }
.cyber-product--2{ animation:cyberItem2 var(--cycle) ease-in-out infinite; }

@keyframes cyberItem0{
  50%{ opacity:0; transform:scale(.4) translateY(40px); filter:brightness(.4) blur(4px); }
  51.136%,53.864%{ opacity:1; transform:scale(1.08) translateY(0); filter:brightness(1.1) blur(0); }
  54.545%,100%{ opacity:0; transform:scale(.4) translateY(-40px); filter:brightness(.4) blur(4px); }
}
@keyframes cyberItem1{
  54.545%{ opacity:0; transform:scale(.4) translateY(40px); filter:brightness(.4) blur(4px); }
  55.682%,58.409%{ opacity:1; transform:scale(1.08) translateY(0); filter:brightness(1.1) blur(0); }
  59.091%,100%{ opacity:0; transform:scale(.4) translateY(-40px); filter:brightness(.4) blur(4px); }
}
@keyframes cyberItem2{
  59.091%{ opacity:0; transform:scale(.4) translateY(40px); filter:brightness(.4) blur(4px); }
  60.227%,62.955%{ opacity:1; transform:scale(1.08) translateY(0); filter:brightness(1.1) blur(0); }
  63.636%,100%{ opacity:0; transform:scale(.4) translateY(-40px); filter:brightness(.4) blur(4px); }
}

.laser-scanner-line {
  position:absolute; left:15%; right:15%; height:2px; background: linear-gradient(90deg, transparent, var(--gold), var(--copper-2), transparent);
  box-shadow: 0 0 12px var(--copper-2); opacity:0; animation: scanEffect 1.5s ease-in-out infinite alternate;
}
@keyframes scanEffect { 0% { top: 15%; opacity: 0.8; } 100% { top: 80%; opacity: 0.8; } }

.laser-glow { stroke-dasharray: 300; stroke-dashoffset: 300; animation: laserDrawEpic 1.5s ease-in-out infinite alternate; }
@keyframes laserDrawEpic { 0% { stroke-dashoffset: 300; filter: drop-shadow(0 0 2px var(--copper)); } 100% { stroke-dashoffset: 0; filter: drop-shadow(0 0 12px var(--copper-2)); } }

.cyber-tag {
  margin-top:10px; font-weight:700; font-size:0.85rem; color:var(--ink); background:rgba(10, 8, 18, 0.95); border:1px solid var(--copper-2);
  padding:4px 14px; border-radius:8px; white-space: nowrap;
}
.cyber-title{
  font-size:0.9rem; font-weight:700; color:var(--gold); background:rgba(10,8,18,.9); border:1px solid var(--copper); padding:6px 20px; border-radius:99px;
}

/* ---- المشهد الرابع: صور أجهزة حقيقية — دوران وتكبير مع ارتداد ثم استقرار (Motion Graphics Pop) ---- */
.img-depth-stage{ position:relative; width:100%; height:100%; top:-4%; perspective:1000px; }
.img-glow{
  position:absolute; left:50%; top:50%; width:min(34vw,420px); aspect-ratio:1/1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(232,128,77,.32) 0%, transparent 70%);
  filter:blur(20px); animation:pulse050 3s ease-in-out infinite;
}
.img-frame{
  position:absolute; left:50%; top:50%; width:clamp(160px, 26vw, 520px); aspect-ratio:1/1;
  transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center;
}
.img-frame img{ width:100%; height:100%; object-fit:contain; border-radius:10px; display:block; }

.img-item{
  position:absolute; inset:0; opacity:0;
  transform:scale(0) rotate(0deg);
  will-change:opacity, transform;
}
.img-item--0{ animation:imgItem0 var(--cycle) ease-in-out infinite; }
.img-item--1{ animation:imgItem1 var(--cycle) ease-in-out infinite; }
.img-item--2{ animation:imgItem2 var(--cycle) ease-in-out infinite; }
.img-item--3{ animation:imgItem3 var(--cycle) ease-in-out infinite; }
.img-item--4{ animation:imgItem4 var(--cycle) ease-in-out infinite; }
.img-item--5{ animation:imgItem5 var(--cycle) ease-in-out infinite; }
.img-item--6{ animation:imgItem6 var(--cycle) ease-in-out infinite; }

/* كل صورة: انطلاق من الصفر بدوران سريع ← ارتداد خفيف يتجاوز الوضع المعتدل قليلاً ← استقرار سلس ومعتدل تماماً (زاوية = مضاعف 360 دائماً) ← انكماش ودوران وتلاشي سريع */
@keyframes imgItem0{
  65.909%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  66.704%{ opacity:1; transform:scale(1) rotate(340deg); }
  69.886%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  70.227%{ opacity:1; transform:scale(.7) rotate(480deg); }
  70.455%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem1{
  70.455%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  71.25%{ opacity:1; transform:scale(1) rotate(340deg); }
  74.432%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  74.773%{ opacity:1; transform:scale(.7) rotate(480deg); }
  75%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem2{
  75%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  75.795%{ opacity:1; transform:scale(1) rotate(340deg); }
  78.977%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  79.318%{ opacity:1; transform:scale(.7) rotate(480deg); }
  79.545%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem3{
  79.545%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  80.34%{ opacity:1; transform:scale(1) rotate(340deg); }
  83.522%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  83.863%{ opacity:1; transform:scale(.7) rotate(480deg); }
  84.091%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem4{
  84.091%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  84.886%{ opacity:1; transform:scale(1) rotate(340deg); }
  88.068%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  88.409%{ opacity:1; transform:scale(.7) rotate(480deg); }
  88.636%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem5{
  88.636%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  89.431%{ opacity:1; transform:scale(1) rotate(340deg); }
  92.613%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  92.954%{ opacity:1; transform:scale(.7) rotate(480deg); }
  93.182%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}
@keyframes imgItem6{
  93.182%{ opacity:0; transform:scale(0) rotate(0deg); animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
  93.977%{ opacity:1; transform:scale(1) rotate(340deg); }
  97.159%{ opacity:1; transform:scale(1) rotate(340deg); animation-timing-function:ease-in; }
  97.5%{ opacity:1; transform:scale(.7) rotate(480deg); }
  97.727%,100%{ opacity:0; transform:scale(0) rotate(620deg); }
}

/* 📱 وضع الهواتف الذكية */
@media (max-width:980px){
  .hero050{ min-height:clamp(480px, 58vh, 600px); }
  .hero050__inner { flex-direction:column-reverse; padding:104px 5% 28px; text-align:center; gap: 14px; }
  .hero050__copy { max-width:100%; }
  .hero050__mark, .hero050__eyebrow, .hero050__trust, .hero050__ticker { justify-content:center; }
  .hero050__tick, .hero050__cta { justify-content:center; }

  .hero050__headline { font-size: 1.85rem !important; line-height: 1.35; margin-bottom: 14px; }
  .hero050__mark-text { font-size: 1.35rem !important; }
  .hero050__mark{ margin-bottom:12px !important; }
  .hero050__eyebrow { font-size: 0.82rem !important; margin-top: 8px; margin-bottom: 10px; }
  .hero050__ticker{ height:34px; margin-bottom:22px; }
  .hero050__tick { font-size: 0.88rem !important; }
  .btn050 { padding: 12px 24px; font-size: 0.88rem; }
  .hero050__cta{ margin-bottom:16px; }
  .hero050__tamara{ margin:0 auto 16px; justify-content:center; padding:7px 14px; }
  .hero050__trust{ margin-bottom:0; gap:14px 20px; }

  .hero050__stage {
    width: min(58vw, 230px);
    margin-bottom: 16px;
  }

  .flip-title-wrap, .cyber-title-wrap, .img-title-wrap { bottom: -22px; }
  .flip-title, .cyber-title, .img-title { font-size: 0.78rem; padding: 5px 14px; }

  .hero050__badge{ display:none; }
  .hero050__wc-tag{ left:50%; right:auto; transform:translateX(-50%); top: 66px; font-size:0.74rem; padding:6px 14px; }
  .hero050__wc-bg{ justify-content:center; opacity:.6; }
  .hero050__wc-bg img{ width:min(78%,340px); opacity:.35; margin-inline-start:0; }
  .smoke-blob--a, .smoke-blob--b{ width:90vw; height:90vw; }
  .smoke-blob--c{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .instant-anim, .cyber-product, .hero050__stage, .hero050__copy{ animation:none !important; opacity:1 !important; transform:none !important; }
  .hero050__glitter-container, .cyber-holo-pyramid, .laser-scanner-line, .hero050__bg-nexus{ display:none !important; }
  .smoke-blob, .hero050__dust, .hero050__wc-bg img{ animation:none !important; }
  .scene-orbit{ animation:none !important; opacity:1 !important; transform:none !important; }
  .scene-flip, .scene-cyber, .scene-img{ display:none !important; }
  .ring-sweep, .node050::after, .node050{ animation:none !important; }
  .device-item{ animation:none !important; }
  .device-item:first-child{ opacity:1 !important; }
}

/* =========================================================
   050 HERO — إعادة ضبط نهائية من النسخة الأصلية
   خط Cairo + أبعاد متناسقة + منع التداخل
   ========================================================= */

500;600;700;800;900&display=swap');

.hero050,
.hero050 *,
.hero050 *::before,
.hero050 *::after{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif !important;
}

/* لا قص ولا ارتفاع إجباري صغير */
.hero050{
  width:100vw !important;
  max-width:100vw !important;
  height:auto !important;
  max-height:none !important;
  min-height:clamp(640px,72vh,760px) !important;
  overflow:hidden !important;
  margin-top:0 !important;
  padding-top:0 !important;
}

.hero050__inner{
  min-height:inherit !important;
  height:auto !important;
  padding:96px 5.5% 42px !important;
  gap:clamp(34px,5vw,78px) !important;
  align-items:center !important;
}

/* المحتوى النصي */
.hero050__copy{
  max-width:clamp(520px,43vw,760px) !important;
  animation:none !important;
}

.hero050__mark-text{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif !important;
  font-size:clamp(2rem,2.2vw,3.2rem) !important;
  line-height:1 !important;
}

.hero050__eyebrow{
  margin-top:20px !important;
  margin-bottom:14px !important;
  font-size:clamp(1rem,1vw,1.32rem) !important;
  color:#ffad66 !important;
  font-weight:700 !important;
}

.hero050__headline{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif !important;
  font-size:clamp(3.2rem,4.4vw,5.4rem) !important;
  line-height:1.13 !important;
  margin:0 0 18px !important;
  color:#fff !important;
  text-shadow:0 3px 18px rgba(0,0,0,.82) !important;
}

.hero050__ticker{
  height:40px !important;
  margin-bottom:20px !important;
}

.hero050__tick{
  font-size:clamp(1.05rem,1.05vw,1.42rem) !important;
  font-weight:600 !important;
  color:#fff6ee !important;
  text-shadow:0 2px 10px rgba(0,0,0,.9) !important;
}

.hero050__cta{ margin-bottom:14px !important; }
.hero050__tamara{ margin-bottom:16px !important; }

.hero050__trust{
  gap:12px 22px !important;
}

.hero050__trust li{
  color:#efe2d7 !important;
  font-weight:600 !important;
}

/* المسرح — الحفاظ على النسبة الأصلية */
.hero050__stage{
  width:clamp(330px,29vw,460px) !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  flex:0 0 auto !important;
  animation:none !important;
  --node-size:clamp(48px,3.8vw,68px) !important;
  --center-size:clamp(145px,12vw,200px) !important;
  --device-size:clamp(64px,6vw,96px) !important;
}

/* منع عناوين المشاهد من الاصطدام بالمشهد */
.hero050__labels,
.flip-title-wrap,
.cyber-title-wrap,
.img-title-wrap{
  bottom:-8px !important;
}

.dl050,
.flip-title,
.cyber-title,
.img-title{
  font-size:clamp(.72rem,.55vw,.95rem) !important;
  padding:5px 14px !important;
  line-height:1.2 !important;
}

/* الديسكتوب المتوسط */
@media (min-width:768px) and (max-width:1280px){
  .hero050{
    min-height:clamp(620px,74vh,720px) !important;
  }

  .hero050__inner{
    padding:88px 4.5% 34px !important;
    gap:28px !important;
  }

  .hero050__stage{
    width:clamp(290px,30vw,380px) !important;
  }

  .hero050__headline{
    font-size:clamp(2.8rem,4vw,4.4rem) !important;
  }
}

/* =========================================================
   الجوال — تصغير نسبي لكل مكونات الهيرو دون تغيير النسب
   ========================================================= */
@media (max-width:767px){
  .hero050{
    min-height:720px !important;
    height:auto !important;
    max-height:none !important;
  }

  .hero050__inner{
    min-height:720px !important;
    height:auto !important;
    flex-direction:column-reverse !important;
    justify-content:flex-start !important;
    padding:70px 12px 18px !important;
    gap:10px !important;
  }

  .hero050__copy{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    animation:none !important;
  }

  .hero050__stage{
    width:min(52vw,190px) !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:1/1 !important;
    margin:0 auto 8px !important;
    flex:0 0 auto !important;
    animation:none !important;

    --node-size:clamp(30px,9vw,38px) !important;
    --center-size:clamp(86px,25vw,108px) !important;
    --device-size:clamp(40px,12vw,52px) !important;
  }

  /* تصغير متوازن لكل المشاهد الأربعة */
  .scene-orbit,
  .scene-flip,
  .scene-cyber,
  .scene-img{
    inset:0 !important;
    overflow:visible !important;
  }

  .flip-card{
    width:58% !important;
    top:-2% !important;
  }

  .flip-face{
    border-radius:16px !important;
    gap:7px !important;
    padding:8px !important;
  }

  .flip-face svg{
    width:24px !important;
    height:24px !important;
  }

  .flip-face p{
    font-size:.62rem !important;
    line-height:1.25 !important;
  }

  .cyber-product{
    width:44% !important;
    height:44% !important;
  }

  .cyber-tag{
    font-size:.56rem !important;
    padding:3px 7px !important;
  }

  .img-depth-stage{
    top:0 !important;
  }

  .img-frame{
    width:82% !important;
  }

  .hero050__labels,
  .flip-title-wrap,
  .cyber-title-wrap,
  .img-title-wrap{
    bottom:-10px !important;
  }

  .dl050,
  .flip-title,
  .cyber-title,
  .img-title{
    font-size:.56rem !important;
    padding:3px 8px !important;
    max-width:92% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .hero050__mark{
    margin:0 0 3px !important;
  }

  .hero050__mark-text{
    font-size:1.35rem !important;
    letter-spacing:1.7px !important;
  }

  .hero050__mark-line{
    width:56px !important;
    height:3px !important;
    margin:7px auto 0 !important;
  }

  .hero050__eyebrow{
    margin:7px auto 5px !important;
    font-size:.76rem !important;
    line-height:1.3 !important;
    white-space:normal !important;
    justify-content:center !important;
  }

  .hero050__headline{
    font-size:2rem !important;
    line-height:1.08 !important;
    margin:0 0 6px !important;
  }

  .hero050__ticker{
    height:26px !important;
    margin:0 0 8px !important;
  }

  .hero050__tick{
    justify-content:center !important;
    font-size:.8rem !important;
    line-height:1.2 !important;
  }

  .hero050__cta{
    justify-content:center !important;
    gap:8px !important;
    margin:0 0 8px !important;
  }

  .btn050{
    padding:10px 18px !important;
    font-size:.8rem !important;
    border-radius:11px !important;
  }

  .hero050__tamara{
    margin:0 auto 8px !important;
    padding:5px 9px !important;
  }

  .hero050__tamara span{
    font-size:.69rem !important;
  }

  .hero050__tamara img{
    height:14px !important;
  }

  .hero050__trust{
    justify-content:center !important;
    gap:6px 10px !important;
    margin:0 !important;
  }

  .hero050__trust li{
    font-size:.63rem !important;
    line-height:1.2 !important;
    gap:4px !important;
  }

  .hero050__trust svg{
    width:13px !important;
    height:13px !important;
  }

  .hero050__badge{
    display:none !important;
  }
}

/* شاشات جوال قصيرة */
@media (max-width:767px) and (max-height:740px){
  .hero050{
    min-height:680px !important;
  }

  .hero050__inner{
    min-height:680px !important;
    padding-top:62px !important;
    padding-bottom:14px !important;
    gap:7px !important;
  }

  .hero050__stage{
    width:min(46vw,168px) !important;
  }

  .hero050__headline{
    font-size:1.78rem !important;
  }
}

/* شاشات ضيقة جدًا */
@media (max-width:390px){
  .hero050__inner{
    padding-inline:8px !important;
  }

  .hero050__stage{
    width:min(44vw,156px) !important;
  }

  .hero050__headline{
    font-size:1.68rem !important;
  }

  .btn050{
    padding-inline:14px !important;
    font-size:.75rem !important;
  }
}

/* =========================================================
   050 HERO — دمج الخلفية مع الهيدر مع إنزال المحتوى
   لا توجد مساحة بين العنصرين، والارتفاع يُعوَّض داخل الهيرو
   ========================================================= */

/* إزالة أي فراغ خارجي تضيفه حاوية سلة */
.s-block:has(.hero050),
.s-block__container:has(.hero050),
.container:has(> .hero050),
section:has(> .hero050),
div:has(> .hero050){
  margin-top:0 !important;
  padding-top:0 !important;
}

.hero050{
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:0 !important;
}

/* الخلفية تبدأ مباشرة من أسفل الهيدر، بينما المحتوى ينزل داخلها */
@media (min-width:1281px){
  .hero050{
    min-height:clamp(740px,82vh,880px) !important;
  }

  .hero050__inner{
    min-height:inherit !important;
    padding-top:128px !important;
    padding-bottom:48px !important;
  }

  .hero050__badge{
    top:88px !important;
  }

  .hero050__mark{
    margin-top:8px !important;
  }
}

/* ديسكتوب متوسط ولابتوب */
@media (min-width:768px) and (max-width:1280px){
  .hero050{
    min-height:clamp(700px,84vh,820px) !important;
  }

  .hero050__inner{
    min-height:inherit !important;
    padding-top:116px !important;
    padding-bottom:42px !important;
  }

  .hero050__badge{
    top:82px !important;
  }
}

/* الجوال: الخلفية مدمجة، والمحتوى يبدأ أسفل الهيدر دون تداخل */
@media (max-width:767px){
  .hero050{
    min-height:760px !important;
  }

  .hero050__inner{
    min-height:760px !important;
    padding-top:86px !important;
    padding-bottom:18px !important;
  }
}

/* الجوالات القصيرة */
@media (max-width:767px) and (max-height:740px){
  .hero050{
    min-height:720px !important;
  }

  .hero050__inner{
    min-height:720px !important;
    padding-top:78px !important;
  }
}

/* =========================================================
   050 HERO — تثبيت الخط من رابط HTML مباشرة
   لا يعتمد على @import داخل CSS Custom
   ========================================================= */
.hero050,
.hero050 *,
.hero050 *::before,
.hero050 *::after{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif !important;
}

.hero050__headline,
.hero050__mark-text,
.hero050__eyebrow,
.hero050__tick,
.hero050__badge,
.hero050__tamara,
.hero050__trust,
.hero050 .btn050,
.hero050 .dl050,
.hero050 .flip-title,
.hero050 .cyber-title,
.hero050 .img-title{
  font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif !important;
}

.hero050__headline,
.hero050__mark-text,
.hero050__eyebrow,
.hero050 .btn050{
  font-weight:600 !important;
}

/* =========================================================
   الخط المحلي المرفوع داخل الثيم: SFProAR_semibold
   ========================================================= */

.hero050,
.hero050 *,
.hero050 *::before,
.hero050 *::after{
  font-family:"SFProAR_semibold","SF Pro Arabic","SF Arabic",Tahoma,Arial,sans-serif !important;
}

.hero050__headline,
.hero050__mark-text,
.hero050__eyebrow,
.hero050__tick,
.hero050__badge,
.hero050__tamara,
.hero050__trust,
.hero050 .btn050,
.hero050 .dl050,
.hero050 .flip-title,
.hero050 .cyber-title,
.hero050 .img-title{
  font-family:"SFProAR_semibold","SF Pro Arabic","SF Arabic",Tahoma,Arial,sans-serif !important;
  font-weight:600 !important;
}

/* =========================================================
   050 HERO — خط Cairo النهائي
   يبقى هذا القسم في نهاية الملف
   ========================================================= */

.hero050,
.hero050 *,
.hero050 *::before,
.hero050 *::after,
.hero050__mark-text,
.hero050__headline,
.hero050__eyebrow,
.hero050__tick,
.hero050__badge,
.hero050__tamara,
.hero050__trust,
.hero050 .btn050,
.hero050 .dl050,
.hero050 .flip-title,
.hero050 .cyber-title,
.hero050 .img-title{
  font-family:"Cairo",Tahoma,Arial,sans-serif !important;
}

.hero050__headline,
.hero050__mark-text,
.hero050__eyebrow,
.hero050 .btn050{
  font-weight:700 !important;
}

.hero050__tick,
.hero050__tamara,
.hero050__trust,
.hero050__badge,
.hero050 .dl050,
.hero050 .flip-title,
.hero050 .cyber-title,
.hero050 .img-title{
  font-weight:600 !important;
}

/* =========================================================
   زيادة المسافة بين:
   "اختيارك الأفضل" و "يبدأ من هنا"
   ========================================================= */

.hero050__headline{
  line-height:1.12 !important;
}

.hero050__headline .glowing-gradient-text{
  display:block !important;
  margin-top:.32em !important;
}

@media (max-width:767px){
  .hero050__headline{
    line-height:1.08 !important;
  }

  .hero050__headline .glowing-gradient-text{
    margin-top:.24em !important;
  }
}

/* =========================================================
   050 HERO — الخلفية الفنية الداكنة النهائية
   ========================================================= */
.hero050{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    radial-gradient(1200px 500px at 78% 22%, rgba(232,133,76,.10) 0%, rgba(232,133,76,.03) 28%, transparent 60%),
    radial-gradient(900px 420px at 18% 82%, rgba(255,210,140,.06) 0%, rgba(255,210,140,.02) 26%, transparent 55%),
    linear-gradient(135deg,#050506 0%,#0c0b0d 34%,#121011 68%,#070708 100%) !important;
}
.hero050::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0%,rgba(255,214,153,0) 8%,rgba(255,214,153,.10) 18%,rgba(232,133,76,.18) 50%,rgba(255,214,153,.08) 82%,transparent 100%) 86% 0/1px 100% no-repeat,
    linear-gradient(180deg,transparent 0%,rgba(255,255,255,.04) 18%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 82%,transparent 100%) 82% 0/1px 100% no-repeat,
    linear-gradient(125deg,transparent 0% 44.8%,rgba(255,214,153,.03) 45%,rgba(232,133,76,.20) 45.15%,rgba(255,214,153,.09) 45.3%,transparent 45.7%) center/100% 100% no-repeat,
    linear-gradient(142deg,transparent 0% 57.7%,rgba(255,255,255,.03) 57.9%,rgba(255,255,255,.08) 58.05%,transparent 58.4%) center/100% 100% no-repeat,
    linear-gradient(90deg,transparent 0 72%,rgba(255,214,153,.04) 72.15% 72.25%,transparent 72.4% 100%) center/100% 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 88px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 88px);
  opacity:.95;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 88px,rgba(0,0,0,.18) 110px,#000 150px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 88px,rgba(0,0,0,.18) 110px,#000 150px,#000 100%);
}
.hero050::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(500px 260px at 22% 62%,rgba(232,133,76,.10) 0%,rgba(232,133,76,.03) 40%,transparent 72%),
    radial-gradient(420px 220px at 78% 40%,rgba(255,214,153,.08) 0%,rgba(255,214,153,.02) 38%,transparent 70%),
    linear-gradient(110deg,transparent 0 18%,rgba(255,214,153,.035) 18.2%,transparent 18.6% 100%);
  opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,rgba(0,0,0,.2) 116px,#000 148px,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 90px,rgba(0,0,0,.2) 116px,#000 148px,#000 100%);
}
.hero050__store-bg::after{opacity:.58 !important;}
.hero050__smoke{opacity:.28 !important;}
.hero050__dust,.hero050__bg-nexus,.hero050__glitter-container,.hero050__bg{opacity:.20 !important;}
.hero050__inner,.hero050__copy,.hero050__stage,.hero050__badge{position:relative !important;z-index:2 !important;}
.hero050__headline{color:#fff !important;text-shadow:0 2px 10px rgba(0,0,0,.35),0 8px 30px rgba(0,0,0,.28) !important;}
.hero050__eyebrow,.hero050__tick,.hero050__trust li,.hero050__tamara span,.hero050__mark-text{text-shadow:0 2px 12px rgba(0,0,0,.28) !important;}
@media(max-width:767px){
  .hero050::before{opacity:.74;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,rgba(0,0,0,.22) 84px,#000 118px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,rgba(0,0,0,.22) 84px,#000 118px,#000 100%);}
  .hero050::after{opacity:.56;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,rgba(0,0,0,.22) 84px,#000 118px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,rgba(0,0,0,.22) 84px,#000 118px,#000 100%);}
}

/* =========================================================
   050 HERO — تحديث موضع شارة الأمان + إصلاح المشهد الرابع
   ========================================================= */

.hero050__badge{
  position:absolute !important;
  top:clamp(112px, 11.5vh, 138px) !important;
  right:clamp(24px, 5.5%, 60px) !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  white-space:nowrap !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  background:rgba(10, 11, 16, 0.56) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.28) !important;
  backdrop-filter:blur(8px) !important;
}

.scene-img .img-depth-stage{
  top:-1% !important;
  width:100% !important;
  height:100% !important;
  perspective:1200px !important;
}

.scene-img .img-glow{
  width:clamp(220px, 30vw, 430px) !important;
  filter:blur(16px) !important;
  opacity:.78 !important;
}

.scene-img .img-frame{
  width:clamp(185px, 24vw, 320px) !important;
  height:clamp(185px, 24vw, 320px) !important;
  aspect-ratio:1/1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.scene-img .img-frame img{
  width:auto !important;
  height:auto !important;
  max-width:88% !important;
  max-height:88% !important;
  object-fit:contain !important;
  border-radius:8px !important;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.22)) !important;
}

.img-item--6{ display:none !important; }

@keyframes imgItem0{
  0%,65.908%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  66.818%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  67.500%,70.400%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  71.212%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}
@keyframes imgItem1{
  0%,71.211%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  72.121%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  72.803%,75.703%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  76.515%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}
@keyframes imgItem2{
  0%,76.514%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  77.424%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  78.106%,81.006%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  81.818%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}
@keyframes imgItem3{
  0%,81.817%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  82.727%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  83.409%,86.309%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  87.121%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}
@keyframes imgItem4{
  0%,87.120%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  88.030%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  88.712%,91.612%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  92.424%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}
@keyframes imgItem5{
  0%,92.423%{ opacity:0; transform:scale(.66) rotate(-16deg) translateY(24px); }
  93.333%{ opacity:1; transform:scale(1.03) rotate(2deg) translateY(0); }
  94.015%,96.915%{ opacity:1; transform:scale(1) rotate(0deg) translateY(0); }
  97.727%,100%{ opacity:0; transform:scale(.78) rotate(8deg) translateY(-18px); }
}

@media (max-width:980px){
  .hero050__badge{
    top:78px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    font-size:.74rem !important;
    padding:8px 12px !important;
  }

  .scene-img .img-frame{
    width:min(54vw, 220px) !important;
    height:min(54vw, 220px) !important;
  }

  .scene-img .img-frame img{
    max-width:86% !important;
    max-height:86% !important;
  }
}






/* ========================================
   050 Popup Slider
======================================== */




/* ==========================================================================
   العنصر 5: بوب أب العروض — POPUP050SLIDER
   النافذة، السلايدر، الأزرار، النقاط، والتجاوب
   ========================================================================== */

.popup050-slider,
.popup050-slider *,
.popup050-slider *::before,
.popup050-slider *::after {
  box-sizing: border-box !important;
}

/* النافذة التي تغطي الشاشة */
html body .popup050-slider {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  max-width: none !important;
  max-height: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 24px !important;

  z-index: 2147483647 !important;
  overflow: hidden !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  background: transparent !important;
  transform: none !important;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease !important;
}

/* حالة ظهور البوب أب */
html body .popup050-slider.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* الخلفية الداكنة */
html body .popup050-slider__overlay {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 1 !important;

  background: rgba(0, 0, 0, 0.86) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  cursor: pointer !important;
}

/* صندوق البوب أب */
html body .popup050-slider__dialog {
  position: relative !important;

  width: min(1120px, 92vw) !important;
  height: auto !important;

  max-width: 1120px !important;
  max-height: 90vh !important;
  min-height: 0 !important;

  display: block !important;

  margin: auto !important;
  padding: 0 !important;

  z-index: 2 !important;

  opacity: 0 !important;
  visibility: visible !important;

  overflow: visible !important;

  border-radius: 22px !important;

  transform: translateY(24px) scale(0.95) !important;

  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* حركة دخول البوب أب */
html body .popup050-slider.is-visible
.popup050-slider__dialog {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* إطار السلايدر */
html body .popup050-slider__viewport {
  position: relative !important;

  width: 100% !important;
  height: auto !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(232, 188, 102, 0.75) !important;
  border-radius: 22px !important;

  background: #050505 !important;

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.85),
    0 0 42px rgba(219, 169, 77, 0.14) !important;
}

/* رابط صورة البانر */
html body .popup050-slider__link {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
  text-decoration: none !important;

  cursor: pointer !important;

  -webkit-tap-highlight-color: transparent !important;
}

/* توضيح أن البانر قابل للنقر */
html body .popup050-slider__link::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 7 !important;

  border: 2px solid transparent !important;
  border-radius: 20px !important;

  pointer-events: none !important;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

html body .popup050-slider__link:hover::after {
  border-color: rgba(232, 189, 105, 0.42) !important;
  box-shadow:
    inset 0 0 35px rgba(224, 174, 80, 0.07) !important;
}

html body .popup050-slider__link:focus-visible {
  outline: 2px solid #e8bd70 !important;
  outline-offset: -4px !important;
}

/* مساحة الصور */
html body .popup050-slider__track {
  position: relative !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  aspect-ratio: 16 / 9 !important;

  overflow: hidden !important;

  background: #050505 !important;
}

/* كل شريحة */
html body .popup050-slider__slide {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 1 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transform: scale(1.025) !important;

  transition:
    opacity 0.65s ease,
    visibility 0.65s ease,
    transform 1.2s ease !important;
}

/* الشريحة النشطة */
html body .popup050-slider__slide.is-active {
  z-index: 2 !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: scale(1) !important;
}

/* صور البانرات */
html body .popup050-slider__slide img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  background: #050505 !important;

  cursor: pointer !important;

  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

/* زر الإغلاق */
html body .popup050-slider__close {
  position: absolute !important;

  top: -18px !important;
  left: -18px !important;

  width: 48px !important;
  height: 48px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 30 !important;

  border: 1px solid rgba(239, 199, 121, 0.9) !important;
  border-radius: 50% !important;

  outline: none !important;

  background: #0b0b0b !important;
  color: #f1c975 !important;

  cursor: pointer !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(225, 176, 84, 0.2) !important;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease !important;
}

html body .popup050-slider__close:hover {
  color: #111 !important;
  background: #e8bd70 !important;

  transform: rotate(90deg) scale(1.06) !important;
}

html body .popup050-slider__close svg {
  width: 23px !important;
  height: 23px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
}

/* أسهم السلايدر */
html body .popup050-slider__arrow {
  position: absolute !important;
  top: 50% !important;

  width: 46px !important;
  height: 58px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 15 !important;

  border: 1px solid rgba(232, 188, 108, 0.65) !important;
  border-radius: 14px !important;

  outline: none !important;

  background: rgba(5, 5, 5, 0.76) !important;
  color: #efca7c !important;

  cursor: pointer !important;

  transform: translateY(-50%) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.35) !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}

html body .popup050-slider__arrow:hover {
  color: #111 !important;
  background: #e8bd70 !important;
  border-color: #e8bd70 !important;
}

html body .popup050-slider__arrow--previous {
  right: 16px !important;
}

html body .popup050-slider__arrow--next {
  left: 16px !important;
}

html body .popup050-slider__arrow svg {
  width: 25px !important;
  height: 25px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* نقاط التنقل */
html body .popup050-slider__dots {
  position: absolute !important;

  right: 50% !important;
  bottom: 17px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  margin: 0 !important;
  padding: 7px 11px !important;

  z-index: 18 !important;

  border: 1px solid rgba(232, 190, 110, 0.35) !important;
  border-radius: 999px !important;

  background: rgba(0, 0, 0, 0.58) !important;

  transform: translateX(50%) !important;

  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

html body .popup050-slider__dot {
  width: 8px !important;
  height: 8px !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.45) !important;

  cursor: pointer !important;

  transition:
    width 0.25s ease,
    border-radius 0.25s ease,
    background 0.25s ease !important;
}

html body .popup050-slider__dot.is-active {
  width: 28px !important;

  border-radius: 10px !important;

  background: #e5b85f !important;
}

/* شريط توقيت الشريحة */
html body .popup050-slider__progress {
  position: absolute !important;

  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 3px !important;

  z-index: 20 !important;

  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.08) !important;

  pointer-events: none !important;
}

html body .popup050-slider__progress span {
  display: block !important;

  width: 0;
  height: 100% !important;

  background: linear-gradient(
    90deg,
    #8e642c,
    #f2cf82,
    #c38a39
  ) !important;
}

html body .popup050-slider__progress span.is-running {
  animation:
    popup050Progress 3.2s linear forwards !important;
}

/* منع تمرير الصفحة */
html body.popup050-no-scroll {
  overflow: hidden !important;
  touch-action: none !important;
}

@keyframes popup050Progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* الجوال */
@media (max-width: 767px) {
  html body .popup050-slider {
    padding: 10px !important;
  }

  html body .popup050-slider__dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh !important;
  }

  html body .popup050-slider__viewport {
    border-radius: 15px !important;
  }

  html body .popup050-slider__track {
    aspect-ratio: 16 / 9 !important;
  }

  html body .popup050-slider__close {
    top: -13px !important;
    left: -3px !important;

    width: 41px !important;
    height: 41px !important;
  }

  html body .popup050-slider__close svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body .popup050-slider__arrow {
    width: 36px !important;
    height: 45px !important;

    border-radius: 11px !important;
  }

  html body .popup050-slider__arrow--previous {
    right: 7px !important;
  }

  html body .popup050-slider__arrow--next {
    left: 7px !important;
  }

  html body .popup050-slider__arrow svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body .popup050-slider__dots {
    bottom: 8px !important;

    gap: 6px !important;

    padding: 5px 8px !important;
  }

  html body .popup050-slider__dot {
    width: 6px !important;
    height: 6px !important;
  }

  html body .popup050-slider__dot.is-active {
    width: 21px !important;
  }
}

/* الجوالات الصغيرة */
@media (max-width: 480px) {
  html body .popup050-slider {
    padding: 6px !important;
  }

  html body .popup050-slider__dialog {
    width: 98vw !important;
    max-width: 98vw !important;
  }

  html body .popup050-slider__arrow {
    width: 32px !important;
    height: 40px !important;
  }
}

/* الشاشات القصيرة */
@media (max-height: 600px) and (orientation: landscape) {
  html body .popup050-slider {
    padding: 8px !important;
  }

  html body .popup050-slider__dialog {
    width: min(920px, 88vw) !important;
    max-height: 94vh !important;
  }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  html body .popup050-slider,
  html body .popup050-slider__dialog,
  html body .popup050-slider__slide,
  html body .popup050-slider__close,
  html body .popup050-slider__arrow,
  html body .popup050-slider__dot {
    transition: none !important;
  }

  html body .popup050-slider__progress span {
    animation: none !important;
  }
}




/* ==========================================================================
   العنصر 6: تحسينات الأداء العامة — PERFORMANCE & STABILITY
   إيقاف الحركات خارج الشاشة وتخفيف التأثيرات على الجوال
   ========================================================================== */

/* ==========================================================================
   إصلاحات آمنة نهائية — لا تستهدف بطاقات منتجات سلة
   ========================================================================== */

/* نقل شارة الأمان بعيدًا عن شعار 050 STORE على الديسكتوب */
@media (min-width: 992px) {
  .hero050__badge {
    top: auto !important;
    bottom: 20px !important;
    left: clamp(20px, 3vw, 52px) !important;
    right: auto !important;
  }
}

/* تخفيف عناصر الهيرو المكلفة على الجوال فقط، دون إيقاف حركات سلة */
@media (max-width: 767px) {
  .hero050__smoke,
  .hero050__glitter-container,
  .hero050__dust,
  .hero050__orb {
    display: none !important;
  }

  .hero050__stage {
    animation-duration: 12s !important;
  }
}

/* شريط الثقة: الهوفر فقط على أجهزة الماوس */
@media (hover: none), (pointer: coarse) {
  .trust-050-bar .trust-050-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  .trust-050-bar .trust-050-card:hover::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .trust-050-bar .trust-050-card:hover img,
  .trust-050-bar .trust-050-card:hover svg,
  .trust-050-bar .trust-050-card:hover i {
    transform: none !important;
    filter: none !important;
  }
}


/* ==========================================================================
   إصلاح منيو الديسكتوب الجانبية — منع تكرار التصنيفات
   لا يؤثر على منيو الجوال
   ========================================================================== */
@media (min-width: 992px) {
  #mobile-menu.mm-spn ul ul:not(.mm-spn--open) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mobile-menu.mm-spn ul.mm-spn--open,
  #mobile-menu.mm-spn > ul.main-menu.mm-spn--open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #mobile-menu.mm-spn > ul.main-menu > li > ul:not(.mm-spn--open) {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}