style.css

/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Tool category colors */
.bg-primary-500 { background-color: #6366f1; }
.bg-secondary-500 { background-color: #ec4899; }
.bg-purple-500 { background-color: #8b5cf6; }
.bg-indigo-500 { background-color: #4f46e5; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #10b981; }
/* Card styles */
.card-container {
    position: relative;
    perspective: 1000px;
    height: 100%;
}

.card {
    @apply rounded-3xl shadow-xl overflow-hidden;
    height: 100%;
    transition: transform 0.6s, box-shadow 0.3s;
    transform-style: preserve-3d;
    position: relative;
    background: white;
}

.card-header {
    @apply p-6;
}

.card-image-container {
    @apply relative overflow-hidden;
    height: 300px;
}

.card-image {
    @apply w-full h-full object-cover;
}

.card-footer {
    @apply p-6 flex items-center justify-between text-white;
}

/* Glassmorphism effect */
.glassmorphism-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Minimal circular with pulse */
.minimal-card .card-image-container {
    @apply flex items-center justify-center;
}

.circle-mask {
    @apply rounded-full overflow-hidden;
    width: 250px;
    height: 250px;
    border: 8px solid;
    border-color: rgb(139, 92, 246);
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0% { border-width: 8px; }
    50% { border-width: 15px; }
    100% { border-width: 8px; }
}

/* Data block card */
.datablock-card .card-image-container {
    height: 200px;
}

.card-stats {
    @apply p-6 text-center;
}

.stat-value {
    @apply text-6xl font-bold text-primary-500;
}

.stat-label {
    @apply text-gray-600 text-lg;
}
/* Tool cards */
.tool-card {
    @apply bg-white rounded-2xl shadow-md overflow-hidden transition-all duration-300;
}

.tool-card:hover {
    @apply shadow-lg transform -translate-y-2;
}

.tool-card .card-header {
    @apply p-6;
}

.tool-card .card-header i {
    @apply w-8 h-8 mb-4;
}

.tool-preview {
    @apply h-48 w-full;
}

.tool-card .card-footer {
    @apply p-6 border-t border-gray-100;
}

.btn-tool {
    @apply px-6 py-2 bg-primary-500 text-white rounded-lg font-medium transition-all;
}

.btn-tool:hover {
    @apply bg-primary-600 shadow-md;
}

/* Card hover effects */
.card-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center rounded-3xl;
    transition: all 0.3s ease;
    opacity: 0;
}

.card-container:hover .card-overlay {
    @apply bg-opacity-70;
    opacity: 1;
}

.btn-view {
    @apply px-6 py-3 bg-white text-primary-500 font-bold rounded-full shadow-lg;
    transition: all 0.3s ease;
}

.btn-view:hover {
    @apply bg-primary-500 text-white;
}