:root {
  color-scheme: dark;
  --cyan: #72e2f5;
  --aqua: #baf7ff;
  --violet: #6048e4;
  --magenta: #d94ca6;
  --ember: #ff6b32;
  --ink: #020304;
  --text: #e9fbff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: "Azeret Mono", "Nimbus Mono PS", "Courier New", monospace;
  letter-spacing: 0;
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 42%, rgba(107, 238, 255, 0.12), transparent 28rem),
    radial-gradient(circle at 53% 46%, rgba(221, 64, 163, 0.09), transparent 21rem),
    linear-gradient(180deg, #030607 0%, #000 62%, #030202 100%);
  pointer-events: none;
}

.site-shell {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 520px;
  isolation: isolate;
}

#logo-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}

#logo-scene:active {
  cursor: grabbing;
}

.stars {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}

.stars-a {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(116, 225, 244, 0.72) 0 1px, transparent 1.3px);
  background-position: 0 0, 44px 71px;
  background-size: 160px 160px, 250px 250px;
  animation: drift 60s linear infinite;
  opacity: 0.42;
}

.stars-b {
  background-image: radial-gradient(circle, rgba(255, 112, 64, 0.78) 0 1px, transparent 1.6px);
  background-position: 24px 30px;
  background-size: 340px 340px;
  animation: drift 95s linear infinite reverse;
  opacity: 0.2;
}

.identity {
  position: fixed;
  left: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(22px, 5vh, 54px);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.36rem;
  text-align: center;
}

.company,
.service,
.contact {
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(99, 228, 246, 0.38);
}

.company {
  font-size: clamp(0.68rem, 0.82vw, 0.9rem);
  font-weight: 500;
  color: rgba(232, 251, 255, 0.86);
}

.service {
  font-size: clamp(0.92rem, 2vw, 1.72rem);
  font-weight: 600;
  line-height: 1.16;
  color: #ffffff;
}

.contact {
  color: rgba(232, 251, 255, 0.82);
  font-size: clamp(0.66rem, 0.92vw, 0.88rem);
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  pointer-events: auto;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  to {
    transform: translate3d(7%, -5%, 0) rotate(3deg);
  }
}

@media (max-width: 720px) {
  .site-shell {
    min-height: 480px;
  }

  .identity {
    bottom: max(22px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars {
    animation: none;
  }
}