/* Homepage mobile hero refinement — 2026-08-28 v2
   Mobile only. Retains the two movement labels and the orbit lines, but
   gives them their own clear top zone so they do not cover the PRO ONE.
   The product remains the visual focus and has visible clearance at bottom. */
@media (max-width: 700px) {
  .hero-visual {
    min-height: 600px;
    overflow: hidden;
    position: relative;
  }

  /* Keep the additional movement dimension, behind the product. */
  .hero-visual .motion-orbit {
    display: block !important;
    z-index: 1;
    opacity: 0.88;
  }

  .hero-visual .orbit-one {
    width: 82%;
    height: 40%;
    top: 34%;
    left: 9%;
    transform: rotate(22deg);
  }

  .hero-visual .orbit-two {
    width: 70%;
    height: 50%;
    top: 28%;
    left: 15%;
    transform: rotate(-29deg);
  }

  /* Explanatory labels sit in a dedicated clear band above the product,
     rather than across the product itself. */
  .hero-visual .visual-label {
    display: block !important;
    z-index: 5;
    left: 24px !important;
    right: 24px !important;
    width: auto;
    max-width: none;
    color: var(--deep);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.075em;
    white-space: normal;
  }

  .hero-visual .visual-label span {
    margin-right: 8px;
  }

  .hero-visual .label-one {
    top: 24px !important;
  }

  .hero-visual .label-two {
    top: 58px !important;
  }

  /* Keep the PRO ONE unobstructed and centered, with bottom breathing room. */
  .hero-visual .hero-product-image {
    width: 72%;
    height: 76%;
    left: 50% !important;
    right: auto !important;
    bottom: 70px !important;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center bottom;
    z-index: 3;
  }

  /* Product identifier remains, but below the equipment instead of on it. */
  .hero-visual .product-tag {
    display: block !important;
    z-index: 5;
    left: 50% !important;
    right: auto !important;
    bottom: 28px !important;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 48px);
    padding-left: 9px;
    font-size: 8.5px;
    line-height: 1.25;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  .hero-visual {
    min-height: 580px;
  }

  .hero-visual .visual-label {
    left: 20px !important;
    right: 20px !important;
    font-size: 9.5px;
  }

  .hero-visual .label-one {
    top: 22px !important;
  }

  .hero-visual .label-two {
    top: 54px !important;
  }

  .hero-visual .hero-product-image {
    width: 74%;
    height: 75%;
    bottom: 70px !important;
  }

  .hero-visual .product-tag {
    bottom: 26px !important;
    font-size: 8px;
  }
}