:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f4efe5; }
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  padding: 0;
}
.page-shell {
  width: min(1122px, 100vw);
  position: relative;
  line-height: 0;
  background: #f8f3e9;
}
.site-image { width: 100%; height: auto; display: block; }
.hotspot {
  position: absolute;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  border-radius: 14px;
}
.hotspot:focus-visible {
  outline: 4px solid rgba(0, 128, 0, .75);
  outline-offset: 2px;
}
/* Percent positions based on the approved 1122×1402 design */
.buy-top      { left: 80.1%; top: 5.6%;  width: 15.1%; height: 3.6%; }
.nav-home     { left: 34.4%; top: 5.9%;  width: 6.8%;  height: 2.5%; }
.nav-about    { left: 43.0%; top: 5.9%;  width: 7.2%;  height: 2.5%; }
.nav-lore     { left: 52.2%; top: 5.9%;  width: 6.0%;  height: 2.5%; }
.nav-community{ left: 60.0%; top: 5.9%;  width: 10.5%; height: 2.5%; }
.launch-noxa  { left: 7.4%;  top: 39.4%; width: 20.8%; height: 4.3%; }
.view-chart   { left: 29.1%; top: 39.4%; width: 16.8%; height: 4.3%; }
.join-x       { left: 7.5%;  top: 45.0%; width: 17.4%; height: 4.0%; }
.join-telegram{ left: 26.1%; top: 45.0%; width: 20.3%; height: 4.0%; }
.social-x     { left: 7.6%;  top: 49.7%; width: 15.0%; height: 3.3%; }
.social-tg    { left: 22.8%; top: 49.7%; width: 18.0%; height: 3.3%; }
.copy-contract{ left: 36.3%; top: 54.6%; width: 9.2%;  height: 3.2%; }
.footer-x     { left: 78.4%; top: 93.1%; width: 4.5%;  height: 3.2%; }
.footer-tg    { left: 84.9%; top: 93.1%; width: 4.5%;  height: 3.2%; }
.footer-rh    { left: 91.2%; top: 93.1%; width: 4.5%;  height: 3.2%; }
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: #111; color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font: 700 14px/1 Arial, sans-serif;
  opacity: 0; pointer-events: none;
  transition: .2s ease;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 600px) {
  body { background: #f8f3e9; }
  .hotspot { border-radius: 8px; }
}