/* Hosting banner - from HostingBanner.tsx */
#banner.hosting-banner {
  margin-bottom: 40px;
}
.hosting-banner .hosting-banner-inner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(to right, #2563eb, #0891b2, #0d9488);
}

/* Animated grid background */
.hosting-banner-grid {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
  animation: hosting-grid-move 20s linear infinite;
}
@keyframes hosting-grid-move {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

/* Pulsing circles */
.hosting-banner-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hosting-banner-circle-1 { width: 100px; height: 100px; animation: hosting-pulse 3s ease-in-out infinite 0s; }
.hosting-banner-circle-2 { width: 150px; height: 150px; animation: hosting-pulse 3s ease-in-out infinite 0.3s; }
.hosting-banner-circle-3 { width: 200px; height: 200px; animation: hosting-pulse 3s ease-in-out infinite 0.6s; }
.hosting-banner-circle-4 { width: 250px; height: 250px; animation: hosting-pulse 3s ease-in-out infinite 0.9s; }
.hosting-banner-circle-5 { width: 300px; height: 300px; animation: hosting-pulse 3s ease-in-out infinite 1.2s; }
@keyframes hosting-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.5; }
}

/* Data packets */
.hosting-banner-packet {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
}
.hosting-banner-packet-1  { left: 8%;  top: 12%; animation: hosting-packet 2.5s linear infinite 0s; }
.hosting-banner-packet-2  { left: 22%; top: 68%; animation: hosting-packet 3.2s linear infinite 0.4s; }
.hosting-banner-packet-3  { left: 35%; top: 25%; animation: hosting-packet 2.8s linear infinite 0.8s; }
.hosting-banner-packet-4  { left: 48%; top: 82%; animation: hosting-packet 3.5s linear infinite 0.2s; }
.hosting-banner-packet-5  { left: 55%; top: 15%; animation: hosting-packet 2.3s linear infinite 1.2s; }
.hosting-banner-packet-6  { left: 62%; top: 55%; animation: hosting-packet 3s linear infinite 0.6s; }
.hosting-banner-packet-7  { left: 75%; top: 38%; animation: hosting-packet 2.7s linear infinite 1s; }
.hosting-banner-packet-8  { left: 88%; top: 72%; animation: hosting-packet 3.3s linear infinite 0.3s; }
.hosting-banner-packet-9  { left: 15%; top: 45%; animation: hosting-packet 2.9s linear infinite 0.7s; }
.hosting-banner-packet-10 { left: 92%; top: 20%; animation: hosting-packet 2.4s linear infinite 0.5s; }
.hosting-banner-packet-11 { left: 5%;  top: 88%; animation: hosting-packet 3.1s linear infinite 0.9s; }
.hosting-banner-packet-12 { left: 40%; top: 5%;  animation: hosting-packet 2.6s linear infinite 0.1s; }
.hosting-banner-packet-13 { left: 68%; top: 92%; animation: hosting-packet 3.4s linear infinite 0.55s; }
.hosting-banner-packet-14 { left: 28%; top: 32%; animation: hosting-packet 2.2s linear infinite 1.1s; }
.hosting-banner-packet-15 { left: 82%; top: 60%; animation: hosting-packet 2.95s linear infinite 0.25s; }
.hosting-banner-packet-16 { left: 12%; top: 78%; animation: hosting-packet 3.15s linear infinite 0.65s; }
.hosting-banner-packet-17 { left: 58%; top: 42%; animation: hosting-packet 2.75s linear infinite 0.15s; }
.hosting-banner-packet-18 { left: 95%; top: 35%; animation: hosting-packet 2.45s linear infinite 0.85s; }
.hosting-banner-packet-19 { left: 18%; top: 8%;  animation: hosting-packet 3.25s linear infinite 0.45s; }
.hosting-banner-packet-20 { left: 78%; top: 85%; animation: hosting-packet 2.85s linear infinite 0.95s; }
@keyframes hosting-packet {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(15px, -30px); }
}

/* Content */
.hosting-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;
}
.hosting-banner-text {
  text-align: center;
}
.hosting-banner .hosting-banner-content h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.hosting-banner-subheadline {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
}
@media (min-width: 768px) {
  .hosting-banner .hosting-banner-content h1 { font-size: 2.25rem; }
  .hosting-banner-subheadline { font-size: 1.1rem; }
}
.hosting-banner-icons {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.hosting-banner-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hosting-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-size: 1.15rem;
  animation: hosting-icon-bounce 2.5s ease-in-out infinite;
}
.hosting-banner-icon-item:nth-child(1) .hosting-icon-wrap { animation-delay: 0s; }
.hosting-banner-icon-item:nth-child(2) .hosting-icon-wrap { animation-delay: 0.15s; }
.hosting-banner-icon-item:nth-child(3) .hosting-icon-wrap { animation-delay: 0.3s; }
.hosting-banner-icon-item:nth-child(4) .hosting-icon-wrap { animation-delay: 0.45s; }
.hosting-banner-icon-item:nth-child(5) .hosting-icon-wrap { animation-delay: 0.6s; }
.hosting-banner-icon-item:nth-child(6) .hosting-icon-wrap { animation-delay: 0.75s; }
.hosting-banner-icon-item:nth-child(7) .hosting-icon-wrap { animation-delay: 0.9s; }
.hosting-banner-icon-item:nth-child(8) .hosting-icon-wrap { animation-delay: 1.05s; }
@keyframes hosting-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Bottom accent line */
.hosting-banner-accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #22d3ee, #60a5fa, #2dd4bf);
  animation: hosting-accent-width 2s ease-out 0.5s both;
}
@keyframes hosting-accent-width {
  from { width: 0%; }
  to { width: 100%; }
}

/* Scanning line */
.hosting-banner-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: hosting-scan 4s linear infinite;
  z-index: 2;
}
@keyframes hosting-scan {
  0% { left: 0%; }
  100% { left: 100%; }
}

/* Corner accents */
.hosting-banner-corner {
  position: absolute;
  width: 80px;
  height: 80px;
  border-color: rgba(255, 255, 255, 0.3);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
  animation: hosting-corner-pulse 2s ease-in-out infinite;
}
.hosting-banner-corner-tl {
  top: 0;
  left: 0;
  border-left-width: 2px;
  border-top-width: 2px;
}
.hosting-banner-corner-br {
  bottom: 0;
  right: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  animation-delay: 1s;
}
@keyframes hosting-corner-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}