style.css

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

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a67d8;
}
/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

@keyframes text-shimmer {
    0% { opacity: 0.8; text-shadow: 0 0 8px rgba(99, 102, 241, 0.5); }
    100% { opacity: 1; text-shadow: 0 0 16px rgba(99, 102, 241, 0.8); }
}

/* HostyAI Achievements */
.achievement-card {
    @apply bg-gray-900/50 border border-gray-700/50 rounded-xl p-8 backdrop-blur-sm transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:-translate-y-2;
}

.achievement-icon {
    @apply w-16 h-16 rounded-xl flex items-center justify-center mb-6 transition-transform duration-300 group-hover:scale-110;
}

.achievement-badge {
    @apply mt-4 inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary border border-primary/20;
}

/* Stats */
.stats-grid {
    @apply grid grid-cols-3 gap-4;
}

.stat-item {
    @apply text-center p-4 bg-gray-900/50 rounded-lg border border-gray-700/50 backdrop-blur-sm;
}

.stat-number {
    @apply text-3xl font-bold mb-1;
}

.stat-label {
    @apply text-sm text-gray-400;
}

/* AQIA Visual */
.aqia-visual {
    @apply relative h-96;
}

.floating-certificate {
    @apply absolute top-0 left-0 w-64 h-80 rounded-lg shadow-xl transform rotate-6 transition-all duration-500 hover:rotate-0;
}

.floating-students {
    @apply absolute bottom-0 right-0 flex;
}

.student-avatar {
    @apply w-12 h-12 rounded-full border-2 border-white -ml-4 transition-transform duration-300 hover:scale-125 hover:z-10;
}

.student-badge {
    @apply w-12 h-12 rounded-full bg-secondary text-white flex items-center justify-center text-xs font-bold -ml-4 border-2 border-white;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid {
        @apply grid-cols-1;
    }
}