/* ==================================================
   ACCESSIBILITY
================================================== */

@media(prefers-reduced-motion:reduce){

  .orbit-one,
  .orbit-two,
  .orbit-three,
  .statement-energy,
  .statement-energy span,
  .statement-space::before{
    animation:none;
  }

}
.solution-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
  margin-top:70px;
}
.solution-card{
  min-height:330px;
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(79,124,255,.065),rgba(255,255,255,.018));
}
.solution-card:nth-child(1){grid-column:span 7}
.solution-card:nth-child(2){grid-column:span 5}
.solution-card:nth-child(3){grid-column:span 4}
.solution-card:nth-child(4){grid-column:span 4}
.solution-card:nth-child(5){grid-column:span 4}
.solution-card .icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:15px;
  background:var(--accent);
  color:#fff;
  font-size:20px;
  font-weight:900;
}
.solution-card h3{
  margin:auto 0 15px;
  font-size:clamp(28px,3vw,46px);
  line-height:1;
  letter-spacing:-.045em;
}
.solution-card p{margin:0;color:var(--muted)}
.light{background:linear-gradient(180deg,#F7F9FC 0%,#EEF2F7 100%);color:var(--ink)}
.light .kicker{color:#315FD6}
.light .lead{color:#667085}
.niches{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:65px;
}
	
	
.solution-path{
  position:relative;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  column-gap:110px;
  row-gap:70px;
}


/* =====================================================
   ITEM
===================================================== */

.solution-path-item{
  position:relative;

  display:grid;
  grid-template-columns:48px 1fr;
  gap:24px;

  min-height:230px;

  padding:0 0 38px;

  transition:transform .4s cubic-bezier(.22,1,.36,1);
}


/* делаем ритм по двум колонкам */
.solution-path-item:nth-child(2){
  margin-top:95px;
}

.solution-path-item:nth-child(4){
  margin-top:95px;
}

.solution-path-item:nth-child(5){
  grid-column:1 / -1;

  width:calc(50% - 55px);

  justify-self:center;
}


/* =====================================================
   ЛИНИЯ МАРШРУТА
===================================================== */

.solution-path-item::after{
  content:"";

  position:absolute;

  left:23px;
  top:44px;
  bottom:-50px;

  width:1px;

  background:linear-gradient(
    180deg,
    rgba(79,124,255,.45),
    rgba(79,124,255,.06)
  );

  pointer-events:none;
}


/* =====================================================
   MARKER
===================================================== */

.solution-path-marker{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:18px;
}


/* звездная точка — без смещения */
.solution-path-star{
  position:relative;
  z-index:2;

  width:11px;
  height:11px;

  border-radius:50%;

  border:2px solid #4F7CFF;

  background:#0B0F16;

  box-shadow:
    0 0 0 7px rgba(79,124,255,.04),
    0 0 22px rgba(79,124,255,.24);

  transition:
    background .3s ease,
    box-shadow .3s ease;
}


.solution-path-star::before{
  content:"";

  position:absolute;

  width:3px;
  height:3px;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#6A96FF;
}


/* номер вертикально возле точки */
.solution-path-num{
  color:#6A96FF;

  font-size:10px;
  font-weight:900;

  letter-spacing:.17em;

  writing-mode:vertical-rl;

  transform:rotate(180deg);
}


/* =====================================================
   COPY
===================================================== */

.solution-path-copy{
  position:relative;

  padding-top:0;
}


.solution-path h3{
  max-width:480px;

  margin:0 0 24px;

  color:#F7F8FA;

  font-size:clamp(31px,3vw,48px);
  line-height:.96;

  font-weight:300;
  letter-spacing:-.05em;

  transition:
    color .3s ease,
    transform .4s cubic-bezier(.22,1,.36,1);
}


.solution-path p{
  max-width:440px;

  margin:0;

  color:#8F9BAD;

  font-size:15px;
  line-height:1.65;

  transition:
    color .3s ease,
    transform .4s cubic-bezier(.22,1,.36,1);
}


/* =====================================================
   СВЕЧЕНИЕ
===================================================== */

.solution-path-copy::before{
  content:"";

  position:absolute;

  left:-35px;
  top:-45px;

  width:260px;
  height:160px;

  border-radius:50%;

  background:rgba(79,124,255,.075);

  filter:blur(75px);

  opacity:0;

  pointer-events:none;

  transition:opacity .4s ease;
}


/* =====================================================
   HOVER
===================================================== */

.solution-path-item:hover{
  transform:translateY(-4px);
}


.solution-path-item:hover .solution-path-star{
  background:#4F7CFF;

  box-shadow:
    0 0 0 8px rgba(79,124,255,.055),
    0 0 30px rgba(79,124,255,.55);
}


.solution-path-item:hover .solution-path-star::before{
  background:#fff;
}


.solution-path-item:hover .solution-path-copy::before{
  opacity:1;
}


.solution-path-item:hover h3{
  color:#fff;
  transform:translateX(5px);
}


.solution-path-item:hover p{
  color:#B5C0D0;
  transform:translateX(3px);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

  .solution-path{
    column-gap:60px;
  }

  .solution-path-item:nth-child(2),
  .solution-path-item:nth-child(4){
    margin-top:55px;
  }

  .solution-path-item:nth-child(5){
    width:calc(50% - 30px);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

  .solution-path{
    display:grid;
    grid-template-columns:1fr;

    gap:0;
    row-gap:0;

    width:100%;
    max-width:100%;

    margin-top:55px;
  }


  /* каждый пункт строго внутри экрана */
  .solution-path-item,
  .solution-path-item:nth-child(2),
  .solution-path-item:nth-child(4),
  .solution-path-item:nth-child(5){

    grid-column:auto;

    width:100%;
    max-width:100%;

    margin-top:0;

    min-height:auto;

    padding:30px 0 38px;

    /*
      Уменьшаем колонку с точкой.
      minmax(0,1fr) критически важен:
      он разрешает текстовой колонке сжиматься.
    */
    grid-template-columns:32px minmax(0,1fr);

    gap:16px;

    box-sizing:border-box;
  }


  /* линия */
  .solution-path-item::after{
    left:15px;
    top:42px;
    bottom:-20px;
  }


  /* колонка с точкой */
  .solution-path-marker{
    width:32px;
    min-width:0;

    align-items:center;

    gap:15px;
  }


  /* сама звезда чуть компактнее */
  .solution-path-star{
    width:10px;
    height:10px;

    flex-shrink:0;
  }


  .solution-path-num{
    font-size:9px;
    letter-spacing:.13em;
  }


  /* ВАЖНО:
     min-width:0 не даёт grid-item растягивать родителя */
  .solution-path-copy{
    width:100%;
    max-width:100%;
    min-width:0;

    padding:0;

    overflow:visible;
  }


  .solution-path h3{
    width:100%;
    max-width:100%;

    margin:0 0 18px;

    font-size:clamp(29px,8.5vw,42px);
    line-height:.98;

    /*
      защищает даже от очень длинных слов
    */
    overflow-wrap:anywhere;
    word-break:normal;
  }


  .solution-path p{
    width:100%;
    max-width:100%;

    margin:0;

    padding:0;

    font-size:14px;
    line-height:1.6;

    overflow-wrap:anywhere;
    word-break:normal;
  }


  /* glow не должен создавать визуальный overflow */
  .solution-path-copy::before{
    left:-25px;

    width:180px;
    height:130px;
  }


  /* на touch устройствах убираем движения текста */
  .solution-path-item:hover{
    transform:none;
  }


  .solution-path-item:hover h3,
  .solution-path-item:hover p{
    transform:none;
  }

}