/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding-top: 56px; padding-bottom: 40px; display: flex; align-items: center; }
.hero__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.hero__title {
  position: relative; z-index: 0;
  font-size: 56px; line-height: 1.08; font-weight: 700;
  color: var(--heading); letter-spacing: -.02em;
}
.hero__line { display: block; }
.hero__hl { position: relative; white-space: nowrap; }
.hero__hl::before {
  content: ""; position: absolute; left: -6px; right: -6px;
  bottom: .06em; height: .42em;
  background: var(--red-soft); border-radius: 4px; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: hl-grow .7s .35s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hero__red { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .hero__hl::before { transform: none; animation: none; } }
@keyframes hl-grow { to { transform: scaleX(1); } }

.hero__text { font-size: 16px; line-height: 26px; color: var(--text-soft); max-width: 540px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__visual {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--border-hair);
}
.hero__visual img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .hero { padding-bottom: 56px; }
}