/* Hosting Section Styles */
.hosting-section {
  background: linear-gradient(135deg, #001a33 0%, #002b66 100%);
  position: relative;
  overflow: hidden;
}

.hosting-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(0, 191, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(77, 0, 224, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hosting-package {
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 191, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.hosting-package::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.1), transparent);
  transition: left 0.6s;
}

.hosting-package:hover::before {
  left: 100%;
}

.hosting-package:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 85, 255, 0.3);
  border-color: rgba(0, 191, 255, 0.4);
}

/* Price switch buttons */
.price-switch-container {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 85, 255, 0.3);
}

.price-switch-btn {
  transition: all 0.3s ease;
}

.price-switch-btn.active {
  background: linear-gradient(135deg, #003399, #0055ff);
}

/* Package badge */
.package-badge {
  background: linear-gradient(135deg, #003399, #0055ff);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}

/* Feature list styles */
.package-features li {
  transition: all 0.3s ease;
  position: relative;
  padding-left: 8px;
}

.package-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: #00bfff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.package-features li:hover::before {
  opacity: 1;
}

.package-features li:hover {
  color: #00bfff;
  transform: translateX(5px);
}