:root {
  --prey-red: #a42a36;
  --prey-hot: #c1646d;
  --prey-dark: #070708;
  --prey-white: #f7f7f5;
}

.neural-hero .engine-shell {
  grid-template-columns: minmax(455px,.8fr) minmax(650px,1.08fr);
  gap: clamp(34px,4vw,72px);
}

.neural-hero .engine-copy h1 {
  max-width: 740px;
  font-size: clamp(62px,5.85vw,100px);
}

#service-web-canvas {
  position: absolute;
  inset: 0 0 70px;
  z-index: 2;
  width: 100%;
  height: calc(100% - 70px);
  pointer-events: none;
}

.prey-stage {
  --prey-x: 0px;
  --prey-y: 0px;
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(100%,700px);
  aspect-ratio: 1.06;
  transform: translate3d(var(--prey-x),var(--prey-y),0);
  transition: transform .32s ease-out;
}

.prey-stage::before {
  content: var(--i18n-capture-map,"LIVE CAPTURE MAP / 06 DIGITAL ORGANISMS");
  position: absolute;
  z-index: 5;
  right: 1%;
  top: 1%;
  color: rgba(255,255,255,.28);
  font: 600 7px/1 var(--mono);
  letter-spacing: .11em;
}

.prey-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 47%,rgba(164,42,54,.13),transparent 12%,rgba(164,42,54,.025) 35%,transparent 68%),
    repeating-radial-gradient(circle at 50% 47%,transparent 0 45px,rgba(255,255,255,.025) 46px 47px);
  box-shadow: inset 0 0 110px rgba(0,0,0,.6);
}

.web-heart {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 47%;
  width: 98px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  overflow: visible;
  background: transparent;
  box-shadow: none;
  animation: prey-heart 2.8s ease-in-out infinite;
}

.web-heart > img {
  position: relative;
  z-index: 3;
  width: 118%;
  height: 118%;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.18)) drop-shadow(0 0 18px rgba(164,42,54,.72));
}

.web-heart > i {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(193,100,109,.7) 28% 72%,transparent);
  transform-origin: center;
}

.web-heart > i:nth-of-type(1) { transform: translate(-50%,-50%) rotate(22deg); }
.web-heart > i:nth-of-type(2) { transform: translate(-50%,-50%) rotate(-22deg); }
.web-heart > i:nth-of-type(3) { transform: translate(-50%,-50%) rotate(56deg); }
.web-heart > i:nth-of-type(4) { transform: translate(-50%,-50%) rotate(-56deg); }

.prey-orb {
  appearance: none;
  position: absolute;
  z-index: 9;
  width: 158px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 28%,rgba(255,255,255,.12),transparent 8%),
    radial-gradient(circle at 50% 48%,rgba(164,42,54,.18),rgba(47,13,18,.92) 52%,rgba(7,7,8,.97) 74%);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(164,42,54,.025),0 17px 44px rgba(0,0,0,.46),inset 0 0 38px rgba(164,42,54,.12);
  cursor: pointer;
  transition: border-color .3s,box-shadow .3s,transform .3s,filter .3s;
  animation: prey-drift 4.6s ease-in-out infinite;
}

.prey-orb::before,
.prey-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  pointer-events: none;
}

.prey-orb::before { inset: 9px; border-style: dashed; animation: prey-spin 22s linear infinite; }
.prey-orb::after { inset: 24px; border-color: rgba(164,42,54,.18); animation: prey-spin-reverse 17s linear infinite; }

.prey-orb:hover,
.prey-orb:focus-visible,
.prey-orb.is-active {
  outline: none;
  z-index: 14;
  border-color: rgba(193,100,109,.85);
  transform: translate(-50%,-50%) scale(1.09);
  box-shadow: 0 0 0 12px rgba(164,42,54,.035),0 22px 54px rgba(0,0,0,.55),0 0 42px rgba(164,42,54,.3),inset 0 0 46px rgba(164,42,54,.22);
}

.prey-orb.is-active::before { border-color: rgba(193,100,109,.38); animation-duration: 8s; }
.prey-orb.is-active::after { border-color: rgba(255,255,255,.18); animation-duration: 7s; }

.orb-web { left: 15%; top: 20%; width: 174px; animation-delay: -.4s; }
.orb-automation { left: 72%; top: 15%; width: 154px; animation-delay: -1.6s; }
.orb-custom { left: 87%; top: 47%; width: 166px; animation-delay: -2.7s; }
.orb-database { left: 67%; top: 78%; width: 158px; animation-delay: -1.1s; }
.orb-app { left: 16%; top: 73%; width: 168px; animation-delay: -2.2s; }
.orb-desktop { left: 11%; top: 48%; width: 150px; animation-delay: -3.1s; }

.orb-number {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.3);
  font: 700 6px/1 var(--mono);
  letter-spacing: .12em;
}

.prey-orb > strong {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 47%;
  width: 78%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 15px;
  line-height: .92;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: 0 2px 15px rgba(0,0,0,.8);
}

.prey-orb > small {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.33);
  white-space: nowrap;
  font: 600 5px/1 var(--mono);
  letter-spacing: .08em;
}

.orb-components {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  pointer-events: none;
}

.orb-components i {
  position: absolute;
  min-width: 32px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(7,7,8,.88);
  color: rgba(255,255,255,.86);
  font: 750 7px/1 var(--mono);
  font-style: normal;
  text-align: center;
  letter-spacing: .015em;
  box-shadow: 0 4px 12px rgba(0,0,0,.38),0 0 12px rgba(164,42,54,.09);
  animation: prey-component 3.4s ease-in-out infinite;
}

.orb-components i:nth-child(1) { left: 16%; top: 26%; animation-delay: -.2s; }
.orb-components i:nth-child(2) { right: 15%; top: 26%; animation-delay: -.8s; }
.orb-components i:nth-child(3) { left: 7%; top: 47%; animation-delay: -1.4s; }
.orb-components i:nth-child(4) { right: 6%; top: 47%; animation-delay: -2s; }
.orb-components i:nth-child(5) { left: 15%; bottom: 25%; animation-delay: -2.6s; }
.orb-components i:nth-child(6) { right: 14%; bottom: 25%; animation-delay: -.5s; }
.orb-components i:nth-child(7) { left: 34%; top: 16%; animation-delay: -1.1s; }
.orb-components i:nth-child(8) { left: 38%; bottom: 15%; animation-delay: -1.8s; }

.prey-orb.is-active .orb-components i,
.prey-orb:hover .orb-components i {
  color: #fff;
  border-color: rgba(193,100,109,.72);
  background: rgba(47,13,18,.94);
  text-shadow: 0 0 8px rgba(255,255,255,.32);
}

.prey-inspector {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: -1%;
  width: 320px;
  min-height: 90px;
  padding: 13px 15px;
  border: 1px solid rgba(193,100,109,.4);
  transform: translateX(-50%);
  background: rgba(7,7,8,.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.55),0 0 25px rgba(164,42,54,.08);
  backdrop-filter: blur(16px);
}

.prey-inspector > span {
  display: block;
  color: rgba(255,255,255,.34);
  font: 700 6px/1 var(--mono);
  letter-spacing: .1em;
}

.prey-inspector > strong {
  display: block;
  margin-top: 7px;
  color: var(--prey-hot);
  font: 700 13px/1 var(--mono);
}

.prey-inspector p {
  margin: 6px 0 8px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  line-height: 1.45;
}

.prey-inspector small {
  display: block;
  color: rgba(255,255,255,.35);
  font: 600 6px/1.4 var(--mono);
}

@keyframes prey-heart {
  50% { box-shadow: 0 0 0 14px rgba(164,42,54,.02),0 0 58px rgba(164,42,54,.58),inset 0 0 31px rgba(164,42,54,.28); }
}

@keyframes prey-drift { 50% { margin-top: -6px; } }
@keyframes prey-spin { to { transform: rotate(360deg); } }
@keyframes prey-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes prey-component { 50% { margin-top: -3px; opacity: .78; } }

@media (max-width: 1220px) {
  .neural-hero .engine-shell { grid-template-columns: minmax(420px,.82fr) minmax(560px,1fr); }
  .prey-stage { width: min(100%,610px); }
  .orb-web { width: 154px; }
  .orb-automation { width: 140px; }
  .orb-custom { width: 148px; }
  .orb-database { width: 142px; }
  .orb-app { width: 150px; }
  .orb-desktop { width: 138px; }
  .prey-inspector { width: 285px; }
}

@media (max-width: 960px) {
  .neural-hero { min-height: auto; overflow: hidden; }
  .neural-hero .engine-shell { grid-template-columns: minmax(0,1fr); width: min(calc(100% - 30px),1400px); }
  .neural-hero .engine-copy { width: 100%; max-width: 100%; min-width: 0; }
  .neural-hero .engine-copy h1,
  .neural-hero .engine-copy > p { max-width: 100%; }
  .prey-stage { justify-self: center; width: min(92vw,680px); margin-top: 20px; }
  #service-web-canvas { inset: 0; height: 100%; }
}

@media (max-width: 650px) {
  .neural-hero .engine-shell {
    gap: 28px;
    padding: 52px 0 112px;
  }
  .neural-hero .engine-copy { overflow: visible; }
  .neural-hero .engine-kicker { max-width: 100%; font-size: 7px; letter-spacing: .08em; }
  .neural-hero .engine-copy h1 {
    max-width: 100%;
    margin: 22px 0 22px;
    font-size: clamp(35px,11.2vw,47px);
    line-height: .94;
    letter-spacing: -.05em;
  }
  .neural-hero .engine-copy > p { width: 100%; font-size: 13px; line-height: 1.68; }
  .neural-hero .engine-actions { width: 100%; margin-top: 24px; }
  .neural-hero .engine-actions .v3-button { width: 100%; min-width: 0; }
  .neural-hero .engine-proof { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 6px; margin-top: 26px; }
  .neural-hero .engine-proof > span { min-width: 0; padding: 10px 7px; gap: 6px; }
  .neural-hero .engine-proof b { font-size: 18px; text-shadow: none; }
  .neural-hero .engine-proof small { min-width: 0; font-size: 5px; letter-spacing: .04em; overflow-wrap: anywhere; }
  .prey-stage {
    width: 100%;
    max-width: 410px;
    margin: 8px 0 76px;
    aspect-ratio: .92;
    transform: none;
  }
  .prey-stage::before { display: none; }
  .prey-orb { width: clamp(94px,29vw,112px) !important; }
  .prey-orb:hover,
  .prey-orb:focus-visible,
  .prey-orb.is-active { transform: translate(-50%,-50%) scale(1.035); }
  .orb-web { left: 20%; top: 19%; }
  .orb-automation { left: 75%; top: 18%; }
  .orb-custom { left: 80%; top: 49%; }
  .orb-database { left: 67%; top: 78%; }
  .orb-app { left: 21%; top: 76%; }
  .orb-desktop { left: 16%; top: 48%; }
  .prey-orb > strong { font-size: 10px; }
  .prey-orb > small { display: none; }
  .orb-components i { min-width: 24px; padding: 3px; font-size: 5.2px; }
  .web-heart { width: 58px; }
  .web-heart > i { width: 88px; }
  .prey-inspector { bottom: -14%; width: min(88vw,310px); min-height: 82px; padding: 11px 12px; }
  .prey-inspector p { font-size: 9px; }
  .prey-inspector small { font-size: 5.5px; overflow-wrap: anywhere; }
  .neural-hero .engine-stream { height: 52px; }
  #service-web-canvas { bottom: 52px; height: calc(100% - 52px); opacity: .92; }
}

@media (max-width: 360px) {
  .neural-hero .engine-shell { width: calc(100% - 24px); }
  .neural-hero .engine-copy h1 { font-size: clamp(33px,10.8vw,39px); }
  .prey-orb { width: clamp(88px,28vw,101px) !important; }
  .orb-components i { min-width: 22px; padding: 2px 3px; font-size: 4.8px; }
  .prey-inspector { bottom: -15%; }
}

@media (prefers-reduced-motion: reduce) {
  .prey-stage { transition: none; }
  .web-heart,
  .prey-orb,
  .prey-orb::before,
  .prey-orb::after,
  .orb-components i { animation-duration: 18s !important; }
}