/* ============================================================
   СЕКЦИЯ «КАК УСТРОЕНА СИСТЕМА»
   ============================================================ */

.how-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:20px;
}

@media(max-width:900px){
  .how-columns{
    grid-template-columns:1fr;
    gap:50px;
  }
}


/* ============================================================
   КОЛОНКА
   ============================================================ */
.how-col{
  position:relative;
}

.how-col-title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--accent-2);
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:32px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(168,85,247,.25);
}


/* ============================================================
   ШАГ
   ============================================================ */
.how-step{
  display:flex;
  gap:20px;
  position:relative;
  padding-bottom:32px;
}

/* Вертикальная линия-связка */
.how-step::before{
  content:'';
  position:absolute;
  left:22px;
  top:46px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,
    rgba(168,85,247,.55) 0%,
    rgba(168,85,247,.15) 100%);
}

.how-step:last-child{padding-bottom:0}
.how-step:last-child::before{display:none}


/* ============================================================
   НОМЕР ШАГА
   ============================================================ */
.how-num{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:700;
  color:var(--accent-2);
  background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.4);
  box-shadow:0 0 24px rgba(168,85,247,.2);
  letter-spacing:.5px;
}


/* ============================================================
   ТЕКСТ ШАГА
   ============================================================ */
.how-body{padding-top:4px}

.how-body h4{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:8px;
  color:var(--text);
}

.how-body p{
  font-size:.94rem;
  color:var(--muted);
  line-height:1.55;
}


/* ============================================================
   ФИНАЛЬНАЯ ПОДПИСЬ
   ============================================================ */
.how-footer{
  margin-top:70px;
  padding:24px 32px;
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg,rgba(168,85,247,.08),transparent);
  border-radius:0 12px 12px 0;
  color:var(--muted);
  font-size:.98rem;
  max-width:820px;
}


/* ============================================================
   ПОДСТРОЙКА ДЛЯ МОБИЛЬНЫХ
   ============================================================ */
@media(max-width:600px){
  .how-step{gap:16px;padding-bottom:26px}
  .how-step::before{left:19px;top:42px}
  .how-num{width:38px;height:38px;font-size:.8rem}
  .how-body h4{font-size:1rem}
  .how-footer{padding:20px 24px}
}
/* ============================================================
   СХЕМА СИСТЕМЫ
   ============================================================ */
.how-scheme{
  margin-top:60px;
  padding:40px 20px;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(168,85,247,.04) 0%, rgba(12,5,25,.6) 100%);
  border:1px solid rgba(168,85,247,.18);
  overflow-x:auto;
}

.scheme-svg{
  display:block;
  width:100%;
  min-width:760px;
  height:auto;
}

@media(max-width:820px){
  .how-scheme{padding:24px 12px;border-radius:16px}
  .scheme-svg{min-width:680px}
}