/* ==========================================
   Home – How It Works
   ========================================== */
.products-section.home-section {
  padding: var(--space-2xl) 0;
}

.home-steps {
  padding: var(--space-2xl) 0 calc(var(--space-2xl) + 8px);
  background: var(--white);
}

.home-steps-head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.home-steps-head .home-section-title {
  justify-content: center;
  margin-bottom: 0;
}

.home-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.home-step {
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.home-step:hover {
  border-color: rgba(66, 129, 119, 0.3);
  box-shadow: 0 14px 30px rgba(0, 38, 35, 0.09);
  transform: translateY(-3px);
}

.home-step-index {
  position: absolute;
  top: var(--space-md);
  inset-inline-end: var(--space-lg);
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(0, 38, 35, 0.07);
}

.home-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-md);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-green-accent), var(--primary-green-light));
  color: var(--white);
  box-shadow: 0 8px 18px rgba(5, 66, 57, 0.22);
}

.home-step-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-green);
  margin-bottom: 6px;
}

.home-step-text {
  color: var(--medium-gray);
  font-size: 0.92rem;
  line-height: 1.8;
  margin: 0;
}