:root {
  color-scheme: dark;
  --background: #020712;
  --text-primary: #eef7ff;
  --text-secondary: #a7bad2;
  --line: rgba(132, 190, 239, 0.24);
  --entity-x: 0px;
  --entity-y: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 240dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text-primary);
  font-family: "Unbounded", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.scene {
  position: fixed;
  isolation: isolate;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  perspective: 1100px;
  background:
    radial-gradient(circle at 50% 50%, rgba(13, 96, 207, 0.15), transparent 46%),
    radial-gradient(circle at 50% 105%, rgba(6, 67, 156, 0.14), transparent 47%),
    linear-gradient(180deg, #030b18 0%, #020712 72%, #020610 100%);
}

.scene::before {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(2, 7, 18, 0.46), transparent 12%, transparent 88%, rgba(2, 7, 18, 0.46)),
    linear-gradient(0deg, rgba(2, 7, 18, 0.62), transparent 19%, transparent 86%, rgba(2, 7, 18, 0.26));
}

.scene::after {
  position: fixed;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.034;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.tech-field {
  position: absolute;
  z-index: 0;
  right: -24%;
  bottom: -57%;
  left: -24%;
  height: 92%;
  opacity: 0.2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(36, 139, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 139, 255, 0.2) 1px, transparent 1px);
  background-size: 64px 48px;
  mask-image: radial-gradient(ellipse at 50% 16%, black 0%, transparent 66%);
  transform: perspective(650px) rotateX(68deg);
  transform-origin: 50% 0;
}

.site-header {
  position: absolute;
  z-index: 8;
  top: clamp(18px, 3vh, 30px);
  left: 50%;
  pointer-events: none;
  transform: translateX(-50%);
}

.brand {
  position: relative;
  width: clamp(112px, 9.6vw, 154px);
  height: clamp(31px, 2.9vw, 44px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand img {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
  user-select: none;
}

.hero-copy {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: min(94vw, 1480px);
  pointer-events: none;
  opacity: 0;
  text-align: center;
  transform: translate3d(-50%, calc(-50% + 12px), 0);
  transition:
    opacity 900ms 90ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms 90ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-copy h1 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(42px, 4.25vw, 68px);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 0.98;
  text-shadow: 0 2px 24px rgba(0, 7, 22, 0.88);
  text-wrap: balance;
}

.hero-copy h1 span {
  display: block;
}

.hero-copy h1 span:last-child {
  color: #c7d7ea;
  font-weight: 600;
}

.value-lines {
  position: absolute;
  z-index: 7;
  bottom: clamp(52px, 7vh, 84px);
  left: 50%;
  width: min(calc(100vw - 48px), 940px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.value-lines p {
  width: 100%;
  max-width: 280px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.28;
  text-align: left;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.value-lines p:nth-child(1) {
  transition-delay: 220ms;
}

.value-lines p:nth-child(2) {
  transition-delay: 310ms;
}

.value-lines p:nth-child(3) {
  color: #c4d2e2;
  transition-delay: 400ms;
}

.is-ready .brand,
.is-ready .hero-copy,
.is-ready .value-lines p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.is-ready .hero-copy {
  transform: translate3d(-50%, -50%, 0);
}

.particle-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.is-ready .particle-canvas {
  opacity: 1;
}

.core-glow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(36vw, 42vh, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(126, 255, 234, 0.3) 0%,
    rgba(44, 225, 201, 0.17) 30%,
    rgba(20, 142, 169, 0.07) 58%,
    transparent 74%
  );
  filter: blur(9px);
  transform: translate3d(calc(-50% + var(--entity-x)), calc(-50% + var(--entity-y)), 0);
  transition: opacity 800ms ease;
}

.is-ready .core-glow {
  opacity: 0.65;
}

.connectors {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mask-image: radial-gradient(
    ellipse 310px 176px at calc(50% + var(--entity-x)) calc(50% + var(--entity-y)),
    transparent 0 54%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.46) 84%,
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 310px 176px at calc(50% + var(--entity-x)) calc(50% + var(--entity-y)),
    transparent 0 54%,
    rgba(0, 0, 0, 0.08) 65%,
    rgba(0, 0, 0, 0.46) 84%,
    #000 100%
  );
}

.connector-layer {
  transform: none;
}

.beam {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.beam--left {
  stroke: url("#beam-left");
}

.beam--right {
  stroke: url("#beam-right");
}

.beam--halo {
  stroke-width: 4.4px;
  opacity: 0.3;
  filter: url("#beam-glow");
}

.beam--body {
  stroke-width: 1.65px;
  opacity: 0.88;
  filter: url("#beam-glow");
}

.beam--flow {
  stroke: #b6fbff;
  stroke-width: 0.62px;
  stroke-dasharray: 0.035 0.16;
  opacity: 0.82;
  filter: url("#beam-glow");
  animation: beam-flow 2.25s linear infinite;
}

.beam--flow.beam--right {
  animation-direction: reverse;
}

.packet {
  fill: #c7fdff;
  filter: url("#packet-glow");
}

.entity-node {
  display: none;
}

.panel {
  position: absolute;
  z-index: 4;
  width: clamp(138px, 13.6vw, 210px);
  margin: 0;
  opacity: 0;
  transform-style: preserve-3d;
  filter: drop-shadow(0 22px 38px rgba(0, 12, 36, 0.42)) drop-shadow(0 0 18px rgba(34, 137, 255, 0.16));
  will-change: transform;
}

.is-ui-hidden .connectors,
.is-ui-hidden .panel {
  display: none;
}

.is-ready .panel {
  opacity: 0.84;
  transition: opacity 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

.panel img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  animation: panel-float 6.6s ease-in-out infinite alternate;
}

.panel--top-left {
  top: auto;
  right: auto;
  bottom: 12%;
  left: 3%;
  transform: perspective(950px) rotateX(-8deg) rotateY(10deg) rotateZ(1.7deg);
}

.panel--bottom-left {
  right: auto;
  bottom: 7%;
  left: 27%;
  transform: perspective(950px) rotateX(6deg) rotateY(9deg) rotateZ(-1.5deg);
}

.panel--top-right {
  top: auto;
  right: 27%;
  bottom: 7%;
  transform: perspective(950px) rotateX(-7deg) rotateY(-10deg) rotateZ(-1.7deg);
}

.panel--bottom-right {
  right: 3%;
  bottom: 12%;
  transform: perspective(950px) rotateX(6deg) rotateY(-9deg) rotateZ(1.5deg);
}

.panel--bottom-left img,
.panel--top-right img {
  animation-delay: -3.1s;
  animation-duration: 7.2s;
}

@keyframes beam-flow {
  to { stroke-dashoffset: -1; }
}

@keyframes panel-float {
  from { translate: 0 -2px; }
  to { translate: 0 4px; }
}

@media (max-width: 1050px) {
  .panel {
    width: clamp(112px, 14.8vw, 154px);
  }

  .panel--top-left {
    left: 2%;
  }

  .panel--bottom-left {
    left: 26%;
  }

  .panel--top-right {
    right: 26%;
  }

  .panel--bottom-right {
    right: 2%;
  }
}

@media (max-width: 700px) {
  .site-header {
    top: 13px;
    left: 50%;
  }

  .brand {
    width: 104px;
    height: 30px;
  }

  .hero-copy {
    top: 50%;
    left: 50%;
    width: calc(100vw - 28px);
  }

  .hero-copy h1 {
    font-size: clamp(27px, 7.7vw, 36px);
    letter-spacing: normal;
    line-height: 1;
  }

  .value-lines {
    bottom: 24px;
    left: 50%;
    width: calc(100vw - 24px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .value-lines p {
    padding: 0;
    font-size: 16px;
    line-height: 1.18;
  }

  .value-lines p:nth-child(2),
  .value-lines p:nth-child(3) {
    margin-bottom: 0;
  }

  .panel {
    width: clamp(72px, 22vw, 98px);
    filter: drop-shadow(0 12px 24px rgba(0, 12, 36, 0.38)) drop-shadow(0 0 12px rgba(34, 137, 255, 0.14));
  }

  .panel--top-left {
    top: auto;
    right: auto;
    bottom: 18%;
    left: -1%;
  }

  .panel--top-right {
    top: auto;
    right: 24%;
    bottom: 14%;
  }

  .panel--bottom-left {
    top: auto;
    right: auto;
    bottom: 14%;
    left: 24%;
  }

  .panel--bottom-right {
    top: auto;
    right: -1%;
    bottom: 18%;
  }

  .core-glow {
    width: min(68vw, 36vh, 320px);
  }

  .connectors {
    mask-image: radial-gradient(
      ellipse 196px 118px at calc(50% + var(--entity-x)) calc(50% + var(--entity-y)),
      transparent 0 54%,
      rgba(0, 0, 0, 0.08) 65%,
      rgba(0, 0, 0, 0.46) 84%,
      #000 100%
    );
    -webkit-mask-image: radial-gradient(
      ellipse 196px 118px at calc(50% + var(--entity-x)) calc(50% + var(--entity-y)),
      transparent 0 54%,
      rgba(0, 0, 0, 0.08) 65%,
      rgba(0, 0, 0, 0.46) 84%,
      #000 100%
    );
  }

  .beam--halo {
    stroke-width: 3.4px;
  }

  .beam--body {
    stroke-width: 1.35px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beam--flow,
  .panel img {
    animation: none;
  }

  .packet {
    display: none;
  }

  .brand,
  .hero-copy,
  .value-lines p {
    transition: none;
  }
}