/* Dotted Surface - 3D Animated Wave */
.dotted-surface-container {
  position: relative;
  overflow: hidden;
  background: #0f172a; /* slate-900 */
  min-height: 600px;
}

.dotted-surface-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.dotted-surface-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 20%, #0f172a 80%);
  z-index: 10;
  pointer-events: none;
}

.dotted-surface-content {
  position: relative;
  z-index: 20;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .dotted-surface-container {
    min-height: 500px;
  }
}