/* Process banner - from ProcessBanner.tsx */
#banner.process-banner {
  margin-bottom: 40px;
}
.process-banner .process-banner-inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(to right, #059669, #16a34a, #0d9488);
}

/* Animated grid pattern */
.process-banner-grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40' fill='%23ffffff' fill-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
  animation: process-grid 20s linear infinite;
}
@keyframes process-grid {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* Flowing particles */
.process-banner-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  left: -10px;
  pointer-events: none;
}
.process-banner-particle-1  { top: 5%;  animation: process-flow 9s linear infinite 0s; }
.process-banner-particle-2  { top: 12%; animation: process-flow 10s linear infinite 1s; }
.process-banner-particle-3  { top: 20%; animation: process-flow 11s linear infinite 2s; }
.process-banner-particle-4  { top: 28%; animation: process-flow 8s linear infinite 0.5s; }
.process-banner-particle-5  { top: 35%; animation: process-flow 12s linear infinite 3s; }
.process-banner-particle-6  { top: 42%; animation: process-flow 9.5s linear infinite 1.5s; }
.process-banner-particle-7  { top: 50%; animation: process-flow 10.5s linear infinite 2.5s; }
.process-banner-particle-8  { top: 58%; animation: process-flow 8.5s linear infinite 0.2s; }
.process-banner-particle-9  { top: 65%; animation: process-flow 11.5s linear infinite 3.5s; }
.process-banner-particle-10 { top: 72%; animation: process-flow 9s linear infinite 1.2s; }
.process-banner-particle-11 { top: 80%; animation: process-flow 10s linear infinite 2.2s; }
.process-banner-particle-12 { top: 88%; animation: process-flow 12s linear infinite 4s; }
.process-banner-particle-13 { top: 8%;  animation: process-flow 8s linear infinite 0.8s; }
.process-banner-particle-14 { top: 25%; animation: process-flow 11s linear infinite 2.8s; }
.process-banner-particle-15 { top: 45%; animation: process-flow 9.2s linear infinite 1.8s; }
.process-banner-particle-16 { top: 62%; animation: process-flow 10.2s linear infinite 0.3s; }
.process-banner-particle-17 { top: 78%; animation: process-flow 8.8s linear infinite 3.2s; }
.process-banner-particle-18 { top: 15%; animation: process-flow 11.2s linear infinite 1.1s; }
.process-banner-particle-19 { top: 38%; animation: process-flow 9.8s linear infinite 2.1s; }
.process-banner-particle-20 { top: 55%; animation: process-flow 8.2s linear infinite 0.6s; }
.process-banner-particle-21 { top: 70%; animation: process-flow 10.8s linear infinite 3.1s; }
.process-banner-particle-22 { top: 92%; animation: process-flow 9.4s linear infinite 1.4s; }
.process-banner-particle-23 { top: 3%;  animation: process-flow 11.8s linear infinite 2.4s; }
.process-banner-particle-24 { top: 48%; animation: process-flow 8.6s linear infinite 0.4s; }
.process-banner-particle-25 { top: 85%; animation: process-flow 10.4s linear infinite 2.9s; }
.process-banner-particle-26 { top: 18%; animation: process-flow 9.6s linear infinite 1.6s; }
.process-banner-particle-27 { top: 33%; animation: process-flow 11.4s linear infinite 3.4s; }
.process-banner-particle-28 { top: 60%; animation: process-flow 8.4s linear infinite 0.7s; }
.process-banner-particle-29 { top: 75%; animation: process-flow 10.6s linear infinite 2.3s; }
.process-banner-particle-30 { top: 95%; animation: process-flow 9.3s linear infinite 1.9s; }
@keyframes process-flow {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translateX(calc(100vw + 50px)); opacity: 0; }
}

/* Gradient orbs */
.process-banner-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  pointer-events: none;
}
.process-banner-orb-1 { width: 140px; height: 140px; left: 5%;  top: 10%; background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%); animation: process-orb 8s ease-in-out infinite 0s reverse; }
.process-banner-orb-2 { width: 160px; height: 160px; left: 25%; top: 60%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); animation: process-orb 9s ease-in-out infinite 0.4s reverse; }
.process-banner-orb-3 { width: 130px; height: 130px; left: 50%; top: 20%; background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%); animation: process-orb 7s ease-in-out infinite 0.8s reverse; }
.process-banner-orb-4 { width: 150px; height: 150px; left: 70%; top: 50%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); animation: process-orb 10s ease-in-out infinite 1.2s reverse; }
.process-banner-orb-5 { width: 120px; height: 120px; left: 85%; top: 15%; background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%); animation: process-orb 8.5s ease-in-out infinite 1.6s reverse; }
.process-banner-orb-6 { width: 145px; height: 145px; left: 40%; top: 75%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); animation: process-orb 9.5s ease-in-out infinite 2s reverse; }
@keyframes process-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.3); }
}

/* Main content - two columns */
.process-banner-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  gap: 2rem;
}
.process-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.process-banner .process-banner-text .process-banner-line {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.process-banner-accent-line {
  height: 4px;
  background: #fff;
  border-radius: 9999px;
  margin-top: 0.5rem;
  width: 280px;
  max-width: 100%;
  animation: process-accent-width 1s ease-out 0.3s both;
}
@keyframes process-accent-width {
  from { width: 0; }
  to { width: 280px; }
}

/* Process flow icons */
.process-banner-flow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.process-flow-item {
  position: relative;
}
.process-banner .process-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 1.25rem;
  animation: process-icon-float 2.5s ease-in-out infinite;
}
.process-flow-item:nth-child(1) .process-icon-wrap { animation-delay: 0s; }
.process-flow-item:nth-child(2) .process-icon-wrap { animation-delay: 0.15s; }
.process-flow-item:nth-child(3) .process-icon-wrap { animation-delay: 0.3s; }
.process-flow-item:nth-child(4) .process-icon-wrap { animation-delay: 0.45s; }
.process-flow-item:nth-child(5) .process-icon-wrap { animation-delay: 0.6s; }
.process-flow-item:nth-child(6) .process-icon-wrap { animation-delay: 0.75s; }
.process-flow-item:nth-child(7) .process-icon-wrap { animation-delay: 0.9s; }
@keyframes process-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

/* Top scanning line */
.process-banner-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #fff, transparent);
  animation: process-top-line 2.5s linear infinite;
}
@keyframes process-top-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Bottom accent bar */
.process-banner-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #34d399, #86efac, #2dd4bf);
  animation: process-accent-bar 1.5s ease-out 0.3s both;
}
@keyframes process-accent-bar {
  from { width: 0; }
  to { width: 100%; }
}

/* Checkmark particles */
.process-banner-check {
  position: absolute;
  color: #fff;
  font-size: 1rem;
  pointer-events: none;
}
.process-banner-check-1  { left: 8%;  top: 15%; animation: process-check 3s ease-in-out infinite 0s; }
.process-banner-check-2  { left: 22%; top: 45%; animation: process-check 3.5s ease-in-out infinite 0.8s; }
.process-banner-check-3  { left: 35%; top: 8%;  animation: process-check 2.8s ease-in-out infinite 1.2s; }
.process-banner-check-4  { left: 48%; top: 70%; animation: process-check 3.2s ease-in-out infinite 0.3s; }
.process-banner-check-5  { left: 58%; top: 25%; animation: process-check 3.8s ease-in-out infinite 1.5s; }
.process-banner-check-6  { left: 72%; top: 55%; animation: process-check 2.5s ease-in-out infinite 0.6s; }
.process-banner-check-7  { left: 85%; top: 12%; animation: process-check 3.3s ease-in-out infinite 2s; }
.process-banner-check-8  { left: 12%; top: 80%; animation: process-check 2.9s ease-in-out infinite 0.4s; }
.process-banner-check-9  { left: 42%; top: 38%; animation: process-check 3.6s ease-in-out infinite 1.1s; }
.process-banner-check-10 { left: 65%; top: 85%; animation: process-check 2.7s ease-in-out infinite 0.9s; }
.process-banner-check-11 { left: 78%; top: 32%; animation: process-check 3.4s ease-in-out infinite 1.8s; }
.process-banner-check-12 { left: 5%;  top: 50%; animation: process-check 3.1s ease-in-out infinite 0.2s; }
.process-banner-check-13 { left: 55%; top: 5%;  animation: process-check 2.6s ease-in-out infinite 1.4s; }
.process-banner-check-14 { left: 92%; top: 65%; animation: process-check 3.7s ease-in-out infinite 0.7s; }
.process-banner-check-15 { left: 28%; top: 92%; animation: process-check 2.4s ease-in-out infinite 1.6s; }
@keyframes process-check {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  30% { opacity: 0.7; transform: scale(1) rotate(90deg); }
  70% { opacity: 0.7; transform: scale(1) rotate(180deg); }
}

/* Progress indicator wave */
.process-banner-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
  animation: process-wave 3s ease-in-out infinite;
}
@keyframes process-wave {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Corner decorative elements */
.process-banner-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
}
.process-banner-corners .process-corner-tl,
.process-banner-corners .process-corner-br {
  fill: none;
  stroke: white;
  stroke-width: 0.5;
  animation: process-corner-fade 1.2s ease-out 0.5s both;
}
.process-banner-corners .process-corner-br {
  animation-delay: 0.7s;
}
@keyframes process-corner-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Center pulse */
.process-banner-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 128px;
  margin-left: -64px;
  margin-top: -64px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
  animation: process-pulse 5s ease-out infinite;
}
.process-banner-pulse-2 { animation-delay: 2.5s; }
@keyframes process-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(6); opacity: 0; }
}

@media (max-width: 768px) {
  .process-banner-content {
    flex-direction: column;
    justify-content: center;
    padding: 0 1.5rem;
    gap: 1rem;
  }
  .process-banner .process-banner-text .process-banner-line {
    font-size: 1.75rem;
  }
  .process-banner-accent-line {
    width: 180px;
  }
  @keyframes process-accent-width {
    to { width: 180px; }
  }
  .process-banner-flow {
    justify-content: center;
  }
}