/* верхняя страница (hero). Фон не задаём */
.hero{
  position:relative; text-align:center;
  padding:60px 0 100px; /* место под стрелку */
}
.logo-icon{ width:96px; height:96px; margin-bottom:28px; }
.brand{ font-size:clamp(48px,8vw,96px); font-weight:700; letter-spacing:.035em; line-height:1.05; }
.tagline{ font-size:clamp(20px,3.2vw,38px); margin:10px 0 28px; letter-spacing:.03em; text-transform:uppercase; }

/* маленькая стрелка внизу hero */
.scroll-hint{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  color:#111; text-decoration:none; opacity:.8; animation:scroll-bounce-hero 1.6s infinite ease-in-out;
}
.scroll-arrow{ width:100%; height:100%; }
@keyframes scroll-bounce-hero{
  0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,5px) }
}