.product-panel {
  isolation: isolate;
  background: #020807 !important;
}

.product-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 52%, rgba(185, 244, 0, .14), transparent 24%),
    radial-gradient(circle at 8% 92%, rgba(111, 211, 0, .10), transparent 31%),
    linear-gradient(90deg, rgba(2, 8, 7, .98) 0%, rgba(2, 8, 7, .86) 49%, rgba(2, 8, 7, .48) 100%);
}

.product-panel::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(185, 244, 0, .24) .7px, transparent .7px);
  background-size: 34px 34px;
  opacity: .18;
  mask-image: linear-gradient(to right, transparent 3%, #000 56%, #000 100%);
}

.product-panel > :not(.ai-scene) {
  position: relative;
  z-index: 3;
}

.ai-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.intelligence-grid {
  position: absolute;
  left: 38%;
  right: -22%;
  bottom: -34%;
  height: 65%;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(185, 244, 0, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 244, 0, .11) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .45;
  mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent 94%);
  animation: intelligenceGrid 7s linear infinite;
}

.conversation-stream {
  position: absolute;
  top: 18%;
  right: 2.5%;
  width: 235px;
  height: 245px;
}

.message-card {
  position: absolute;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 220px;
  padding: 11px 13px;
  border: 1px solid rgba(202, 255, 41, .18);
  border-radius: 13px 13px 3px 13px;
  background: rgba(9, 19, 16, .86);
  color: rgba(231, 237, 233, .82);
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translate3d(55px, 0, 0);
  animation: messageArrive 10s ease-in-out infinite;
}

.message-card i {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #b9f400;
  box-shadow: 0 0 10px rgba(185, 244, 0, .75);
}

.message-one { top: 0; animation-delay: 0s; }
.message-two { top: 68px; animation-delay: .7s; }
.message-three { top: 136px; animation-delay: 1.4s; }

.analysis-core {
  position: absolute;
  top: 51%;
  left: 76%;
  display: grid;
  width: 112px;
  height: 112px;
  place-content: center;
  border: 1px solid rgba(216, 255, 99, .75);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 39% 34%, #f0ffc4 0 3%, #b9f400 4% 11%, rgba(185, 244, 0, .25) 23%, rgba(5, 18, 11, .91) 58%, rgba(2, 8, 7, .98) 74%);
  color: #edffb4;
  text-align: center;
  box-shadow:
    0 0 25px rgba(185, 244, 0, .38),
    0 0 90px rgba(185, 244, 0, .22),
    inset 0 0 30px rgba(185, 244, 0, .18);
  animation: analysisPulse 3s ease-in-out infinite;
}

.analysis-core::before,
.analysis-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(213, 255, 87, .34);
}

.analysis-core::before {
  inset: -25px;
  animation: analysisSpin 11s linear infinite;
}

.analysis-core::after {
  inset: -57px;
  opacity: .52;
  animation: analysisSpinReverse 19s linear infinite;
}

.analysis-core span {
  font-size: 26px;
  font-weight: 750;
  line-height: 1;
  text-shadow: 0 0 15px rgba(185, 244, 0, .7);
}

.analysis-core small {
  margin-top: 6px;
  color: rgba(226, 255, 138, .72);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .18em;
}

.flow-line {
  position: absolute;
  left: 76%;
  width: 1px;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, rgba(185, 244, 0, .4), transparent);
}

.flow-line i {
  position: absolute;
  left: -2px;
  width: 5px;
  height: 28px;
  border-radius: 50%;
  background: #dfff79;
  filter: blur(1px);
  box-shadow: 0 0 12px #b9f400;
  animation: signalTravel 2.7s linear infinite;
}

.flow-in { top: 38%; height: 64px; }
.flow-out { top: 58%; height: 92px; }
.flow-out i { animation-delay: -1.2s; }

.insight-card {
  position: absolute;
  display: grid;
  min-width: 118px;
  padding: 9px 11px;
  border: 1px solid rgba(185, 244, 0, .24);
  border-radius: 9px;
  background: rgba(7, 18, 13, .90);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 3px 0 0 rgba(185, 244, 0, .72);
  opacity: 0;
  transform: translateY(14px) scale(.95);
  animation: insightReveal 10s ease-in-out infinite;
}

.insight-card small {
  color: #8ea06f;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .16em;
}

.insight-card b {
  margin-top: 3px;
  color: #e9eee8;
  font-size: 10px;
  font-weight: 650;
}

.insight-intent { top: 65%; left: 56%; animation-delay: 0s; }
.insight-priority { top: 65%; right: 4%; animation-delay: .25s; }
.insight-sentiment { top: 75%; left: 52%; animation-delay: .5s; }
.insight-route { top: 75%; right: 3%; animation-delay: .75s; }
.insight-trend { top: 84.5%; left: 65%; animation-delay: 1s; }
.insight-priority b { color: #dfff79; }
.insight-sentiment { border-color: rgba(255, 143, 143, .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 3px 0 0 rgba(255, 126, 126, .72); }

@keyframes messageArrive {
  0%, 5% { opacity: 0; transform: translate3d(55px, 0, 0); }
  12%, 40% { opacity: .88; transform: translate3d(0, 0, 0); }
  52% { opacity: .25; transform: translate3d(-22px, 76px, 0) scale(.82); }
  63%, 100% { opacity: 0; transform: translate3d(-38px, 105px, 0) scale(.65); }
}

@keyframes insightReveal {
  0%, 30% { opacity: 0; transform: translateY(14px) scale(.95); }
  39%, 70% { opacity: .92; transform: translateY(0) scale(1); }
  83%, 100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes analysisPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.96); filter: brightness(.9); }
  50% { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.18); }
}

@keyframes analysisSpin { to { transform: rotate(360deg); } }
@keyframes analysisSpinReverse { to { transform: rotate(-360deg); } }

@keyframes signalTravel {
  from { top: -28px; opacity: 0; }
  15%, 80% { opacity: 1; }
  to { top: 100%; opacity: 0; }
}

@keyframes intelligenceGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 42px, 42px 0; }
}

@media (max-width: 1180px) {
  .conversation-stream { right: -5%; }
  .analysis-core,
  .flow-line { left: 82%; }
  .insight-intent,
  .insight-sentiment { left: 61%; }
  .insight-priority,
  .insight-route { right: -4%; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-scene * { animation: none !important; }
  .message-one,
  .insight-intent,
  .insight-priority,
  .insight-route { opacity: .75; transform: none; }
}