/* Trade pages: the homepage's iPad video in the hero and its pop-up player.
   Copied from site/shop.html so every trade page shows the same video the same way; keep the two in step.
   Used with /assets/trade-video.js. */
.hero-ipad-stage { perspective: 1900px; perspective-origin: 50% 45%; }
.hero-ipad3d { position: relative; transform-style: preserve-3d; }
.ipad-back { display: none; }
.hero-ipad { position: relative; display: block; padding: 16px; border-radius: 30px; background: linear-gradient(145deg, #23252b, #0b0b0e 60%);
  box-shadow: 0 0 0 2px #dfe3e8, 0 0 0 3px #8d939b, 0 40px 90px rgba(0,0,0,.6), 0 0 90px rgba(243,112,33,.22); }
.hero-ipad::before { content: ""; position: absolute; top: 6px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 999px; background: #2c2f36; box-shadow: inset 0 0 0 1px #3c4049; z-index: 2; }
.hero-ipad video { display: block; width: 100%; height: auto; border-radius: 12px; }
.hero-ipad::after { content: ""; position: absolute; inset: 16px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 42%); }
.hero-ipad-link { cursor: pointer; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.hero-ipad-link video { pointer-events: none; transition: filter .25s ease; }
.hero-ipad-link:hover video { filter: brightness(1.08); }
.hero-ipad-link:focus-visible { outline: 3px solid #F37021; outline-offset: 4px; }
.hero-ipad-cap { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.1rem; font-size: .85rem; font-weight: 600; color: #f9be96; }
@media (max-width: 640px) {
  .hero-ipad { padding: 9px; border-radius: 20px; }
  .hero-ipad::before { top: 2px; width: 4px; height: 4px; margin-left: -2px; }
  .hero-ipad video, .hero-ipad::after { border-radius: 9px; }
  .hero-ipad::after { inset: 9px; }
}
@media (min-width: 1024px) {
  .hero-ipad3d { transform: rotateY(-20deg) rotateX(7deg); }
  .ipad-back { display: block; position: absolute; inset: 0; border-radius: 31px; transform: translateZ(-14px);
    background: linear-gradient(120deg, #f3f5f8 0%, #c9ced5 35%, #8f959d 70%, #6c727a 100%);
    box-shadow: -40px 50px 90px rgba(0,0,0,.6), 0 0 110px rgba(243,112,33,.22); }
  .hero-ipad { box-shadow: 0 0 0 2px #e4e7eb, 0 0 0 3px #a3a9b1; }
}
@media (min-width: 641px) and (max-width: 1023px) { .hero-ipad3d { transform: rotateX(8deg); } }

/* The pop-up player for the full video with sound. */
.video-box { position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,20,.96); display: none; overflow: auto; -webkit-overflow-scrolling: touch; }
.video-box.open { display: block; }
.video-box .lightbox-inner { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 16px 24px; box-sizing: border-box; }
.video-box video { width: min(100%, 1600px); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.video-box .lightbox-close { position: fixed; top: 10px; right: 12px; z-index: 1001; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(26,26,46,.9); color: #fff; font-size: 22px; line-height: 38px; text-align: center; cursor: pointer; }