.hero{
  min-height:100svh;
  padding-top:clamp(150px,15vw,210px);
  padding-bottom:clamp(70px,8vw,110px);
  overflow:hidden;
}
.hero-copy{
  max-width:1280px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}
.hero-copy .intro{
  max-width:940px;
  margin:34px auto 0;
  color:var(--muted);
  font-size:clamp(18px,1.45vw,22px);
}
.hero-product{
  width:min(760px,78vw);
  margin:clamp(36px,4vw,64px) auto 0;
  position:relative;
  z-index:1;
}
.hero-product img,
.hero-product video{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 34px 38px rgba(36,28,23,.12));
}
.hero-specs{
  margin-top:clamp(20px,3vw,44px);
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 34px;
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  color:#5c5855;
}
@media (max-width:960px){
  .hero-product{width:min(88vw,720px);margin-left:auto;margin-right:auto}
  .hero-product img,.hero-product video{width:100%;max-width:100%;height:auto;object-fit:contain}
}
@media (max-width:640px){
  .hero{padding-top:132px}
  .hero-copy{text-align:left}
  .hero-copy .intro{margin-left:0;margin-right:0}
  .hero-product{width:min(100%,720px);max-width:100%;margin-left:auto;margin-right:auto;transform:none;overflow:visible}
  .hero-product img,.hero-product video{display:block;width:100%;max-width:100%;height:auto;margin-left:auto;margin-right:auto;position:static;left:auto;transform:none;object-fit:contain}
  .hero-specs{justify-content:flex-start}
}