/* ===============================
   DESKTOP (≥ 992px)
================================ */
@media (min-width: 992px) {

  .hero-section {
    min-height: 85vh;
  }

  .hero-grid {
    grid-template-columns: 0.8fr 1.4fr;
    gap: 72px;
  }

  .hero-text {
    text-align: left;
  }

  .hero-text h1 {
    font-size: 3.2rem;
    max-width: 440px;
  }

  .hero-visual img {
    max-width: 620px;
    border-radius: 18px;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.08);
  }

  .product-card img {
    height: 320px;
  }

  section:not(.hero-section) {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}

/* ===============================
   ULTRA-WIDE (≥ 1600px)
================================ */
@media (min-width: 1600px) {

  .hero-inner {
    max-width: 1800px; /* allow real expansion */
    margin: 0 auto;
    padding-left: 80px;
    padding-right: 80px;
  }

  .hero-grid {
    grid-template-columns: 0.65fr 1.8fr;
    gap: 120px;
  }

  .hero-visual img {
    max-width: 900px;   /* THIS is the real fix */
    width: 100%;
  }
}