/* Base styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0c0a09; /* Very dark (stone-950) */
    color: #e7e5e4; /* Light text (stone-200) */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Animated background "smoke" effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: 
        radial-gradient(ellipse at 70% 20%, rgba(16, 185, 129, 0.15), transparent 70%),
        radial-gradient(ellipse at 30% 80%, rgba(139, 92, 246, 0.15), transparent 70%),
        radial-gradient(ellipse at 50% 50%, rgba(34, 197, 94, 0.1), transparent 60%);
    background-size: 200% 200%;
    animation: psychic-flow 25s ease-in-out infinite;
}

@keyframes psychic-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header font */
h1, h2, h3, .font-header {
    font-family: 'Poppins', sans-serif;
}

/* Custom "glow" class */
.text-glow-green {
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.5), 0 0 16px rgba(16, 185, 129, 0.3);
}

.text-glow-purple {
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.5), 0 0 16px rgba(139, 92, 246, 0.3);
}

/* Product card background image setup */
.card-bg {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-radius: 1rem; /* rounded-2xl */
}

/* Overlay for card text readability */
.card-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, rgba(12, 10, 9, 1) 20%, rgba(12, 10, 9, 0));
    z-index: 1;
}

/* Card content sits above the overlay */
.card-content {
    position: relative;
    z-index: 2;
}

/* Scroll-triggered fade-in animation */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}