
.services-section { padding: 100px 20px; background: var(--white); position: relative; overflow: hidden; }
.services-section::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 113, 227, 0.03) 0%, transparent 70%); animation: float 30s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(-100px,-50px) rotate(120deg);} 66%{transform:translate(50px,-100px) rotate(240deg);} }
.services-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-label { display: inline-block; background: var(--light-blue); color: var(--primary-blue); padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; margin-bottom: 16px; opacity: 0; animation: fadeInDown 0.6s ease-out forwards; }
.section-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; color: var(--dark-text); margin-bottom: 16px; letter-spacing: -1px; opacity: 0; animation: fadeInUp 0.6s ease-out 0.1s forwards; }
.section-subtitle { font-size: clamp(18px, 2.5vw, 22px); color: var(--gray_text, var(--gray-text)); max-width: 600px; margin: 0 auto; opacity: 0; animation: fadeInUp 0.6s ease-out 0.2s forwards; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 60px; grid-auto-flow: row dense; }
.service-card { background: var(--white); border-radius: 20px; padding: 32px; border: 2px solid rgba(0,113,227,0.15); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }
.service-card:nth-child(1){animation-delay:0.3s;} .service-card:nth-child(2){animation-delay:0.35s;} .service-card:nth-child(3){animation-delay:0.4s;} .service-card:nth-child(4){animation-delay:0.45s;} .service-card:nth-child(5){animation-delay:0.5s;} .service-card:nth-child(6){animation-delay:0.55s;} .service-card:nth-child(7){animation-delay:0.6s;} .service-card:nth-child(8){animation-delay:0.65s;}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--primary-blue),#0051D5); transform:translateX(-100%); transition:transform 0.3s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary-blue); }
.service-card:hover::before { transform: translateX(0); }

.service-card__overlay { position:absolute; inset:0; z-index:5; text-indent:-9999px; background:transparent; }
.service-card__overlay:focus { outline:none; }
.service-card:focus-within { box-shadow:0 0 0 3px rgba(0,113,227,0.2), 0 20px 40px rgba(0,0,0,0.08); transform:translateY(-8px); border-color:var(--primary-blue); }

.service-card__body { position: relative; z-index: 1; }
.service-icon { width:56px; height:56px; background:var(--light-blue); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:20px; transition:all 0.3s ease; }
.service-card:hover .service-icon { background: var(--primary-blue); color:#fff; transform: scale(1.1); }
.service-title { font-size:20px; font-weight:600; margin-bottom:12px; line-height:1.3; }
.service-description { font-size:15px; color:var(--gray-text); line-height:1.5; margin-bottom:16px; }

.service-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; position:relative; z-index:6; }
.service-tag { display:inline-block; padding:6px 14px; background:rgba(0,113,227,0.08); color:var(--primary-blue); font-size:13px; font-weight:600; border-radius:20px; text-decoration:none; transition:all 0.2s ease; border:1px solid rgba(0,113,227,0.2); position:relative; z-index:6; }
.service-tag:hover { background:var(--primary-blue); color:#fff; border-color:var(--primary-blue); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,113,227,0.2); }

.service-link { display:inline-flex; align-items:center; gap:8px; color:var(--primary-blue); font-weight:500; font-size:16px; transition:all 0.2s ease; }
.service-link svg { width:20px; height:20px; transition: transform 0.2s ease; }
.service-card:hover .service-link { gap:12px; } .service-card:hover .service-link svg { transform:translateX(4px); }
.service-card:focus-within .service-link { gap:12px; } .service-card:focus-within .service-link svg { transform:translateX(4px); }

.service-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; position:relative; z-index:6; }
.service-actions-floating { position:absolute; right:32px; bottom:32px; z-index:6; }
.quick-contact-btn { background:var(--primary-blue); color:#fff; border:none; padding:10px 24px; border-radius:50px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.3s ease; font-family:inherit; position:relative; z-index:6; }
.quick-contact-btn:hover { background:#0051D5; transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,113,227,0.3); }
.quick-contact-btn:active { transform: translateY(0); }

.service-card.featured { grid-column: span 2; }

.view-all-services { text-align:center; margin-top:40px; margin-bottom:20px; opacity:0; animation:fadeInUp 0.8s ease-out 0.8s forwards; }
.view-all-link { display:inline-flex; align-items:center; gap:8px; color:var(--primary-blue); text-decoration:none; font-size:18px; font-weight:600; transition:all 0.2s ease; padding:12px 24px; border-radius:50px; background:var(--light-blue); }
.view-all-link:hover { background:var(--primary-blue); color:#fff; transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,113,227,0.2); gap:12px; }
.view-all-link svg { width:20px; height:20px; transition: transform 0.2s ease; }
.view-all-link:hover svg { transform: translateX(4px); }

.services-cta { text-align:center; padding:60px; background:var(--light-gray); border-radius:24px; position:relative; overflow:hidden; opacity:0; animation:fadeInUp 0.8s ease-out 0.9s forwards; }
.services-cta::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(0,113,227,0.05) 0%, transparent 50%); }
.services-cta-content { position:relative; z-index:1; }
.services-cta h3 { font-size:clamp(24px,4vw,36px); margin-bottom:16px; }
.services-cta p { font-size:18px; color:var(--gray-text); margin-bottom:32px; }

@keyframes fadeInDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:768px){
	.services-section{ padding:60px 20px; }
	.services-grid{ grid-template-columns:1fr; gap:16px; }
	.service-card.featured{ grid-column: span 1; }
	.service-card{ padding:24px; }
	.services-cta{ padding:40px 24px; }
	.section-header{ margin-bottom:40px; }
	.service-actions-floating{ position:static; margin-top:16px; }
}