.oca-hero-section {
  position: relative;
  overflow: hidden;
  background: #07050d;
  isolation: isolate;
}

.oca-hero-section::before {
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(113, 75, 103, 0.25), transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(1, 126, 132, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 40% at 60% 20%, rgba(113, 75, 103, 0.12), transparent 55%),
    radial-gradient(ellipse 30% 50% at 10% 80%, rgba(1, 126, 132, 0.10), transparent 50%);
  animation: ocaHeroMeshMove 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

.oca-hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(113, 75, 103, 0.20) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.oca-hero-section > * {
  position: relative;
  z-index: 1;
}

.oca-hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

.hero-app-window,
.oca-dashboard {
  animation: ocaFloatSoft 6s ease-in-out infinite;
}

@keyframes ocaHeroMeshMove {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(2%, -3%) scale(1.04);
  }
  66% {
    transform: translate(-3%, 2%) scale(0.97);
  }
  100% {
    transform: translate(1%, -1%) scale(1.02);
  }
}

@keyframes ocaFloatSoft {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-6px) rotate(0.3deg);
  }
  66% {
    transform: translateY(4px) rotate(-0.2deg);
  }
}