/* Homepage-only product chapter. Preserve each product's established wordmark. */
@font-face {
  font-family: "ArduView Matrix";
  src: url("/home/assets/arduview-matrix.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.home-products {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding-block: clamp(7rem, 13svh, 9rem) clamp(3rem, 6svh, 6rem);
  scroll-margin-top: 0;
}
.home-products:focus { outline: none; }
.home-products > h2 {
  margin: 0 0 clamp(1.5rem, 3svh, 2.5rem);
  color: #b7b9ba;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .12em;
}
.home-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.home-product {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid #ffffff1c;
  border-radius: 1.5rem;
  background: #101010;
}
.home-product--arduview { background: #000; }
.home-product-copy { position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.7vw, 2.5rem) 0; }
.home-product h3 { margin: 0; font-size: clamp(1.8rem, 3.6vw, 3.25rem); font-weight: 400; line-height: 1.2; }
.home-product-name {
  display: inline-flex;
  align-items: center;
  gap: clamp(.65rem, 1.4vw, 1.25rem);
  max-width: 100%;
  min-height: 2.75rem;
  padding-block: .2rem;
  color: #f5f5f7;
  text-decoration: none;
}
.home-product--lucent .home-product-name > :first-child { font-family: "Earth Orbiter", "Michroma", sans-serif; letter-spacing: -.025em; }
.home-product--arduview .home-product-name > :first-child {
  font-family: "ArduView Matrix", monospace;
  font-synthesis: none;
  font-kerning: none;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 0 .06em #a8dcff70, 0 0 .14em #8acfff40;
}
.home-product-arrow { flex: none; color: #9da1a7; font: 400 1.25rem / 1 sans-serif; transition: color 180ms ease, transform 180ms ease; }
.home-product-name:hover .home-product-arrow,
.home-product-name:focus-visible .home-product-arrow { color: #fff; transform: translate(.15rem, -.15rem); }
.home-product-name:focus-visible { outline: 2px solid #91cbff; outline-offset: .4rem; border-radius: .2rem; }
.home-product-slogan { margin: 1rem 0 0; color: #e0e1e3; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 400; line-height: 1.5; letter-spacing: .06em; }
.home-product-slogan-en { margin: .4rem 0 0; color: #96999e; font-size: .875rem; line-height: 1.6; }
.home-product-visual { display: grid; place-items: center; align-self: end; height: clamp(15rem, 32svh, 25rem); margin-top: 1.25rem; overflow: hidden; }
.home-product-visual img { width: 100%; height: 100%; object-fit: contain; }
.home-product--lucent .home-product-visual img { transform: scale(1.8); transform-origin: 52% 60%; }
.minimal-product-link[href="/home#products"]:is(:hover, :focus-visible) span { transform: translateY(.25rem); }

@media (max-width: 760px) {
  .home-products-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .home-products { padding-block: 7rem 3rem; }
  .home-product h3 { font-size: clamp(1.8rem, 5.8vw, 2.75rem); }
  .home-product-copy { padding: 1.5rem 1.25rem 0; }
  .home-product-visual { height: clamp(13rem, 55vw, 21rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-product-arrow { transition: none; }
  .home-product-name:is(:hover, :focus-visible) .home-product-arrow,
  .minimal-product-link[href="/home#products"]:is(:hover, :focus-visible) span { transform: none; }
}