/* Phone mockup frame — Warm Sand light theme.
   Light metallic frame with soft warm shadows (the old heavy black
   glass shadows were tuned for a dark bg and look harsh on sand). */
.phone-mockup {
  position: relative;
  display: inline-block;
  padding: 10px;
  background:
    linear-gradient(150deg,
      #FFFFFF 0%,
      #ECE5D8 45%,
      #D8CFBC 100%);
  border-radius: 44px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(42, 39, 34, 0.15),
    0 30px 60px -24px rgba(42, 39, 34, 0.30),
    0 10px 20px -10px rgba(42, 39, 34, 0.18),
    0 0 60px rgba(168, 150, 95, 0.18);
  line-height: 0;
}

.phone-mockup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
  background: #000;
}

.phone-mockup .phone-btn {
  position: absolute;
  background: linear-gradient(90deg,
    rgba(42, 39, 34, 0.10),
    rgba(42, 39, 34, 0.28) 50%,
    rgba(42, 39, 34, 0.10));
  border-radius: 1.5px;
  z-index: -1;
}

.phone-mockup .phone-btn.power {
  right: -3px;
  top: 28%;
  width: 4px;
  height: 70px;
}

.phone-mockup .phone-btn.vol-up {
  left: -3px;
  top: 22%;
  width: 4px;
  height: 50px;
}

.phone-mockup .phone-btn.vol-down {
  left: -3px;
  top: calc(22% + 60px);
  width: 4px;
  height: 50px;
}

.hero-section.layout-1 .hero-thumb {
  max-width: 320px;
}

@media (max-width: 767px) {
  .hero-section.layout-1 .hero-thumb {
    max-width: 290px;
  }
}

@media (max-width: 575px) {
  .hero-section.layout-1 .hero-thumb {
    max-width: 250px;
  }
}