:root {
  --stage-width: min(100vw, 177.7778vh);
  --stage-height: calc(var(--stage-width) * 0.5625);
  --white: #ffffff;
  --blue: #0064af;
  --line: rgba(160, 240, 255, 0.82);
  --line-soft: rgba(95, 202, 245, 0.62);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #03101c;
  font-family: Arial, Helvetica, sans-serif;
}

.page-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.page-shell::before,
.page-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.page-shell::before {
  z-index: 0;
  background-image: url("assets/background.jpg");
}

.page-shell::after {
  z-index: 1;
  background-image: url("assets/shadow-overlay.png");
  mix-blend-mode: multiply;
  opacity: 0.72;
}

.ser-stage {
  position: relative;
  z-index: 2;
  width: var(--stage-width);
  height: var(--stage-height);
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: transparent;
  isolation: isolate;
}

.layer,
.asset {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.background,
.shadow {
  display: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background {
  z-index: 0;
}

.shadow {
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.72;
}

.asset {
  z-index: 5;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

.logo {
  z-index: 6;
  left: 33.75%;
  top: 14.22%;
  width: 30.06%;
  border-radius: 0.9%;
}

.industries {
  z-index: 8;
  left: 22%;
  top: 38.56%;
  width: 53.56%;
}

.bus-display {
  z-index: 9;
  left: 16.5%;
  top: 65.44%;
  width: 15.88%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.36));
}

.fridge {
  z-index: 4;
  left: 49.69%;
  top: 66.9%;
  width: 6.94%;
  opacity: 0.98;
}

.led {
  z-index: 4;
  left: 69.19%;
  top: 66.78%;
  width: 22.44%;
  opacity: 0.98;
}

.circuit-board {
  position: absolute;
  left: calc((var(--stage-width) - 100vw) / 2);
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(137, 234, 255, 0.4));
}

.circuit-board path {
  fill: var(--line);
  fill-rule: evenodd;
}

.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  color: rgba(255, 255, 255, 0.28);
  font-size: clamp(32px, 5.2vw, 88px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-8deg);
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 20, 45, 0.22);
}

.contact-text {
  position: absolute;
  right: 0.7%;
  bottom: 1.1%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35vw;
  margin: 0;
  color: var(--white);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow:
    0 2px 0 rgba(0, 33, 86, 0.72),
    0 0 7px rgba(0, 33, 86, 0.82);
}

.contact-text a {
  display: inline-flex;
  align-items: center;
  gap: 0.38vw;
  color: inherit;
  text-decoration: none;
}

.contact-email {
  font-size: clamp(14px, 1.72vw, 28px);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 1.45vw;
  font-size: clamp(13px, 1.55vw, 25px);
}

.contact-icon {
  display: inline-grid;
  place-items: center;
  width: 1.66vw;
  min-width: 20px;
  max-width: 31px;
  aspect-ratio: 1;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: #062f86;
  color: var(--white);
  font-size: 0.8em;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 720px) {
  body {
    overflow: hidden;
    background: #001729;
  }
}