/* First-screen composition and product selection feedback. */
.hero {
  height: calc(100svh - var(--site-chrome, 112px));
  min-height: 460px;
  max-height: 1080px;
  padding: clamp(18px, 3vh, 38px) 24px 10px;
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto;
  gap: 8px;
}
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(42px, 6.9vh, 72px); line-height: 1.07; }
.hero .lead { font-size: clamp(16px, 2.3vh, 20px); line-height: 1.5; margin-top: clamp(12px, 1.8vh, 20px); }
.hero .actions { margin-top: clamp(14px, 2.2vh, 24px); gap: 24px; }
.hero .button { min-height: 44px; padding: 11px 24px; }
.hero-stage {
  position: relative;
  isolation: isolate;
  min-height: 0;
  width: min(890px, 100%);
  margin: 0 auto;
  display: grid;
  place-items: center;
  --light-x: 0px;
  --light-y: 0px;
}
.hero-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 64%;
  height: 100%;
  top: 0;
  left: 22%;
  background: radial-gradient(ellipse at center, rgb(20 119 255 / 24%) 0%, rgb(51 153 255 / 11%) 38%, rgb(51 153 255 / 0%) 70%);
  opacity: 0;
  transform: translate3d(var(--light-x), var(--light-y), 0);
  transition: transform 350ms cubic-bezier(.16,1,.3,1), opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero[data-light-active] .hero-stage:hover::before { opacity: 1; }
}
.hero .hero-image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
  mix-blend-mode: normal;
}
.hero-foot { width: min(1184px, 100%); padding: 4px 0 6px; font-size: 12px; line-height: 1.6; }

.product-grid { gap: 24px; }
.product-card { display: flex; flex-direction: column; }
.product-visual { display: block; }
.product-card .product-image { margin-bottom: 12px; }
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 27px 25px 28px;
  border-radius: 14px;
  background: transparent;
  transition: background-color 250ms ease;
}
.product-card h3 { font-size: 30px; }
.product-card .product-tag { min-height: 46px; margin: 10px 0 15px; font-size: 16px; line-height: 1.45; }
.product-card .product-description { min-height: 78px; font-size: 15px; line-height: 1.7; }
.product-card .facts { margin: 18px 0; padding: 16px 0; border-color: var(--line); }
.product-card .facts span, .product-card p { color: var(--muted); }
.product-card .product-tag { color: var(--ink); }
.product-card .product-use { min-height: 48px; margin-bottom: 20px; font-size: 14px; }
.product-card .actions { gap: 18px; margin-top: auto; }
.product-card:has(:focus-visible) .product-info { background: #f0f6ff; }
.product-card .button:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-info { background: #f0f6ff; }
}
@media (max-width: 900px) and (min-width: 651px) {
  .product-grid { gap: 16px; }
  .product-info { padding: 22px 18px; }
  .product-card .product-tag { min-height: 70px; }
  .product-card .product-description { min-height: 130px; }
  .product-card .actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 650px) {
  .hero { min-height: 460px; max-height: none; padding: 18px 20px 8px; gap: 5px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 40px); line-height: 1.09; }
  .hero .lead { margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .hero .desktop-break { display: none; }
  .hero .actions { flex-direction: row; gap: 15px; margin-top: 16px; flex-wrap: nowrap; }
  .hero .button { font-size: 13px; min-height: 42px; padding: 10px 17px; }
  .hero .text-link { font-size: 13px; gap: 7px; white-space: nowrap; }
  .hero-foot { font-size: 10px; padding: 4px 0; }
  .hero-foot span:first-child { max-width: 235px; text-align: left; }
  .product-grid { gap: 34px; }
  .product-card .product-image { height: 235px; margin-bottom: 10px; }
  .product-info { padding: 24px; }
  .product-card .product-tag { min-height: 0; margin-bottom: 13px; }
  .product-card .product-description { min-height: 0; }
  .product-card .product-use { min-height: 0; margin-bottom: 20px; }
  .product-card .actions { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage::before { opacity: 0; transform: none; transition: none; }
}