/* Project Page Styles - Matching main page sections */ /* ==================== SECTION COLORS FOR PORTFOLIO ==================== */ /* Section 01 - Problems (red/warning) */ #problems .service-page-number { color: var(--infra-color); } #problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #problems .feature-list li { border-color: var(--infra-color); } #problems .feature-list li::before { color: var(--infra-color); } #problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #problems .result-value { color: var(--infra-color); } #problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #problems .pricing-value { color: var(--infra-color); } #problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* Section 02 - Solutions (green) */ #solutions .service-page-number { color: var(--bots-color); } #solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #solutions .feature-list li { border-color: var(--bots-color); } #solutions .feature-list li::before { color: var(--bots-color); } #solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #solutions .result-value { color: var(--bots-color); } #solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #solutions .pricing-value { color: var(--bots-color); } #solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* Section 03 - Features (purple/neural) */ #features .service-page-number { color: var(--neural-color); } #features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #features .feature-list li { border-color: var(--neural-color); } #features .feature-list li::before { color: var(--neural-color); } #features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #features .result-value { color: var(--neural-color); } #features .step-number { background: var(--neural-color); } #features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #features .pricing-value { color: var(--neural-color); } #features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* Section 04 - Tech (cyan/mobile) */ #tech .service-page-number { color: var(--mobile-color); } #tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #tech .feature-list li { border-color: var(--mobile-color); } #tech .feature-list li::before { color: var(--mobile-color); } #tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #tech .result-value { color: var(--mobile-color); } #tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #tech .pricing-value { color: var(--mobile-color); } #tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* Section 05 - Comparison (orange/crm) */ #comparison .service-page-number { color: var(--crm-color); } #comparison .service-page-header h2 { color: var(--crm-color); text-shadow: 0 0 30px rgba(245, 158, 11, 0.5); } #comparison .service-page-header::before { background: radial-gradient(ellipse at center, var(--crm-color) 0%, transparent 70%); } #comparison .service-main h3 { border-color: var(--crm-color); color: var(--crm-color); } #comparison .feature-list li { border-color: var(--crm-color); } #comparison .feature-list li::before { color: var(--crm-color); } #comparison .use-case { background: rgba(245, 158, 11, 0.15); color: var(--crm-color); border: 1px solid rgba(245, 158, 11, 0.3); } #comparison .use-case:hover { background: rgba(245, 158, 11, 0.3); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } #comparison .result-value { color: var(--crm-color); } #comparison .pricing-card.featured { border-color: var(--crm-color); box-shadow: 0 0 40px rgba(245, 158, 11, 0.2); } #comparison .pricing-value { color: var(--crm-color); } #comparison .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--crm-color), #fbbf24); } #comparison .comparison-table thead { background: linear-gradient(135deg, var(--crm-color), #fbbf24); } /* Section 06 - Use Cases (pink/web) */ #use-cases .service-page-number { color: var(--web-color); } #use-cases .service-page-header h2 { color: var(--web-color); text-shadow: 0 0 30px rgba(236, 72, 153, 0.5); } #use-cases .service-page-header::before { background: radial-gradient(ellipse at center, var(--web-color) 0%, transparent 70%); } #use-cases .service-main h3 { border-color: var(--web-color); color: var(--web-color); } #use-cases .feature-list li { border-color: var(--web-color); } #use-cases .feature-list li::before { color: var(--web-color); } #use-cases .use-case { background: rgba(236, 72, 153, 0.15); color: var(--web-color); border: 1px solid rgba(236, 72, 153, 0.3); } #use-cases .use-case:hover { background: rgba(236, 72, 153, 0.3); box-shadow: 0 0 20px rgba(236, 72, 153, 0.3); } #use-cases .result-value { color: var(--web-color); } #use-cases .step-number { background: var(--web-color); } #use-cases .pricing-card.featured { border-color: var(--web-color); box-shadow: 0 0 40px rgba(236, 72, 153, 0.2); } #use-cases .pricing-value { color: var(--web-color); } #use-cases .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--web-color), #f472b6); } /* Section 07 - Pricing (primary/accent) */ #pricing .service-page-number { color: var(--primary); } #pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #pricing .feature-list li { border-color: var(--primary); } #pricing .feature-list li::before { color: var(--accent); } #pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #pricing .result-value { color: var(--accent); } #pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #pricing .pricing-value { color: var(--primary); } #pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== VIDEO2TEXT SECTION COLORS ==================== */ /* V2T Section 01 - Problems (red/warning) */ #v2t-problems .service-page-number { color: var(--infra-color); } #v2t-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #v2t-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #v2t-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #v2t-problems .feature-list li { border-color: var(--infra-color); } #v2t-problems .feature-list li::before { color: var(--infra-color); } #v2t-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #v2t-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #v2t-problems .result-value { color: var(--infra-color); } #v2t-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #v2t-problems .pricing-value { color: var(--infra-color); } #v2t-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* V2T Section 02 - Solutions (green) */ #v2t-solutions .service-page-number { color: var(--bots-color); } #v2t-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #v2t-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #v2t-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #v2t-solutions .feature-list li { border-color: var(--bots-color); } #v2t-solutions .feature-list li::before { color: var(--bots-color); } #v2t-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #v2t-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #v2t-solutions .result-value { color: var(--bots-color); } #v2t-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #v2t-solutions .pricing-value { color: var(--bots-color); } #v2t-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* V2T Section 03 - Features (purple/neural) */ #v2t-features .service-page-number { color: var(--neural-color); } #v2t-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #v2t-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #v2t-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #v2t-features .feature-list li { border-color: var(--neural-color); } #v2t-features .feature-list li::before { color: var(--neural-color); } #v2t-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #v2t-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #v2t-features .result-value { color: var(--neural-color); } #v2t-features .step-number { background: var(--neural-color); } #v2t-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #v2t-features .pricing-value { color: var(--neural-color); } #v2t-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* V2T Section 04 - Tech (cyan/mobile) */ #v2t-tech .service-page-number { color: var(--mobile-color); } #v2t-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #v2t-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #v2t-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #v2t-tech .feature-list li { border-color: var(--mobile-color); } #v2t-tech .feature-list li::before { color: var(--mobile-color); } #v2t-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #v2t-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #v2t-tech .result-value { color: var(--mobile-color); } #v2t-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #v2t-tech .pricing-value { color: var(--mobile-color); } #v2t-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* V2T Section 05 - Pricing (primary/accent) */ #v2t-pricing .service-page-number { color: var(--primary); } #v2t-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #v2t-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #v2t-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #v2t-pricing .feature-list li { border-color: var(--primary); } #v2t-pricing .feature-list li::before { color: var(--accent); } #v2t-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #v2t-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #v2t-pricing .result-value { color: var(--accent); } #v2t-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #v2t-pricing .pricing-value { color: var(--primary); } #v2t-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== CLUSTER BOT SECTION COLORS ==================== */ /* CB Section 01 - Problems (red/warning) */ #cb-problems .service-page-number { color: var(--infra-color); } #cb-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #cb-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #cb-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #cb-problems .feature-list li { border-color: var(--infra-color); } #cb-problems .feature-list li::before { color: var(--infra-color); } #cb-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #cb-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #cb-problems .result-value { color: var(--infra-color); } #cb-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #cb-problems .pricing-value { color: var(--infra-color); } #cb-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* CB Section 02 - Solutions (green) */ #cb-solutions .service-page-number { color: var(--bots-color); } #cb-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #cb-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #cb-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #cb-solutions .feature-list li { border-color: var(--bots-color); } #cb-solutions .feature-list li::before { color: var(--bots-color); } #cb-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #cb-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #cb-solutions .result-value { color: var(--bots-color); } #cb-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #cb-solutions .pricing-value { color: var(--bots-color); } #cb-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* CB Section 03 - Features (purple/neural) */ #cb-features .service-page-number { color: var(--neural-color); } #cb-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #cb-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #cb-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #cb-features .feature-list li { border-color: var(--neural-color); } #cb-features .feature-list li::before { color: var(--neural-color); } #cb-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #cb-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #cb-features .result-value { color: var(--neural-color); } #cb-features .step-number { background: var(--neural-color); } #cb-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #cb-features .pricing-value { color: var(--neural-color); } #cb-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* CB Section 04 - Tech (cyan/mobile) */ #cb-tech .service-page-number { color: var(--mobile-color); } #cb-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #cb-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #cb-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #cb-tech .feature-list li { border-color: var(--mobile-color); } #cb-tech .feature-list li::before { color: var(--mobile-color); } #cb-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #cb-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #cb-tech .result-value { color: var(--mobile-color); } #cb-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #cb-tech .pricing-value { color: var(--mobile-color); } #cb-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* CB Section 05 - Advantages (orange/crm) */ #cb-advantages .service-page-number { color: var(--crm-color); } #cb-advantages .service-page-header h2 { color: var(--crm-color); text-shadow: 0 0 30px rgba(245, 158, 11, 0.5); } #cb-advantages .service-page-header::before { background: radial-gradient(ellipse at center, var(--crm-color) 0%, transparent 70%); } #cb-advantages .service-main h3 { border-color: var(--crm-color); color: var(--crm-color); } #cb-advantages .feature-list li { border-color: var(--crm-color); } #cb-advantages .feature-list li::before { color: var(--crm-color); } #cb-advantages .use-case { background: rgba(245, 158, 11, 0.15); color: var(--crm-color); border: 1px solid rgba(245, 158, 11, 0.3); } #cb-advantages .use-case:hover { background: rgba(245, 158, 11, 0.3); box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } #cb-advantages .result-value { color: var(--crm-color); } #cb-advantages .pricing-card.featured { border-color: var(--crm-color); box-shadow: 0 0 40px rgba(245, 158, 11, 0.2); } #cb-advantages .pricing-value { color: var(--crm-color); } #cb-advantages .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--crm-color), #fbbf24); } /* CB Section 06 - Pricing (primary/accent) */ #cb-pricing .service-page-number { color: var(--primary); } #cb-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #cb-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #cb-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #cb-pricing .feature-list li { border-color: var(--primary); } #cb-pricing .feature-list li::before { color: var(--accent); } #cb-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #cb-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #cb-pricing .result-value { color: var(--accent); } #cb-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #cb-pricing .pricing-value { color: var(--primary); } #cb-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== REWRITE SECTION COLORS ==================== */ /* RW Section 01 - Problems (red/warning) */ #rw-problems .service-page-number { color: var(--infra-color); } #rw-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #rw-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #rw-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #rw-problems .feature-list li { border-color: var(--infra-color); } #rw-problems .feature-list li::before { color: var(--infra-color); } #rw-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #rw-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #rw-problems .result-value { color: var(--infra-color); } #rw-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #rw-problems .pricing-value { color: var(--infra-color); } #rw-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* RW Section 02 - Solutions (green) */ #rw-solutions .service-page-number { color: var(--bots-color); } #rw-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #rw-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #rw-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #rw-solutions .feature-list li { border-color: var(--bots-color); } #rw-solutions .feature-list li::before { color: var(--bots-color); } #rw-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #rw-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #rw-solutions .result-value { color: var(--bots-color); } #rw-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #rw-solutions .pricing-value { color: var(--bots-color); } #rw-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* RW Section 03 - Features (purple/neural) */ #rw-features .service-page-number { color: var(--neural-color); } #rw-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #rw-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #rw-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #rw-features .feature-list li { border-color: var(--neural-color); } #rw-features .feature-list li::before { color: var(--neural-color); } #rw-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #rw-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #rw-features .result-value { color: var(--neural-color); } #rw-features .step-number { background: var(--neural-color); } #rw-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #rw-features .pricing-value { color: var(--neural-color); } #rw-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* RW Section 04 - Tech (cyan/mobile) */ #rw-tech .service-page-number { color: var(--mobile-color); } #rw-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #rw-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #rw-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #rw-tech .feature-list li { border-color: var(--mobile-color); } #rw-tech .feature-list li::before { color: var(--mobile-color); } #rw-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #rw-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #rw-tech .result-value { color: var(--mobile-color); } #rw-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #rw-tech .pricing-value { color: var(--mobile-color); } #rw-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* RW Section 05 - Pricing (primary/accent) */ #rw-pricing .service-page-number { color: var(--primary); } #rw-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #rw-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #rw-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #rw-pricing .feature-list li { border-color: var(--primary); } #rw-pricing .feature-list li::before { color: var(--accent); } #rw-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #rw-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #rw-pricing .result-value { color: var(--accent); } #rw-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #rw-pricing .pricing-value { color: var(--primary); } #rw-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== DOCUMIND SECTION COLORS ==================== */ /* DM Section 01 - Problems (red/warning) */ #dm-problems .service-page-number { color: var(--infra-color); } #dm-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #dm-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #dm-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #dm-problems .feature-list li { border-color: var(--infra-color); } #dm-problems .feature-list li::before { color: var(--infra-color); } #dm-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #dm-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #dm-problems .result-value { color: var(--infra-color); } #dm-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #dm-problems .pricing-value { color: var(--infra-color); } #dm-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* DM Section 02 - Solutions (green) */ #dm-solutions .service-page-number { color: var(--bots-color); } #dm-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #dm-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #dm-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #dm-solutions .feature-list li { border-color: var(--bots-color); } #dm-solutions .feature-list li::before { color: var(--bots-color); } #dm-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #dm-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #dm-solutions .result-value { color: var(--bots-color); } #dm-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #dm-solutions .pricing-value { color: var(--bots-color); } #dm-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* DM Section 03 - Features (purple/neural) */ #dm-features .service-page-number { color: var(--neural-color); } #dm-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #dm-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #dm-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #dm-features .feature-list li { border-color: var(--neural-color); } #dm-features .feature-list li::before { color: var(--neural-color); } #dm-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #dm-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #dm-features .result-value { color: var(--neural-color); } #dm-features .step-number { background: var(--neural-color); } #dm-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #dm-features .pricing-value { color: var(--neural-color); } #dm-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* DM Section 04 - Tech (cyan/mobile) */ #dm-tech .service-page-number { color: var(--mobile-color); } #dm-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #dm-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #dm-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #dm-tech .feature-list li { border-color: var(--mobile-color); } #dm-tech .feature-list li::before { color: var(--mobile-color); } #dm-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #dm-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #dm-tech .result-value { color: var(--mobile-color); } #dm-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #dm-tech .pricing-value { color: var(--mobile-color); } #dm-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* DM Section 05 - Pricing (primary/accent) */ #dm-pricing .service-page-number { color: var(--primary); } #dm-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #dm-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #dm-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #dm-pricing .feature-list li { border-color: var(--primary); } #dm-pricing .feature-list li::before { color: var(--accent); } #dm-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #dm-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #dm-pricing .result-value { color: var(--accent); } #dm-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #dm-pricing .pricing-value { color: var(--primary); } #dm-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== SUMMARIZATION SECTION COLORS ==================== */ /* SUM Section 01 - Problems (red/warning) */ #sum-problems .service-page-number { color: var(--infra-color); } #sum-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #sum-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #sum-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #sum-problems .feature-list li { border-color: var(--infra-color); } #sum-problems .feature-list li::before { color: var(--infra-color); } #sum-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #sum-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #sum-problems .result-value { color: var(--infra-color); } #sum-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #sum-problems .pricing-value { color: var(--infra-color); } #sum-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* SUM Section 02 - Solutions (green) */ #sum-solutions .service-page-number { color: var(--bots-color); } #sum-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #sum-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #sum-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #sum-solutions .feature-list li { border-color: var(--bots-color); } #sum-solutions .feature-list li::before { color: var(--bots-color); } #sum-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #sum-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #sum-solutions .result-value { color: var(--bots-color); } #sum-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #sum-solutions .pricing-value { color: var(--bots-color); } #sum-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* SUM Section 03 - Features (purple/neural) */ #sum-features .service-page-number { color: var(--neural-color); } #sum-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #sum-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #sum-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #sum-features .feature-list li { border-color: var(--neural-color); } #sum-features .feature-list li::before { color: var(--neural-color); } #sum-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #sum-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #sum-features .result-value { color: var(--neural-color); } #sum-features .step-number { background: var(--neural-color); } #sum-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #sum-features .pricing-value { color: var(--neural-color); } #sum-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* SUM Section 04 - Tech (cyan/mobile) */ #sum-tech .service-page-number { color: var(--mobile-color); } #sum-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #sum-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #sum-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #sum-tech .feature-list li { border-color: var(--mobile-color); } #sum-tech .feature-list li::before { color: var(--mobile-color); } #sum-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #sum-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #sum-tech .result-value { color: var(--mobile-color); } #sum-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #sum-tech .pricing-value { color: var(--mobile-color); } #sum-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* SUM Section 05 - Pricing (primary/accent) */ #sum-pricing .service-page-number { color: var(--primary); } #sum-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #sum-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #sum-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #sum-pricing .feature-list li { border-color: var(--primary); } #sum-pricing .feature-list li::before { color: var(--accent); } #sum-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #sum-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #sum-pricing .result-value { color: var(--accent); } #sum-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #sum-pricing .pricing-value { color: var(--primary); } #sum-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== PHP SERVER MONITOR SECTION COLORS ==================== */ /* PSM Section 01 - Problems (red/warning) */ #psm-problems .service-page-number { color: var(--infra-color); } #psm-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #psm-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #psm-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #psm-problems .feature-list li { border-color: var(--infra-color); } #psm-problems .feature-list li::before { color: var(--infra-color); } #psm-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #psm-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #psm-problems .result-value { color: var(--infra-color); } #psm-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #psm-problems .pricing-value { color: var(--infra-color); } #psm-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* PSM Section 02 - Solutions (green) */ #psm-solutions .service-page-number { color: var(--bots-color); } #psm-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #psm-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #psm-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #psm-solutions .feature-list li { border-color: var(--bots-color); } #psm-solutions .feature-list li::before { color: var(--bots-color); } #psm-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #psm-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #psm-solutions .result-value { color: var(--bots-color); } #psm-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #psm-solutions .pricing-value { color: var(--bots-color); } #psm-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* PSM Section 03 - Features (purple/neural) */ #psm-features .service-page-number { color: var(--neural-color); } #psm-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #psm-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #psm-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #psm-features .feature-list li { border-color: var(--neural-color); } #psm-features .feature-list li::before { color: var(--neural-color); } #psm-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #psm-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #psm-features .result-value { color: var(--neural-color); } #psm-features .step-number { background: var(--neural-color); } #psm-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #psm-features .pricing-value { color: var(--neural-color); } #psm-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* PSM Section 04 - Tech (cyan/mobile) */ #psm-tech .service-page-number { color: var(--mobile-color); } #psm-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #psm-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #psm-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #psm-tech .feature-list li { border-color: var(--mobile-color); } #psm-tech .feature-list li::before { color: var(--mobile-color); } #psm-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #psm-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #psm-tech .result-value { color: var(--mobile-color); } #psm-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #psm-tech .pricing-value { color: var(--mobile-color); } #psm-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* PSM Section 05 - Pricing (primary/accent) */ #psm-pricing .service-page-number { color: var(--primary); } #psm-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #psm-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #psm-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #psm-pricing .feature-list li { border-color: var(--primary); } #psm-pricing .feature-list li::before { color: var(--accent); } #psm-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #psm-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #psm-pricing .result-value { color: var(--accent); } #psm-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #psm-pricing .pricing-value { color: var(--primary); } #psm-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== MODERATOR PRO SECTION COLORS ==================== */ /* MOD Section 01 - Problems (red/warning) */ #mod-problems .service-page-number { color: var(--infra-color); } #mod-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #mod-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #mod-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #mod-problems .feature-list li { border-color: var(--infra-color); } #mod-problems .feature-list li::before { color: var(--infra-color); } #mod-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #mod-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #mod-problems .result-value { color: var(--infra-color); } #mod-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #mod-problems .pricing-value { color: var(--infra-color); } #mod-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* MOD Section 02 - Solutions (green) */ #mod-solutions .service-page-number { color: var(--bots-color); } #mod-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #mod-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #mod-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #mod-solutions .feature-list li { border-color: var(--bots-color); } #mod-solutions .feature-list li::before { color: var(--bots-color); } #mod-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #mod-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #mod-solutions .result-value { color: var(--bots-color); } #mod-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #mod-solutions .pricing-value { color: var(--bots-color); } #mod-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* MOD Section 03 - Features (purple/neural) */ #mod-features .service-page-number { color: var(--neural-color); } #mod-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #mod-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #mod-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #mod-features .feature-list li { border-color: var(--neural-color); } #mod-features .feature-list li::before { color: var(--neural-color); } #mod-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #mod-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #mod-features .result-value { color: var(--neural-color); } #mod-features .step-number { background: var(--neural-color); } #mod-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #mod-features .pricing-value { color: var(--neural-color); } #mod-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* MOD Section 04 - Tech (cyan/mobile) */ #mod-tech .service-page-number { color: var(--mobile-color); } #mod-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #mod-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #mod-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #mod-tech .feature-list li { border-color: var(--mobile-color); } #mod-tech .feature-list li::before { color: var(--mobile-color); } #mod-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #mod-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #mod-tech .result-value { color: var(--mobile-color); } #mod-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #mod-tech .pricing-value { color: var(--mobile-color); } #mod-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* MOD Section 05 - Pricing (primary/accent) */ #mod-pricing .service-page-number { color: var(--primary); } #mod-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #mod-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #mod-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #mod-pricing .feature-list li { border-color: var(--primary); } #mod-pricing .feature-list li::before { color: var(--accent); } #mod-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #mod-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #mod-pricing .result-value { color: var(--accent); } #mod-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #mod-pricing .pricing-value { color: var(--primary); } #mod-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== CLOCKER SECTION COLORS ==================== */ /* CLK Section 01 - Problems (red/warning) */ #clk-problems .service-page-number { color: var(--infra-color); } #clk-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #clk-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #clk-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #clk-problems .feature-list li { border-color: var(--infra-color); } #clk-problems .feature-list li::before { color: var(--infra-color); } #clk-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #clk-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #clk-problems .result-value { color: var(--infra-color); } #clk-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #clk-problems .pricing-value { color: var(--infra-color); } #clk-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* CLK Section 02 - Solutions (green) */ #clk-solutions .service-page-number { color: var(--bots-color); } #clk-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #clk-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #clk-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #clk-solutions .feature-list li { border-color: var(--bots-color); } #clk-solutions .feature-list li::before { color: var(--bots-color); } #clk-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #clk-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #clk-solutions .result-value { color: var(--bots-color); } #clk-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #clk-solutions .pricing-value { color: var(--bots-color); } #clk-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* CLK Section 03 - Features (purple/neural) */ #clk-features .service-page-number { color: var(--neural-color); } #clk-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #clk-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #clk-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #clk-features .feature-list li { border-color: var(--neural-color); } #clk-features .feature-list li::before { color: var(--neural-color); } #clk-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #clk-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #clk-features .result-value { color: var(--neural-color); } #clk-features .step-number { background: var(--neural-color); } #clk-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #clk-features .pricing-value { color: var(--neural-color); } #clk-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* CLK Section 04 - Tech (cyan/mobile) */ #clk-tech .service-page-number { color: var(--mobile-color); } #clk-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #clk-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #clk-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #clk-tech .feature-list li { border-color: var(--mobile-color); } #clk-tech .feature-list li::before { color: var(--mobile-color); } #clk-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #clk-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #clk-tech .result-value { color: var(--mobile-color); } #clk-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #clk-tech .pricing-value { color: var(--mobile-color); } #clk-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* CLK Section 05 - Pricing (primary/accent) */ #clk-pricing .service-page-number { color: var(--primary); } #clk-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #clk-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #clk-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #clk-pricing .feature-list li { border-color: var(--primary); } #clk-pricing .feature-list li::before { color: var(--accent); } #clk-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #clk-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #clk-pricing .result-value { color: var(--accent); } #clk-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #clk-pricing .pricing-value { color: var(--primary); } #clk-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== TELEGRAM MONITOR SECTION COLORS ==================== */ /* TM Section 01 - Problems (red/warning) */ #tm-problems .service-page-number { color: var(--infra-color); } #tm-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #tm-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #tm-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #tm-problems .feature-list li { border-color: var(--infra-color); } #tm-problems .feature-list li::before { color: var(--infra-color); } #tm-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #tm-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #tm-problems .result-value { color: var(--infra-color); } #tm-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #tm-problems .pricing-value { color: var(--infra-color); } #tm-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* TM Section 02 - Solutions (green) */ #tm-solutions .service-page-number { color: var(--bots-color); } #tm-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #tm-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #tm-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #tm-solutions .feature-list li { border-color: var(--bots-color); } #tm-solutions .feature-list li::before { color: var(--bots-color); } #tm-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #tm-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #tm-solutions .result-value { color: var(--bots-color); } #tm-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #tm-solutions .pricing-value { color: var(--bots-color); } #tm-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* TM Section 03 - Features (purple/neural) */ #tm-features .service-page-number { color: var(--neural-color); } #tm-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #tm-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #tm-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #tm-features .feature-list li { border-color: var(--neural-color); } #tm-features .feature-list li::before { color: var(--neural-color); } #tm-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #tm-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #tm-features .result-value { color: var(--neural-color); } #tm-features .step-number { background: var(--neural-color); } #tm-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #tm-features .pricing-value { color: var(--neural-color); } #tm-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* TM Section 04 - Tech (cyan/mobile) */ #tm-tech .service-page-number { color: var(--mobile-color); } #tm-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #tm-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #tm-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #tm-tech .feature-list li { border-color: var(--mobile-color); } #tm-tech .feature-list li::before { color: var(--mobile-color); } #tm-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #tm-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #tm-tech .result-value { color: var(--mobile-color); } #tm-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #tm-tech .pricing-value { color: var(--mobile-color); } #tm-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* TM Section 05 - Pricing (primary/accent) */ #tm-pricing .service-page-number { color: var(--primary); } #tm-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #tm-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #tm-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #tm-pricing .feature-list li { border-color: var(--primary); } #tm-pricing .feature-list li::before { color: var(--accent); } #tm-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #tm-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #tm-pricing .result-value { color: var(--accent); } #tm-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #tm-pricing .pricing-value { color: var(--primary); } #tm-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== MAXWELL TRADING SECTION COLORS ==================== */ /* MW Section 01 - Problems (red/warning) */ #mw-problems .service-page-number { color: var(--infra-color); } #mw-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #mw-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #mw-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #mw-problems .feature-list li { border-color: var(--infra-color); } #mw-problems .feature-list li::before { color: var(--infra-color); } #mw-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #mw-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #mw-problems .result-value { color: var(--infra-color); } #mw-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #mw-problems .pricing-value { color: var(--infra-color); } #mw-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* MW Section 02 - Solutions (green) */ #mw-solutions .service-page-number { color: var(--bots-color); } #mw-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #mw-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #mw-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #mw-solutions .feature-list li { border-color: var(--bots-color); } #mw-solutions .feature-list li::before { color: var(--bots-color); } #mw-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #mw-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #mw-solutions .result-value { color: var(--bots-color); } #mw-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #mw-solutions .pricing-value { color: var(--bots-color); } #mw-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* MW Section 03 - Features (purple/neural) */ #mw-features .service-page-number { color: var(--neural-color); } #mw-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #mw-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #mw-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #mw-features .feature-list li { border-color: var(--neural-color); } #mw-features .feature-list li::before { color: var(--neural-color); } #mw-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #mw-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #mw-features .result-value { color: var(--neural-color); } #mw-features .step-number { background: var(--neural-color); } #mw-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #mw-features .pricing-value { color: var(--neural-color); } #mw-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* MW Section 04 - Tech (cyan/mobile) */ #mw-tech .service-page-number { color: var(--mobile-color); } #mw-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #mw-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #mw-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #mw-tech .feature-list li { border-color: var(--mobile-color); } #mw-tech .feature-list li::before { color: var(--mobile-color); } #mw-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #mw-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #mw-tech .result-value { color: var(--mobile-color); } #mw-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #mw-tech .pricing-value { color: var(--mobile-color); } #mw-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* MW Section 05 - Pricing (primary/accent) */ #mw-pricing .service-page-number { color: var(--primary); } #mw-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #mw-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #mw-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #mw-pricing .feature-list li { border-color: var(--primary); } #mw-pricing .feature-list li::before { color: var(--accent); } #mw-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #mw-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #mw-pricing .result-value { color: var(--accent); } #mw-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #mw-pricing .pricing-value { color: var(--primary); } #mw-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== SPEECH2TEXT SECTION COLORS ==================== */ /* S2T Section 01 - Problems (red/warning) */ #s2t-problems .service-page-number { color: var(--infra-color); } #s2t-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #s2t-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #s2t-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #s2t-problems .feature-list li { border-color: var(--infra-color); } #s2t-problems .feature-list li::before { color: var(--infra-color); } #s2t-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #s2t-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #s2t-problems .result-value { color: var(--infra-color); } #s2t-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #s2t-problems .pricing-value { color: var(--infra-color); } #s2t-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* S2T Section 02 - Solutions (green) */ #s2t-solutions .service-page-number { color: var(--bots-color); } #s2t-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #s2t-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #s2t-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #s2t-solutions .feature-list li { border-color: var(--bots-color); } #s2t-solutions .feature-list li::before { color: var(--bots-color); } #s2t-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #s2t-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #s2t-solutions .result-value { color: var(--bots-color); } #s2t-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #s2t-solutions .pricing-value { color: var(--bots-color); } #s2t-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* S2T Section 03 - Features (purple/neural) */ #s2t-features .service-page-number { color: var(--neural-color); } #s2t-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #s2t-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #s2t-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #s2t-features .feature-list li { border-color: var(--neural-color); } #s2t-features .feature-list li::before { color: var(--neural-color); } #s2t-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #s2t-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #s2t-features .result-value { color: var(--neural-color); } #s2t-features .step-number { background: var(--neural-color); } #s2t-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #s2t-features .pricing-value { color: var(--neural-color); } #s2t-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* S2T Section 04 - Tech (cyan/mobile) */ #s2t-tech .service-page-number { color: var(--mobile-color); } #s2t-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #s2t-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #s2t-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #s2t-tech .feature-list li { border-color: var(--mobile-color); } #s2t-tech .feature-list li::before { color: var(--mobile-color); } #s2t-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #s2t-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #s2t-tech .result-value { color: var(--mobile-color); } #s2t-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #s2t-tech .pricing-value { color: var(--mobile-color); } #s2t-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* S2T Section 05 - Pricing (primary/accent) */ #s2t-pricing .service-page-number { color: var(--primary); } #s2t-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #s2t-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #s2t-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #s2t-pricing .feature-list li { border-color: var(--primary); } #s2t-pricing .feature-list li::before { color: var(--accent); } #s2t-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #s2t-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #s2t-pricing .result-value { color: var(--accent); } #s2t-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #s2t-pricing .pricing-value { color: var(--primary); } #s2t-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== TEXTBOOK GENERATOR SECTION COLORS ==================== */ /* TBG Section 01 - Problems (red/warning) */ #tbg-problems .service-page-number { color: var(--infra-color); } #tbg-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #tbg-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #tbg-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #tbg-problems .feature-list li { border-color: var(--infra-color); } #tbg-problems .feature-list li::before { color: var(--infra-color); } #tbg-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #tbg-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #tbg-problems .result-value { color: var(--infra-color); } #tbg-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #tbg-problems .pricing-value { color: var(--infra-color); } #tbg-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* TBG Section 02 - Solutions (green) */ #tbg-solutions .service-page-number { color: var(--bots-color); } #tbg-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #tbg-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #tbg-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #tbg-solutions .feature-list li { border-color: var(--bots-color); } #tbg-solutions .feature-list li::before { color: var(--bots-color); } #tbg-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #tbg-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #tbg-solutions .result-value { color: var(--bots-color); } #tbg-solutions .step-number { background: var(--bots-color); } #tbg-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #tbg-solutions .pricing-value { color: var(--bots-color); } #tbg-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* TBG Section 03 - Features (purple/neural) */ #tbg-features .service-page-number { color: var(--neural-color); } #tbg-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #tbg-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #tbg-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #tbg-features .feature-list li { border-color: var(--neural-color); } #tbg-features .feature-list li::before { color: var(--neural-color); } #tbg-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #tbg-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #tbg-features .result-value { color: var(--neural-color); } #tbg-features .step-number { background: var(--neural-color); } #tbg-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #tbg-features .pricing-value { color: var(--neural-color); } #tbg-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* TBG Section 04 - Tech (cyan/mobile) */ #tbg-tech .service-page-number { color: var(--mobile-color); } #tbg-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #tbg-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #tbg-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #tbg-tech .feature-list li { border-color: var(--mobile-color); } #tbg-tech .feature-list li::before { color: var(--mobile-color); } #tbg-tech .tech-badge { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #tbg-tech .tech-badge:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #tbg-tech .result-value { color: var(--mobile-color); } #tbg-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #tbg-tech .pricing-value { color: var(--mobile-color); } #tbg-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* TBG Section 05 - Pricing (primary/accent) */ #tbg-pricing .service-page-number { color: var(--primary); } #tbg-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #tbg-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #tbg-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #tbg-pricing .feature-list li { border-color: var(--primary); } #tbg-pricing .feature-list li::before { color: var(--accent); } #tbg-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #tbg-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #tbg-pricing .result-value { color: var(--accent); } #tbg-pricing .step-number { background: var(--primary); } #tbg-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #tbg-pricing .pricing-value { color: var(--primary); } #tbg-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== LOGEXPRESS SECTION COLORS ==================== */ /* LOG Section 01 - Problems (red/warning) */ #log-problems .service-page-number { color: var(--infra-color); } #log-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #log-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #log-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #log-problems .feature-list li { border-color: var(--infra-color); } #log-problems .feature-list li::before { color: var(--infra-color); } #log-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #log-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #log-problems .result-value { color: var(--infra-color); } #log-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #log-problems .pricing-value { color: var(--infra-color); } #log-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* LOG Section 02 - Solutions (green) */ #log-solutions .service-page-number { color: var(--bots-color); } #log-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #log-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #log-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #log-solutions .feature-list li { border-color: var(--bots-color); } #log-solutions .feature-list li::before { color: var(--bots-color); } #log-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #log-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #log-solutions .result-value { color: var(--bots-color); } #log-solutions .step-number { background: var(--bots-color); } #log-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #log-solutions .pricing-value { color: var(--bots-color); } #log-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* LOG Section 03 - Features (purple/neural) */ #log-features .service-page-number { color: var(--neural-color); } #log-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #log-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #log-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #log-features .feature-list li { border-color: var(--neural-color); } #log-features .feature-list li::before { color: var(--neural-color); } #log-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #log-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #log-features .result-value { color: var(--neural-color); } #log-features .step-number { background: var(--neural-color); } #log-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #log-features .pricing-value { color: var(--neural-color); } #log-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* LOG Section 04 - Tech (cyan/mobile) */ #log-tech .service-page-number { color: var(--mobile-color); } #log-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #log-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #log-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #log-tech .feature-list li { border-color: var(--mobile-color); } #log-tech .feature-list li::before { color: var(--mobile-color); } #log-tech .tech-badge { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #log-tech .tech-badge:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #log-tech .result-value { color: var(--mobile-color); } #log-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #log-tech .pricing-value { color: var(--mobile-color); } #log-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* LOG Section 05 - Pricing (primary/accent) */ #log-pricing .service-page-number { color: var(--primary); } #log-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #log-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #log-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #log-pricing .feature-list li { border-color: var(--primary); } #log-pricing .feature-list li::before { color: var(--accent); } #log-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #log-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #log-pricing .result-value { color: var(--accent); } #log-pricing .step-number { background: var(--primary); } #log-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #log-pricing .pricing-value { color: var(--primary); } #log-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== IMAGEGENERATOR SECTION COLORS ==================== */ /* IMG Section 01 - Problems (red/warning) */ #img-problems .service-page-number { color: var(--infra-color); } #img-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #img-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #img-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #img-problems .feature-list li { border-color: var(--infra-color); } #img-problems .feature-list li::before { color: var(--infra-color); } #img-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #img-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #img-problems .result-value { color: var(--infra-color); } #img-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #img-problems .pricing-value { color: var(--infra-color); } #img-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* IMG Section 02 - Solutions (green) */ #img-solutions .service-page-number { color: var(--bots-color); } #img-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #img-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #img-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #img-solutions .feature-list li { border-color: var(--bots-color); } #img-solutions .feature-list li::before { color: var(--bots-color); } #img-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #img-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #img-solutions .result-value { color: var(--bots-color); } #img-solutions .step-number { background: var(--bots-color); } #img-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #img-solutions .pricing-value { color: var(--bots-color); } #img-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* IMG Section 03 - Features (purple/neural) */ #img-features .service-page-number { color: var(--neural-color); } #img-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #img-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #img-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #img-features .feature-list li { border-color: var(--neural-color); } #img-features .feature-list li::before { color: var(--neural-color); } #img-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #img-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #img-features .result-value { color: var(--neural-color); } #img-features .step-number { background: var(--neural-color); } #img-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #img-features .pricing-value { color: var(--neural-color); } #img-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* IMG Section 04 - Tech (cyan/mobile) */ #img-tech .service-page-number { color: var(--mobile-color); } #img-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #img-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #img-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #img-tech .feature-list li { border-color: var(--mobile-color); } #img-tech .feature-list li::before { color: var(--mobile-color); } #img-tech .tech-badge { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #img-tech .tech-badge:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #img-tech .result-value { color: var(--mobile-color); } #img-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #img-tech .pricing-value { color: var(--mobile-color); } #img-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* IMG Section 05 - Pricing (primary/accent) */ #img-pricing .service-page-number { color: var(--primary); } #img-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #img-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #img-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #img-pricing .feature-list li { border-color: var(--primary); } #img-pricing .feature-list li::before { color: var(--accent); } #img-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #img-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #img-pricing .result-value { color: var(--accent); } #img-pricing .step-number { background: var(--primary); } #img-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #img-pricing .pricing-value { color: var(--primary); } #img-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== VISIONANALYZER SECTION COLORS ==================== */ /* VA Section 01 - Problems (red/warning) */ #va-problems .service-page-number { color: var(--infra-color); } #va-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #va-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #va-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #va-problems .feature-list li { border-color: var(--infra-color); } #va-problems .feature-list li::before { color: var(--infra-color); } #va-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #va-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #va-problems .result-value { color: var(--infra-color); } #va-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #va-problems .pricing-value { color: var(--infra-color); } #va-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* VA Section 02 - Solutions (green) */ #va-solutions .service-page-number { color: var(--bots-color); } #va-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #va-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #va-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #va-solutions .feature-list li { border-color: var(--bots-color); } #va-solutions .feature-list li::before { color: var(--bots-color); } #va-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #va-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #va-solutions .result-value { color: var(--bots-color); } #va-solutions .step-number { background: var(--bots-color); } #va-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #va-solutions .pricing-value { color: var(--bots-color); } #va-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* VA Section 03 - Features (purple/neural) */ #va-features .service-page-number { color: var(--neural-color); } #va-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #va-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #va-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #va-features .feature-list li { border-color: var(--neural-color); } #va-features .feature-list li::before { color: var(--neural-color); } #va-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #va-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #va-features .result-value { color: var(--neural-color); } #va-features .step-number { background: var(--neural-color); } #va-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #va-features .pricing-value { color: var(--neural-color); } #va-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* VA Section 04 - Tech (cyan/mobile) */ #va-tech .service-page-number { color: var(--mobile-color); } #va-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #va-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #va-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #va-tech .feature-list li { border-color: var(--mobile-color); } #va-tech .feature-list li::before { color: var(--mobile-color); } #va-tech .tech-badge { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #va-tech .tech-badge:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #va-tech .result-value { color: var(--mobile-color); } #va-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #va-tech .pricing-value { color: var(--mobile-color); } #va-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* VA Section 05 - Pricing (primary/accent) */ #va-pricing .service-page-number { color: var(--primary); } #va-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #va-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #va-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #va-pricing .feature-list li { border-color: var(--primary); } #va-pricing .feature-list li::before { color: var(--accent); } #va-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #va-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #va-pricing .result-value { color: var(--accent); } #va-pricing .step-number { background: var(--primary); } #va-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #va-pricing .pricing-value { color: var(--primary); } #va-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== CLAIMBOT SECTION COLORS ==================== */ /* CLM Section 01 - Problems (red/warning) */ #clm-problems .service-page-number { color: var(--infra-color); } #clm-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #clm-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #clm-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #clm-problems .feature-list li { border-color: var(--infra-color); } #clm-problems .feature-list li::before { color: var(--infra-color); } #clm-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #clm-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #clm-problems .result-value { color: var(--infra-color); } #clm-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #clm-problems .pricing-value { color: var(--infra-color); } #clm-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* CLM Section 02 - Solutions (green) */ #clm-solutions .service-page-number { color: var(--bots-color); } #clm-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #clm-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #clm-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #clm-solutions .feature-list li { border-color: var(--bots-color); } #clm-solutions .feature-list li::before { color: var(--bots-color); } #clm-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #clm-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #clm-solutions .result-value { color: var(--bots-color); } #clm-solutions .step-number { background: var(--bots-color); } #clm-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #clm-solutions .pricing-value { color: var(--bots-color); } #clm-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* CLM Section 03 - Features (purple/neural) */ #clm-features .service-page-number { color: var(--neural-color); } #clm-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(139, 92, 246, 0.5); } #clm-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #clm-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #clm-features .feature-list li { border-color: var(--neural-color); } #clm-features .feature-list li::before { color: var(--neural-color); } #clm-features .use-case { background: rgba(139, 92, 246, 0.15); color: var(--neural-color); border: 1px solid rgba(139, 92, 246, 0.3); } #clm-features .use-case:hover { background: rgba(139, 92, 246, 0.3); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } #clm-features .result-value { color: var(--neural-color); } #clm-features .step-number { background: var(--neural-color); } #clm-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(139, 92, 246, 0.2); } #clm-features .pricing-value { color: var(--neural-color); } #clm-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #a78bfa); } /* CLM Section 04 - Tech (cyan/mobile) */ #clm-tech .service-page-number { color: var(--mobile-color); } #clm-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #clm-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #clm-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #clm-tech .feature-list li { border-color: var(--mobile-color); } #clm-tech .feature-list li::before { color: var(--mobile-color); } #clm-tech .tech-badge { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #clm-tech .tech-badge:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #clm-tech .result-value { color: var(--mobile-color); } #clm-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #clm-tech .pricing-value { color: var(--mobile-color); } #clm-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* CLM Section 05 - Pricing (primary/accent) */ #clm-pricing .service-page-number { color: var(--primary); } #clm-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #clm-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #clm-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #clm-pricing .feature-list li { border-color: var(--primary); } #clm-pricing .feature-list li::before { color: var(--accent); } #clm-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #clm-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #clm-pricing .result-value { color: var(--accent); } #clm-pricing .step-number { background: var(--primary); } #clm-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #clm-pricing .pricing-value { color: var(--primary); } #clm-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* BG Section 01 - Problems (red/warning) */ #bg-problems .service-page-number { color: var(--infra-color); } #bg-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #bg-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #bg-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #bg-problems .feature-list li { border-color: var(--infra-color); } #bg-problems .feature-list li::before { color: var(--infra-color); } #bg-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #bg-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #bg-problems .result-value { color: var(--infra-color); } #bg-problems .step-number { background: var(--infra-color); } #bg-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #bg-problems .pricing-value { color: var(--infra-color); } #bg-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* BG Section 02 - Solutions (green/success) */ #bg-solutions .service-page-number { color: var(--bots-color); } #bg-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #bg-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #bg-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #bg-solutions .feature-list li { border-color: var(--bots-color); } #bg-solutions .feature-list li::before { color: var(--bots-color); } #bg-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #bg-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #bg-solutions .result-value { color: var(--bots-color); } #bg-solutions .step-number { background: var(--bots-color); } #bg-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #bg-solutions .pricing-value { color: var(--bots-color); } #bg-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* BG Section 03 - Features (purple/neural) */ #bg-features .service-page-number { color: var(--neural-color); } #bg-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #bg-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #bg-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #bg-features .feature-list li { border-color: var(--neural-color); } #bg-features .feature-list li::before { color: var(--neural-color); } #bg-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #bg-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #bg-features .result-value { color: var(--neural-color); } #bg-features .step-number { background: var(--neural-color); } #bg-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #bg-features .pricing-value { color: var(--neural-color); } #bg-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* BG Section 04 - Tech (cyan/mobile) */ #bg-tech .service-page-number { color: var(--mobile-color); } #bg-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #bg-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #bg-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #bg-tech .feature-list li { border-color: var(--mobile-color); } #bg-tech .feature-list li::before { color: var(--mobile-color); } #bg-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #bg-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #bg-tech .result-value { color: var(--mobile-color); } #bg-tech .step-number { background: var(--mobile-color); } #bg-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #bg-tech .pricing-value { color: var(--mobile-color); } #bg-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* BG Section 05 - Pricing (primary/accent) */ #bg-pricing .service-page-number { color: var(--primary); } #bg-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #bg-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #bg-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #bg-pricing .feature-list li { border-color: var(--primary); } #bg-pricing .feature-list li::before { color: var(--accent); } #bg-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #bg-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #bg-pricing .result-value { color: var(--accent); } #bg-pricing .step-number { background: var(--primary); } #bg-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #bg-pricing .pricing-value { color: var(--primary); } #bg-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* DZ Section 01 - Problems (red/warning) */ #dz-problems .service-page-number { color: var(--infra-color); } #dz-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #dz-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #dz-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #dz-problems .feature-list li { border-color: var(--infra-color); } #dz-problems .feature-list li::before { color: var(--infra-color); } #dz-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #dz-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #dz-problems .result-value { color: var(--infra-color); } #dz-problems .step-number { background: var(--infra-color); } #dz-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #dz-problems .pricing-value { color: var(--infra-color); } #dz-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* DZ Section 02 - Solutions (green/success) */ #dz-solutions .service-page-number { color: var(--bots-color); } #dz-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #dz-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #dz-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #dz-solutions .feature-list li { border-color: var(--bots-color); } #dz-solutions .feature-list li::before { color: var(--bots-color); } #dz-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #dz-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #dz-solutions .result-value { color: var(--bots-color); } #dz-solutions .step-number { background: var(--bots-color); } #dz-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #dz-solutions .pricing-value { color: var(--bots-color); } #dz-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* DZ Section 03 - Features (purple/neural) */ #dz-features .service-page-number { color: var(--neural-color); } #dz-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #dz-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #dz-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #dz-features .feature-list li { border-color: var(--neural-color); } #dz-features .feature-list li::before { color: var(--neural-color); } #dz-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #dz-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #dz-features .result-value { color: var(--neural-color); } #dz-features .step-number { background: var(--neural-color); } #dz-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #dz-features .pricing-value { color: var(--neural-color); } #dz-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* DZ Section 04 - Tech (cyan/mobile) */ #dz-tech .service-page-number { color: var(--mobile-color); } #dz-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #dz-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #dz-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #dz-tech .feature-list li { border-color: var(--mobile-color); } #dz-tech .feature-list li::before { color: var(--mobile-color); } #dz-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #dz-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #dz-tech .result-value { color: var(--mobile-color); } #dz-tech .step-number { background: var(--mobile-color); } #dz-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #dz-tech .pricing-value { color: var(--mobile-color); } #dz-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* DZ Section 05 - Pricing (primary/accent) */ #dz-pricing .service-page-number { color: var(--primary); } #dz-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #dz-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #dz-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #dz-pricing .feature-list li { border-color: var(--primary); } #dz-pricing .feature-list li::before { color: var(--accent); } #dz-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #dz-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #dz-pricing .result-value { color: var(--accent); } #dz-pricing .step-number { background: var(--primary); } #dz-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #dz-pricing .pricing-value { color: var(--primary); } #dz-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* LLM Section 01 - Problems (red/warning) */ #llm-problems .service-page-number { color: var(--infra-color); } #llm-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #llm-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #llm-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #llm-problems .feature-list li { border-color: var(--infra-color); } #llm-problems .feature-list li::before { color: var(--infra-color); } #llm-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #llm-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #llm-problems .result-value { color: var(--infra-color); } #llm-problems .step-number { background: var(--infra-color); } #llm-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #llm-problems .pricing-value { color: var(--infra-color); } #llm-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* LLM Section 02 - Solutions (green/success) */ #llm-solutions .service-page-number { color: var(--bots-color); } #llm-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #llm-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #llm-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #llm-solutions .feature-list li { border-color: var(--bots-color); } #llm-solutions .feature-list li::before { color: var(--bots-color); } #llm-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #llm-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #llm-solutions .result-value { color: var(--bots-color); } #llm-solutions .step-number { background: var(--bots-color); } #llm-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #llm-solutions .pricing-value { color: var(--bots-color); } #llm-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* LLM Section 03 - Features (purple/neural) */ #llm-features .service-page-number { color: var(--neural-color); } #llm-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #llm-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #llm-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #llm-features .feature-list li { border-color: var(--neural-color); } #llm-features .feature-list li::before { color: var(--neural-color); } #llm-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #llm-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #llm-features .result-value { color: var(--neural-color); } #llm-features .step-number { background: var(--neural-color); } #llm-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #llm-features .pricing-value { color: var(--neural-color); } #llm-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* LLM Section 04 - Tech (cyan/mobile) */ #llm-tech .service-page-number { color: var(--mobile-color); } #llm-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #llm-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #llm-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #llm-tech .feature-list li { border-color: var(--mobile-color); } #llm-tech .feature-list li::before { color: var(--mobile-color); } #llm-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #llm-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #llm-tech .result-value { color: var(--mobile-color); } #llm-tech .step-number { background: var(--mobile-color); } #llm-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #llm-tech .pricing-value { color: var(--mobile-color); } #llm-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* LLM Section 05 - Pricing (primary/accent) */ #llm-pricing .service-page-number { color: var(--primary); } #llm-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #llm-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #llm-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #llm-pricing .feature-list li { border-color: var(--primary); } #llm-pricing .feature-list li::before { color: var(--accent); } #llm-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #llm-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #llm-pricing .result-value { color: var(--accent); } #llm-pricing .step-number { background: var(--primary); } #llm-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #llm-pricing .pricing-value { color: var(--primary); } #llm-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* MB Section 01 - Problems (red/warning) */ #mb-problems .service-page-number { color: var(--infra-color); } #mb-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #mb-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #mb-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #mb-problems .feature-list li { border-color: var(--infra-color); } #mb-problems .feature-list li::before { color: var(--infra-color); } #mb-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #mb-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #mb-problems .result-value { color: var(--infra-color); } #mb-problems .step-number { background: var(--infra-color); } #mb-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #mb-problems .pricing-value { color: var(--infra-color); } #mb-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* MB Section 02 - Solutions (green/success) */ #mb-solutions .service-page-number { color: var(--bots-color); } #mb-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #mb-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #mb-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #mb-solutions .feature-list li { border-color: var(--bots-color); } #mb-solutions .feature-list li::before { color: var(--bots-color); } #mb-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #mb-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #mb-solutions .result-value { color: var(--bots-color); } #mb-solutions .step-number { background: var(--bots-color); } #mb-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #mb-solutions .pricing-value { color: var(--bots-color); } #mb-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* MB Section 03 - Features (purple/neural) */ #mb-features .service-page-number { color: var(--neural-color); } #mb-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #mb-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #mb-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #mb-features .feature-list li { border-color: var(--neural-color); } #mb-features .feature-list li::before { color: var(--neural-color); } #mb-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #mb-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #mb-features .result-value { color: var(--neural-color); } #mb-features .step-number { background: var(--neural-color); } #mb-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #mb-features .pricing-value { color: var(--neural-color); } #mb-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* MB Section 04 - Tech (cyan/mobile) */ #mb-tech .service-page-number { color: var(--mobile-color); } #mb-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #mb-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #mb-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #mb-tech .feature-list li { border-color: var(--mobile-color); } #mb-tech .feature-list li::before { color: var(--mobile-color); } #mb-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #mb-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #mb-tech .result-value { color: var(--mobile-color); } #mb-tech .step-number { background: var(--mobile-color); } #mb-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #mb-tech .pricing-value { color: var(--mobile-color); } #mb-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* MB Section 05 - Pricing (primary/accent) */ #mb-pricing .service-page-number { color: var(--primary); } #mb-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #mb-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #mb-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #mb-pricing .feature-list li { border-color: var(--primary); } #mb-pricing .feature-list li::before { color: var(--accent); } #mb-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #mb-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #mb-pricing .result-value { color: var(--accent); } #mb-pricing .step-number { background: var(--primary); } #mb-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #mb-pricing .pricing-value { color: var(--primary); } #mb-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== VPS SECTION COLORS ==================== */ /* VPS Section 01 - Problems (red/warning) */ #vps-problems .service-page-number { color: var(--infra-color); } #vps-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #vps-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #vps-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #vps-problems .feature-list li { border-color: var(--infra-color); } #vps-problems .feature-list li::before { color: var(--infra-color); } #vps-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #vps-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #vps-problems .result-value { color: var(--infra-color); } #vps-problems .step-number { background: var(--infra-color); } #vps-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #vps-problems .pricing-value { color: var(--infra-color); } #vps-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* VPS Section 02 - Solutions (green/success) */ #vps-solutions .service-page-number { color: var(--bots-color); } #vps-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #vps-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #vps-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #vps-solutions .feature-list li { border-color: var(--bots-color); } #vps-solutions .feature-list li::before { color: var(--bots-color); } #vps-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #vps-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #vps-solutions .result-value { color: var(--bots-color); } #vps-solutions .step-number { background: var(--bots-color); } #vps-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #vps-solutions .pricing-value { color: var(--bots-color); } #vps-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* VPS Section 03 - Features (purple/neural) */ #vps-features .service-page-number { color: var(--neural-color); } #vps-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #vps-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #vps-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #vps-features .feature-list li { border-color: var(--neural-color); } #vps-features .feature-list li::before { color: var(--neural-color); } #vps-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #vps-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #vps-features .result-value { color: var(--neural-color); } #vps-features .step-number { background: var(--neural-color); } #vps-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #vps-features .pricing-value { color: var(--neural-color); } #vps-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* VPS Section 04 - Tech (cyan/mobile) */ #vps-tech .service-page-number { color: var(--mobile-color); } #vps-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #vps-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #vps-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #vps-tech .feature-list li { border-color: var(--mobile-color); } #vps-tech .feature-list li::before { color: var(--mobile-color); } #vps-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #vps-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #vps-tech .result-value { color: var(--mobile-color); } #vps-tech .step-number { background: var(--mobile-color); } #vps-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #vps-tech .pricing-value { color: var(--mobile-color); } #vps-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* VPS Section 05 - Pricing (primary/accent) */ #vps-pricing .service-page-number { color: var(--primary); } #vps-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #vps-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #vps-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #vps-pricing .feature-list li { border-color: var(--primary); } #vps-pricing .feature-list li::before { color: var(--accent); } #vps-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #vps-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #vps-pricing .result-value { color: var(--accent); } #vps-pricing .step-number { background: var(--primary); } #vps-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #vps-pricing .pricing-value { color: var(--primary); } #vps-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== COLOCATION SECTION COLORS ==================== */ /* COLO Section 01 - Problems (red/warning) */ #colo-problems .service-page-number { color: var(--infra-color); } #colo-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #colo-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #colo-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #colo-problems .feature-list li { border-color: var(--infra-color); } #colo-problems .feature-list li::before { color: var(--infra-color); } #colo-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #colo-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #colo-problems .result-value { color: var(--infra-color); } #colo-problems .step-number { background: var(--infra-color); } #colo-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #colo-problems .pricing-value { color: var(--infra-color); } #colo-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* COLO Section 02 - Solutions (green/success) */ #colo-solutions .service-page-number { color: var(--bots-color); } #colo-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #colo-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #colo-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #colo-solutions .feature-list li { border-color: var(--bots-color); } #colo-solutions .feature-list li::before { color: var(--bots-color); } #colo-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #colo-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #colo-solutions .result-value { color: var(--bots-color); } #colo-solutions .step-number { background: var(--bots-color); } #colo-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #colo-solutions .pricing-value { color: var(--bots-color); } #colo-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* COLO Section 03 - Features (purple/neural) */ #colo-features .service-page-number { color: var(--neural-color); } #colo-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #colo-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #colo-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #colo-features .feature-list li { border-color: var(--neural-color); } #colo-features .feature-list li::before { color: var(--neural-color); } #colo-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #colo-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #colo-features .result-value { color: var(--neural-color); } #colo-features .step-number { background: var(--neural-color); } #colo-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #colo-features .pricing-value { color: var(--neural-color); } #colo-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* COLO Section 04 - Tech (cyan/mobile) */ #colo-tech .service-page-number { color: var(--mobile-color); } #colo-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #colo-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #colo-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #colo-tech .feature-list li { border-color: var(--mobile-color); } #colo-tech .feature-list li::before { color: var(--mobile-color); } #colo-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #colo-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #colo-tech .result-value { color: var(--mobile-color); } #colo-tech .step-number { background: var(--mobile-color); } #colo-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #colo-tech .pricing-value { color: var(--mobile-color); } #colo-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* COLO Section 05 - Pricing (primary/accent) */ #colo-pricing .service-page-number { color: var(--primary); } #colo-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #colo-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #colo-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #colo-pricing .feature-list li { border-color: var(--primary); } #colo-pricing .feature-list li::before { color: var(--accent); } #colo-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #colo-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #colo-pricing .result-value { color: var(--accent); } #colo-pricing .step-number { background: var(--primary); } #colo-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #colo-pricing .pricing-value { color: var(--primary); } #colo-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== GPU SECTION COLORS ==================== */ /* GPU Calculator Section (special) */ #gpu-calculator .service-page-number { color: var(--accent); font-size: 2rem; } #gpu-calculator .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #gpu-calculator .service-page-header::before { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); } /* GPU Section 01 - Problems (red/warning) */ #gpu-problems .service-page-number { color: var(--infra-color); } #gpu-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #gpu-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #gpu-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #gpu-problems .feature-list li { border-color: var(--infra-color); } #gpu-problems .feature-list li::before { color: var(--infra-color); } #gpu-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #gpu-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #gpu-problems .result-value { color: var(--infra-color); } #gpu-problems .step-number { background: var(--infra-color); } #gpu-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #gpu-problems .pricing-value { color: var(--infra-color); } #gpu-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* GPU Section 02 - Solutions (green/success) */ #gpu-solutions .service-page-number { color: var(--bots-color); } #gpu-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #gpu-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #gpu-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #gpu-solutions .feature-list li { border-color: var(--bots-color); } #gpu-solutions .feature-list li::before { color: var(--bots-color); } #gpu-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #gpu-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #gpu-solutions .result-value { color: var(--bots-color); } #gpu-solutions .step-number { background: var(--bots-color); } #gpu-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #gpu-solutions .pricing-value { color: var(--bots-color); } #gpu-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* GPU Section 03 - Features (purple/neural) */ #gpu-features .service-page-number { color: var(--neural-color); } #gpu-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #gpu-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #gpu-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #gpu-features .feature-list li { border-color: var(--neural-color); } #gpu-features .feature-list li::before { color: var(--neural-color); } #gpu-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #gpu-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #gpu-features .result-value { color: var(--neural-color); } #gpu-features .step-number { background: var(--neural-color); } #gpu-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #gpu-features .pricing-value { color: var(--neural-color); } #gpu-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* GPU Section 04 - Tech (cyan/mobile) */ #gpu-tech .service-page-number { color: var(--mobile-color); } #gpu-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #gpu-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #gpu-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #gpu-tech .feature-list li { border-color: var(--mobile-color); } #gpu-tech .feature-list li::before { color: var(--mobile-color); } #gpu-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #gpu-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #gpu-tech .result-value { color: var(--mobile-color); } #gpu-tech .step-number { background: var(--mobile-color); } #gpu-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #gpu-tech .pricing-value { color: var(--mobile-color); } #gpu-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* GPU Section 05 - Pricing (primary/accent) */ #gpu-pricing .service-page-number { color: var(--primary); } #gpu-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #gpu-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #gpu-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #gpu-pricing .feature-list li { border-color: var(--primary); } #gpu-pricing .feature-list li::before { color: var(--accent); } #gpu-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #gpu-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #gpu-pricing .result-value { color: var(--accent); } #gpu-pricing .step-number { background: var(--primary); } #gpu-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #gpu-pricing .pricing-value { color: var(--primary); } #gpu-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== DEVOPS SECTION COLORS ==================== */ /* DevOps Calculator Section (special) */ #devops-calculator .service-page-number { color: var(--accent); font-size: 2rem; } #devops-calculator .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #devops-calculator .service-page-header::before { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); } /* DevOps Section 01 - Problems (red/warning) */ #devops-problems .service-page-number { color: var(--infra-color); } #devops-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #devops-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #devops-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #devops-problems .feature-list li { border-color: var(--infra-color); } #devops-problems .feature-list li::before { color: var(--infra-color); } #devops-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #devops-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #devops-problems .result-value { color: var(--infra-color); } #devops-problems .step-number { background: var(--infra-color); } #devops-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #devops-problems .pricing-value { color: var(--infra-color); } #devops-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* DevOps Section 02 - Solutions (green/success) */ #devops-solutions .service-page-number { color: var(--bots-color); } #devops-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #devops-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #devops-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #devops-solutions .feature-list li { border-color: var(--bots-color); } #devops-solutions .feature-list li::before { color: var(--bots-color); } #devops-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #devops-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #devops-solutions .result-value { color: var(--bots-color); } #devops-solutions .step-number { background: var(--bots-color); } #devops-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #devops-solutions .pricing-value { color: var(--bots-color); } #devops-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* DevOps Section 03 - Features (purple/neural) */ #devops-features .service-page-number { color: var(--neural-color); } #devops-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #devops-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #devops-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #devops-features .feature-list li { border-color: var(--neural-color); } #devops-features .feature-list li::before { color: var(--neural-color); } #devops-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #devops-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #devops-features .result-value { color: var(--neural-color); } #devops-features .step-number { background: var(--neural-color); } #devops-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #devops-features .pricing-value { color: var(--neural-color); } #devops-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* DevOps Section 04 - Tech (cyan/mobile) */ #devops-tech .service-page-number { color: var(--mobile-color); } #devops-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #devops-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #devops-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #devops-tech .feature-list li { border-color: var(--mobile-color); } #devops-tech .feature-list li::before { color: var(--mobile-color); } #devops-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #devops-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #devops-tech .result-value { color: var(--mobile-color); } #devops-tech .step-number { background: var(--mobile-color); } #devops-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #devops-tech .pricing-value { color: var(--mobile-color); } #devops-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* DevOps Section 05 - Pricing (primary/accent) */ #devops-pricing .service-page-number { color: var(--primary); } #devops-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #devops-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #devops-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #devops-pricing .feature-list li { border-color: var(--primary); } #devops-pricing .feature-list li::before { color: var(--accent); } #devops-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #devops-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #devops-pricing .result-value { color: var(--accent); } #devops-pricing .step-number { background: var(--primary); } #devops-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #devops-pricing .pricing-value { color: var(--primary); } #devops-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== DATABASE SECTION COLORS ==================== */ /* Database Calculator Section (special) */ #db-calculator .service-page-number { color: var(--accent); font-size: 2rem; } #db-calculator .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #db-calculator .service-page-header::before { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); } /* Database Section 01 - Problems (red/warning) */ #db-problems .service-page-number { color: var(--infra-color); } #db-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #db-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #db-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #db-problems .feature-list li { border-color: var(--infra-color); } #db-problems .feature-list li::before { color: var(--infra-color); } #db-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #db-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #db-problems .result-value { color: var(--infra-color); } #db-problems .step-number { background: var(--infra-color); } #db-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #db-problems .pricing-value { color: var(--infra-color); } #db-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* Database Section 02 - Solutions (green/success) */ #db-solutions .service-page-number { color: var(--bots-color); } #db-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #db-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #db-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #db-solutions .feature-list li { border-color: var(--bots-color); } #db-solutions .feature-list li::before { color: var(--bots-color); } #db-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #db-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #db-solutions .result-value { color: var(--bots-color); } #db-solutions .step-number { background: var(--bots-color); } #db-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #db-solutions .pricing-value { color: var(--bots-color); } #db-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* Database Section 03 - Features (purple/neural) */ #db-features .service-page-number { color: var(--neural-color); } #db-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #db-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #db-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #db-features .feature-list li { border-color: var(--neural-color); } #db-features .feature-list li::before { color: var(--neural-color); } #db-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #db-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #db-features .result-value { color: var(--neural-color); } #db-features .step-number { background: var(--neural-color); } #db-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #db-features .pricing-value { color: var(--neural-color); } #db-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* Database Section 04 - Tech (cyan/mobile) */ #db-tech .service-page-number { color: var(--mobile-color); } #db-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #db-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #db-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #db-tech .feature-list li { border-color: var(--mobile-color); } #db-tech .feature-list li::before { color: var(--mobile-color); } #db-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #db-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #db-tech .result-value { color: var(--mobile-color); } #db-tech .step-number { background: var(--mobile-color); } #db-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #db-tech .pricing-value { color: var(--mobile-color); } #db-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* Database Section 05 - Pricing (primary/accent) */ #db-pricing .service-page-number { color: var(--primary); } #db-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #db-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #db-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #db-pricing .feature-list li { border-color: var(--primary); } #db-pricing .feature-list li::before { color: var(--accent); } #db-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #db-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #db-pricing .result-value { color: var(--accent); } #db-pricing .step-number { background: var(--primary); } #db-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #db-pricing .pricing-value { color: var(--primary); } #db-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== VPS SECTIONS ==================== */ /* VPS Calculator Section (special) */ #vps-calculator .service-page-number { color: var(--accent); font-size: 2rem; } #vps-calculator .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #vps-calculator .service-page-header::before { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); } /* VPS Section 01 - Problems (red) */ #vps-problems .service-page-number { color: var(--infra-color); } #vps-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #vps-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #vps-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #vps-problems .feature-list li { border-color: var(--infra-color); } #vps-problems .feature-list li::before { color: var(--infra-color); } #vps-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #vps-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #vps-problems .result-value { color: var(--infra-color); } #vps-problems .step-number { background: var(--infra-color); } #vps-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #vps-problems .pricing-value { color: var(--infra-color); } #vps-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* VPS Section 02 - Solutions (green) */ #vps-solutions .service-page-number { color: var(--bots-color); } #vps-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #vps-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #vps-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #vps-solutions .feature-list li { border-color: var(--bots-color); } #vps-solutions .feature-list li::before { color: var(--bots-color); } #vps-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #vps-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #vps-solutions .result-value { color: var(--bots-color); } #vps-solutions .step-number { background: var(--bots-color); } #vps-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #vps-solutions .pricing-value { color: var(--bots-color); } #vps-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* VPS Section 03 - Features (purple) */ #vps-features .service-page-number { color: var(--neural-color); } #vps-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #vps-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #vps-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #vps-features .feature-list li { border-color: var(--neural-color); } #vps-features .feature-list li::before { color: var(--neural-color); } #vps-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #vps-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #vps-features .result-value { color: var(--neural-color); } #vps-features .step-number { background: var(--neural-color); } #vps-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #vps-features .pricing-value { color: var(--neural-color); } #vps-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* VPS Section 04 - Tech (cyan) */ #vps-tech .service-page-number { color: var(--mobile-color); } #vps-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #vps-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #vps-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #vps-tech .feature-list li { border-color: var(--mobile-color); } #vps-tech .feature-list li::before { color: var(--mobile-color); } #vps-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #vps-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #vps-tech .result-value { color: var(--mobile-color); } #vps-tech .step-number { background: var(--mobile-color); } #vps-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #vps-tech .pricing-value { color: var(--mobile-color); } #vps-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* VPS Section 05 - Pricing (primary/accent) */ #vps-pricing .service-page-number { color: var(--primary); } #vps-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #vps-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #vps-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #vps-pricing .feature-list li { border-color: var(--primary); } #vps-pricing .feature-list li::before { color: var(--accent); } #vps-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #vps-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #vps-pricing .result-value { color: var(--accent); } #vps-pricing .step-number { background: var(--primary); } #vps-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #vps-pricing .pricing-value { color: var(--primary); } #vps-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== COLOCATION SECTIONS ==================== */ /* Colocation Calculator Section (special) */ #colo-calculator .service-page-number { color: var(--accent); font-size: 2rem; } #colo-calculator .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #colo-calculator .service-page-header::before { background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); } /* Colocation Section 01 - Problems (red) */ #colo-problems .service-page-number { color: var(--infra-color); } #colo-problems .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } #colo-problems .service-page-header::before { background: radial-gradient(ellipse at center, var(--infra-color) 0%, transparent 70%); } #colo-problems .service-main h3 { border-color: var(--infra-color); color: var(--infra-color); } #colo-problems .feature-list li { border-color: var(--infra-color); } #colo-problems .feature-list li::before { color: var(--infra-color); } #colo-problems .use-case { background: rgba(239, 68, 68, 0.15); color: var(--infra-color); border: 1px solid rgba(239, 68, 68, 0.3); } #colo-problems .use-case:hover { background: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.3); } #colo-problems .result-value { color: var(--infra-color); } #colo-problems .step-number { background: var(--infra-color); } #colo-problems .pricing-card.featured { border-color: var(--infra-color); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } #colo-problems .pricing-value { color: var(--infra-color); } #colo-problems .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--infra-color), #f87171); } /* Colocation Section 02 - Solutions (green) */ #colo-solutions .service-page-number { color: var(--bots-color); } #colo-solutions .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } #colo-solutions .service-page-header::before { background: radial-gradient(ellipse at center, var(--bots-color) 0%, transparent 70%); } #colo-solutions .service-main h3 { border-color: var(--bots-color); color: var(--bots-color); } #colo-solutions .feature-list li { border-color: var(--bots-color); } #colo-solutions .feature-list li::before { color: var(--bots-color); } #colo-solutions .use-case { background: rgba(16, 185, 129, 0.15); color: var(--bots-color); border: 1px solid rgba(16, 185, 129, 0.3); } #colo-solutions .use-case:hover { background: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.3); } #colo-solutions .result-value { color: var(--bots-color); } #colo-solutions .step-number { background: var(--bots-color); } #colo-solutions .pricing-card.featured { border-color: var(--bots-color); box-shadow: 0 0 40px rgba(16, 185, 129, 0.2); } #colo-solutions .pricing-value { color: var(--bots-color); } #colo-solutions .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--bots-color), #34d399); } /* Colocation Section 03 - Features (purple) */ #colo-features .service-page-number { color: var(--neural-color); } #colo-features .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } #colo-features .service-page-header::before { background: radial-gradient(ellipse at center, var(--neural-color) 0%, transparent 70%); } #colo-features .service-main h3 { border-color: var(--neural-color); color: var(--neural-color); } #colo-features .feature-list li { border-color: var(--neural-color); } #colo-features .feature-list li::before { color: var(--neural-color); } #colo-features .use-case { background: rgba(168, 85, 247, 0.15); color: var(--neural-color); border: 1px solid rgba(168, 85, 247, 0.3); } #colo-features .use-case:hover { background: rgba(168, 85, 247, 0.3); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); } #colo-features .result-value { color: var(--neural-color); } #colo-features .step-number { background: var(--neural-color); } #colo-features .pricing-card.featured { border-color: var(--neural-color); box-shadow: 0 0 40px rgba(168, 85, 247, 0.2); } #colo-features .pricing-value { color: var(--neural-color); } #colo-features .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--neural-color), #c084fc); } /* Colocation Section 04 - Tech (cyan) */ #colo-tech .service-page-number { color: var(--mobile-color); } #colo-tech .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); } #colo-tech .service-page-header::before { background: radial-gradient(ellipse at center, var(--mobile-color) 0%, transparent 70%); } #colo-tech .service-main h3 { border-color: var(--mobile-color); color: var(--mobile-color); } #colo-tech .feature-list li { border-color: var(--mobile-color); } #colo-tech .feature-list li::before { color: var(--mobile-color); } #colo-tech .use-case { background: rgba(6, 182, 212, 0.15); color: var(--mobile-color); border: 1px solid rgba(6, 182, 212, 0.3); } #colo-tech .use-case:hover { background: rgba(6, 182, 212, 0.3); box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); } #colo-tech .result-value { color: var(--mobile-color); } #colo-tech .step-number { background: var(--mobile-color); } #colo-tech .pricing-card.featured { border-color: var(--mobile-color); box-shadow: 0 0 40px rgba(6, 182, 212, 0.2); } #colo-tech .pricing-value { color: var(--mobile-color); } #colo-tech .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--mobile-color), #67e8f9); } /* Colocation Section 05 - Pricing (primary/accent) */ #colo-pricing .service-page-number { color: var(--primary); } #colo-pricing .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } #colo-pricing .service-page-header::before { background: radial-gradient(ellipse at center, var(--primary) 0%, transparent 70%); } #colo-pricing .service-main h3 { border-color: var(--primary); color: var(--primary); } #colo-pricing .feature-list li { border-color: var(--primary); } #colo-pricing .feature-list li::before { color: var(--accent); } #colo-pricing .use-case { background: rgba(99, 102, 241, 0.15); color: var(--primary); border: 1px solid rgba(99, 102, 241, 0.3); } #colo-pricing .use-case:hover { background: rgba(99, 102, 241, 0.3); box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); } #colo-pricing .result-value { color: var(--accent); } #colo-pricing .step-number { background: var(--primary); } #colo-pricing .pricing-card.featured { border-color: var(--primary); box-shadow: 0 0 40px rgba(99, 102, 241, 0.2); } #colo-pricing .pricing-value { color: var(--primary); } #colo-pricing .pricing-card.featured .btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); } /* ==================== EMBEDDED CALCULATOR STYLES ==================== */ .calculator-section { background: transparent; } .calculator-wrapper { max-width: 1000px; margin: 0 auto; } /* Glassmorphism блоки конфигурации */ .calc-config-section { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .calc-config-section h3 { color: var(--accent); margin-bottom: 1.5rem; font-size: 1.3rem; display: flex; align-items: center; gap: 0.75rem; } .calc-config-section h3::before { content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 2px; } .calc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .calc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .calc-form-group { margin-bottom: 0; } .calc-form-group label { display: block; margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 0.9rem; } .calc-form-group select, .calc-form-group input[type="number"] { width: 100%; padding: 0.875rem 1rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } .calc-form-group select:hover, .calc-form-group input[type="number"]:hover { border-color: rgba(34, 211, 238, 0.4); background: rgba(255, 255, 255, 0.12); } .calc-form-group select:focus, .calc-form-group input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); } .calc-form-group select option { background: #1a1a3e; color: #fff; } .calc-form-group input[type="range"] { width: 100%; height: 8px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.15); border-radius: 4px; outline: none; margin-top: 0.5rem; } .calc-form-group input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 12px rgba(34, 211, 238, 0.5); transition: transform 0.2s ease; } .calc-form-group input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } .calc-form-group input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 2px 12px rgba(34, 211, 238, 0.5); } .calc-checkbox-group { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .calc-checkbox-group input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } .calc-checkbox-group label { color: rgba(255, 255, 255, 0.85); cursor: pointer; margin: 0; } .calc-note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-top: 1rem; } /* Price Summary - единый стиль с config секциями */ .calc-price-summary { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; position: relative; margin-bottom: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .calc-price-badge { position: absolute; top: -12px; right: 24px; background: linear-gradient(135deg, var(--bots-color), #059669); color: white; padding: 0.5rem 1.25rem; border-radius: 20px; font-weight: 600; font-size: 0.85rem; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); } .calc-price-summary h3 { color: var(--accent); margin-bottom: 1.5rem; font-size: 1.3rem; display: flex; align-items: center; gap: 0.75rem; } .calc-price-summary h3::before { content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 2px; } .calc-price-summary h2 { color: var(--accent); font-size: 1.3rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .calc-price-summary h2::before { content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 2px; } .calc-price-breakdown { background: rgba(0, 0, 0, 0.2); padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; max-height: 300px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.05); } .calc-price-breakdown div { display: flex; justify-content: space-between; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.8); border-radius: 8px; margin-bottom: 4px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); } .calc-price-breakdown div:last-child { margin-bottom: 0; } .calc-price-breakdown div span:last-child { color: var(--accent); font-weight: 600; } .calc-total-price { text-align: center; font-size: 3rem; font-weight: 700; color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); padding: 1rem 0; } .calc-price-period { font-size: 1.2rem; color: rgba(255, 255, 255, 0.7); } .calc-price-note { text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; margin-top: 0.5rem; } /* Competitor Comparison - единый стиль */ .calc-competitor-comparison { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .calc-comparison-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .calc-comparison-header h3 { color: var(--accent); margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 0.75rem; } .calc-comparison-header h3::before { content: ''; width: 4px; height: 24px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 2px; } .calc-savings-badge { background: linear-gradient(135deg, var(--bots-color), #059669); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } /* Таблица сравнения */ .calc-comparison-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .calc-comparison-table thead tr { background: transparent; } .calc-comparison-table th { padding: 0.75rem 1rem; text-align: left; color: rgba(255, 255, 255, 0.5); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; border: none; } .calc-comparison-table tbody tr { background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.2s ease; } .calc-comparison-table tbody tr:nth-child(odd) { background: rgba(0, 0, 0, 0.25); } .calc-comparison-table tbody tr:hover { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.2); } .calc-comparison-table td { padding: 1rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; border: none; border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .calc-comparison-table td:first-child { border-radius: 10px 0 0 10px; border-left: 1px solid rgba(255, 255, 255, 0.05); font-weight: 500; color: rgba(255, 255, 255, 0.9); } .calc-comparison-table td:last-child { border-radius: 0 10px 10px 0; border-right: 1px solid rgba(255, 255, 255, 0.05); } .calc-comparison-table .our-row { background: rgba(16, 185, 129, 0.12) !important; } .calc-comparison-table .our-row td { color: rgba(255, 255, 255, 0.95) !important; } .calc-comparison-table .avg-row { background: rgba(255, 255, 255, 0.08) !important; } .calc-comparison-table .avg-row td { font-weight: 600; } .calc-comparison-table .note-row td { text-align: center; padding: 1rem; color: rgba(255, 255, 255, 0.5) !important; font-size: 0.85rem; background: rgba(0, 0, 0, 0.1) !important; } .calc-comparison-table .our-price { color: var(--bots-color) !important; font-weight: 700; } .calc-comparison-table .competitor-price { color: rgba(255, 255, 255, 0.5) !important; } .calc-comparison-table .savings { color: var(--bots-color) !important; font-weight: 600; } @media (max-width: 768px) { .calc-config-section { padding: 1.5rem; } .calc-grid-2 { grid-template-columns: 1fr; } .calc-total-price { font-size: 2rem; } .calc-comparison-table th, .calc-comparison-table td { padding: 0.75rem 0.75rem; font-size: 0.85rem; } .calc-competitor-comparison { padding: 1.5rem; overflow-x: auto; } } /* ==================== PROJECT HERO ==================== */ .project-hero { min-height: 100vh; display: flex; align-items: center; padding: 8rem 2rem 4rem; position: relative; overflow: hidden; } .project-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .project-hero-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .project-hero-text { position: relative; } .project-number { font-size: 8rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(34, 211, 238, 0.3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: absolute; top: -3rem; left: -1rem; z-index: -1; user-select: none; } .project-hero-badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .project-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 50px; font-size: 0.875rem; color: var(--text); } .project-badge svg { width: 18px; height: 18px; } .project-hero-text h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: var(--text); line-height: 1.1; margin-bottom: 1.5rem; } .project-hero-text h1 span { background: linear-gradient(135deg, var(--accent), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .project-hero-text > p { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.8; } .project-hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Hero Visual */ .project-hero-visual { position: relative; } .project-hero-image { background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 20px; padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Chat Demo */ .chat-demo { background: var(--dark); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); } .chat-header { background: var(--darker); padding: 1rem; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .chat-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .chat-info h4 { color: var(--text); font-size: 0.9rem; } .chat-info span { color: var(--bots-color); font-size: 0.75rem; } .chat-messages { padding: 1rem; min-height: 300px; display: flex; flex-direction: column; gap: 1rem; } .message { max-width: 80%; padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.9rem; } .message-user { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px; } .message-bot { background: var(--primary); color: white; align-self: flex-start; border-bottom-left-radius: 4px; } .message-system { background: linear-gradient(135deg, var(--accent), var(--bots-color)); color: white; align-self: center; text-align: center; font-size: 0.8rem; } /* ==================== STATS SECTION ==================== */ .project-stats { padding: 4rem 2rem; background: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .project-stats-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .project-stat-card { text-align: center; padding: 2rem; } .project-stat-card .stat-number { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .project-stat-card .stat-label { color: var(--text-muted); font-size: 1rem; margin-top: 0.5rem; } /* ==================== PROJECT SECTIONS ==================== */ .project-section { padding: 6rem 2rem; position: relative; } .project-section.dark { background: var(--darker); } .project-section.light { background: var(--dark); } .project-section.gradient { background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 100%); } .project-section-container { max-width: 1200px; margin: 0 auto; } /* Section Header with Number */ .project-section-header { text-align: center; margin-bottom: 4rem; position: relative; } /* Large Section Number Style (like main page) */ .project-section-number { font-size: 8rem; font-weight: 800; line-height: 1; margin-bottom: 1rem; opacity: 0.2; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: numberFloat 4s ease-in-out infinite; } @keyframes numberFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .section-label { display: inline-block; font-size: 0.875rem; font-weight: 700; color: var(--primary); background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1rem; } .section-number { display: inline-block; font-size: 0.875rem; font-weight: 700; color: var(--primary); background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); padding: 0.5rem 1rem; border-radius: 50px; margin-bottom: 1rem; } .project-section-header h2 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: var(--text); margin-bottom: 1rem; } .project-section-header p { font-size: 1.125rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; } /* ==================== CARDS GRID ==================== */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .cards-grid-2 { grid-template-columns: repeat(2, 1fr); } .cards-grid-3 { grid-template-columns: repeat(3, 1fr); } .cards-grid-4 { grid-template-columns: repeat(4, 1fr); } /* Problem Card */ .problem-card { background: var(--dark); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 16px; padding: 2rem; display: flex; gap: 1.5rem; transition: all 0.3s ease; } .problem-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border-color: var(--infra-color); } .problem-icon { width: 60px; height: 60px; background: rgba(239, 68, 68, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .problem-icon svg { width: 30px; height: 30px; color: var(--infra-color); } .problem-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .problem-content p { color: var(--text-muted); line-height: 1.7; } /* Solution Card */ .solution-card { background: var(--darker); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 16px; padding: 2rem; display: flex; gap: 1.5rem; transition: all 0.3s ease; } .solution-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); border-color: var(--primary); } .solution-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .solution-icon svg { width: 30px; height: 30px; color: white; } .solution-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .solution-content p { color: var(--text-muted); line-height: 1.7; } /* Feature Card */ .feature-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2rem; transition: all 0.3s ease; } .feature-card:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--primary); transform: translateY(-4px); } .feature-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .feature-icon svg { width: 30px; height: 30px; color: white; } .feature-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; } .feature-card p { color: var(--text-muted); line-height: 1.7; } /* Tech Card */ .tech-card { background: var(--dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2rem; text-align: center; transition: all 0.3s ease; } .tech-card:hover { transform: translateY(-4px); border-color: var(--primary); } .tech-icon { width: 80px; height: 80px; margin: 0 auto 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .tech-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .tech-card p { color: var(--text-muted); font-size: 0.875rem; } /* ==================== COMPARISON TABLE ==================== */ .comparison-table { width: 100%; border-collapse: collapse; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); background: var(--darker); border: 1px solid rgba(255, 255, 255, 0.1); } .comparison-table th, .comparison-table td { padding: 1.25rem 1.5rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .comparison-table thead { background: linear-gradient(135deg, var(--primary), var(--accent)); } .comparison-table th { color: white; font-weight: 600; } .comparison-table th:first-child { width: 30%; } .comparison-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } .comparison-table td:first-child { font-weight: 600; color: var(--text); } .comparison-table td { color: var(--text-muted); } .check { color: var(--bots-color); font-size: 1.25rem; } .cross { color: var(--infra-color); font-size: 1.25rem; } .partial { color: var(--crm-color); font-size: 1.25rem; } .highlight-column { background: rgba(99, 102, 241, 0.05); } /* ==================== WORKFLOW STEPS ==================== */ .workflow-steps { display: flex; justify-content: space-between; position: relative; } .workflow-steps::before { content: ''; position: absolute; top: 40px; left: 10%; right: 10%; height: 4px; background: linear-gradient(135deg, var(--primary), var(--accent)); z-index: 0; } .workflow-step { flex: 1; text-align: center; position: relative; z-index: 1; } .step-number { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: white; font-size: 1.5rem; font-weight: 800; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); } .workflow-step h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .workflow-step p { color: var(--text-muted); font-size: 0.9rem; max-width: 200px; margin: 0 auto; } /* ==================== PRICING ==================== */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1000px; margin: 0 auto; } .pricing-card { background: var(--darker); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 2.5rem; text-align: center; transition: all 0.3s ease; } .pricing-card.featured { border-color: var(--primary); transform: scale(1.05); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .pricing-card.featured .pricing-badge { display: block; } .pricing-badge { display: none; background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-bottom: 1rem; } .pricing-name { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; } .pricing-description { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1.5rem; } .pricing-price { margin-bottom: 2rem; } .pricing-price .amount { font-size: 3rem; font-weight: 800; color: var(--text); } .pricing-price .period { color: var(--text-muted); font-size: 0.875rem; } .pricing-features { list-style: none; margin-bottom: 2rem; text-align: left; } .pricing-features li { padding: 0.75rem 0; color: var(--text-muted); display: flex; align-items: center; gap: 0.75rem; } .pricing-features li::before { content: '\2713'; color: var(--bots-color); font-weight: bold; } /* ==================== PROJECT CTA ==================== */ .project-cta { padding: 6rem 2rem; background: linear-gradient(135deg, var(--primary), var(--accent)); text-align: center; } .project-cta h2 { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: white; margin-bottom: 1rem; } .project-cta p { font-size: 1.25rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .project-cta .btn { background: white; color: var(--primary); } .project-cta .btn:hover { background: var(--text); transform: translateY(-2px); } /* ==================== PROJECT FOOTER ==================== */ .project-footer { padding: 4rem 2rem 2rem; background: var(--darker); color: var(--text-muted); border-top: 1px solid rgba(255, 255, 255, 0.1); } .project-footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; } .project-footer-brand .logo { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; display: block; } .project-footer-brand p { line-height: 1.8; } .project-footer-links h4 { color: var(--text); font-weight: 600; margin-bottom: 1.5rem; } .project-footer-links ul { list-style: none; } .project-footer-links li { margin-bottom: 0.75rem; } .project-footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; } .project-footer-links a:hover { color: var(--primary); } .project-footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; margin-top: 4rem; } /* ==================== INFRASTRUCTURE INDEX PAGE ==================== */ /* Services Grid */ .infra-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; } /* Service Card */ .infra-service-card { display: flex; align-items: center; gap: 1.5rem; padding: 2rem; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; text-decoration: none; color: var(--text); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .infra-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--card-gradient-start, rgba(99, 102, 241, 0.1)), var(--card-gradient-end, rgba(34, 211, 238, 0.05))); opacity: 0; transition: opacity 0.4s ease; } .infra-service-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .infra-service-card:hover::before { opacity: 1; } /* Card color variations */ .infra-vps { --card-gradient-start: rgba(99, 102, 241, 0.15); --card-gradient-end: rgba(99, 102, 241, 0.05); } .infra-colo { --card-gradient-start: rgba(16, 185, 129, 0.15); --card-gradient-end: rgba(16, 185, 129, 0.05); } .infra-gpu { --card-gradient-start: rgba(239, 68, 68, 0.15); --card-gradient-end: rgba(239, 68, 68, 0.05); } .infra-db { --card-gradient-start: rgba(168, 85, 247, 0.15); --card-gradient-end: rgba(168, 85, 247, 0.05); } .infra-devops { --card-gradient-start: rgba(34, 211, 238, 0.15); --card-gradient-end: rgba(34, 211, 238, 0.05); } .infra-vps:hover { border-color: rgba(99, 102, 241, 0.4); } .infra-colo:hover { border-color: rgba(16, 185, 129, 0.4); } .infra-gpu:hover { border-color: rgba(239, 68, 68, 0.4); } .infra-db:hover { border-color: rgba(168, 85, 247, 0.4); } .infra-devops:hover { border-color: rgba(34, 211, 238, 0.4); } /* Card Icon */ .infra-card-icon { font-size: 3rem; flex-shrink: 0; position: relative; z-index: 1; } /* Card Content */ .infra-card-content { flex: 1; position: relative; z-index: 1; } .infra-card-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text); } .infra-card-content p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1rem; } /* Card Features */ .infra-card-features { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .infra-card-features span { font-size: 0.75rem; padding: 0.25rem 0.75rem; background: rgba(99, 102, 241, 0.2); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; color: var(--primary-light); } .infra-vps .infra-card-features span { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; } .infra-colo .infra-card-features span { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); color: #6ee7b7; } .infra-gpu .infra-card-features span { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .infra-db .infra-card-features span { background: rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.3); color: #d8b4fe; } .infra-devops .infra-card-features span { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.3); color: #67e8f9; } /* Card Price */ .infra-card-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); } /* Card Arrow */ .infra-card-arrow { font-size: 1.5rem; color: var(--text-muted); transition: all 0.3s ease; flex-shrink: 0; position: relative; z-index: 1; } .infra-service-card:hover .infra-card-arrow { color: var(--accent); transform: translateX(5px); } /* Infrastructure Index Section Colors */ #services-grid .service-page-number { color: var(--primary); } #services-grid .service-page-header h2 { color: var(--primary); text-shadow: 0 0 30px rgba(99, 102, 241, 0.5); } /* VPS Section */ #section-vps .service-page-number { color: var(--primary); } #section-vps .service-page-header h2 { color: var(--primary); text-shadow: 0 0 30px rgba(99, 102, 241, 0.5); } /* Colocation Section */ #section-colo .service-page-number { color: var(--bots-color); } #section-colo .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } /* GPU Section */ #section-gpu .service-page-number { color: var(--infra-color); } #section-gpu .service-page-header h2 { color: var(--infra-color); text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); } /* Database Section */ #section-db .service-page-number { color: var(--neural-color); } #section-db .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } /* DevOps Section */ #section-devops .service-page-number { color: var(--accent); } #section-devops .service-page-header h2 { color: var(--accent); text-shadow: 0 0 30px rgba(34, 211, 238, 0.5); } /* Trends Section */ #infra-trends .service-page-number { color: var(--mobile-color); } #infra-trends .service-page-header h2 { color: var(--mobile-color); text-shadow: 0 0 30px rgba(59, 130, 246, 0.5); } /* Why Us Section */ #infra-why .service-page-number { color: var(--bots-color); } #infra-why .service-page-header h2 { color: var(--bots-color); text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); } /* Tech Section */ #infra-tech .service-page-number { color: var(--neural-color); } #infra-tech .service-page-header h2 { color: var(--neural-color); text-shadow: 0 0 30px rgba(168, 85, 247, 0.5); } /* ==================== RESPONSIVE ==================== */ @media (max-width: 1024px) { .project-hero-content { grid-template-columns: 1fr; text-align: center; } .project-hero-visual { display: none; } .project-number { position: static; font-size: 5rem; margin-bottom: 1rem; } .project-hero-badges { justify-content: center; } .project-hero-buttons { justify-content: center; } .project-stats-grid { grid-template-columns: repeat(2, 1fr); } .cards-grid-2, .cards-grid-3, .cards-grid-4 { grid-template-columns: repeat(2, 1fr); } .pricing-grid { grid-template-columns: 1fr; } .pricing-card.featured { transform: none; } .project-footer-content { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .project-hero { padding: 7rem 1rem 3rem; } .project-number { font-size: 4rem; } .project-section-number { font-size: 5rem; } .cards-grid, .cards-grid-2, .cards-grid-3, .cards-grid-4 { grid-template-columns: 1fr; } .problem-card, .solution-card { flex-direction: column; text-align: center; } .workflow-steps { flex-direction: column; gap: 2rem; } .workflow-steps::before { display: none; } .project-stats-grid { grid-template-columns: 1fr; } .project-footer-content { grid-template-columns: 1fr; text-align: center; } .comparison-table { font-size: 0.8rem; } .comparison-table th, .comparison-table td { padding: 0.75rem; } /* Infrastructure cards responsive */ .infra-services-grid { grid-template-columns: 1fr; } .infra-service-card { flex-direction: column; text-align: center; padding: 1.5rem; } .infra-card-icon { font-size: 2.5rem; } .infra-card-features { justify-content: center; } .infra-card-arrow { display: none; } }