/**
 * Brand Mentions - Custom Styles
 * Aanvulling op Tailwind CSS CDN
 */

/* Gradients */
.gradient-brand {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.gradient-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Mesh pattern background */
.mesh-pattern {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

/* Hero mesh pattern */
.hero-mesh {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}

/* Card styles */
.card {
    @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300;
}

.card-hover {
    @apply transform hover:-translate-y-1 transition-all duration-300;
}

/* Button styles */
.btn-primary {
    @apply gradient-brand text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition;
}

.btn-secondary {
    @apply bg-white text-brand-600 border-2 border-brand-600 px-6 py-3 rounded-lg font-semibold hover:bg-brand-50 transition;
}

/* Section spacing */
.section {
    @apply py-16 md:py-20;
}

.section-lg {
    @apply py-20 md:py-28;
}

/* Container */
.container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.container-wide {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Typography */
.heading-xl {
    @apply text-4xl md:text-5xl lg:text-6xl font-black leading-tight;
}

.heading-lg {
    @apply text-3xl md:text-4xl font-bold leading-tight;
}

.heading-md {
    @apply text-2xl md:text-3xl font-bold;
}

.heading-sm {
    @apply text-xl md:text-2xl font-semibold;
}

/* Feature icons */
.feature-icon {
    @apply w-12 h-12 gradient-brand rounded-xl flex items-center justify-center text-white;
}

.feature-icon-lg {
    @apply w-16 h-16 gradient-brand rounded-2xl flex items-center justify-center text-white;
}

/* Stats */
.stat-number {
    @apply text-4xl md:text-5xl font-black text-brand-600;
}

.stat-label {
    @apply text-gray-600 font-medium mt-1;
}

/* Pricing card */
.pricing-card {
    @apply bg-white rounded-2xl shadow-lg p-8 relative;
}

.pricing-card-featured {
    @apply border-2 border-brand-500 transform scale-105;
}

.pricing-badge {
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 gradient-brand text-white px-4 py-1 rounded-full text-sm font-semibold;
}

/* FAQ Accordion */
.faq-item {
    @apply border-b border-gray-200;
}

.faq-question {
    @apply w-full flex justify-between items-center py-4 text-left font-semibold text-gray-900 hover:text-brand-600 transition;
}

.faq-answer {
    @apply pb-4 text-gray-600;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none transition;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

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

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

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.pulse-ring {
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Testimonial card */
.testimonial-card {
    @apply bg-white rounded-xl p-6 shadow-lg;
}

.testimonial-avatar {
    @apply w-12 h-12 rounded-full bg-brand-100 flex items-center justify-center text-brand-600 font-bold;
}

/* Screenshot mockup */
.screenshot-mockup {
    @apply bg-gray-900 rounded-xl p-4 shadow-2xl;
}

.screenshot-header {
    @apply flex items-center space-x-2 mb-3;
}

.screenshot-dot {
    @apply w-3 h-3 rounded-full;
}

/* Process steps */
.process-step {
    @apply relative pl-12;
}

.process-step-number {
    @apply absolute left-0 top-0 w-8 h-8 gradient-brand rounded-full flex items-center justify-center text-white font-bold text-sm;
}

.process-step-line {
    @apply absolute left-4 top-8 w-0.5 h-full bg-brand-200;
}

/* Mobile menu animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#mobile-menu.open {
    max-height: 100vh;
}

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

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    @apply outline-2 outline-offset-2 outline-brand-500;
}