/* What We Do page styles */
.what-we-do-section { 
   min-height: calc(var(--vh, 1vh) * 100);
	position: relative;
	padding: clamp(60px, 8vw, 120px);
	display: flex;
	align-items: center;
	overflow: hidden;
    background: var(--bg); 
}
.what-we-do-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.what-we-do-header { text-align: center; margin-bottom: 48px; }
.what-we-do-header h2 { font-size: 2.8rem; font-weight: 800; margin-bottom: 12px; }
.what-we-do-header h2 span { background: linear-gradient(90deg, #22d3ee, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.what-we-do-header p { color: var(--muted); font-size: 1.2rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; }

.benefit-card { 
    background: rgba(255,255,255,0.04); 
    border-radius: 18px; padding: 32px 24px;
     box-shadow: 0 8px 32px rgba(15,23,42,0.08); 
     display: flex; flex-direction: column; 
     align-items: center; position: relative; 
     overflow: hidden; 
     transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
.benefit-icon { 
    font-size: 2.2rem; 
    margin-bottom: 18px; 
    font-size: 1.8rem;
  filter: drop-shadow(0 0 8px rgba(96,165,250,0.5));
}
.benefit-card:hover {
  transform: translateY(-6px);
}
.benefit-content h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.benefit-content p { color: var(--muted); font-size: 1rem; }
.benefit-accent { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #22d3ee, #a78bfa, #60a5fa); border-radius: 0 0 18px 18px; opacity: 0.18; }
@media (max-width: 900px) { .what-we-do-header h2 { font-size: 2.1rem; } .benefit-card { padding: 24px 12px; } }

@media (max-width: 768px) {
  .what-we-do-section {
    padding: 100px 16px 120px;
  }
}