/* Modern Design Elements for Inspire Forge Landing Page */

/* Glass Card Effect */
.glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.glass-panel {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.3s ease;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.hover-lift-lg:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}

.hover-glow-cyan:hover {
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
    transform: translateY(-3px);
}

.hover-glow-blue:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    transform: translateY(-3px);
}

.hover-glow-purple:hover {
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
    transform: translateY(-3px);
}

.hover-glow-green:hover {
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
    transform: translateY(-3px);
}

.hover-glow-yellow:hover {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
    transform: translateY(-3px);
}

.hover-glow-red:hover {
    box-shadow: 0 0 15px rgba(248, 113, 113, 0.4);
    transform: translateY(-3px);
}

/* Shadow Effects */
.shadow-glow {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

/* Spacing Utilities */
.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Animation Effects */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}

/* Button Glow Effect */
.btn-glow {
    transition: box-shadow 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.8);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .glass-card {
        padding: 1.5rem;
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .glass-card {
        padding: 1.25rem;
    }
    
    h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .space-y-10 > * {
        margin-top: 1.5rem !important;
    }
    
    .p-8 {
        padding: 1.5rem !important;
    }
    
    .mb-20 {
        margin-bottom: 3rem !important;
    }
}

@media (max-width: 640px) {
    .glass-card {
        padding: 1rem;
    }
    
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    .h-72 {
        height: auto !important;
        min-height: 24rem !important;
    }
    
    .p-8, .p-6 {
        padding: 1rem !important;
    }
    
    .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .mb-16, .mb-20 {
        margin-bottom: 2rem !important;
    }
    
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
}