/* ==========================================================================
   Hero + stats bar
   ========================================================================== */

.hero { padding-top: 80px;  }
.hero__inner {
  display: grid; grid-template-columns: 1fr 562px;
  gap: 80px; align-items: center;
  padding-bottom: 64px;
}
.hero__copy { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
.hero__title {
  position: relative; z-index: 0;
  font-size: 48px; line-height: 1.16; 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: 700px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__visual img { width: 100%; height: auto; object-fit: contain; }

/* ---- Stats bar ---- */
/* Borderless band with a white→blue gradient that blends the hero into the
   blue features section below (matches hardwario.com). */
.stats-wrap { background: linear-gradient(180deg, var(--bg) 0%, var(--surface-alt) 100%); padding: 40px 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; }
.stats__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.stats__value { font-size: 49px; font-weight: 700; line-height: 1; color: var(--heading); }
.stats__label { font-size: 16px; line-height: 26px; color: var(--text-soft); }