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

:root {
    --primary-50: #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --secondary-50: #f8fafc;
    --secondary-100: #f1f5f9;
    --secondary-500: #64748b;
    --secondary-600: #475569;
    --secondary-700: #334155;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.hero {
    background: linear-gradient(135deg, var(--primary-50) 0%, rgba(255,255,255,1) 100%);
}

.feature-card:hover {
    transform: translateY(-4px);
    transition: transform 0.2s ease;
}

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

/* Responsive typography */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 14px;
    }
}