.hero-product-photo {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(22px 28px 28px rgba(38, 83, 121, .22));
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 48% 48% at 50% 52%, #000 54%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 48% at 50% 52%, #000 54%, transparent 100%);
}

.hero-device .device-card { display: none; }

.willi-hardware {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 58px;
  align-items: center;
  padding: 34px 0 105px;
}

.hardware-intro h2 {
  margin: 0 0 18px;
  font-size: clamp(33px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.hardware-intro h2 em { color: var(--blue); font-style: normal; }
.hardware-intro > p:last-child { color: var(--muted); line-height: 1.75; max-width: 420px; }

.hardware-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hardware-grid article {
  min-height: 172px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.hardware-grid span {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #e9f3fb;
  color: var(--blue);
  font: 700 13px 'DM Mono', monospace;
}

.hardware-grid h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.02em; }
.hardware-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.hardware-note { grid-column: 1 / -1; margin: -37px 0 0; color: #8a9aaa; font-size: 10px; }

@media (max-width: 800px) {
  .willi-hardware { grid-template-columns: 1fr; gap: 30px; padding: 0 0 70px; }
  .hardware-grid article { min-height: 150px; }
  .hardware-note { margin: -18px 0 0; }
}