/* ==========================================================================
   SEKCJA: DLACZEGO MY – 6 ATUTÓW
   ========================================================================== */
.systemo-atuty { background: var(--color-white); }

.systemo-atuty__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.systemo-atuty__head .systemo-title { text-wrap: balance; }

.systemo-atuty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.systemo-atuty__grid > .systemo-reveal { display: flex; }

.systemo-atuty__card {
  width: 100%;
  padding: 40px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.systemo-atuty__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(242, 103, 34, .45);
}

.systemo-atuty__icon {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 26px;
  color: var(--color-primary);
  stroke-width: 1.5;
}

.systemo-atuty__card-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.systemo-atuty__card p {
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 1200px) {
  .systemo-atuty__card { padding: 34px 30px; }
}

@media (max-width: 992px) {
  .systemo-atuty__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .systemo-atuty__head { margin-bottom: 40px; }
  .systemo-atuty__grid { grid-template-columns: 1fr; gap: 20px; }
  .systemo-atuty__card { padding: 32px 26px; }
}