:root {
  --bg: #080510;
  --bg2: #10071d;
  --purple: #a84cff;
  --violet: #c16dff;
  --pink: #f18be2;
  --white: #fbf8ff;
  --muted: #b0a7ba;
  --dim: #71687b;
  --line: rgba(197, 111, 255, .24);
}

* { box-sizing: border-box; }

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

body {
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 35%, rgba(94, 31, 139, .18), transparent 33%),
    radial-gradient(circle at 12% 50%, rgba(81, 37, 132, .13), transparent 32%),
    radial-gradient(circle at 92% 62%, rgba(176, 49, 148, .12), transparent 30%),
    linear-gradient(135deg, #11091a 0%, #08050e 55%, #120817 100%);
  font-family: Inter, Arial, sans-serif;
}

.scene,
.scene > * {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene {
  z-index: 0;
  overflow: hidden;
}

#network {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .58;
}

.purple-cloud {
  position: absolute;
  width: 40vw;
  height: 40vw;
  min-width: 260px;
  min-height: 260px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .12;
  animation: drift 16s ease-in-out infinite alternate;
}

.cloud-left {
  left: -16vw;
  top: 18vh;
  background: #7935d9;
}

.cloud-right {
  right: -15vw;
  bottom: -15vw;
  background: #d94aa9;
  animation-delay: -6s;
}

.world-map {
  position: fixed;
  z-index: 1;
  top: 7%;
  left: 50%;
  width: min(760px, 78vw);
  height: min(292px, 30vw);
  transform: translateX(-50%);
  background: url("assets/world-map-network.png") center / 100% 100% no-repeat;
  opacity: .72;
  filter: saturate(1.15) brightness(.92);
  mix-blend-mode: screen;
  pointer-events: none;
}

.ambient-grid {
  top: 35%;
  left: -10%;
  width: 120%;
  height: 70%;
  background-image:
    linear-gradient(rgba(191, 107, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 107, 255, .035) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(550px) rotateX(67deg);
  mask-image: linear-gradient(to top, black, transparent 70%);
  animation: gridMove 12s linear infinite;
}

.header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  width: min(1320px, calc(100% - 52px));
  margin: auto;
  padding: 23px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand img {
  display: block;
  width: 145px;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(212, 120, 255, .18));
}

.maintenance-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 7, 16, .62);
  backdrop-filter: blur(15px);
  border-radius: 999px;
  padding: 10px 15px;
  color: #cfc7d8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #83ffc3;
  box-shadow: 0 0 13px #83ffc3;
  animation: pulse 1.5s infinite;
}

.main {
  position: relative;
  z-index: 5;
  min-height: 100svh;
  padding: 96px 20px 68px;
  display: grid;
  place-items: center;
}

.hero {
  width: min(760px, 100%);
  text-align: center;
}

.hero-visual {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto -3px;
}

.v-core {
  position: absolute;
  width: 108px;
  height: 108px;
  left: 41px;
  top: 41px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 2%, #e5b4ff 7%, #a84fff 30%, #35124d 67%, #100615 100%);
  border: 1px solid rgba(255, 185, 255, .6);
  box-shadow:
    0 0 24px rgba(167, 73, 255, .85),
    0 0 70px rgba(169, 70, 255, .34),
    inset 0 0 28px rgba(255,255,255,.08);
  z-index: 4;
}

.v-core img {
  width: 174px;
  height: 142px;
  margin-left: -36px;
  object-fit: contain;
  display: block;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 7px rgba(255, 197, 255, .55))
    drop-shadow(0 0 18px rgba(185, 84, 255, .28));
}

.ring {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 158px;
  height: 158px;
  border-radius: 50%;
  z-index: 2;
}

.ring-one {
  border: 1px solid rgba(171, 80, 255, .78);
  box-shadow:
    0 0 10px rgba(181, 75, 255, .75),
    0 0 35px rgba(176, 72, 255, .38),
    inset 0 0 20px rgba(255, 125, 235, .16);
  animation: rotate 8s linear infinite;
}

.ring-two {
  inset: 20px;
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(232, 123, 255, .42);
  transform: rotate(28deg);
  animation: rotateReverse 12s linear infinite;
}

.ring-three {
  inset: 25px;
  width: 140px;
  height: 140px;
  border: 2px solid transparent;
  border-top-color: #a653ff;
  border-right-color: #ed86e1;
  filter: drop-shadow(0 0 8px rgba(194, 75, 255, .9));
  animation: rotate 4.5s linear infinite;
}

.orbit {
  position: absolute;
  left: 31px;
  top: 77px;
  width: 130px;
  height: 38px;
  border: 1px solid rgba(220, 135, 255, .27);
  border-radius: 50%;
  z-index: 5;
}

.orbit-one { transform: rotate(17deg); animation: orbit 5s linear infinite; }
.orbit-two { transform: rotate(-29deg); border-color: rgba(104, 220, 255, .2); animation: orbitReverse 7s linear infinite; }

.node {
  position: absolute;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(206, 116, 255, .38);
  border-radius: 50%;
  color: #d9a0ff;
  background: rgba(19, 9, 30, .7);
  box-shadow: 0 0 20px rgba(176, 72, 255, .13);
  font-size: 17px;
  z-index: 8;
}

.node-person { left: 5px; top: 10px; }
.node-brain { right: 2px; top: 13px; }
.node-work { left: 4px; bottom: 13px; }
.node-search { right: 0; bottom: 8px; font-size: 26px; }

.intro .eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  color: #ded5e6;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.eyebrow i {
  display: block;
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d879f2);
}

h1 {
  margin: 7px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(52px, 6.2vw, 74px);
  line-height: .92;
  letter-spacing: -.065em;
}

h1 span {
  background: linear-gradient(100deg, #d9a0ff, #f19bdf, #bb79ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro p {
  margin: 13px auto 0;
  color: #b0a8b9;
  font-size: 12px;
  line-height: 1.55;
}

.progress-card {
  width: min(610px, 100%);
  margin: 17px auto 0;
  padding: 13px 15px 11px;
  border: 1px solid rgba(205, 117, 255, .2);
  border-radius: 13px;
  background: rgba(12, 7, 20, .58);
  box-shadow: 0 12px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  text-align: left;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  color: #b9a8c6;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

.progress-head strong { color: #e0a7ff; }

.progress-track {
  position: relative;
  height: 5px;
  margin-top: 8px;
  background: #271d31;
  border-radius: 99px;
  overflow: hidden;
}

.progress-track > div {
  width: 82%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8848ff, #cf68ed 55%, #8ddfff);
  box-shadow: 0 0 15px rgba(203, 101, 255, .8);
  transition: width 1s ease;
}

.progress-track b {
  position: absolute;
  top: -1px;
  left: 82%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 11px #fff, 0 0 20px #e18aff;
}

.stages {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.stage {
  flex: 1;
  text-align: center;
}

.stage-icon {
  width: 25px;
  height: 25px;
  margin: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202, 105, 255, .35);
  border-radius: 50%;
  background: rgba(185, 77, 255, .09);
  color: #df9dff;
  font-size: 11px;
  box-shadow: 0 0 15px rgba(183, 76, 255, .13);
}

.stage small {
  display: block;
  margin-top: 4px;
  color: #bba6c3;
  font-size: 6px;
  letter-spacing: .1em;
}

.stage-line {
  flex: .45;
  height: 1px;
  background: linear-gradient(90deg, rgba(215,123,255,.25), rgba(215,123,255,.55), rgba(215,123,255,.25));
}

.help {
  margin-top: 11px;
}

.help-title small {
  color: #bd82d1;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .17em;
}

.help-title h2 {
  margin: 3px 0 2px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
}

.help-title p {
  margin: 0;
  color: #8e8598;
  font-size: 9px;
}

.contact-grid {
  width: min(610px, 100%);
  margin: 9px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(204, 108, 255, .18);
  border-radius: 11px;
  color: white;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(181, 80, 255, .06), rgba(255,255,255,.025));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(221, 130, 255, .42);
  background: rgba(178, 74, 255, .1);
}

.contact-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210, 111, 255, .45);
  border-radius: 50%;
  color: #df94ff;
  background: rgba(189, 77, 255, .08);
  font-size: 13px;
}

.contact-text {
  min-width: 0;
  text-align: left;
}

.contact-text small,
.contact-text strong,
.contact-text em {
  display: block;
}

.contact-text small {
  color: #bd7dd0;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .14em;
}

.contact-text strong {
  margin-top: 2px;
  color: #f5eff8;
  font-size: 9px;
  white-space: nowrap;
}

.contact-text em {
  margin-top: 2px;
  color: #77707f;
  font-size: 6px;
  font-style: normal;
}

.ticker {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 24px;
  height: 28px;
  overflow: hidden;
  border-top: 1px solid rgba(207, 108, 255, .14);
  border-bottom: 1px solid rgba(207, 108, 255, .14);
  background: rgba(18, 7, 27, .7);
  backdrop-filter: blur(10px);
}

.ticker-track {
  width: max-content;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  animation: ticker 25s linear infinite;
}

.ticker span {
  color: #d39bea;
  font-family: "Space Grotesk", sans-serif;
  font-size: 8px;
  letter-spacing: .19em;
}

.ticker b {
  color: #e08cff;
  font-size: 7px;
}

footer {
  position: fixed;
  z-index: 22;
  left: 0;
  right: 0;
  bottom: 4px;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  color: #625b69;
  font-size: 7px;
}

.socials {
  display: flex;
  gap: 13px;
  color: #8d7a96;
}

.socials b {
  font-size: 9px;
}

@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }
@keyframes drift { to { transform: translate(6vw, -3vh) scale(1.08); } }
@keyframes gridMove { to { background-position: 0 52px, 52px 0; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes rotateReverse { to { transform: rotate(-360deg); } }
@keyframes orbit { to { transform: rotate(377deg); } }
@keyframes orbitReverse { to { transform: rotate(-389deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-height: 780px) and (min-width: 701px) {
  .header { padding-top: 14px; padding-bottom: 14px; }
  .main { padding-top: 74px; padding-bottom: 57px; }
  .hero-visual { transform: scale(.78); margin-top: -12px; margin-bottom: -24px; }
  h1 { font-size: 55px; }
  .intro p { margin-top: 9px; }
  .progress-card { margin-top: 11px; }
  .help { margin-top: 8px; }
  .contact-card { padding: 8px 10px; }
}


@media (max-width: 700px) {
  .world-map {
    top: 8%;
    width: 112vw;
    height: 43vw;
    opacity: .72;
  }
}

@media (max-width: 700px) {
  body { overflow-y: auto; }

  .header {
    width: calc(100% - 28px);
    padding: 14px 0;
  }

  .brand img { width: 104px; }

  .maintenance-pill {
    padding: 7px 9px;
    font-size: 6px;
    letter-spacing: .08em;
  }

  .main {
    min-height: 100svh;
    padding: 78px 13px 76px;
    display: block;
  }

  .hero {
    width: 100%;
  }

  .hero-visual {
    width: 158px;
    height: 158px;
    transform: scale(.82);
    margin: 0 auto -18px;
  }

  .intro .eyebrow {
    font-size: 6px;
    letter-spacing: .13em;
    gap: 6px;
  }

  .eyebrow i { width: 15px; }

  h1 {
    margin-top: 6px;
    font-size: clamp(43px, 13vw, 57px);
    line-height: .92;
  }

  .intro p {
    width: min(330px, 100%);
    margin-top: 11px;
    font-size: 10px;
    line-height: 1.55;
  }

  .desktop-break { display: none; }

  .progress-card {
    margin-top: 15px;
    padding: 11px 10px 10px;
  }

  .progress-head { font-size: 7px; }

  .stages { margin-top: 8px; }

  .stage-icon {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }

  .stage small { font-size: 5px; }

  .stage-line { flex: .22; }

  .help { margin-top: 13px; }

  .help-title h2 { font-size: 18px; }

  .help-title p { font-size: 8px; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 8px;
  }

  .contact-card {
    padding: 9px 10px;
  }

  .ticker {
    bottom: 23px;
    height: 25px;
  }

  .ticker-track { gap: 16px; }

  .ticker span { font-size: 6px; }

  footer {
    bottom: 4px;
    padding: 0 13px;
    font-size: 6px;
  }
}

@media (max-width: 380px) {
  .brand img { width: 92px; }

  .maintenance-pill {
    font-size: 5px;
    padding: 6px 8px;
  }

  .main { padding-top: 72px; }

  .hero-visual {
    transform: scale(.7);
    margin-bottom: -30px;
  }

  h1 { font-size: 42px; }

  .intro p { font-size: 9px; }

  .progress-card { margin-top: 12px; }

  .help-title h2 { font-size: 16px; }

  .contact-text strong { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}