/* Approved chip-anchored animation, scoped to the homepage banner. */
.hero-motion { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; container-type:size; background:#70aef0; }
    .hb-artwork {
      position: absolute;
      z-index: 0;
      top: calc(50% + 24px);
      left: 50%;
      width: max(100cqw, 150cqh);
      aspect-ratio: 3 / 2;
      transform: translate(-50%, -50%);
    }

    .hb-background-art {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

.hb-brain-stage {
      position: absolute;
      z-index: 1;
      top: 21%;
      right: 5.5%;
      width: 28%;
    }

    .hb-brain {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      height: auto;
      filter:
        drop-shadow(0 14px 28px rgba(15, 106, 255, .18))
        drop-shadow(0 0 26px rgba(104, 219, 255, .18));
    }

    .hb-neural-node {
      position: absolute;
      z-index: 3;
      left: var(--x);
      top: var(--y);
      width: 6.6%;
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle,
        rgba(255, 255, 255, .98) 0 8%,
        rgba(176, 251, 255, .96) 9% 20%,
        rgba(59, 225, 255, .66) 34%,
        rgba(23, 174, 255, .17) 58%,
        transparent 73%);
      mix-blend-mode: screen;
      transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy))) scale(.62);
      filter: blur(.15px) drop-shadow(0 0 10px rgba(92, 232, 255, .62));
      opacity: .22;
      animation: hb-node-breathe 4.4s cubic-bezier(.45, 0, .55, 1) infinite;
      animation-delay: var(--delay);
      will-change: transform, opacity, filter;
    }

    .hb-neural-node::after {
      content: "";
      position: absolute;
      inset: 20%;
      border: 1px solid rgba(186, 252, 255, .92);
      border-radius: 50%;
      opacity: 0;
      transform: scale(.45);
      animation: hb-node-ripple 4.4s ease-out infinite;
      animation-delay: var(--delay);
      will-change: transform, opacity;
    }

    .hb-projection-field {
      position: absolute;
      z-index: 1;
      left: 75%;
      top: 37.2%;
      width: 9.52%;
      height: 16.3%;
      pointer-events: none;
      mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
    }

    .hb-projection-field::before {
      content: "";
      position: absolute;
      inset: 0 12%;
      border-radius: 45%;
      pointer-events: none;
      background: linear-gradient(to top,
        rgba(224, 255, 255, .62),
        rgba(89, 225, 255, .32) 38%,
        rgba(64, 197, 255, .12) 72%,
        rgba(64, 197, 255, 0));
      box-shadow: 0 0 14px rgba(93, 224, 255, .42);
      filter: blur(8px);
      mix-blend-mode: screen;
      opacity: .2;
      transform: scaleX(.78) scaleY(.76);
      transform-origin: 50% 100%;
      animation: hb-projection-core-breathe 3.8s ease-in-out infinite;
      will-change: opacity, transform, filter;
    }

    .hb-projection-beam {
      position: absolute;
      z-index: 2;
      left: var(--x);
      bottom: var(--base, 0%);
      width: var(--width, 1px);
      height: var(--height, 94%);
      border-radius: 999px;
      background: linear-gradient(to top,
        rgba(222, 255, 255, 0),
        rgba(222, 255, 255, .92) 9%,
        rgba(80, 220, 255, .7) 34%,
        rgba(80, 206, 255, .28) 70%,
        rgba(41, 156, 255, 0));
      box-shadow: 0 0 5px rgba(93, 224, 255, .72);
      opacity: .12;
      transform: translateY(18%) scaleY(.42);
      transform-origin: 50% 100%;
      animation: hb-projection-thread-rise var(--duration, 3.6s) ease-in-out infinite;
      animation-delay: var(--delay);
      will-change: opacity, transform;
    }

    .hb-projection-particle {
      position: absolute;
      z-index: 3;
      left: var(--x);
      top: 102%;
      width: var(--size, 3px);
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      background: rgba(227, 255, 255, .98);
      box-shadow:
        0 0 4px rgba(220, 255, 255, .96),
        0 0 9px rgba(62, 211, 255, .82);
      opacity: 0;
      animation: hb-projection-particle-up var(--duration, 2.8s) linear infinite;
      animation-delay: var(--delay);
      will-change: top, transform, opacity;
    }

    .hb-projection-beam:nth-child(3n + 1) { --height: 88%; --base: 2%; }
    .hb-projection-beam:nth-child(3n + 2) { --height: 96%; --base: -1%; }
    .hb-projection-beam:nth-child(4n) { --height: 82%; --base: 4%; }

    .hb-chip-halo {
      position: absolute;
      z-index: 1;
      left: 72.75%;
      top: 50.1%;
      width: 14%;
      height: 3.92%;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(ellipse,
        rgba(213, 255, 255, .72),
        rgba(71, 213, 255, .38) 28%,
        rgba(40, 153, 255, .1) 55%,
        transparent 74%);
      filter: blur(9px);
      opacity: .38;
      transform: scale(.9);
      animation: hb-chip-halo-breathe 4.8s ease-in-out infinite;
      animation-delay: .3s;
      will-change: opacity, transform, filter;
    }

    @keyframes hb-node-breathe {
      0%, 100% {
        opacity: .22;
        transform: translate(calc(-50% - var(--dx)), calc(-50% - var(--dy))) scale(.62);
        filter: blur(.15px) drop-shadow(0 0 6px rgba(92, 232, 255, .38));
      }
      50% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.35);
        filter: blur(.25px) drop-shadow(0 0 24px rgba(119, 243, 255, 1));
      }
    }

    @keyframes hb-node-ripple {
      0%, 28% { opacity: 0; transform: scale(.45); }
      45% { opacity: .85; }
      72%, 100% { opacity: 0; transform: scale(2.15); }
    }

    @keyframes hb-projection-thread-rise {
      0% { opacity: .1; transform: translateY(18%) scaleY(.38); }
      48% { opacity: .72; transform: translateY(2%) scaleY(.96); }
      76% { opacity: .92; transform: translateY(-3%) scaleY(1.06); }
      100% { opacity: .12; transform: translateY(-12%) scaleY(.7); }
    }

    @keyframes hb-projection-core-breathe {
      0%, 100% {
        opacity: .18;
        transform: translateY(10%) scaleX(.82) scaleY(.72);
        filter: blur(9px) brightness(.92);
      }
      50% {
        opacity: .46;
        transform: translateY(0) scaleX(1.02) scaleY(1.02);
        filter: blur(7px) brightness(1.2);
      }
    }

    @keyframes hb-projection-particle-up {
      0% { top: 102%; opacity: 0; transform: translateY(0) translateX(0) scale(.65); }
      18% { opacity: .95; }
      72% { opacity: .78; }
      100% { top: -4%; opacity: 0; transform: translateY(-100%) translateX(var(--drift, 0)) scale(1.15); }
    }

    @keyframes hb-chip-halo-breathe {
      0%, 100% { opacity: .28; transform: scale(.86); filter: blur(9px); }
      50% { opacity: .88; transform: scale(1.14); filter: blur(13px); }
    }

    .hb-motion-paused .hb-neural-node,
    .hb-motion-paused .hb-neural-node::after,
    .hb-motion-paused .hb-projection-field::before,
    .hb-motion-paused .hb-projection-beam,
    .hb-motion-paused .hb-projection-particle,
    .hb-motion-paused .hb-chip-halo {
      animation-play-state: paused;
    }



    @media (prefers-reduced-motion: reduce) {
      .hb-neural-node,
      .hb-neural-node::after,
      .hb-projection-field::before,
      .hb-projection-beam,
      .hb-projection-particle,
      .hb-chip-halo {
        animation: none;
      }
    }
  
/* Reference composition: 1920px desktop, scaled proportionally above tablet size. */
@media (min-width: 1001px) {
  #home-overview {
    min-height: 0;
    height: 48.73vw;
    align-items: flex-start;
  }
  #home-overview > .section-shell {
    width: 83.6%;
    margin: 0 auto;
    padding-top: 3.75vw !important;
    padding-bottom: 3.33vw !important;
  }
  #home-overview .hero-grid {
    grid-template-columns: minmax(0, 60%);
    gap: 0;
  }
  #home-overview .hero-left { gap: 2.5vw; }
  #home-overview .hero-title {
    font-size: 5.9375vw;
    line-height: 1.1;
  }
  #home-overview .hb-artwork {
    left: 52%;
    top: calc(50% + 2.5vw);
    width: 104cqw;
  }
}

@media (max-width: 1000px) {
  #home-overview { align-items:flex-start; background:#c8e5ff; }
  #home-overview > .section-shell { padding-bottom:400px !important; }
  .hero-motion { top:auto; height:400px; }
  .hero-motion::after { content:''; position:absolute; inset:0 0 auto; height:95px; background:linear-gradient(#c8e5ff, transparent); pointer-events:none; }
  .hb-artwork { left:auto; right:0; width:max(100cqw, 200cqh); transform:translateY(-50%); }
}