.cinematic-device {
  position: relative;
  margin-top: 4.5rem;
  min-height: 620px;
  perspective: 1500px;
}

.device-glow {
  position: absolute;
  inset: 16% 8% auto 8%;
  height: 42%;
  background: radial-gradient(ellipse at center, rgba(112, 163, 10, .32), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.screen {
  position: absolute;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(112, 163, 10, .44);
  background: #071007;
  box-shadow: 0 38px 120px rgba(0, 0, 0, .66), 0 0 90px rgba(112, 163, 10, .2);
  transform-style: preserve-3d;
  will-change: transform;
}

.screen:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .15) 45%, transparent 62%);
  transform: translateX(-130%);
  animation: sheen 5s ease-in-out infinite;
}

@keyframes sheen {
  0%, 55% { transform: translateX(-130%) }
  82%, 100% { transform: translateX(130%) }
}

.screen-main {
  left: 8%;
  top: 10px;
  width: 78%;
  transform: rotateX(8deg) rotateY(-16deg) rotateZ(-2deg);
}

.screen-side {
  right: -1%;
  top: 128px;
  width: 46%;
  z-index: 3;
  transform: rotateX(8deg) rotateY(-22deg) rotateZ(5deg);
}

.screen-mobile {
  left: 2%;
  bottom: 52px;
  width: 18%;
  z-index: 4;
  border-radius: 30px;
  transform: rotateX(9deg) rotateY(18deg) rotateZ(-4deg);
}

.browser-top {
  height: 42px;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(2, 5, 2, .9);
  border-bottom: 1px solid rgba(112, 163, 10, .3);
  padding: 0 .85rem;
}

.dot { width: .62rem; height: .62rem; border-radius: 99px; background: #677160; }
.dot:nth-child(1) { background: #ff5f57; }
.dot:nth-child(2) { background: #ffbd2e; }
.dot:nth-child(3) { background: #28c840; }

.site-art {
  min-height: 520px;
  padding: 0;
  background: transparent;
}

.screen-side .site-art { min-height: 355px; }
.screen-mobile .site-art { min-height: 360px; padding: 0; }

.device-website {
  position: relative;
  padding: 0 !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}

.device-website:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .18), transparent 20%),
    linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 30%, transparent 70%, rgba(0, 0, 0, .25));
  opacity: .72;
  mix-blend-mode: screen;
}

.device-website:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .48);
}

.mock-hero {
  height: 94px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 1rem;
}

.mock-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: .85rem;
}

.mock-card {
  height: 116px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(112, 163, 10, .22);
}

.mock-card.small { height: 56px; margin-bottom: .8rem; }
.screen-mobile .mock-card { height: 78px; }
.screen-mobile .mock-hero { height: 78px; }

@media (max-width: 991px) {
  .cinematic-device { min-height: 55vw; }
  .screen-main { left: 0; width: 92%; }
  .screen-main .site-art { min-height: auto; aspect-ratio: 16/10; height: auto; }
  
  .screen-side { width: 60%; right: -2%; }
  .screen-side .site-art { min-height: auto; aspect-ratio: 4/3; height: auto; }

  .screen-mobile { width: 27%; left: 1%; }
  .screen-mobile .site-art { min-height: auto; aspect-ratio: 9/19; height: auto; }
}

@media (max-width: 640px) {
  .cinematic-device { min-height: 65vw; padding-bottom: 3rem; }
  .screen-main .site-art { min-height: auto; aspect-ratio: 16/10; height: auto; }
  
  .screen-side { display: none; }
  
  .screen-mobile { width: 40%; bottom: 18px; }
  .screen-mobile .site-art { min-height: auto; aspect-ratio: 9/19; height: auto; }
}