.hero-art img {
  object-fit: contain;
  object-position: center;
  background: radial-gradient(circle at 60% 42%, #123d25 0%, #06120c 45%, #020604 78%);
}

@media (min-width: 901px) {
  .hero {
    justify-content: flex-end;
  }

  .hero-copy {
    width: min(610px, 44vw);
  }

  .hero-copy h1 {
    font-size: clamp(68px, 7.2vw, 110px);
  }

  .hero-art::after {
    background:
      linear-gradient(270deg, rgba(3, 9, 6, .98) 0%, rgba(3, 9, 6, .76) 36%, rgba(3, 9, 6, .08) 70%),
      linear-gradient(0deg, var(--bg), transparent 30%);
  }
}

body {
  padding-bottom: 72px;
}

.quick-dock {
  position: fixed;
  z-index: 500;
  right: 22px;
  bottom: 16px;
  left: 22px;
  min-height: 56px;
  display: flex;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  color: #f4f6ed;
  background: rgba(3, 12, 8, .92);
  border: 1px solid rgba(238, 189, 85, .48);
  box-shadow: 0 12px 50px rgba(0, 0, 0, .5), 0 0 28px rgba(102, 255, 103, .08);
  backdrop-filter: blur(16px);
}

.dock-contract {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px 9px 18px;
}

.dock-contract > span {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
}

.dock-contract code {
  min-width: 0;
  flex: 1;
  color: #e6eee8;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.dock-contract button,
.quick-dock > a {
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: var(--gold);
  font: 800 11px Inter, Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.dock-contract button {
  padding: 11px 18px;
  border: 1px solid rgba(238, 189, 85, .48);
}

.quick-dock > a {
  min-width: 76px;
  display: grid;
  place-content: center;
}

.quick-dock i {
  color: var(--green);
  font-style: normal;
}

.dock-contract button:hover,
.quick-dock > a:hover {
  color: var(--green);
  background: rgba(102, 255, 103, .07);
}

@media (max-width: 620px) {
  body {
    padding-bottom: 126px;
  }

  .quick-dock {
    right: 10px;
    bottom: 10px;
    left: 10px;
    min-height: 106px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dock-contract {
    grid-column: 1 / -1;
    padding: 10px 10px 10px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .dock-contract code {
    font-size: 10px;
  }

  .dock-contract button {
    padding: 9px 11px;
  }

  .quick-dock > a {
    min-width: 0;
    min-height: 42px;
  }

  .quick-dock > a:first-of-type {
    border-left: 0;
  }
}