/* AIXA Labs - Custom Styles */

/* Root Variables */
:root {
    --primary-blue: #3b82f6;
    --primary-purple: #8b5cf6;
    --accent-cyan: #06b6d4;
    --dark-bg: #111827;
    --darker-bg: #0f172a;
    --card-bg: rgba(31, 41, 55, 0.5);
    --border-color: rgba(59, 130, 246, 0.2);
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
}

/* Global Styles */
* {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
}

/* Background Grid Pattern */
.bg-grid-pattern {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Effect */
.glow-effect {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.3));
    transition: filter 0.3s ease;
}

.glow-effect:hover {
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.5));
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg transition-all duration-300 hover:from-blue-700 hover:to-purple-700 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25;
}

.btn-secondary {
    @apply inline-flex items-center px-8 py-4 bg-transparent border-2 border-blue-500 text-blue-400 font-semibold rounded-lg transition-all duration-300 hover:bg-blue-500 hover:text-white hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25;
}

/* Navigation */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Feature Cards */
.feature-card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl p-6 transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70 hover:scale-105;
}

.feature-icon {
    @apply w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white text-xl mb-4;
}

/* Service Cards */
.service-card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-8 transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70 hover:scale-105;
}

.service-icon {
    @apply w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl flex items-center justify-center text-white text-2xl mb-6 mx-auto;
}

.feature-item {
    @apply flex items-center text-gray-300 mb-3;
}

/* Advantage Cards */
.advantage-card {
    @apply text-center p-8 bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-2xl transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70 hover:scale-105;
}

.advantage-icon {
    @apply w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white text-3xl mx-auto mb-6;
}

/* Process Steps */
.process-step {
    @apply text-center p-6 bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70;
}

.process-number {
    @apply w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white text-xl font-bold mx-auto mb-4;
}

/* Industry Cards */
.industry-card {
    @apply text-center p-6 bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70 hover:scale-105;
}

/* Testimonial Cards */
.testimonial-card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-2xl p-8 transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70;
}

.testimonial-stars {
    @apply flex space-x-1 mb-4;
}

.testimonial-author {
    @apply flex items-center space-x-4;
}

.author-avatar {
    @apply w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center;
}

.author-name {
    @apply text-lg font-semibold text-white;
}

.author-title {
    @apply text-sm text-blue-400;
}

.author-company {
    @apply text-sm text-gray-400;
}

/* Metric Cards */
.metric-card {
    @apply text-center p-6 bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl;
}

.metric-number {
    @apply text-4xl font-bold text-gradient mb-2;
}

.metric-label {
    @apply text-gray-300 text-sm;
}

/* Brand Cards */
.brand-card {
    @apply text-center p-6 bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70;
}

.brand-icon {
    @apply mb-4;
}

.brand-name {
    @apply text-sm text-gray-300 font-medium;
}

/* Video Testimonials */
.video-testimonial {
    @apply bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl overflow-hidden transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70;
}

.video-placeholder {
    @apply relative h-48 bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center cursor-pointer transition-all duration-300 hover:from-gray-600 hover:to-gray-700;
}

.play-overlay {
    @apply absolute inset-0 bg-black/20;
}

.video-info {
    @apply p-4;
}

/* Legal Content */
.legal-content {
    @apply space-y-8;
}

.legal-section {
    @apply bg-gray-800/30 backdrop-blur-sm border border-blue-500/10 rounded-xl p-8;
}

.legal-heading {
    @apply text-2xl font-bold text-white mb-4 text-gradient;
}

.legal-subheading {
    @apply text-xl font-semibold text-blue-400 mb-3 mt-6;
}

.legal-text {
    @apply text-gray-300 leading-relaxed mb-4;
}

.legal-list {
    @apply list-disc list-inside space-y-2 text-gray-300 ml-4 mb-4;
}

.contact-info {
    @apply bg-gray-700/50 rounded-lg p-4 mt-4;
}

.contact-info p {
    @apply text-gray-300 mb-1;
}

/* AI Visualization */
.ai-visualization {
    @apply relative h-80 flex items-center justify-center;
}

.neural-network {
    @apply relative w-full h-full;
}

.node {
    @apply absolute w-4 h-4 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full;
    animation: pulse-node 2s ease-in-out infinite;
}

.node-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.node-2 {
    top: 60%;
    left: 30%;
    animation-delay: 0.5s;
}

.node-3 {
    top: 40%;
    right: 20%;
    animation-delay: 1s;
}

.node-4 {
    bottom: 20%;
    right: 30%;
    animation-delay: 1.5s;
}

.connection {
    @apply absolute bg-gradient-to-r from-blue-500/50 to-purple-500/50 h-0.5;
    animation: pulse-connection 3s ease-in-out infinite;
}

.connection-1 {
    top: 22%;
    left: 22%;
    width: 15%;
    transform: rotate(25deg);
    animation-delay: 0.2s;
}

.connection-2 {
    top: 45%;
    left: 32%;
    width: 20%;
    transform: rotate(-15deg);
    animation-delay: 0.7s;
}

.connection-3 {
    bottom: 25%;
    right: 32%;
    width: 18%;
    transform: rotate(35deg);
    animation-delay: 1.2s;
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes pulse-node {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes pulse-connection {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

/* Animation Classes */
.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-slide-up {
    animation: slide-up 1s ease-out;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-400 {
    animation-delay: 0.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary {
        @apply px-6 py-3 text-sm;
    }
    
    .feature-card,
    .service-card,
    .advantage-card {
        @apply p-4;
    }
    
    .testimonial-card {
        @apply p-6;
    }
    
    .legal-section {
        @apply p-6;
    }
    
    .ai-visualization {
        @apply h-60;
    }
    
    .node {
        @apply w-3 h-3;
    }
}

/* Hover Effects */
.hover-glow:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

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

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Focus States */
button:focus,
a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
    animation: loading-shimmer 2s infinite;
}

@keyframes loading-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .text-gradient {
        -webkit-text-fill-color: initial;
        color: black !important;
    }
}



/* New Animations */
@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scale-in 0.8s ease-out forwards;
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.8s ease-out forwards;
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slide-in-right 0.8s ease-out forwards;
}

/* Image specific styles */
.section-image {
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
}

.section-image:hover {
    transform: translateY(-5px);
}




/* New Feature Badges */
.feature-badge {
    @apply inline-flex items-center space-x-2 bg-gray-700/50 backdrop-blur-sm border border-blue-500/30 rounded-full px-4 py-2 text-sm font-medium text-gray-300 transition-all duration-300 hover:border-blue-500/60 hover:bg-gray-700/70;
}

.feature-badge i {
    @apply text-lg;
}

/* Tech Features */
.tech-feature {
    @apply text-center p-4 bg-gray-800/30 backdrop-blur-sm border border-blue-500/20 rounded-lg transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/50 hover:scale-105;
}

/* Enhanced Hover Effects */
.hover-glow:hover {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.4);
    transform: translateY(-5px) scale(1.02);
}

/* Pulse Animation for Text */
.animate-pulse {
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Ping Animation */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Enhanced Section Images */
.section-image {
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.section-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.section-image:hover::before {
    left: 100%;
}

/* Improved Responsive Design */
@media (max-width: 768px) {
    .feature-badge {
        @apply px-3 py-1 text-xs;
    }
    
    .tech-feature {
        @apply p-3;
    }
    
    .tech-feature i {
        @apply text-xl;
    }
}

/* New Data Visualization Section */
.data-viz-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.data-viz-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

/* Blog Preview Cards */
.blog-preview-card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-blue-500/20 rounded-xl overflow-hidden transition-all duration-300 hover:border-blue-500/40 hover:bg-gray-800/70 hover:scale-105;
}

.blog-preview-image {
    @apply w-full h-48 object-cover transition-transform duration-300;
}

.blog-preview-card:hover .blog-preview-image {
    transform: scale(1.1);
}

.blog-preview-content {
    @apply p-6;
}

.blog-preview-title {
    @apply text-xl font-bold text-white mb-3 hover:text-blue-400 transition-colors;
}

.blog-preview-excerpt {
    @apply text-gray-300 text-sm leading-relaxed mb-4;
}

.blog-preview-meta {
    @apply flex items-center justify-between text-xs text-gray-400;
}

.blog-tag {
    @apply inline-block bg-blue-500/20 text-blue-400 px-2 py-1 rounded-full text-xs font-medium;
}