.hero {
  display: flex;
  align-items: center;
  
}

.hero-name {
  display: inline-block;
}

.name-svg {
  width: 520px;
  max-width: 100%;
}

.name-svg text {
  font-family: system-ui, sans-serif;
  font-size: 72px;
  font-weight: 600;

  fill: transparent;
  stroke: var(--primary-dark);
  stroke-width: 2;

  stroke-dasharray: 600;
  stroke-dashoffset: 600;

  animation: draw-text 1.8s ease-out forwards;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.hero-name:hover text {
  animation: rewind-text 0.35s ease forwards;
  stroke: var(--primary);
  fill: var(--blue-white);
}

.description {
  max-width: 920px;
}

.contacts {
  display: flex;
  gap: 1rem;
}

.contacts a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}