/* Custom Styles for RAG Fortress Landing Page */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero Section - Modern Deep Blue/Cyan Gradient */
.hero-section {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #06b6d4 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
    animation: pulse 4s ease-in-out infinite;
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

/* Buttons - Updated with new color scheme */
.btn-primary {
    @apply bg-gradient-to-r from-primary-600 to-accent-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-primary-700 hover:to-accent-700 transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 transform;
}

.btn-hero-primary {
    @apply bg-white text-primary-700 px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-white/30 transition-all duration-300 hover:-translate-y-1 hover:scale-105 inline-block;
}

.btn-hero-secondary {
    @apply bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-xl font-bold text-lg border-2 border-white/40 hover:bg-white/20 hover:border-white/60 transition-all duration-300 hover:-translate-y-1 hover:scale-105 inline-flex items-center gap-3;
}

.btn-cta-primary {
    @apply bg-white text-primary-700 px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-white/30 transition-all duration-300 hover:-translate-y-1 hover:scale-105 inline-block;
}

.btn-cta-secondary {
    @apply bg-white/10 backdrop-blur-md text-white px-8 py-4 rounded-xl font-bold text-lg border-2 border-white/40 hover:bg-white/20 hover:border-white/60 transition-all duration-300 hover:-translate-y-1 hover:scale-105 inline-block;
}

/* Hero Card */
.hero-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.chat-bubble {
    @apply bg-white rounded-2xl p-6 shadow-xl border border-gray-100;
}

.chat-bubble-user {
    @apply mr-[5%] md:mr-[15%];
}

.chat-bubble-assistant {
    @apply bg-gradient-to-br from-primary-50 to-accent-50 ml-[5%] md:ml-[15%];
}

/* Differentiator Cards */
.diff-card {
    @apply p-8 bg-white rounded-2xl border-2 border-gray-100 transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl hover:shadow-primary-500/10 hover:border-primary-300;
}

/* Feature Items */
.feature-item {
    @apply flex items-start gap-3 md:gap-4 text-base md:text-lg text-gray-700 p-4 rounded-lg hover:bg-primary-50 transition-all duration-300;
}

.feature-check {
    @apply text-primary-500 font-bold text-xl md:text-2xl flex-shrink-0 mt-0.5;
}

/* Use Case Cards - Enhanced with hover effects */
.use-case-card {
    @apply p-8 rounded-2xl border-2 border-primary-100 bg-white transition-all duration-300 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 hover:border-primary-400;
}

/* Screenshot Cards */
.screenshot-card {
    @apply bg-white rounded-xl overflow-hidden shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:border-primary-300;
}

.screenshot-img {
    @apply w-full h-48 object-cover object-top border-b border-gray-200;
}

.screenshot-caption {
    @apply p-4;
}

/* Step Cards */
.step-card {
    @apply flex-1 min-w-[220px] text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 border-2 border-gray-100;
}

.step-number {
    @apply w-20 h-20 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-full flex items-center justify-center text-3xl font-bold mx-auto mb-6 shadow-lg;
}

.step-arrow {
    @apply text-3xl md:text-4xl text-primary-500 font-bold hidden lg:block;
}

@media (max-width: 1024px) {
    .step-arrow {
        display: none;
    }
}

/* Demo Preview */
.demo-screen {
    @apply bg-gray-900 rounded-2xl overflow-hidden shadow-2xl border-4 border-gray-800;
}

.demo-header {
    @apply bg-gray-800 px-4 md:px-6 py-3 md:py-4 flex items-center gap-3;
}

.demo-dots {
    @apply flex gap-2;
}

.dot-red, .dot-yellow, .dot-green {
    @apply w-3 h-3 md:w-4 md:h-4 rounded-full;
}

.dot-red {
    @apply bg-red-500;
}

.dot-yellow {
    @apply bg-yellow-500;
}

.dot-green {
    @apply bg-green-500;
}

.demo-title {
    @apply text-gray-400 text-xs md:text-sm font-medium;
}

.demo-body {
    @apply flex flex-col md:flex-row h-64 md:h-80;
}

.demo-sidebar {
    @apply w-full md:w-1/3 bg-gray-800 p-3 md:p-4;
}

.demo-nav-item {
    @apply px-3 md:px-4 py-2 md:py-3 text-gray-400 rounded-lg mb-2 text-xs md:text-sm font-medium hover:bg-gray-700 transition-colors;
}

.demo-nav-item.active {
    @apply bg-primary-500 text-white shadow-lg;
}

.demo-main {
    @apply flex-1 p-4 md:p-6 overflow-y-auto;
}

.demo-message {
    @apply px-3 md:px-4 py-2 md:py-3 rounded-xl mb-3 text-xs md:text-sm;
}

.demo-message-user {
    @apply bg-primary-500 text-white ml-[10%] md:ml-[20%] shadow-lg;
}

.demo-message-assistant {
    @apply bg-gray-700 text-white mr-[10%] md:mr-[20%] shadow-lg;
}

/* Code Block */
.code-block {
    @apply bg-gray-900 rounded-xl md:rounded-2xl overflow-hidden shadow-2xl;
}

.code-header {
    @apply bg-gray-800 px-4 md:px-6 py-3 flex items-center justify-between text-gray-400 text-xs md:text-sm;
}

.copy-btn {
    @apply bg-primary-500 text-white px-3 md:px-4 py-2 rounded-lg text-xs md:text-sm font-semibold hover:bg-primary-600 transition-colors cursor-pointer;
}

.code-block pre {
    @apply p-4 md:p-6 overflow-x-auto;
}

.code-block code {
    @apply text-gray-300 font-mono text-xs md:text-sm leading-relaxed;
}

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

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

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

/* Utility Classes */
.gradient-text {
    @apply bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent;
}