@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #07100f;
  --panel: rgba(10, 22, 20, .58);
  --line: rgba(214, 255, 230, .16);
  --line-strong: rgba(214, 255, 230, .30);
  --text: #edf7f0;
  --muted: #82918b;
  --acid: #b7ff59;
  --cyan: #62f5d2;
  --mx: 50%;
  --my: 50%;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
html { background: var(--bg); }

body {
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(70, 255, 187, .07), transparent 24rem),
    linear-gradient(135deg, #08110f 0%, #050b0b 55%, #09120f 100%);
  font-family: Inter, Arial, sans-serif;
  cursor: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.55) 120%);
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

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

#network {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .5;
}

.shell {
  position: relative;
  z-index: 2;
  width: min(1600px, calc(100% - 56px));
  height: 100dvh;
  max-height: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 84px 1fr 66px;
}

.topbar,
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-color: var(--line);
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topbar { border-bottom: 1px solid var(--line); }
.footer { border-top: 1px solid var(--line); }

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}

.brand-mark {
  width: 28px;
  height: 20px;
  display: grid;
  gap: 3px;
}
.brand-mark i {
  display: block;
  height: 2px;
  background: var(--acid);
  border-radius: 99px;
}
.brand-mark i:nth-child(2) { width: 68%; }
.brand-mark i:nth-child(3) { width: 86%; }

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(183,255,89,.08), 0 0 16px var(--acid);
  animation: pulse 2.1s infinite;
}

.mini-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mini-link span { color: var(--acid); font-size: 14px; }

.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 4;
  padding: 1.5vh 0;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(410px, 80%);
  margin-bottom: clamp(18px, 3vh, 34px);
  font: 10px "Space Mono", monospace;
  letter-spacing: .15em;
  color: var(--muted);
}
.eyebrow-line { height: 1px; flex: 1; background: var(--line-strong); }

h1 {
  margin: 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  font-size: clamp(64px, 8.2vw, 138px);
  line-height: .72;
  letter-spacing: -.072em;
  font-weight: 800;
}
h1 span { display: block; }
h1 .outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(237,247,240,.55);
}
h1 .glow-word {
  color: var(--acid);
  text-shadow: 0 0 35px rgba(183,255,89,.16);
}

.lede {
  max-width: 540px;
  margin: clamp(28px, 4.5vh, 50px) 0 clamp(24px, 4vh, 44px);
  color: #9ca9a4;
  line-height: 1.55;
  font-size: clamp(13px, 1vw, 16px);
}
.lede strong { color: #d7e3dc; font-weight: 500; }

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 650px;
  border-top: 1px solid var(--line);
}

.service {
  position: relative;
  min-height: 102px;
  padding: 15px 18px 13px 0;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 8px;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: none;
  transition: background .3s ease;
}
.service:last-child { border-right: 0; }
.service::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  transition: width .45s cubic-bezier(.16,1,.3,1);
}
.service:hover,
.service.active { background: linear-gradient(to bottom, rgba(183,255,89,.055), transparent); }
.service:hover::after,
.service.active::after { width: 100%; }

.service-no {
  font: 9px "Space Mono", monospace;
  color: #6f7b76;
  padding-top: 6px;
}
.service-name {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.04em;
}
.service-desc {
  grid-column: 2;
  align-self: end;
  color: #697670;
  font: 9px/1.45 "Space Mono", monospace;
  text-transform: uppercase;
}
.service.active .service-name { color: var(--acid); }

.visual-zone {
  min-width: 0;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.visual-zone::before {
  content: "";
  position: absolute;
  width: min(48vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,255,191,.075) 0, rgba(72,255,191,.025) 35%, transparent 70%);
  filter: blur(6px);
}

.orb-wrap {
  position: relative;
  width: min(40vw, 590px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

.globe {
  position: absolute;
  inset: 12%;
  overflow: hidden;
  border: 1px solid rgba(164,255,220,.30);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(157,255,219,.10), transparent 30%),
    radial-gradient(circle at center, rgba(8,30,25,.8), rgba(3,11,10,.95) 70%);
  box-shadow:
    inset 0 0 65px rgba(92,245,210,.06),
    0 0 55px rgba(62,255,194,.055);
  animation: float 6s ease-in-out infinite;
}

.globe-grid {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  opacity: .48;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 31px, rgba(144,255,215,.18) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(144,255,215,.13) 47px 48px);
  transform: rotate(-14deg) scale(1.05);
  animation: gridDrift 18s linear infinite;
}

.globe::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(90deg, transparent 42%, rgba(183,255,89,.16) 49.5%, rgba(183,255,89,.50) 50%, rgba(183,255,89,.16) 50.5%, transparent 58%);
  transform: translateX(-75%);
  animation: scan 4.8s ease-in-out infinite;
}

.continent {
  position: absolute;
  opacity: .48;
  border: 1px solid rgba(173,255,219,.42);
  background: repeating-linear-gradient(135deg, rgba(92,245,210,.06) 0 2px, transparent 2px 5px);
  filter: drop-shadow(0 0 8px rgba(92,245,210,.12));
}
.c1 { width: 25%; height: 18%; left: 29%; top: 27%; clip-path: polygon(8% 15%,65% 0,100% 38%,78% 100%,45% 76%,12% 88%,0 44%); transform: rotate(11deg); }
.c2 { width: 20%; height: 27%; left: 47%; top: 46%; clip-path: polygon(22% 0,95% 15%,76% 48%,100% 72%,48% 100%,15% 84%,0 38%); transform: rotate(-8deg); }
.c3 { width: 14%; height: 15%; left: 18%; top: 54%; clip-path: polygon(5% 20%,55% 0,100% 35%,85% 100%,20% 76%); }

.hotspot {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(183,255,89,.38);
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: ripple 2.8s infinite;
}
.hotspot span { width: 4px; height: 4px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.h1 { left: 37%; top: 40%; }
.h2 { left: 56%; top: 57%; animation-delay: -.8s; }
.h3 { left: 69%; top: 33%; animation-delay: -1.4s; }
.h4 { left: 31%; top: 68%; animation-delay: -2s; }

.reticle {
  position: absolute;
  inset: 50%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(183,255,89,.20);
  border-radius: 50%;
}
.reticle::before,
.reticle::after {
  content: "";
  position: absolute;
  background: rgba(183,255,89,.22);
}
.reticle::before { width: 140%; height: 1px; left: -20%; top: 50%; }
.reticle::after { height: 140%; width: 1px; top: -20%; left: 50%; }

.orbit {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(149,255,215,.12);
  border-radius: 50%;
}
.orbit::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 14px var(--acid);
  left: 50%; top: -3px;
}
.orbit-a { transform: rotateX(69deg) rotateZ(18deg); animation: orbitA 13s linear infinite; }
.orbit-b { inset: 2%; transform: rotateY(72deg) rotateZ(-25deg); animation: orbitB 17s linear infinite reverse; }
.orbit-c { inset: 20%; opacity: .6; animation: spin 24s linear infinite; }

.scanline {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183,255,89,.55), transparent);
  box-shadow: 0 0 18px rgba(183,255,89,.28);
  animation: scanY 4.6s ease-in-out infinite;
}

.data-label {
  position: absolute;
  z-index: 8;
  min-width: 130px;
  padding: 10px 12px;
  border-left: 1px solid var(--acid);
  background: rgba(4,12,10,.58);
  backdrop-filter: blur(9px);
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
}
.data-label small { display:block; margin-bottom: 5px; color: #66736e; font-size: 8px; letter-spacing: .14em; }
.data-label b { display:block; margin-bottom: 3px; color: #dce7e1; font-size: 10px; font-weight: 400; }
.data-label span { color: var(--acid); font-size: 8px; letter-spacing: .1em; }
.label-a { left: 0; top: 19%; }
.label-b { right: -3%; bottom: 20%; }
.label-c { left: 5%; bottom: 13%; min-width: 112px; }
.mini-bars { height: 18px; display:flex; align-items:end; gap:3px; }
.mini-bars i { width:3px; background: var(--acid); animation: bars 1s ease-in-out infinite alternate; }
.mini-bars i:nth-child(1){height:30%}.mini-bars i:nth-child(2){height:70%;animation-delay:-.2s}.mini-bars i:nth-child(3){height:45%;animation-delay:-.5s}.mini-bars i:nth-child(4){height:90%;animation-delay:-.1s}.mini-bars i:nth-child(5){height:55%;animation-delay:-.7s}.mini-bars i:nth-child(6){height:75%;animation-delay:-.35s}

.mode-panel {
  position: absolute;
  right: 0;
  top: 9%;
  width: 220px;
  padding: 14px 0 0 15px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.mode-code { font: 8px "Space Mono", monospace; color: var(--acid); letter-spacing: .08em; }
.mode-title { margin-top: 12px; font-size: 13px; line-height: 1.35; color: #c8d4ce; }
.mode-meta { margin-top: 12px; display:flex; gap: 14px; font: 7px "Space Mono", monospace; color:#66736e; }
.mode-meta span:first-child { color: #a3b1aa; }
.mode-meta i { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--acid); margin-right:5px; box-shadow:0 0 7px var(--acid); }

.footer > * { display:flex; gap: 20px; }
.footer .coordinates { color:#5f6d66; }
.footer .legal { color:#5f6d66; justify-self:center; }
.footer .contact { justify-self:end; }
.footer .contact a { color:var(--acid); }

.cursor {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  border-radius: 50%;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 4px; height: 4px; background: var(--acid); box-shadow:0 0 9px var(--acid); }
.cursor-ring { width: 34px; height:34px; border:1px solid rgba(183,255,89,.45); transition: width .2s ease, height .2s ease, border-color .2s ease; }
body.hovering .cursor-ring { width:54px; height:54px; border-color: rgba(183,255,89,.18); }

@keyframes pulse { 50% { opacity:.35; box-shadow:0 0 0 8px rgba(183,255,89,.03),0 0 12px var(--acid); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(.5deg); } }
@keyframes scan { 50%,100% { transform: translateX(75%); } }
@keyframes scanY { 0%,100%{ transform:translateY(-180px); opacity:0;} 20%,80%{opacity:1;} 50%{transform:translateY(180px);} }
@keyframes gridDrift { to { transform: rotate(-14deg) scale(1.05) translateX(48px); } }
@keyframes ripple { 50% { box-shadow: 0 0 0 9px rgba(183,255,89,0); } }
@keyframes orbitA { to { transform: rotateX(69deg) rotateZ(378deg); } }
@keyframes orbitB { to { transform: rotateY(72deg) rotateZ(335deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bars { to { height: 100%; opacity:.35; } }

@media (max-width: 1050px) {
  .shell { width: min(100% - 32px, 1000px); grid-template-rows:72px 1fr 58px; }
  .hero { grid-template-columns: 48% 52%; }
  .orb-wrap { width: 47vw; }
  .mode-panel { display:none; }
  .data-label { transform: scale(.86); }
  h1 { font-size: clamp(58px, 9vw, 96px); }
  .service-desc { display:none; }
  .service { min-height:74px; }
  .footer .legal { display:none; }
  .footer { grid-template-columns:1fr 1fr; }
  .footer .contact { grid-column:2; }
}

@media (max-width: 760px) {
  body { overflow:auto; cursor:auto; }
  .cursor { display:none; }
  .shell { width: calc(100% - 28px); min-height:100dvh; height:auto; grid-template-rows:64px 1fr auto; }
  .topbar { grid-template-columns: 1fr auto; }
  .status { display:none; }
  .hero { grid-template-columns:1fr; align-content:center; padding:22px 0 12px; }
  .hero-copy { display:contents; }
  .eyebrow { order:0; margin:0 0 14px; }
  h1 { order:1; font-size: clamp(58px, 20vw, 104px); }
  .lede { order:3; margin:18px 0; font-size:12px; max-width:90%; }
  .services { order:4; max-width:none; }
  .visual-zone { order:2; height:32vh; min-height:235px; margin:-2vh 0 -1vh; }
  .orb-wrap { width:min(82vw, 350px); }
  .label-a,.label-c { display:none; }
  .label-b { right:-8%; bottom:15%; }
  .service { min-height:68px; padding-top:11px; }
  .service-name { font-size:20px; }
  .footer { min-height:72px; padding:12px 0; grid-template-columns:1fr; gap:8px; align-content:center; }
  .footer .coordinates { display:none; }
  .footer .contact { grid-column:1; justify-self:start; flex-wrap:wrap; gap:8px 16px; font-size:9px; }
  .mini-link { font-size:8px; }
}

@media (max-height: 720px) and (min-width: 761px) {
  .shell { grid-template-rows: 64px 1fr 52px; }
  .eyebrow { margin-bottom:16px; }
  h1 { font-size: clamp(58px, 7.3vw, 105px); }
  .lede { margin:24px 0; }
  .services { max-width:600px; }
  .service { min-height:78px; }
  .data-label { transform: scale(.82); }
}