.hf {
  --hf-green: #9dad32;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(157, 173, 50, .09) 0%, rgba(157, 173, 50, 0) 55%),
    linear-gradient(180deg, #151517 0%, #09090b 100%);
  color: #71717a;
  font-family: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  padding: 106px 28px 34px;
}
.hf *, .hf *::before, .hf *::after { box-sizing: border-box; }
.hf a { color: inherit; text-decoration: none; transition: color .15s ease; }
.hf__wrap { max-width: 1040px; margin: 0 auto; }

.hf__grid { display: grid; gap: 34px 38px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hf__about { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .hf__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .hf__about { grid-column: auto; }
}

.hf__brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.hf__brand img { width: 34px; height: 34px; object-fit: contain; }
.hf__name { color: #d4d4d8; font-weight: 600; font-size: 20px; letter-spacing: .04em; }
.hf__tag { color: var(--hf-green); font-weight: 500; font-size: 17px; }
.hf__text { margin: 0 0 12px; max-width: 360px; }
.hf__text a, .hf__mail { color: #a1a1aa; }
.hf__text a:hover, .hf__mail:hover { color: var(--hf-green); }

.hf__head { margin: 0 0 13px; font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--hf-green); }
.hf__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hf__list a { color: #a1a1aa; }
.hf__list a:hover { color: #e4e4e7; }

.hf__bottom {
  margin-top: 62px;
  padding-top: 19px;
  border-top: 1px solid #1f1f23;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 29px;
  font-size: 16px;
  color: #52525b;
}
.hf__bottom p { margin: 0; }
.hf__bottom a { color: #71717a; }
.hf__bottom a:hover { color: #e4e4e7; }
.hf__legal { display: flex; gap: 24px; }
@media (min-width: 640px) { .hf__bottom { padding-right: 86px; } }
