/* ============================================
   ForWebBinX Design System — Shared Styles
   Use WITH Tailwind CSS CDN (v4)
   ============================================ */

/* Brand gradient text */
.brand-gradient {
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effect */
.card-glow {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card-glow:hover {
  transform: translateY(-4px);
  border-color: #00d2ff;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.15);
}

/* Ad container */
.ad-slot {
  background: #111827;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}

/* Tool result box */
.result-box {
  background: #16213e;
  border: 1px solid #00d2ff;
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1rem;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #00d2ff; }