.hero{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid var(--line);
  background: #0a0f18;
  box-shadow: var(--shadow);
}
.hero-bg{
  min-height: 360px;
  background-size: cover;
  background-position: center;
  position:relative;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,15,20,.92) 0%, rgba(11,15,20,.55) 45%, rgba(11,15,20,.15) 100%);
}
.hero-content{
  position:absolute; inset:0;
  padding:24px;
  display:flex; align-items:flex-end;
}
.hero h1{margin:0 0 8px; font-size: 2rem}
.hero p{margin:0; color:var(--muted); max-width: 52ch}
.pin-row{display:flex; gap:10px; margin-top:14px}
.pin-row input{font-size:1.1rem; letter-spacing:.25rem; text-align:center}