:root {
  color-scheme: dark;
  --design-width: 1536;
  --design-height: 1024;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #050505;
}

body {
  margin: 0;
  min-width: 320px;
  background: #050505;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.page {
  width: 100%;
  margin: 0;
}

.stage {
  position: relative;
  width: min(100vw, 1536px);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: hidden;
  background: #050505;
}

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

.hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.hotspot:focus-visible {
  outline: max(2px, .14vw) solid #f7c400;
  outline-offset: max(2px, .14vw);
  border-radius: .45vw;
}

.anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Fejléc */
.logo             { left: 7.3%;  top: 0.6%; width: 20.7%; height: 8.1%; }
.nav-home         { left: 31.8%; top: 2.2%; width: 5.7%;  height: 5.8%; }
.nav-about        { left: 38.0%; top: 2.2%; width: 5.3%;  height: 5.8%; }
.nav-services     { left: 43.6%; top: 2.2%; width: 9.2%;  height: 5.8%; }
.nav-products     { left: 53.5%; top: 2.2%; width: 6.6%;  height: 5.8%; }
.nav-references   { left: 60.0%; top: 2.2%; width: 7.8%;  height: 5.8%; }
.nav-contact      { left: 67.7%; top: 2.2%; width: 7.2%;  height: 5.8%; }
.header-phone     { left: 77.3%; top: 0.0%; width: 22.7%; height: 9.3%; }

/* Hero */
.hero-services    { left: 9.1%;  top: 37.0%; width: 13.9%; height: 4.3%; }
.hero-contact     { left: 23.9%; top: 37.0%; width: 10.9%; height: 4.3%; }
.hero-phone       { left: 70.5%; top: 33.4%; width: 22.3%; height: 15.6%; }

/* Szolgáltatás kártyák */
.service-camera   { left: 7.7%;  top: 57.1%; width: 13.2%; height: 20.6%; }
.service-alarm    { left: 21.8%; top: 57.1%; width: 12.8%; height: 20.6%; }
.service-fire     { left: 35.5%; top: 57.1%; width: 13.3%; height: 20.6%; }
.service-network  { left: 49.5%; top: 57.1%; width: 12.5%; height: 20.6%; }
.service-gate     { left: 62.7%; top: 57.1%; width: 13.2%; height: 20.6%; }
.service-smart    { left: 76.6%; top: 57.1%; width: 13.5%; height: 20.6%; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1537px) {
  .stage {
    box-shadow: 0 0 80px rgba(0,0,0,.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}