/* Design System Variables */
:root {
    /* Colors - HSL format */
    --background: hsl(0, 0%, 100%);
    --foreground: hsl(222, 47%, 11%);
    --primary: hsl(221, 83%, 53%);
    --primary-foreground: hsl(0, 0%, 100%);
    --primary-glow: hsl(250, 100%, 70%);
    --secondary: hsl(210, 40%, 96%);
    --secondary-foreground: hsl(222, 47%, 11%);
    --muted: hsl(210, 40%, 96%);
    --muted-foreground: hsl(215, 16%, 47%);
    --accent: hsl(250, 100%, 70%);
    --accent-foreground: hsl(0, 0%, 100%);
    --border: hsl(214, 32%, 91%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(222, 47%, 11%);
    
    /* Feature Colors */
    --feature-text: hsl(197, 71%, 52%);
    --feature-voice: hsl(271, 91%, 65%);
    --feature-camera: hsl(142, 71%, 45%);
    --feature-offline: hsl(24, 95%, 53%);
    --feature-keyboard: hsl(339, 90%, 51%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(59, 130, 246, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
    --shadow-lg: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
    --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.2);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gradients */
.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-gradient {
    background: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(220, 70%, 97%) 100%);
}

.testimonial-gradient {
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
}

.stats-gradient {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05), rgba(59, 130, 246, 0.05));
}

.cta-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.gradient-overlay {
    background: linear-gradient(to top, rgba(59, 130, 246, 0.2), transparent);
}

/* Patterns */
.hero-pattern {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0zNiAxOGMzLjMxNCAwIDYgMi42ODYgNiA2cy0yLjY4NiA2LTYgNi02LTIuNjg2LTYtNiAyLjY4Ni02IDYtNiIgc3Ryb2tlPSJyZ2IoNTksIDEzMCwgMjQ2KSIgb3BhY2l0eT0iMC4wNSIvPjwvZz48L3N2Zz4=');
}

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

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* Glow Effects */
.glow-left {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    filter: blur(3rem);
}

.glow-right {
    position: absolute;
    top: -1.5rem;
    right: -1.5rem;
    width: 18rem;
    height: 18rem;
    background: rgba(147, 51, 234, 0.2);
    border-radius: 50%;
    filter: blur(3rem);
}

/* Button Styles */
.btn-primary {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-lg);
    display: inline-flex;
    align-items: center;
}

.btn-primary:hover {
    opacity: 0.9;
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-outline {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-cta {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    background: white;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
}

.btn-cta:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.btn-cta-outline {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    background: transparent;
    border: 2px solid white;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Card Styles */
.testimonial-card {
    background: var(--card);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(214, 214, 214, 0.5);
    transition: var(--transition-smooth);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.feature-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    border-color: rgba(59, 130, 246, 0.5);
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow);
}

.stat-card {
    background: var(--card);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(214, 214, 214, 0.5);
    transition: var(--transition-smooth);
}

.stat-card:hover {
    box-shadow: 0 20px 40px -10px rgba(59, 130, 246, 0.2);
}

.stat-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.group:hover .stat-icon {
    transform: scale(1.1) rotate(3deg);
}

/* Language Section */
.language-showcase {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    border-radius: 1.5rem;
    padding: 3rem;
    border: 1px solid rgba(214, 214, 214, 0.5);
    box-shadow: var(--shadow-glow);
}

.language-tag {
    background: var(--card);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(214, 214, 214, 0.5);
    transition: var(--transition-smooth);
}

.language-tag:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
    border-color: rgba(59, 130, 246, 0.5);
}

.language-tag-special {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-md);
    transition: var(--transition-smooth);
}

.language-tag-special:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

/* Responsive Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

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

/* Print Styles */
@media print {
    .hero-gradient,
    .testimonial-gradient,
    .stats-gradient,
    .cta-gradient {
        background: white !important;
    }
    
    .btn-primary,
    .btn-outline,
    .btn-cta,
    .btn-cta-outline {
        display: none;
    }
}