/* ==========================================================================
   SERVICE-PAGES.CSS - Comprehensive Shared Styling System
   Guarantees 100% Text Visibility, Zero Overlaps, and Rock-Solid Responsive Grids
   ========================================================================== */

/* 1. TEXT COLORS (Fixes all missing text-slate, text-emerald, text-amber, etc.) */
.text-slate-950 { color: #020617 !important; }
.text-slate-900 { color: #0f172a !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-600 { color: #475569 !important; }
.text-slate-500 { color: #64748b !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-100 { color: #f1f5f9 !important; }

.text-stone-950 { color: #0c0a09 !important; }
.text-stone-900 { color: #1c1917 !important; }
.text-stone-800 { color: #292524 !important; }
.text-stone-700 { color: #44403c !important; }
.text-stone-600 { color: #57534e !important; }
.text-stone-500 { color: #78716c !important; }
.text-stone-400 { color: #a8a29e !important; }
.text-stone-200 { color: #e7e5e4 !important; }
.text-stone-300 { color: #d6d3d1 !important; }

.border-stone-200 { border-color: #e7e5e4 !important; }
.border-stone-700 { border-color: #44403c !important; }
.border-stone-800 { border-color: #292524 !important; }

.text-emerald-900 { color: #064e3b !important; }
.text-emerald-800 { color: #065f46 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-500 { color: #10b981 !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }

.text-amber-900 { color: #78350f !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-400 { color: #fbbf24 !important; }
.text-amber-300 { color: #fcd34d !important; }

.text-cyan-900 { color: #164e63 !important; }
.text-cyan-800 { color: #155e75 !important; }
.text-cyan-700 { color: #0e7490 !important; }
.text-cyan-600 { color: #0891b2 !important; }
.text-cyan-500 { color: #06b6d4 !important; }
.text-cyan-400 { color: #22d3ee !important; }
.text-cyan-300 { color: #67e8f9 !important; }

.text-purple-900 { color: #581c87 !important; }
.text-purple-800 { color: #6b21a8 !important; }
.text-purple-700 { color: #7e22ce !important; }
.text-purple-600 { color: #9333ea !important; }
.text-purple-500 { color: #a855f7 !important; }
.text-purple-400 { color: #c084fc !important; }
.text-purple-300 { color: #d8b4fe !important; }

.text-indigo-900 { color: #312e81 !important; }
.text-indigo-800 { color: #3730a3 !important; }
.text-indigo-700 { color: #4338ca !important; }
.text-indigo-600 { color: #4f46e5 !important; }
.text-indigo-500 { color: #6366f1 !important; }
.text-indigo-400 { color: #818cf8 !important; }
.text-indigo-300 { color: #a5b4fc !important; }
.text-indigo-200 { color: #c7d2fe !important; }

/* 2. BACKGROUND COLORS (Fixes missing pill, tag, and output card backgrounds) */
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-200 { background-color: #e2e8f0 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }

.bg-stone-50 { background-color: #fafaf9 !important; }
.bg-stone-100 { background-color: #f5f5f4 !important; }
.bg-stone-800 { background-color: #292524 !important; }
.bg-stone-900 { background-color: #1c1917 !important; }
.bg-stone-950 { background-color: #0c0a09 !important; }

.bg-emerald-50 { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-emerald-600 { background-color: #059669 !important; }

.bg-amber-50 { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-amber-500 { background-color: #f59e0b !important; }

.bg-cyan-50 { background-color: #ecfeff !important; }
.bg-cyan-100 { background-color: #cffafe !important; }
.bg-cyan-500 { background-color: #06b6d4 !important; }
.bg-cyan-600 { background-color: #0891b2 !important; }

.bg-purple-50 { background-color: #faf5ff !important; }
.bg-purple-100 { background-color: #f3e8ff !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-purple-600 { background-color: #9333ea !important; }

.bg-indigo-50 { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.bg-indigo-500 { background-color: #6366f1 !important; }
.bg-indigo-600 { background-color: #4f46e5 !important; }
.bg-indigo-900 { background-color: #312e81 !important; }
.bg-indigo-950 { background-color: #1e1b4b !important; }

/* 3. BORDER COLORS */
.border-slate-100 { border-color: #f1f5f9 !important; }
.border-slate-200 { border-color: #e2e8f0 !important; }
.border-slate-300 { border-color: #cbd5e1 !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-800 { border-color: #1e293b !important; }

.border-stone-200 { border-color: #e7e5e4 !important; }
.border-stone-700 { border-color: #44403c !important; }

.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-amber-200 { border-color: #fde68a !important; }
.border-amber-300 { border-color: #fcd34d !important; }
.border-cyan-200 { border-color: #a5f3fc !important; }
.border-purple-200 { border-color: #e9d5ff !important; }
.border-indigo-200 { border-color: #c7d2fe !important; }

/* 4. EXPLICIT RESPONSIVE GRIDS (Fixes all collapsed and squished multi-column blocks) */
.grid {
    display: grid !important;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

    .lg\:col-span-4 { grid-column: span 4 / span 4 !important; }
    .lg\:col-span-5 { grid-column: span 5 / span 5 !important; }
    .lg\:col-span-6 { grid-column: span 6 / span 6 !important; }
    .lg\:col-span-7 { grid-column: span 7 / span 7 !important; }
    .lg\:col-span-8 { grid-column: span 8 / span 8 !important; }
    .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
}

/* 5. OVERLAP ELIMINATION & SAFE PADDING */
.sec-pad-safe {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
}
@media (min-width: 768px) {
    .sec-pad-safe {
        padding-top: 3.5rem !important;
        padding-bottom: 4rem !important;
    }
}

/* Card visibility and crisp rendering */
.crisp-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}

.crisp-card-dark {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

/* 6. BLUE COLOR SCALE */
.text-blue-50 { color: #eff6ff !important; }
.text-blue-100 { color: #dbeafe !important; }
.text-blue-200 { color: #bfdbfe !important; }
.text-blue-300 { color: #93c5fd !important; }
.text-blue-400 { color: #60a5fa !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-blue-800 { color: #1e40af !important; }
.text-blue-900 { color: #1e3a8a !important; }
.text-blue-950 { color: #172554 !important; }

.bg-blue-50 { background-color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-blue-200 { background-color: #bfdbfe !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-blue-800 { background-color: #1e40af !important; }
.bg-blue-900 { background-color: #1e3a8a !important; }
.bg-blue-950 { background-color: #172554 !important; }

.border-blue-100 { border-color: #dbeafe !important; }
.border-blue-200 { border-color: #bfdbfe !important; }
.border-blue-300 { border-color: #93c5fd !important; }
.border-blue-400 { border-color: #60a5fa !important; }
.border-blue-500 { border-color: #3b82f6 !important; }
.border-blue-600 { border-color: #2563eb !important; }
.border-blue-700 { border-color: #1d4ed8 !important; }

/* 7. GREEN COLOR SCALE */
.text-green-50 { color: #f0fdf4 !important; }
.text-green-100 { color: #dcfce7 !important; }
.text-green-200 { color: #bbf7d0 !important; }
.text-green-300 { color: #86efac !important; }
.text-green-400 { color: #4ade80 !important; }
.text-green-500 { color: #22c55e !important; }
.text-green-600 { color: #16a34a !important; }
.text-green-700 { color: #15803d !important; }
.text-green-800 { color: #166534 !important; }
.text-green-900 { color: #14532d !important; }

.bg-green-50 { background-color: #f0fdf4 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-green-200 { background-color: #bbf7d0 !important; }
.bg-green-500 { background-color: #22c55e !important; }
.bg-green-600 { background-color: #16a34a !important; }
.bg-green-700 { background-color: #15803d !important; }

.border-green-100 { border-color: #dcfce7 !important; }
.border-green-200 { border-color: #bbf7d0 !important; }
.border-green-300 { border-color: #86efac !important; }
.border-green-500 { border-color: #22c55e !important; }
.border-green-600 { border-color: #16a34a !important; }

/* 8. ORANGE & YELLOW COLOR SCALES */
.text-orange-50 { color: #fff7ed !important; }
.text-orange-100 { color: #ffedd5 !important; }
.text-orange-200 { color: #fed7aa !important; }
.text-orange-300 { color: #fdba74 !important; }
.text-orange-400 { color: #fb923c !important; }
.text-orange-500 { color: #f97316 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }
.text-orange-800 { color: #9a3412 !important; }

.bg-orange-50 { background-color: #fff7ed !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.bg-orange-600 { background-color: #ea580c !important; }

.border-orange-100 { border-color: #ffedd5 !important; }
.border-orange-200 { border-color: #fed7aa !important; }
.border-orange-300 { border-color: #fdba74 !important; }
.border-orange-500 { border-color: #f97316 !important; }

.text-yellow-400 { color: #facc15 !important; }
.text-yellow-500 { color: #eab308 !important; }
.text-yellow-600 { color: #ca8a04 !important; }
.text-yellow-700 { color: #a16207 !important; }

/* 9. GRAY & ROSE COLOR SCALES */
.text-gray-50 { color: #f9fafb !important; }
.text-gray-100 { color: #f3f4f6 !important; }
.text-gray-200 { color: #e5e7eb !important; }
.text-gray-300 { color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-900 { color: #111827 !important; }

.bg-gray-50 { background-color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-gray-200 { background-color: #e5e7eb !important; }
.bg-gray-800 { background-color: #1f2937 !important; }
.bg-gray-900 { background-color: #111827 !important; }

.text-rose-500 { color: #f43f5e !important; }
.text-rose-600 { color: #e11d48 !important; }
.text-rose-700 { color: #be123c !important; }

/* 10. SPECIAL UTILITIES */
.min-w-\[650px\] { min-width: 650px !important; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem !important; }
.pl-\[4\.5rem\] { padding-left: 4.5rem !important; }
.hover\:scale-\[1\.01\]:hover { transform: scale(1.01) !important; }
.bg-\[radial-gradient\(\#ffffff_1px\2c transparent_1px\)\] {
    background-image: radial-gradient(#ffffff 1px, transparent 1px) !important;
}

/* ==========================================================================
   11. ACTION BUTTONS & MISSING BACKGROUND COLORS
   ========================================================================== */
.bg-cyan-300 { background-color: #67e8f9 !important; }
.bg-cyan-400 { background-color: #22d3ee !important; }
.hover\:bg-cyan-300:hover { background-color: #67e8f9 !important; }
.hover\:bg-cyan-400:hover { background-color: #22d3ee !important; }

.bg-amber-300 { background-color: #fcd34d !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.hover\:bg-amber-300:hover { background-color: #fcd34d !important; }
.hover\:bg-amber-400:hover { background-color: #fbbf24 !important; }

.bg-emerald-300 { background-color: #6ee7b7 !important; }
.bg-emerald-400 { background-color: #34d399 !important; }
.hover\:bg-emerald-300:hover { background-color: #6ee7b7 !important; }
.hover\:bg-emerald-400:hover { background-color: #34d399 !important; }
.hover\:bg-emerald-500:hover { background-color: #10b981 !important; }

.bg-orange-400 { background-color: #fb923c !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.hover\:bg-orange-300:hover { background-color: #fdba74 !important; }
.hover\:bg-orange-400:hover { background-color: #fb923c !important; }
.hover\:bg-orange-500:hover { background-color: #f97316 !important; }

.bg-purple-400 { background-color: #c084fc !important; }
.hover\:bg-purple-400:hover { background-color: #c084fc !important; }

.bg-indigo-400 { background-color: #818cf8 !important; }
.bg-indigo-700 { background-color: #4338ca !important; }
.hover\:bg-indigo-400:hover { background-color: #818cf8 !important; }

.bg-red-100 { background-color: #fee2e2 !important; }
.text-red-400 { color: #f87171 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-700 { color: #b91c1c !important; }
.border-red-500 { border-color: #ef4444 !important; }

.text-teal-300 { color: #5eead4 !important; }
.text-teal-400 { color: #2dd4bf !important; }

/* ==========================================================================
   12. GLASSMORPHISM & OPACITY BADGES
   ========================================================================== */
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/15 { background-color: rgba(255, 255, 255, 0.15) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2) !important; }
.hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, 0.3) !important; }

.border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-white\/15 { border-color: rgba(255, 255, 255, 0.15) !important; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3) !important; }

.bg-teal-500\/20 { background-color: rgba(20, 184, 166, 0.2) !important; }
.border-teal-400\/30 { border-color: rgba(45, 212, 191, 0.3) !important; }

.bg-cyan-500\/20 { background-color: rgba(6, 182, 212, 0.2) !important; }
.border-cyan-400\/40 { border-color: rgba(34, 211, 238, 0.4) !important; }
.border-cyan-500 { border-color: #06b6d4 !important; }

.bg-amber-400\/20 { background-color: rgba(251, 191, 36, 0.2) !important; }
.bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.2) !important; }
.border-amber-400\/30 { border-color: rgba(251, 191, 36, 0.3) !important; }
.border-amber-400\/40 { border-color: rgba(251, 191, 36, 0.4) !important; }
.border-amber-500 { border-color: #f59e0b !important; }

.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
.border-emerald-400\/30 { border-color: rgba(52, 211, 153, 0.3) !important; }
.border-emerald-400\/40 { border-color: rgba(52, 211, 153, 0.4) !important; }
.border-emerald-500 { border-color: #10b981 !important; }
.hover\:border-emerald-500:hover { border-color: #10b981 !important; }

.bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.2) !important; }
.border-orange-400\/30 { border-color: rgba(251, 146, 60, 0.3) !important; }
.border-orange-400\/40 { border-color: rgba(251, 146, 60, 0.4) !important; }

.bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.2) !important; }
.border-purple-400\/30 { border-color: rgba(192, 132, 252, 0.3) !important; }
.border-purple-400\/40 { border-color: rgba(192, 132, 252, 0.4) !important; }
.border-purple-500 { border-color: #a855f7 !important; }
.hover\:border-purple-500:hover { border-color: #a855f7 !important; }

.bg-indigo-50\/50 { background-color: rgba(238, 242, 255, 0.5) !important; }
.bg-indigo-500\/20 { background-color: rgba(99, 102, 241, 0.2) !important; }
.border-indigo-400\/30 { border-color: rgba(129, 140, 248, 0.3) !important; }
.border-indigo-400\/40 { border-color: rgba(129, 140, 248, 0.4) !important; }
.border-indigo-500 { border-color: #6366f1 !important; }

.bg-slate-800\/80 { background-color: rgba(30, 41, 59, 0.8) !important; }
.bg-slate-800\/90 { background-color: rgba(30, 41, 59, 0.9) !important; }
.bg-slate-900\/90 { background-color: rgba(15, 23, 42, 0.9) !important; }
.border-slate-700\/80 { border-color: rgba(51, 65, 85, 0.8) !important; }

.bg-stone-800\/80 { background-color: rgba(41, 37, 36, 0.8) !important; }
.bg-stone-800\/90 { background-color: rgba(41, 37, 36, 0.9) !important; }
.bg-stone-900\/90 { background-color: rgba(28, 25, 23, 0.9) !important; }
.border-stone-700\/80 { border-color: rgba(68, 64, 60, 0.8) !important; }

/* Interactive Hover States */
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px) !important; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.hover\:bg-slate-50:hover { background-color: #f8fafc !important; }

.hover\:text-cyan-300:hover { color: #67e8f9 !important; }
.hover\:text-amber-400:hover { color: #fbbf24 !important; }
.hover\:text-emerald-400:hover { color: #34d399 !important; }
.hover\:text-indigo-400:hover { color: #818cf8 !important; }
.hover\:text-orange-400:hover { color: #fb923c !important; }
.hover\:text-purple-300:hover { color: #d8b4fe !important; }

/* ==========================================================================
   13. TAILWIND GRADIENT COMPATIBILITY ENGINE
   ========================================================================== */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops, #0f172a, #1e293b)) !important;
}
.bg-gradient-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops, #0f172a, #1e293b)) !important;
}
.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops, #0f172a, #1e293b)) !important;
}
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops, #0f172a, #1e293b)) !important;
}

/* Gradient "FROM" Stops */
.from-accent { --tw-gradient-from: #fbbf24; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0)); }
.from-cyan-300 { --tw-gradient-from: #67e8f9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(103, 232, 249, 0)); }
.from-amber-300 { --tw-gradient-from: #fcd34d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 211, 77, 0)); }
.from-amber-400 { --tw-gradient-from: #fbbf24; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0)); }
.from-amber-600 { --tw-gradient-from: #d97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0)); }
.from-emerald-400 { --tw-gradient-from: #34d399; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0)); }
.from-indigo-400 { --tw-gradient-from: #818cf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(129, 140, 248, 0)); }
.from-orange-400 { --tw-gradient-from: #fb923c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 146, 60, 0)); }
.from-purple-300 { --tw-gradient-from: #d8b4fe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(216, 180, 254, 0)); }
.from-slate-900 { --tw-gradient-from: #0f172a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.from-slate-950 { --tw-gradient-from: #020617; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(2, 6, 23, 0)); }
.from-stone-950 { --tw-gradient-from: #0c0a09; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(12, 10, 9, 0)); }

/* Gradient "VIA" Stops */
.via-teal-200 { --tw-gradient-stops: var(--tw-gradient-from), #99f6e4, var(--tw-gradient-to, rgba(153, 246, 228, 0)); }
.via-teal-300 { --tw-gradient-stops: var(--tw-gradient-from), #5eead4, var(--tw-gradient-to, rgba(94, 234, 212, 0)); }
.via-teal-950 { --tw-gradient-stops: var(--tw-gradient-from), #042f2e, var(--tw-gradient-to, rgba(4, 47, 46, 0)); }
.via-yellow-300 { --tw-gradient-stops: var(--tw-gradient-from), #fde047, var(--tw-gradient-to, rgba(253, 224, 71, 0)); }
.via-amber-200 { --tw-gradient-stops: var(--tw-gradient-from), #fde68a, var(--tw-gradient-to, rgba(253, 230, 138, 0)); }
.via-amber-300 { --tw-gradient-stops: var(--tw-gradient-from), #fcd34d, var(--tw-gradient-to, rgba(252, 211, 77, 0)); }
.via-pink-300 { --tw-gradient-stops: var(--tw-gradient-from), #f472b6, var(--tw-gradient-to, rgba(244, 114, 182, 0)); }
.via-sky-300 { --tw-gradient-stops: var(--tw-gradient-from), #7dd3fc, var(--tw-gradient-to, rgba(125, 211, 252, 0)); }
.via-blue-950 { --tw-gradient-stops: var(--tw-gradient-from), #172554, var(--tw-gradient-to, rgba(23, 37, 84, 0)); }
.via-emerald-950 { --tw-gradient-stops: var(--tw-gradient-from), #064e3b, var(--tw-gradient-to, rgba(6, 78, 59, 0)); }
.via-purple-950 { --tw-gradient-stops: var(--tw-gradient-from), #3b0764, var(--tw-gradient-to, rgba(59, 7, 100, 0)); }
.via-indigo-950 { --tw-gradient-stops: var(--tw-gradient-from), #1e1b4b, var(--tw-gradient-to, rgba(30, 27, 75, 0)); }
.via-slate-900 { --tw-gradient-stops: var(--tw-gradient-from), #0f172a, var(--tw-gradient-to, rgba(15, 23, 42, 0)); }
.via-stone-900 { --tw-gradient-stops: var(--tw-gradient-from), #1c1917, var(--tw-gradient-to, rgba(28, 25, 23, 0)); }

/* Gradient "TO" Stops */
.to-brand-secondary { --tw-gradient-to: #10b981; }
.to-emerald-300 { --tw-gradient-to: #6ee7b7; }
.to-emerald-400 { --tw-gradient-to: #34d399; }
.to-emerald-600 { --tw-gradient-to: #059669; }
.to-amber-300 { --tw-gradient-to: #fcd34d; }
.to-amber-950 { --tw-gradient-to: #451a03; }
.to-orange-950 { --tw-gradient-to: #431407; }
.to-yellow-300 { --tw-gradient-to: #fde047; }
.to-white { --tw-gradient-to: #ffffff; }
.to-slate-900 { --tw-gradient-to: #0f172a; }
.to-slate-950 { --tw-gradient-to: #020617; }

/* Background Clip Text Utility */
.bg-clip-text {
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* Fallback color for transparent text so it NEVER renders invisible */
.text-transparent {
    color: #38bdf8; /* Non-transparent fallback */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .text-transparent.bg-clip-text {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* ==========================================================================
   14. DEDICATED FAIL-SAFE GRADIENT HEADINGS
   ========================================================================== */
.gradient-text-cold {
    background: linear-gradient(135deg, #22d3ee 0%, #2dd4bf 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #22d3ee !important;
    display: inline-block;
}

.gradient-text-chakki {
    background: linear-gradient(135deg, #fbbf24 0%, #fde047 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fbbf24 !important;
    display: inline-block;
}

.gradient-text-res {
    background: linear-gradient(135deg, #fbbf24 0%, #fde047 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fbbf24 !important;
    display: inline-block;
}

.gradient-text-comm {
    background: linear-gradient(135deg, #34d399 0%, #5eead4 50%, #fcd34d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #34d399 !important;
    display: inline-block;
}

.gradient-text-ind {
    background: linear-gradient(135deg, #fb923c 0%, #fcd34d 50%, #fef08a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fb923c !important;
    display: inline-block;
}

.gradient-text-yuva {
    background: linear-gradient(135deg, #fbbf24 0%, #fde047 50%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fbbf24 !important;
    display: inline-block;
}

.gradient-text-hyb {
    background: linear-gradient(135deg, #fbbf24 0%, #fde047 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #fbbf24 !important;
    display: inline-block;
}

.gradient-text-orange-green {
    background: linear-gradient(135deg, #ea580c 0%, #16a34a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ea580c !important;
    display: inline-block;
}

/* ==========================================================================
   15. ROCK-SOLID BOTTOM CTA BANNER SYSTEM
   Guarantees 100% dark background, zero washed out text, high contrast buttons
   ========================================================================== */
.service-cta-banner {
    position: relative !important;
    border-radius: 1.5rem !important;
    padding: 2.5rem 1.5rem !important;
    text-align: center !important;
    color: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
@media (min-width: 640px) {
    .service-cta-banner {
        padding: 3.5rem 3rem !important;
    }
}

.service-cta-banner h2 {
    color: #ffffff !important;
}

.cta-banner-cold {
    background-color: #022c22 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(30, 115, 190, 0.35), transparent 70%), linear-gradient(135deg, #020617 0%, #042f2e 50%, #020617 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.cta-banner-chakki {
    background-color: #1c1917 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.3), transparent 70%), linear-gradient(135deg, #0c0a09 0%, #292524 50%, #451a03 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.cta-banner-industrial {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, 0.3), transparent 70%), linear-gradient(135deg, #020617 0%, #1e293b 50%, #431407 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
}

.cta-banner-commercial {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.35), transparent 70%), linear-gradient(135deg, #020617 0%, #064e3b 50%, #020617 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
}

.cta-banner-yuva {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(30, 115, 190, 0.4), transparent 70%), linear-gradient(135deg, #020617 0%, #0b3d69 50%, #020617 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.cta-banner-hybrid {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(30, 115, 190, 0.4), transparent 70%), linear-gradient(135deg, #020617 0%, #0b3d69 50%, #020617 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.cta-banner-residential {
    background-color: #020617 !important;
    background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.35), transparent 70%), linear-gradient(135deg, #020617 0%, #172554 50%, #020617 100%) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
}

/* ==========================================================================
   16. SERVICE HERO PADDING & BREADCRUMB SPACING
   Guarantees generous breathing room below sticky header on all screens
   ========================================================================== */
/* Padding Top Utilities */
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
.pt-8 { padding-top: 2rem !important; }
.pt-10 { padding-top: 2.5rem !important; }
.pt-12 { padding-top: 3rem !important; }
.pt-14 { padding-top: 3.5rem !important; }
.pt-16 { padding-top: 4rem !important; }
.pt-20 { padding-top: 5rem !important; }
.pt-24 { padding-top: 6rem !important; }
.pt-28 { padding-top: 7rem !important; }
.pt-32 { padding-top: 8rem !important; }

/* Padding Bottom Utilities */
.pb-6 { padding-bottom: 1.5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.pb-12 { padding-bottom: 3rem !important; }
.pb-16 { padding-bottom: 4rem !important; }
.pb-20 { padding-bottom: 5rem !important; }
.pb-24 { padding-bottom: 6rem !important; }
.pb-28 { padding-bottom: 7rem !important; }
.pb-32 { padding-bottom: 8rem !important; }

/* Margin Bottom Utilities */
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }

/* Responsive Spacing Breakpoints */
@media (min-width: 640px) {
    .sm\:pt-16 { padding-top: 4rem !important; }
    .sm\:pt-20 { padding-top: 5rem !important; }
    .sm\:pb-24 { padding-bottom: 6rem !important; }
}

@media (min-width: 768px) {
    .md\:pt-16 { padding-top: 4rem !important; }
    .md\:pt-20 { padding-top: 5rem !important; }
    .md\:pb-24 { padding-bottom: 6rem !important; }
    .md\:pb-28 { padding-bottom: 7rem !important; }
}

@media (min-width: 1024px) {
    .lg\:pt-16 { padding-top: 4rem !important; }
    .lg\:pt-20 { padding-top: 5rem !important; }
    .lg\:pt-24 { padding-top: 6rem !important; }
    .lg\:pt-28 { padding-top: 7rem !important; }
    .lg\:pt-32 { padding-top: 8rem !important; }
    .lg\:pb-24 { padding-bottom: 6rem !important; }
    .lg\:pb-28 { padding-bottom: 7rem !important; }
    .lg\:pb-32 { padding-bottom: 8rem !important; }
}

/* Fail-Safe Hero Container Spacing: Prevents breadcrumbs from touching the header */
.service-hero-section,
.hyb-hero-bg,
.cold-hero-bg,
.chakki-hero-bg,
.comm-hero-bg,
.ind-hero-bg,
.yuva-hero-bg,
.res-hero-bg {
    padding-top: 3rem !important;
    padding-bottom: 5rem !important;
}
@media (min-width: 640px) {
    .service-hero-section,
    .hyb-hero-bg,
    .cold-hero-bg,
    .chakki-hero-bg,
    .comm-hero-bg,
    .ind-hero-bg,
    .yuva-hero-bg,
    .res-hero-bg {
        padding-top: 3.5rem !important;
        padding-bottom: 6rem !important;
    }
}
@media (min-width: 1024px) {
    .service-hero-section,
    .hyb-hero-bg,
    .cold-hero-bg,
    .chakki-hero-bg,
    .comm-hero-bg,
    .ind-hero-bg,
    .yuva-hero-bg,
    .res-hero-bg {
        padding-top: 4.5rem !important;
        padding-bottom: 7rem !important;
    }
}

/* Fail-Safe Breadcrumb Nav Spacing */
.service-breadcrumb-nav,
.hyb-hero-bg nav,
.cold-hero-bg nav,
.chakki-hero-bg nav,
.comm-hero-bg nav,
.ind-hero-bg nav,
.yuva-hero-bg nav,
.res-hero-bg nav {
    margin-top: 0.5rem !important;
    margin-bottom: 2rem !important;
}
@media (min-width: 768px) {
    .service-breadcrumb-nav,
    .hyb-hero-bg nav,
    .cold-hero-bg nav,
    .chakki-hero-bg nav,
    .comm-hero-bg nav,
    .ind-hero-bg nav,
    .yuva-hero-bg nav,
    .res-hero-bg nav {
        margin-top: 0.75rem !important;
        margin-bottom: 2.5rem !important;
    }
}