/* Responsive Design */
@media (min-width: 640px) {
    .actions {
        flex-direction: row;
    }
    
    .content {
        padding: 6rem 2rem;
    }
    
    .search-box {
        max-width: 32rem;
    }
}

@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }
    
    .title {
        margin-bottom: 1.5rem;
    }
    
    .description {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .content-wrapper {
        padding: 4rem;
    }
    
    .floating-shapes .shape {
        transform: scale(1.5);
    }
}

@media (min-width: 1280px) {
    .container {
        padding: 4rem;
    }
    
    .content {
        padding: 8rem 4rem;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: #18181b;
        --color-gray-100: #27272a;
        --color-gray-200: #3f3f46;
        --color-gray-600: #a1a1aa;
        --color-gray-700: #d4d4d8;
        --color-gray-800: #e4e4e7;
        --color-gray-900: #fafafa;
    }
    
    .search-box {
        background: var(--color-gray-100);
    }
    
    .search-box input {
        background: transparent;
        color: var(--color-gray-900);
    }
    
    .btn-secondary {
        background: var(--color-gray-100);
        color: var(--color-gray-900);
    }
    
    .btn-secondary:hover {
        background: var(--color-gray-200);
    }
    
    .noise-overlay {
        opacity: 0.15;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
    
    .floating-shapes,
    .wave,
    .pulse-circle {
        display: none;
    }

}