/* Homepage Styles — TechPro SA */

.home-services { padding-block: var(--space-3xl); }
.home-services .service-card { text-align: center; padding: var(--space-xl); }
.home-services .service-card__icon {
  width: 64px; height: 64px; margin-inline: auto; margin-bottom: var(--space-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-light); border-radius: var(--radius-lg);
  color: var(--color-primary); transition: all 0.3s ease;
}
.home-services .service-card:hover .service-card__icon {
  background: var(--color-primary); color: #fff; transform: scale(1.1);
}

.how-it-works { background: var(--color-neutral-50); padding-block: var(--space-3xl); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.step-card { text-align: center; position: relative; padding: var(--space-lg); }
.step-card::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto var(--space-md);
  background: var(--color-primary); color: #fff; border-radius: var(--radius-full);
  font-size: var(--text-lg); font-weight: 700;
}
.step-card__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-xs); }
.step-card__desc { font-size: var(--text-sm); color: var(--color-neutral-500); line-height: 1.6; }
.step-card:not(:last-child)::after {
  content: ''; position: absolute; top: 40px; right: -16px;
  width: 32px; height: 2px; background: var(--color-neutral-300);
}

.hero-selector {
  background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-lg);
  padding: var(--space-lg); margin-top: var(--space-xl); max-width: 560px;
}
.hero-selector__title { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-sm); }
.hero-selector__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.hero-selector__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
  padding: var(--space-sm); background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md);
  color: #fff; text-decoration: none; font-size: var(--text-xs); font-weight: 500;
  text-align: center; transition: all 0.2s;
}
.hero-selector__item:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

.stats-bar {
  background: #fff; margin-top: -40px; position: relative; z-index: 10;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-xl);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); text-align: center; }
.stat-item__number { font-size: var(--text-3xl); font-weight: 800; color: var(--color-primary); line-height: 1; }
.stat-item__label { font-size: var(--text-sm); color: var(--color-neutral-500); margin-top: var(--space-2xs); }

.home-areas {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; padding-block: var(--space-3xl);
}
.areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-xs); }
.area-pill {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm); background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-full);
  color: #fff; font-size: var(--text-sm); text-decoration: none; transition: all 0.2s;
}
.area-pill:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step-card:not(:last-child)::after { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .steps-grid, .stats-grid { grid-template-columns: 1fr; }
  .stats-bar { margin-top: 0; border-radius: 0; }
  .hero-selector__grid { grid-template-columns: repeat(2, 1fr); }
}