:root {
  color-scheme: dark;
  --page-bg: #070201;
  --focus: #ff9a2f;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  overflow-x: auto;
  font-family: Arial, Helvetica, sans-serif;
}

.landing {
  position: relative;
  width: 100%;
  min-width: 960px;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  background: #070201;
}

.landing-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.click-layer {
  position: absolute;
  inset: 0;
}

.hotspot {
  position: absolute;
  display: block;
  border-radius: 8px;
  outline: none;
}

.hotspot:focus-visible {
  box-shadow: 0 0 0 3px var(--focus), 0 0 24px rgba(255, 108, 25, .85);
}

/* Top navigation — coordinates match bolt-final-landing.png */
.home     { left: 67.0%; top: 4.8%; width: 5.4%; height: 6.4%; }
.features { left: 73.1%; top: 4.8%; width: 7.0%; height: 6.4%; }
.coins    { left: 81.0%; top: 4.8%; width: 5.0%; height: 6.4%; }
.faq      { left: 87.0%; top: 4.8%; width: 3.8%; height: 6.4%; }
.contact  { left: 91.3%; top: 4.8%; width: 6.2%; height: 6.4%; }

/* CTA buttons */
.register { left: 6.6%; top: 59.0%; width: 15.2%; height: 8.8%; }
.login    { left: 23.1%; top: 59.0%; width: 15.2%; height: 8.8%; }

@media (max-width: 959px) {
  body {
    overflow-x: auto;
  }

  .landing {
    width: 960px;
  }
}