@keyframes flowing-grid {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

body {
  /* Base light blue background */
  background-color: #f0f8ff; /* AliceBlue is a nice light blue */

  /* Grid color and size */
  /* --grid-color: rgba(0, 110, 255, 0.1); */ /* Remove */
  /* --grid-size: 40px; */ /* Remove */

  /* Create the grid using linear gradients */
  /* background-image: */ /* Remove */
    /* linear-gradient(to right, var(--grid-color) 1px, transparent 1px), */ /* Remove */
    /* linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px); */ /* Remove */
  /* background-size: var(--grid-size) var(--grid-size); */ /* Remove */

  /* Apply the animation */
  /* animation: flowing-grid 4s linear infinite; */ /* Remove */
}

/* Styles for the Network Canvas */
#network-canvas {
    position: fixed; /* Or absolute depending on parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind other content */
    display: block; /* Ensure it takes up space */
}

  /* Additional styles for enhanced components */
  .gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #4F46E5, #06B6D4);
  }
  .btn-primary {
    @apply px-6 py-3 bg-blue-600 text-white font-medium rounded-lg transition-all duration-300 transform hover:translate-y-[-2px] hover:shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
  }
  .btn-secondary {
    @apply px-6 py-3 bg-white text-blue-700 font-medium rounded-lg transition-all duration-300 transform hover:translate-y-[-2px] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-50 border border-gray-200;
  }
  .feature-icon {
    @apply flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 mb-4;
  }
  .animated-card {
    /* Base card look */
    @apply relative overflow-hidden bg-white rounded-xl border border-gray-100 shadow-md transition-transform duration-300 ease-out transform-gpu;

    /* Smoother default state (no abrupt movement) */
    transform: translateY(0) scale(1);
  }

  /* Remove gradient border */
  .animated-card::before { display:none; }

  /* Subtle lift on hover */
  .animated-card:hover, .animated-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -5px rgba(0,0,0,0.08);
  }

  /* No additional border effect */
  .animated-card:hover::before, .animated-card:focus-within::before { opacity:0; }

  /* Slight inner content pop for subtle emphasis */
  .animated-card:hover .feature-icon {
    @apply scale-105;
    transition: transform 0.3s ease;
  }

  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }