/* Responsive Grid System */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flexbox Utilities */
.flex-center { justify-content: center; align-items: center; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }
.flex-wrap { flex-wrap: wrap; }

/* Responsive Classes */
@media (max-width: 1200px) {
    .container { padding: 0 var(--spacing-md); }
}

@media (max-width: 992px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    html { font-size: 14px; }
    
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }

    .flex { flex-direction: column; }
    
    .hide-mobile { display: none; }
    
    .text-center-mobile { text-align: center; }
    
    .stack-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

/* Modern Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animation Classes */
.animate {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.fade-in { animation-name: fadeIn; }
.fade-in-up { animation-name: fadeInUp; }
.slide-in-right { animation-name: slideInRight; }

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

/* Intersection Observer Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-normal);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Modern Spacing Utilities */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* Modern Shadow Effects */
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: var(--shadow-soft); }
.shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

/* Glass Effect */
.glass {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Modern Border Radius */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: 9999px; }