<section id="stats">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-item"><div class="stat-number" data-count="24">0+</div><div class="stat-label">Years of Experience</div></div>
      <div class="stat-item"><div class="stat-number" data-count="850">0+</div><div class="stat-label">Projects Completed</div></div>
      <div class="stat-item"><div class="stat-number" data-count="320">0+</div><div class="stat-label">Skilled Professionals</div></div>
      <div class="stat-item"><div class="stat-number" data-count="98">0%</div><div class="stat-label">Client Satisfaction</div></div>
    </div>
  </div>
</section>

<style>
#stats {
  padding: 100px 0;
  background: #F5F5F5; /* Light gray background */
  position: relative;
  overflow: hidden;
}
#stats::before {
  content: ''; 
  position: absolute; 
  inset: 0;
  background-image: linear-gradient(rgba(200,169,110,0.06) 1px, transparent 1px), 
                    linear-gradient(90deg, rgba(200,169,110,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.stats-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 0; 
  position: relative; 
  z-index: 1; 
}
.stat-item { 
  padding: 40px; 
  text-align: center; 
  border-right: 1px solid rgba(200,169,110,0.2); /* Gold-tinted borders */
}
.stat-item:last-child { 
  border-right: none; 
}
.stat-number { 
  font-family: 'Bebas Neue', sans-serif; 
  font-size: clamp(56px, 6vw, 80px); 
  color: var(--gold); /* Gold numbers for accent */
  line-height: 1; 
  letter-spacing: 0.02em; 
}
.stat-label { 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 0.18em; 
  text-transform: uppercase; 
  color: var(--charcoal); /* Dark text for light background */
  margin-top: 8px; 
  opacity: 0.8; 
}
@media (max-width: 1024px) { 
  .stats-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
  .stat-item { 
    border-right: none; 
    border-bottom: 1px solid rgba(200,169,110,0.2); 
  }
  .stat-item:nth-last-child(1),
  .stat-item:nth-last-child(2) {
    border-bottom: none;
  }
}
@media (max-width: 768px) {
  .stats-grid { 
    grid-template-columns: 1fr; 
  }
  .stat-item { 
    border-bottom: 1px solid rgba(200,169,110,0.2);
  }
  .stat-item:last-child {
    border-bottom: none;
  }
}
</style>