.services { background: var(--dark); padding: 5rem 0;}
.services .section-title h2, .services .section-title p { color: white; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem; perspective: 1000px; }
.service-card { background: rgba(255, 255, 255, 0.05); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.3); padding: 2rem; }
.service-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1); border-color: var(--primary); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2); }
.service-icon { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); border-radius: 16px; margin-bottom: 2rem; display: flex; justify-content: center; align-items: center; transition: all 0.6s; border: 1px solid rgba(255,255,255,0.2); }
.service-icon i { color: var(--primary); font-size: 2.5rem; transition: all 0.6s; }
.service-card:hover .service-icon { background: var(--tech-gradient); transform: rotate(10deg); }
.service-card:hover .service-icon i { color: white; }
.service-content h3 { font-size: 1.5rem; color: white; margin-bottom: 1rem; }
.service-content p { color: rgba(255, 255, 255, 0.8); line-height: 1.8; margin-bottom: 1.5rem; }
.service-link { display: inline-flex; align-items: center; color: var(--primary); font-weight: 600; padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid var(--primary); transition: all 0.4s ease; }
.service-link:hover { background: var(--primary); color: white; }
.service-link i { margin-left: 0.75rem; }