:root {
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --cyan-50: #ecfeff;
    --cyan-500: #06b6d4;
    --cyan-600: #0891b2;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --emerald-500: #10b981;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--blue-50) 0%, #ffffff 50%, var(--cyan-50) 100%);
}

.gradient-blue-cyan {
    background: linear-gradient(to right, var(--blue-500), var(--cyan-500));
}

.gradient-cyan-teal {
    background: linear-gradient(to right, var(--cyan-500), var(--teal-500));
}

.gradient-teal-green {
    background: linear-gradient(to right, var(--teal-500), var(--green-500));
}

.gradient-green-emerald {
    background: linear-gradient(to right, var(--green-500), var(--emerald-500));
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.service-card-inner {
    border-radius: 1.4rem;
}

.icon-container {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.icon-container:hover {
    transform: scale(1.1);
}

.tech-item {
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.tech-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-0.25rem);
}

.highlight-box {
    background: linear-gradient(135deg, var(--blue-50), var(--cyan-50));
    border-radius: 0.75rem;
}

.btn-gradient {
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-section {
    background: linear-gradient(135deg, var(--blue-600), var(--cyan-600));
}

/* Custom color classes */
.bg-blue-100 {
    background-color: var(--blue-100);
}

.text-blue-600 {
    color: var(--blue-600);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

.text-gray-900 {
    color: var(--gray-900);
}

.text-blue-600 {
    color: var(--blue-600);
}

.bg-blue-100 {
    background-color: var(--blue-100);
}

.bg-white {
    background-color: #ffffff;
}

.text-white {
    color: #ffffff;
}

.text-success {
    color: var(--green-500) !important;
}