body {
  background-color: #07090e;
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}

.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.text-gradient {
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blue-glow {
  box-shadow: 0 0 40px -10px rgba(0, 212, 255, 0.3);
}

/* Mobile Responsiveness Enhancements */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  /* Optimize small screen card display */
  .glass-card {
    border-radius: 12px;
  }
  
  /* Better flow on small screens */
  p {
    word-break: break-word;
  }

  /* Reduce touch target padding on very small screens */
  @supports (touch-action: manipulation) {
    button, a {
      min-height: 44px;
      min-width: 44px;
    }
  }
  
  /* Improve testability and readability */
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    hyphens: auto;
  }
}

/* Improve readability on landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
  nav {
    height: auto;
    padding: 8px 0;
  }
  
  main {
    padding-top: 20px;
  }
}

/* Tablet and up optimizations */
@media (min-width: 641px) {
  .glass-card {
    transition: all 0.3s ease;
  }
}

/* Very large text size optimization */
@media (min-width: 1024px) {
  .glass-card:hover {
    transform: translateY(-2px);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}