/* =================================================================== * Layered Multi-Shadow System - 2026 Premium Depth * Sophisticated shadow layers for realistic 3D elevation * ================================================================ */ /* =================================================================== * BASE CARD SHADOWS - Layered System * ================================================================ */ .card, .stat-item, .industry-card, .pillar-item, .guide-card, .pitfall-card, .location-card, .expert-card, .testimonial-card, .faq-item, .process-step, #problem .prose, #gen-ai-spotlight .feature-item, #benefits .card { box-shadow: /* Subtle top shadow for definition */ 0 1px 2px rgba(0, 0, 0, 0.12), /* Primary brand-colored shadow */ 0 4px 8px rgba(59, 130, 246, 0.15), /* Mid-range depth */ 0 12px 24px rgba(59, 130, 246, 0.1), /* Deep ambient shadow */ 0 24px 48px rgba(0, 0, 0, 0.08), /* Inner highlight for polish */ inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* =================================================================== * HOVER STATE - Enhanced Layered Shadows * ================================================================ */ .card:hover, .stat-item:hover, .industry-card:hover, .pillar-item:hover, .guide-card:hover, .pitfall-card:hover, .location-card:hover, .expert-card:hover, .testimonial-card:hover, .process-step:hover, #problem .prose:hover, #gen-ai-spotlight .feature-item:hover, #benefits .card:hover { transform: translateY(-6px); box-shadow: /* Sharper top shadow */ 0 2px 4px rgba(0, 0, 0, 0.15), /* Intensified brand shadow */ 0 8px 16px rgba(59, 130, 246, 0.25), /* Expanded mid-range */ 0 20px 40px rgba(59, 130, 246, 0.15), /* Deeper ambient */ 0 32px 64px rgba(0, 0, 0, 0.12), /* Glow effect */ 0 0 0 1px rgba(96, 165, 250, 0.3), /* Enhanced inner highlight */ inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } /* =================================================================== * STATS COUNTER - Premium Elevation * ================================================================ */ #stats-counter .stat-item { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(59, 130, 246, 0.12), 0 16px 32px rgba(59, 130, 246, 0.08), 0 28px 56px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } #stats-counter .stat-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(59, 130, 246, 0.2), 0 24px 48px rgba(59, 130, 246, 0.15), 0 40px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(96, 165, 250, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } /* =================================================================== * BUTTONS - Subtle Depth * ================================================================ */ .btn, .hero-btn-primary-large, .hero-btn-secondary-large { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(59, 130, 246, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05) !important; transition: all 0.3s ease; } .btn:hover, .hero-btn-primary-large:hover, .hero-btn-secondary-large:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(59, 130, 246, 0.15), 0 8px 16px rgba(59, 130, 246, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08) !important; } /* =================================================================== * ICON BOXES - Soft Glow * ================================================================ */ .icon-box, .pillar-icon, .industry-icon, .feature-icon { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(59, 130, 246, 0.15), 0 8px 16px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } .card:hover .icon-box, .card:hover .pillar-icon, .card:hover .industry-icon, .card:hover .feature-icon, .pillar-item:hover .pillar-icon, .industry-card:hover .industry-icon { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(59, 130, 246, 0.25), 0 12px 24px rgba(59, 130, 246, 0.15), 0 0 20px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } /* =================================================================== * VISUAL CONTAINERS - Deep Elevation * ================================================================ */ #gen-ai-spotlight .visual-container, #gen-ai-spotlight .code-window { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(59, 130, 246, 0.12), 0 24px 48px rgba(59, 130, 246, 0.08), 0 40px 80px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* =================================================================== * HERO METRIC CARDS - Subtle Elevation * ================================================================ */ .hero-metric-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(59, 130, 246, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; } .hero-metric-card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(59, 130, 246, 0.12), 0 8px 16px rgba(59, 130, 246, 0.08), 0 12px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* =================================================================== * FORM ELEMENTS - Focused Depth * ================================================================ */ input[type="text"], input[type="email"], input[type="tel"], textarea, select { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(59, 130, 246, 0.15), 0 0 0 3px rgba(96, 165, 250, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.05) !important; } /* =================================================================== * BADGES & TAGS - Minimal Depth * ================================================================ */ .section-badge, .challenge-badge, .solution-badge, .expertise-tag, .capability-tag { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(59, 130, 246, 0.08) !important; } /* =================================================================== * RESPONSIVE - Reduce Shadow Complexity on Mobile * ================================================================ */ @media (max-width: 768px) { .card, .stat-item, .industry-card, .pillar-item { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(59, 130, 246, 0.12), 0 16px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } .card:hover, .stat-item:hover, .industry-card:hover, .pillar-item:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(59, 130, 246, 0.15), 0 24px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } } @media (max-width: 480px) { /* Simplify shadows on small screens for performance */ .card, .stat-item, .industry-card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; } .card:hover, .stat-item:hover, .industry-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(96, 165, 250, 0.3) !important; } }