@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --color-primary: #F59E0B;
    --color-secondary: #FBBF24;
    --color-cta: #8B5CF6;
    --color-background: #0F172A;
    --color-text: #F8FAFC;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
    overflow-x: hidden;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-nav {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradients */
.text-gradient {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.bg-gradient-dark {
    background: radial-gradient(circle at top center, #1e293b 0%, #0f172a 100%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0F172A;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Glow Effects */
.glow-primary {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Animation Utilities */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Grid Background */
.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* Mobile Responsive Utilities */
@media (max-width: 768px) {
    .pt-32 { padding-top: 4rem; }
    .pb-24 { padding-bottom: 6rem; }
    .text-4xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-5xl { font-size: 2rem; line-height: 2.5rem; }
    .text-6xl { font-size: 2.25rem; line-height: 2.5rem; }
    
    /* Adjust grid layouts for mobile */
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    /* Adjust hero section for mobile */
    .hero-multi-agent {
        flex-direction: column;
    }
    
    /* Ensure images scale properly */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Adjust spacing for mobile */
    .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        --space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--space-y-reverse)));
        margin-bottom: calc(1rem * var(--space-y-reverse));
    }
}

/* Additional responsive adjustments */
@media (max-width: 640px) {
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .max-w-7xl { max-width: 100%; }
    
    /* Adjust font sizes */
    .text-lg { font-size: 1rem; }
    .text-xl { font-size: 1.125rem; }
    
    /* Adjust button sizes */
    .px-8.py-4 { 
        padding: 0.75rem 1.5rem; 
        font-size: 0.875rem;
    }
}

/* Ensure touch targets are appropriately sized */
.btn-touch-target {
    min-height: 44px;
    min-width: 44px;
}