:root { color-scheme: dark; }

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #06101f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

.visual-page { overflow: hidden; }

.visual {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hit {
  position: fixed;
  z-index: 4;
  display: block;
  border-radius: 14px;
}

.home { left: 35.5%; top: 4.3%; width: 4.6%; height: 5.2%; }
.capabilities { left: 40.2%; top: 4.3%; width: 5.3%; height: 5.2%; }
.brain { left: 45.7%; top: 4.3%; width: 5.3%; height: 5.2%; }
.workflow { left: 51%; top: 4.3%; width: 5.5%; height: 5.2%; }
.security { left: 56.5%; top: 4.3%; width: 4.4%; height: 5.2%; }
.login { right: 10.7%; top: 3.7%; width: 5%; height: 6.2%; }
.app { right: 2.6%; top: 3.7%; width: 8%; height: 6.2%; }

.hit:focus-visible {
  outline: 2px solid #71dfff;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .visual { object-position: center; transform: scale(1.15); }
  .home,
  .capabilities,
  .brain,
  .workflow,
  .security { display: none; }
  .login { right: 20%; top: 4%; width: 14%; height: 7%; }
  .app { right: 4%; top: 4%; width: 16%; height: 7%; }
}