section[id] { scroll-margin-top: 92px; }

.hero-art {
  overflow: hidden;
}

.product-surface {
  width: 245px;
  min-height: 277px;
  padding: 19px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 31px;
  background: linear-gradient(145deg, #fffefa, #e7eee6);
  box-shadow: 0 28px 48px rgb(38 60 48 / 18%);
  transform: rotate(7deg);
}

.surface-top { display: flex; align-items: center; gap: 9px; color: #607269; font-size: 11px; font-weight: 700; }
.surface-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #d7f057; color: #254133; font-size: 18px; }
.surface-more { margin-left: auto; letter-spacing: 1px; }
.surface-title { margin: 32px 0 25px; color: #1c2923; font-family: Georgia, serif; font-size: 34px; font-style: italic; letter-spacing: -.07em; line-height: .92; }
.surface-bars { display: grid; gap: 9px; }
.surface-bars i { display: block; width: 100%; height: 10px; border-radius: 10px; background: #d4e1d8; }
.surface-bars i:nth-child(2) { width: 74%; background: #aecdbb; }
.surface-bars i:nth-child(3) { width: 46%; background: #d7f057; }

.app-tile { position: absolute; display: grid; width: 66px; height: 66px; place-items: center; border: 4px solid #f7f8f4; border-radius: 20px; box-shadow: 0 15px 24px rgb(29 56 43 / 18%); font-size: 28px; font-weight: 750; }
.tile-green { top: 52px; right: 14%; background: linear-gradient(145deg, #35ce78, #149653); color: #fff; transform: rotate(-7deg); }
.tile-paper { bottom: 51px; left: 12%; background: #fffdf6; color: #4f7464; transform: rotate(-10deg); }
.mini-panel { position: absolute; right: 0; bottom: 25px; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; width: 152px; padding: 13px 15px; border: 1px solid #fff; border-radius: 15px; background: rgb(255 255 255 / 88%); box-shadow: 0 15px 30px rgb(36 67 49 / 15%); color: #42584d; transform: rotate(-3deg); }
.panel-dot { grid-row: span 2; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; background: #70c892; }
.mini-panel b { font-size: 11px; letter-spacing: -.02em; }
.mini-panel small { margin-top: 2px; color: #829189; font-size: 10px; }

@media (max-width: 760px) {
  section[id] { scroll-margin-top: 82px; }
  .nav .wordmark { gap: 7px; font-size: 12px; }
  .nav .mark { width: 23px; height: 23px; border-radius: 7px; font-size: 16px; }
  .nav-links { gap: 12px; font-size: 12px; }
  .product-surface { transform: rotate(7deg) scale(.9); }
  .tile-green { right: 7%; }
  .tile-paper { left: 5%; }
  .mini-panel { right: -7px; bottom: 10px; }
}