/* Application Delivery pilot: MagicBento interactions in PureLogics colors. */
.delivery-solutions-grid { gap: 24px; border: 0; }
.delivery-process-grid { gap: 20px; border: 0; }
.delivery-process-flow::before { display: none; }
.delivery-solution, .process-step, .delivery-benefit {
  --bento-x: 50%; --bento-y: 50%; --bento-active: 0;
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid #dce7e2; border-radius: 20px;
  transition: transform .25s ease-out, border-color .25s, box-shadow .25s;
  transform: perspective(1000px) translate3d(var(--bento-tx, 0px), var(--bento-ty, 0px), 0) rotateX(var(--bento-rx, 0deg)) rotateY(var(--bento-ry, 0deg));
}
.delivery-solution + article { border: 1px solid #dce7e2; }
.delivery-solution { background: linear-gradient(145deg, #fff, #f0f7f3); }
.process-step, .process-step + article, .process-step:nth-child(3) {
  padding: 30px 26px; border: 1px solid #ffffff26;
  background: linear-gradient(145deg, #082f63, #00183e);
}
.delivery-benefits-grid { gap: 22px; }
.delivery-benefit { background: linear-gradient(145deg, #fff, #f0f7f3); }
.delivery-benefit::before { display: none; }
.delivery-solution > :not(.bento-effect), .process-step > :not(.bento-effect), .delivery-benefit > :not(.bento-effect) { position: relative; z-index: 2; }
.bento-effect { position: absolute; pointer-events: none; }
.bento-spotlight { inset: 0; z-index: 0; opacity: var(--bento-active); background: radial-gradient(300px circle at var(--bento-x) var(--bento-y), #4aba6a30, transparent 80%); transition: opacity .25s; }
.bento-border { inset: 0; z-index: 3; border-radius: inherit; padding: 1px; opacity: var(--bento-active); background: radial-gradient(300px circle at var(--bento-x) var(--bento-y), #4aba6a, transparent 65%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .25s; }
.bento-particle { z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #4aba6a; box-shadow: 0 0 8px #4aba6a99; animation: bento-float var(--duration) ease-in-out var(--delay) infinite alternate; }
.bento-ripple { z-index: 1; width: var(--ripple-size); height: var(--ripple-size); border-radius: 50%; background: radial-gradient(circle, #4aba6a05 20%, #4aba6a40 65%, transparent 72%); animation: bento-ripple .8s ease-out forwards; }
.delivery-solution:focus-within, .delivery-benefit:focus-within { border-color: #4aba6a; box-shadow: 0 0 0 2px #4aba6a25; }
@keyframes bento-float { from { opacity: .25; transform: translate(0, 0) scale(.5); } to { opacity: .85; transform: translate(var(--drift-x), var(--drift-y)) scale(1); } }
@keyframes bento-ripple { from { opacity: 1; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (min-width: 1100px) {
  .delivery-benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .delivery-benefit:first-child, .delivery-benefit:last-child { grid-column: span 2; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .delivery-solution:hover, .delivery-benefit:hover { border-color: #4aba6a80; box-shadow: 0 12px 30px #00235a0d; }
  .process-step:hover { border-color: #4aba6a80; box-shadow: 0 12px 30px #00183e30; }
}
@media (max-width: 768px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .delivery-solution, .process-step, .delivery-benefit { transform: none; transition: none; }
  .bento-effect { display: none; }
}