/* أساس القسم */
.duo-hero{
  position:relative;
  overflow:visible;                /* لا نقصّ الرأس */
  padding-block: clamp(24px,6vw,56px);
}
.duo-stage{
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  min-height: clamp(440px, 48vw, 580px);
  display: grid;
  place-items: center;
  isolation: isolate;              /* لطبقات التوهج */
  perspective: 1400px;
  /* لا نضع mask من الأعلى كي لا يُقصّ الرأس */
}

/* أساس شكل الهاتف */
.iphone{
  --w: clamp(230px, 32vw, 360px);
  width: var(--w);
  aspect-ratio: 9/19.5;
  position: absolute;
  border-radius: 28px;
  background: #0e1322;             /* يتبدّل تلقائيًا مع النهاري إذا أردت */
  box-shadow:
    0 22px 46px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.10);
  overflow: hidden;
  transform-origin: center;
  transition: transform .35s ease, filter .35s ease, opacity .45s ease;
  opacity: 1;                      /* مرئي دائمًا */
}

/* شاشة الهاتف */
.screen{
  position:absolute; inset:10px;
  border-radius:20px; overflow:hidden;
  background:#000; display:grid;
}
.screen .slide{ width:100%; height:100%; object-fit:cover; display:block; }

/* الجزيرة والثقب */
.island,.punch{
  position:absolute; left:50%; transform:translateX(-50%);
  background:#000; z-index:3;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.island{ top:10px; width:34%; max-width:140px; height:18px; border-radius:12px; }
.punch { top:14px; width:12px; height:12px; border-radius:50%; }

/* ========== التموضع الواقعي مثل الصورة (متباعد بالأعلى – متقارب بالأسفل) ========== */
.iphone[data-role="A"]{
  z-index: 2;
  transform:
    translateX(-12%) translateY(12px)
    rotate(-5.5deg) rotateY(-5deg) rotateX(1.5deg)
    scale(1.02);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask-image: linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.55) 90%,transparent 100%);
}
.iphone[data-role="B"]{
  z-index: 1;
  transform:
    translateX(12%) translateY(14px)
    rotate(5.5deg) rotateY(5deg) rotateX(-1.2deg)
    scale(1.02);
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.45));
  -webkit-mask-image: linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.55) 88%,transparent 100%);
          mask-image: linear-gradient(to bottom,#000 0%,#000 80%,rgba(0,0,0,.55) 88%,transparent 100%);
}

/* توهج سفلي */
.floor{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(740px, 90%); height:160px; pointer-events:none;
  background: radial-gradient(60% 100% at 50% 65%, rgba(0,0,0,.6), rgba(0,0,0,0) 70%);
  filter: blur(10px); opacity:.9;
}
/* ظل سفلي يدمج مع الخلفية (ليل/نهار) */
.duo-stage::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--nx-bg, #0b0f1a) 90%);
}
html[data-bs-theme="light"] .duo-stage::after{
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--nx-bg-light, #f7f8fb) 90%);
}

/* لمعان جانبي خفيف يوحي بالانحناء */
.iphone::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.26), transparent 20%, transparent 80%, rgba(0,0,0,.26));
  mix-blend-mode: multiply; pointer-events:none;
}

/* استجابة */
@media (max-width:680px){
  .duo-stage{ min-height:470px; }
  .iphone[data-role="A"]{
    transform: translateX(-9%) translateY(10px) rotate(-5deg) rotateY(-4.5deg) rotateX(1.2deg) scale(1.015);
  }
  .iphone[data-role="B"]{
    transform: translateX(9%) translateY(12px) rotate(5deg) rotateY(4.5deg) rotateX(-1deg) scale(1.015);
  }
}

























/* ===== Phones Duo: shape + angles only ===== */
.phones-duo{ padding-block: clamp(24px,6vw,56px); }
.phones-stage{
  position:relative;
  max-width: 1000px;
  margin-inline:auto;
  min-height: clamp(420px, 50vw, 640px);
  display:grid; place-items:center;
  perspective: 1400px;
  isolation:isolate;
}

/* base phone */
.phone{
  --w: clamp(230px, 34vw, 360px);
  position:absolute;
  width: var(--w);
  aspect-ratio: 9/19.5;
  filter: drop-shadow(0 24px 54px rgba(0,0,0,.35));
  transform-style: preserve-3d;
}

/* bezel (frame) */
.phone .bezel{
  position:relative; inset:0;
  width:100%; height:100%;
  border-radius: 36px;
  background: #121418;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 10px #0c0f14;
  overflow:hidden;
}

/* inner chamfer highlight for realism */
.phone .bezel::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,0) 35%),
    linear-gradient(-35deg, rgba(0,0,0,.38), rgba(0,0,0,0) 40%);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* dynamic island */
.notch.island{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width: 34%; max-width: 150px; height: 20px; border-radius: 14px;
  background:#000;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  z-index:3;
}

/* screen */
.screen{
  position:absolute; inset:10px; border-radius: 26px; overflow:hidden;
  background:#000;
}
.screen img{ width:100%; height:100%; object-fit:cover; display:block; }

/* side buttons hint */
.phone[data-role="B"] .bezel::after,
.phone[data-role="A"] .bezel::after{
  content:"";
  position:absolute; right:-2px; top:22%;
  width:3px; height:56px; border-radius:2px; background:#1b1f28;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone[data-role="A"] .bezel::after{ left:-2px; right:auto; height:74px; }

/* floor glow */
.floor-glow{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(720px, 90%); height:160px;
  background: radial-gradient(60% 100% at 50% 70%, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  filter: blur(10px); pointer-events:none; z-index:0;
}

/* ===== Angles/placement to match the reference ===== */
/* Back/left phone (أبعد، مائل يسار) */
.phone[data-role="A"]{
  z-index:1;
  transform:
    translateX(-18%) translateY(-6%)
    rotateZ(-10deg) rotateY(-7deg) rotateX(2deg)
    scale(.98);
  /* يختفي القاع تدريجيًا */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,.65) 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0,0,0,.65) 92%, transparent 100%);
}

/* Front/right phone (أقرب، مائل يمين) */
.phone[data-role="B"]{
  z-index:2;
  transform:
    translateX(16%) translateY(6%)
    rotateZ(12deg) rotateY(6deg) rotateX(-1.5deg)
    scale(1.02);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.6) 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,.6) 90%, transparent 100%);
}

/* hover (اختياري) */
.phones-stage:hover .phone[data-role="A"]{
  transform:
    translateX(-19%) translateY(-7%)
    rotateZ(-11deg) rotateY(-8deg) rotateX(2deg)
    scale(.985);
}
.phones-stage:hover .phone[data-role="B"]{
  transform:
    translateX(47%) translateY(-5%)
    rotateZ(30deg) rotateY(7deg) rotateX(-1.5deg)
    scale(1.025);
}

/* responsive tweaks */
@media (max-width: 640px){
  .phones-stage{ min-height: 520px; }
  .phone[data-role="A"]{
    transform: translateX(-12%) translateY(-4%) rotateZ(-9deg) rotateY(-6deg) scale(.985);
  }
  .phone[data-role="B"]{
    transform: translateX(12%) translateY(6%) rotateZ(11deg) rotateY(5deg) scale(1.02);
  }
}

/* accessibility helper */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path: inset(50%); }