.hero-visual { min-width: 0; }
.hero > .wrapper { max-width: 1140px; }
.hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 32px; }
.hero-engine { width: 560px; max-width: 100%; }
.hero-engine object { display: block; width: 100%; height: auto; aspect-ratio: 725 / 466; }
.hero-text h1 { font-size: 48px; line-height: 1.1; letter-spacing: -.035em; margin-bottom: 24px; }
.hero-text p { max-width: 480px; }
@media (max-width: 1100px) and (min-width: 769px) {
  .hero-inner { grid-template-columns: 1fr 1.1fr; gap: 24px; }
  .hero-text h1 { font-size: 42px; }
}
@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 38px; }
}