.devices { position: relative; display: grid; justify-items: center; margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.macbook { width: min(62rem, 100%); margin: 0; }

.macbook-lid {
  padding: 1.1% 1.1% 1.5%;
  border-radius: 1.4rem 1.4rem 0.35rem 0.35rem;
  background: linear-gradient(#2b2723, #121010);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 3rem 6rem rgba(0, 0, 0, 0.6),
    0 0 9rem rgba(255, 198, 92, 0.12);
}

.macbook-screen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.7rem;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255, 198, 92, 0.35), transparent 70%),
    radial-gradient(60% 60% at 85% 90%, rgba(224, 86, 122, 0.3), transparent 70%),
    linear-gradient(160deg, #3a2410, #120c08);
}

.macbook-screen img { width: 97%; height: auto; }

.macbook-base {
  position: relative;
  width: 112%;
  height: clamp(0.6rem, 1.4vw, 1.1rem);
  margin-left: -6%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(#45403a, #1d1a17 55%, #0c0a09);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
}

.macbook-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 45%;
  translate: -50% 0;
  border-radius: 0 0 0.6rem 0.6rem;
  background: rgba(0, 0, 0, 0.4);
}

.phone {
  position: absolute;
  right: max(var(--gutter), 1%);
  bottom: -5%;
  width: clamp(8.5rem, 16vw, 12rem);
  margin: 0;
}

.phone-screen {
  padding: 5%;
  border-radius: 2.2rem;
  background: #0c0b0a;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    0 2rem 4rem rgba(0, 0, 0, 0.7);
}

.phone-screen video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 1.8rem; background: #000; }

.rig-caption { margin: 0.8rem 0 0; text-align: center; font-size: 0.76rem; color: rgba(236, 238, 241, 0.5); }

@media (max-width: 48rem) {
  .phone { position: static; width: min(15rem, 70%); margin-top: 2.5rem; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .macbook {
      transform-origin: 50% 100%;
      animation: lay-flat linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    .phone {
      animation: phone-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }
}

@keyframes lay-flat { from { transform: perspective(2000px) rotateX(20deg) scale(0.94); } to { transform: none; } }
@keyframes phone-rise { from { transform: translateY(3rem); } to { transform: translateY(-1rem); } }