.hero {
  min-height: 800px;
  background: #fffdf8;
}

.hero::before {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.99) 0%, rgba(255, 253, 248, 0.94) 42%, rgba(255, 253, 248, 0.64) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(239, 230, 216, 0.12)),
    url("https://images.unsplash.com/photo-1633681140152-3b8726450518?auto=format&fit=crop&w=2200&q=88") center right / cover;
}

.hero::after {
  width: min(52vw, 760px);
  border-left: 1px solid rgba(200, 162, 74, 0.22);
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0), rgba(255, 253, 248, 0.6)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(239, 230, 216, 0.18));
}

.hero-copy {
  position: relative;
}

.hero-copy::after {
  content: "";
  display: block;
  width: min(420px, 64vw);
  height: 1px;
  margin-top: 38px;
  background: linear-gradient(90deg, var(--gold), rgba(200, 162, 74, 0));
}

.hero-phone-wrap {
  min-height: 620px;
  align-self: stretch;
  place-items: center end;
  padding-right: clamp(0px, 3vw, 58px);
}

.hero-phone-wrap::before {
  width: min(500px, 94%);
  height: min(610px, 90%);
  border: 1px solid rgba(200, 162, 74, 0.28);
  border-radius: 56px;
  background:
    radial-gradient(circle at 78% 18%, rgba(200, 162, 74, 0.18), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(239, 230, 216, 0.34)),
    rgba(255, 253, 248, 0.56);
  box-shadow:
    0 42px 120px rgba(17, 17, 17, 0.13),
    -24px 24px 86px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transform: translate(2px, 0);
}

.hero-phone-wrap::after {
  content: none;
  display: none;
}

.phone-shadow {
  right: clamp(0px, 4vw, 58px);
  bottom: 58px;
  width: min(430px, 78%);
  height: 150px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(17, 17, 17, 0.2), transparent 68%),
    radial-gradient(ellipse at 54% 42%, rgba(200, 162, 74, 0.18), transparent 62%);
  filter: blur(15px);
  transform: none;
}

.phone-frame {
  width: min(326px, 74vw);
  border-width: 10px;
  border-radius: 50px;
  background:
    linear-gradient(#090909, #090909) padding-box,
    linear-gradient(145deg, #ffffff 0%, #c8a24a 20%, #111111 46%, #a77a24 78%, #fff8e4 100%) border-box;
  box-shadow:
    0 46px 94px rgba(17, 17, 17, 0.26),
    -24px 20px 76px rgba(255, 255, 255, 0.58),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  transform: translateY(8px);
}

.phone-frame::before {
  background: linear-gradient(180deg, #f7efd9, #a77a24);
  opacity: 0.9;
}

.phone-screen {
  gap: 14px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 12%, rgba(200, 162, 74, 0.16), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 253, 248, 0.99) 54%, rgba(239, 230, 216, 0.5) 100%);
  padding: 50px 20px 28px;
}

.phone-screen::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.7), transparent 28%),
    linear-gradient(90deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 58% 62%, transparent 62% 100%);
}

.phone-screen img {
  width: min(184px, 88%);
  margin-bottom: 4px;
}

.phone-preview-strip {
  min-height: 86px;
}

.phone-preview-strip span {
  border-color: rgba(200, 162, 74, 0.28);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.09);
}

.phone-profile-card {
  border-color: rgba(200, 162, 74, 0.34);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 248, 0.92));
  box-shadow:
    0 22px 54px rgba(17, 17, 17, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: none;
}

.phone-fake-button {
  background: linear-gradient(135deg, #111111, #2b2114);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.16);
}

@media (max-width: 1180px) {
  .hero-phone-wrap {
    min-height: 560px;
    place-items: center;
    padding-right: 0;
  }

  .hero-phone-wrap::after {
    right: 50%;
    transform: translateX(150px);
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding-top: 46px;
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.99) 0%, rgba(255, 253, 248, 0.9) 42%, rgba(255, 253, 248, 0.78) 100%),
      url("https://images.unsplash.com/photo-1633681140152-3b8726450518?auto=format&fit=crop&w=1200&q=84") center top / cover;
  }

  .hero-copy::after {
    width: 100%;
    margin-top: 26px;
  }

  .hero-phone-wrap {
    min-height: 470px;
    place-items: center;
  }

  .hero-phone-wrap::before {
    width: min(356px, 94%);
    height: 406px;
    border-radius: 34px;
    transform: translateY(6px);
  }

  .hero-phone-wrap::after {
    top: 28px;
    right: 14px;
    transform: none;
  }

  .phone-frame {
    width: min(274px, 78vw);
    transform: translateY(12px);
  }

  .phone-screen {
    gap: 12px;
    padding: 46px 18px 26px;
  }
}