html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
body.landing {
  background-image: url("images/landing.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  position: relative;
  min-height: 100vh;
}

/* clickable hotspot that overlays the landing */
.call-hotspot {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 90px;
  cursor: pointer;
  display: block;
}

/* Visible dog element (preferred in prod). Use viewport units and spin every 2s. */
.dog {
  position: fixed;
  left: 50%;
  top: 50%;
  /* center with translate; rotation included in keyframes */
  transform: translate(-50%, -50%) rotate(0deg);
  /* responsive size: scale with viewport but clamp to sensible limits */
  width: clamp(160px, 30vw, 800px);
  height: auto;
  background-image: url("images/dog.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 10;
  transform-origin: 50% 50%;
  animation: dog-spin 2s linear infinite;
}

@keyframes dog-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}