body { background:#f8f9fa; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

.section-black { background-color: #262626; color: white;}

.steps-container { width: 100%; max-width: 520px; margin: 0 auto; }
.steps-wrapper { overflow: visible; position: relative; }

.steps-row { display: flex; flex-direction: column; gap: 0.8rem; }

.step-col { box-sizing: border-box; padding: 0 1rem; display:flex; justify-content:center; align-items:flex-start; }

.card.step-card {
  width: 100%;
  max-width: 760px;
  border: 0; background: #fff;
  padding: 1.1rem 1.2rem; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10,20,30,0.08);
  display:flex; gap:1rem; align-items:flex-start;

  /* ИЗНАЧАЛЬНО скрыта и смещена вниз */
  transform: translateY(24px) scale(0.995);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.9,.3,1), opacity .5s linear;
  will-change: transform, opacity;
}

/* видимая карточка */
.card.step-card.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.step-icon { font-size:1.9rem; color:#495057; flex:0 0 auto; margin-top:0.15rem; }
.step-text h6 { margin:0 0 .35rem 0; font-size:1.2rem; line-height:1.12; }
.step-text p { margin:0; color:#6c757d; font-size:1rem; line-height:1.35; }

.visual-line {
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, #adb5bd 20%, #adb5bd 80%, transparent 100%);
  pointer-events: none;
  border-radius:2px;
  opacity: 0.6;
}

@media (max-width:600px){
  .step-col { padding: 0 0.6rem; }
  .card.step-card { padding: 0.9rem 1rem; max-width: calc(100% - 28px); }
  .step-icon { font-size:1.6rem; }
  .step-text h6 { font-size:1.05rem; }
  .step-text p { font-size:0.95rem; }
}

.row {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
  visibility: hidden;
}

/* Класс для появления */
.row.revealed {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* Показать гамбургер только на мобильных, скрыть десктопный nav на мобайле */
/* В site.css или reviews.css */
@media (max-width: 767.98px) {
  #sec8 .card {
      max-width: 100% !important; /* Карточка контактов на всю ширину */
  }
  #sec8 iframe {
      height: 300px !important; /* Уменьшить высоту карты на мобильных для экономии места */
  }
  #sec8 .mt-5 {
      margin-top: 2rem !important; /* Уменьшить отступ сверху для карты */
  }
  #sec8 .display-4 {
      font-size: 2.5rem; /* Меньший заголовок на мобильных */
  }
  #sec8 .small {
      font-size: 0.9rem; /* Улучшить читаемость текстов */
  }
  #sec8 .btn-sm {
      font-size: 0.95rem; /* Кнопки чуть крупнее для тача */
  }
}

/* В site.css или другом файле стилей */
@media (max-width: 767.98px) {
  #sec1 .display-4 {
      font-size: 2.5rem; /* Меньший заголовок на мобильных */
  }
  #sec1 .lead {
      font-size: 1rem; /* Уменьшенный текст для удобства чтения */
      text-align: center; /* Центрирование текста */
  }
  #sec1 img {
      max-height: 300px; /* Ограничение высоты фото на мобильных */
      object-fit: contain; /* Сохранение пропорций фото */
      margin-bottom: 1.5rem; /* Отступ под фото */
  }
}