/* Capabilities banner - from CapabilitiesBanner.tsx */
#banner.capabilities-banner {
  margin-bottom: 40px;
}
.capabilities-banner .capabilities-banner-inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(to right, #9333ea, #db2777, #7e22ce);
}

/* Animated hexagon pattern */
.capabilities-banner-hex {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  animation: capabilities-hex 30s linear infinite;
}
@keyframes capabilities-hex {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* Floating orbs */
.capabilities-banner-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.capabilities-banner-orb-1 { left: 5%;  top: 10%; width: 100px; height: 100px; animation: capabilities-orb 7s ease-in-out infinite 0s; }
.capabilities-banner-orb-2 { left: 25%; top: 60%; width: 120px; height: 120px; animation: capabilities-orb 9s ease-in-out infinite 0.3s; }
.capabilities-banner-orb-3 { left: 45%; top: 20%; width: 90px; height: 90px;  animation: capabilities-orb 8s ease-in-out infinite 0.6s; }
.capabilities-banner-orb-4 { left: 65%; top: 70%; width: 110px; height: 110px; animation: capabilities-orb 10s ease-in-out infinite 0.9s; }
.capabilities-banner-orb-5 { left: 85%; top: 30%; width: 95px; height: 95px;  animation: capabilities-orb 6s ease-in-out infinite 1.2s; }
.capabilities-banner-orb-6 { left: 15%; top: 80%; width: 85px; height: 85px;  animation: capabilities-orb 11s ease-in-out infinite 0.2s; }
.capabilities-banner-orb-7 { left: 55%; top: 5%;  width: 105px; height: 105px; animation: capabilities-orb 8.5s ease-in-out infinite 0.5s; }
.capabilities-banner-orb-8 { left: 75%; top: 50%; width: 115px; height: 115px; animation: capabilities-orb 7.5s ease-in-out infinite 1s; }
@keyframes capabilities-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.2); }
}

/* Sparkles */
.capabilities-banner-sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.capabilities-banner-sparkle svg {
  display: block;
  width: 100%;
  height: 100%;
}
.capabilities-banner-sparkle-1  { left: 2%;  top: 15%; animation: capabilities-sparkle 2s ease-in-out infinite 0s; }
.capabilities-banner-sparkle-2  { left: 12%; top: 60%; animation: capabilities-sparkle 2s ease-in-out infinite 0.5s; }
.capabilities-banner-sparkle-3  { left: 22%; top: 25%; animation: capabilities-sparkle 2s ease-in-out infinite 1s; }
.capabilities-banner-sparkle-4  { left: 35%; top: 75%; animation: capabilities-sparkle 2s ease-in-out infinite 0.3s; }
.capabilities-banner-sparkle-5  { left: 48%; top: 10%; animation: capabilities-sparkle 2s ease-in-out infinite 1.2s; }
.capabilities-banner-sparkle-6  { left: 55%; top: 55%; animation: capabilities-sparkle 2s ease-in-out infinite 0.8s; }
.capabilities-banner-sparkle-7  { left: 68%; top: 30%; animation: capabilities-sparkle 2s ease-in-out infinite 0.2s; }
.capabilities-banner-sparkle-8  { left: 78%; top: 70%; animation: capabilities-sparkle 2s ease-in-out infinite 1.5s; }
.capabilities-banner-sparkle-9  { left: 88%; top: 20%; animation: capabilities-sparkle 2s ease-in-out infinite 0.6s; }
.capabilities-banner-sparkle-10 { left: 95%; top: 50%; animation: capabilities-sparkle 2s ease-in-out infinite 0.9s; }
.capabilities-banner-sparkle-11 { left: 8%;  top: 40%; animation: capabilities-sparkle 2s ease-in-out infinite 0.4s; }
.capabilities-banner-sparkle-12 { left: 42%; top: 85%; animation: capabilities-sparkle 2s ease-in-out infinite 1.1s; }
.capabilities-banner-sparkle-13 { left: 62%; top: 5%;  animation: capabilities-sparkle 2s ease-in-out infinite 0.1s; }
.capabilities-banner-sparkle-14 { left: 18%; top: 90%; animation: capabilities-sparkle 2s ease-in-out infinite 0.7s; }
.capabilities-banner-sparkle-15 { left: 30%; top: 45%; animation: capabilities-sparkle 2s ease-in-out infinite 1.3s; }
.capabilities-banner-sparkle-16 { left: 52%; top: 35%; animation: capabilities-sparkle 2s ease-in-out infinite 0.35s; }
.capabilities-banner-sparkle-17 { left: 72%; top: 85%; animation: capabilities-sparkle 2s ease-in-out infinite 0.95s; }
.capabilities-banner-sparkle-18 { left: 92%; top: 35%; animation: capabilities-sparkle 2s ease-in-out infinite 0.55s; }
.capabilities-banner-sparkle-19 { left: 5%;  top: 65%; animation: capabilities-sparkle 2s ease-in-out infinite 1.25s; }
.capabilities-banner-sparkle-20 { left: 38%; top: 18%; animation: capabilities-sparkle 2s ease-in-out infinite 0.15s; }
.capabilities-banner-sparkle-21 { left: 58%; top: 78%; animation: capabilities-sparkle 2s ease-in-out infinite 0.65s; }
.capabilities-banner-sparkle-22 { left: 82%; top: 42%; animation: capabilities-sparkle 2s ease-in-out infinite 1.05s; }
.capabilities-banner-sparkle-23 { left: 15%; top: 8%;  animation: capabilities-sparkle 2s ease-in-out infinite 0.45s; }
.capabilities-banner-sparkle-24 { left: 45%; top: 62%; animation: capabilities-sparkle 2s ease-in-out infinite 0.85s; }
.capabilities-banner-sparkle-25 { left: 98%; top: 80%; animation: capabilities-sparkle 2s ease-in-out infinite 0.25s; }
@keyframes capabilities-sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}

/* Content */
.capabilities-banner-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 2rem;
}
.capabilities-banner-text {
  text-align: center;
}
.capabilities-banner .capabilities-banner-content h1 {
  margin: 0 0 0.2rem;
  font-size: 1.75rem;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.capabilities-banner-subheadline {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
}
@media (min-width: 768px) {
  .capabilities-banner .capabilities-banner-content h1 { font-size: 2.25rem; }
  .capabilities-banner-subheadline { font-size: 1.05rem; }
}
.capabilities-banner-icons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 130px;
}
.capabilities-banner-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.capabilities-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  animation: capabilities-icon-float 3s ease-in-out infinite;
}
.capabilities-banner-icon-item:nth-child(1) .capabilities-icon-wrap { animation-delay: 0s; }
.capabilities-banner-icon-item:nth-child(2) .capabilities-icon-wrap { animation-delay: 0.12s; }
.capabilities-banner-icon-item:nth-child(3) .capabilities-icon-wrap { animation-delay: 0.24s; }
.capabilities-banner-icon-item:nth-child(4) .capabilities-icon-wrap { animation-delay: 0.36s; }
.capabilities-banner-icon-item:nth-child(5) .capabilities-icon-wrap { animation-delay: 0.48s; }
.capabilities-banner-icon-item:nth-child(6) .capabilities-icon-wrap { animation-delay: 0.6s; }
.capabilities-banner-icon-item:nth-child(7) .capabilities-icon-wrap { animation-delay: 0.72s; }
.capabilities-banner-icon-item:nth-child(8) .capabilities-icon-wrap { animation-delay: 0.84s; }
@keyframes capabilities-icon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(3deg); }
  75% { transform: translateY(-4px) rotate(-3deg); }
}

/* Top border wave */
.capabilities-banner-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: capabilities-top-line 3s linear infinite;
}
@keyframes capabilities-top-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Bottom accent line */
.capabilities-banner-accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #f472b6, #c084fc, #818cf8);
  animation: capabilities-accent-width 1.8s ease-out 0.4s both;
}
@keyframes capabilities-accent-width {
  from { width: 0%; }
  to { width: 100%; }
}

/* Radial pulses */
.capabilities-banner-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
.capabilities-banner-pulse-1 { animation: capabilities-pulse 4s ease-out infinite 0s; }
.capabilities-banner-pulse-2 { animation: capabilities-pulse 4s ease-out infinite 1.3s; }
.capabilities-banner-pulse-3 { animation: capabilities-pulse 4s ease-out infinite 2.6s; }
@keyframes capabilities-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(8); opacity: 0; }
}

/* Corner tech lines */
.capabilities-banner-corners {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
}
.capabilities-banner-corners .capabilities-corner-tl {
  animation: capabilities-corner-fade 1.5s ease-out 0.5s both;
}
.capabilities-banner-corners .capabilities-corner-br {
  animation: capabilities-corner-fade 1.5s ease-out 0.7s both;
}
@keyframes capabilities-corner-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}