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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-tech-dark { background-color: #0B0F19; }
    .bg-tech-card { background-color: #111827; }
    .text-tech-primary { color: #8B5CF6; }
    .text-tech-secondary { color: #3B82F6; }
    
    .font-tech { font-family: 'Space Grotesk', sans-serif; }
    
    .btn-tech {
        @apply inline-flex items-center justify-center bg-gradient-to-r from-violet-600 to-blue-600 text-white font-tech font-semibold rounded-lg py-3 px-8 hover:from-violet-500 hover:to-blue-500 hover:shadow-lg hover:shadow-violet-500/25 transition-all duration-300;
    }
    
    .btn-tech-outline {
        @apply inline-flex items-center justify-center border border-violet-500/50 text-violet-400 font-tech font-semibold rounded-lg py-3 px-8 hover:bg-violet-500/10 hover:border-violet-400 transition-all duration-300;
    }
    
    .nav-link {
        @apply text-slate-400 hover:text-white font-tech font-medium transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-white font-semibold;
    }
    
    .glass-panel {
        @apply bg-slate-900/50 backdrop-blur-md border border-slate-800 rounded-2xl;
    }

    .service-card {
        @apply glass-panel p-8 hover:bg-slate-800/50 hover:border-violet-500/30 transition-all duration-500 group;
    }
    
    .icon-box {
        @apply w-14 h-14 rounded-xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700 flex items-center justify-center text-2xl text-violet-400 group-hover:text-white group-hover:from-violet-600 group-hover:to-blue-600 group-hover:border-transparent transition-all duration-500 mb-6;
    }
}

/* Grid Background */
.bg-grid-pattern {
    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);
    background-size: 40px 40px;
}