.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(76, 79, 105, 0.18);
}

.hero-copy {
  display: grid;
  align-content: start;
}

.shot-stage {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.88) 0 52px, rgba(226, 211, 188, 0.4) 53px 58px, transparent 59px),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.82) 0 40px, rgba(226, 211, 188, 0.32) 41px 45px, transparent 46px),
    linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(249, 243, 233, 0.72));
}

.shot-stage--wasessen {
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.88) 0 54px, rgba(226, 211, 188, 0.42) 55px 60px, transparent 61px),
    radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.82) 0 42px, rgba(226, 211, 188, 0.34) 43px 47px, transparent 48px),
    radial-gradient(circle at 16% 14%, rgba(239, 154, 72, 0.18), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(142, 191, 90, 0.16), transparent 24%),
    radial-gradient(circle at 54% 86%, rgba(114, 197, 193, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(248, 240, 229, 0.7));
}

.store-shot {
  position: absolute;
  width: 44%;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 30px;
  box-shadow: 0 20px 42px rgba(76, 79, 105, 0.18);
}

.store-shot--back {
  top: 12%;
  left: 2%;
  transform: rotate(-8deg);
}

.store-shot--front {
  top: 2%;
  left: 29%;
  z-index: 2;
}

.store-shot--side {
  right: 2%;
  bottom: 4%;
  transform: rotate(9deg);
}

.screenshot-card {
  overflow: hidden;
}

.image-frame {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(124, 127, 147, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 22%, rgba(239, 154, 72, 0.08), transparent 24%),
    radial-gradient(circle at 80% 78%, rgba(142, 191, 90, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.88), rgba(249, 243, 234, 0.62));
}

.image-frame--tall img {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 26px;
  box-shadow: 0 18px 36px rgba(76, 79, 105, 0.16);
}

.screen-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
  justify-items: center;
}

.screen-pair img {
  width: 100%;
  max-width: 256px;
  margin: 0 auto;
  border-radius: 26px;
  box-shadow: 0 18px 36px rgba(76, 79, 105, 0.16);
}

@media (max-width: 960px) {
  .shot-stage {
    min-height: 380px;
  }

  .screen-pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .store-shot {
    width: 54%;
  }

  .store-shot--back {
    top: 20%;
    left: -4%;
  }

  .store-shot--front {
    left: 23%;
  }

  .store-shot--side {
    right: -3%;
    bottom: 6%;
  }
}