.problem-map{
  position:relative;
}

/* центральная вертикальная ось */
.problem-axis{
  position:absolute;
  top:0;
  bottom:0;
  left:126px;
  width:1px;

  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(79,124,255,.18) 8%,
    rgba(79,124,255,.35) 50%,
    rgba(79,124,255,.18) 92%,
    transparent 100%
  );
}

.problem-axis-core{
  position:absolute;
  top:50%;
  left:50%;

  width:1px;
  height:45%;

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

  background:#4F7CFF;

  filter:blur(.2px);

  opacity:.35;
}


/* ОДНА ПРОБЛЕМА */
.problem-node{
  position:relative;

  display:grid;
  grid-template-columns:90px 72px minmax(0,1fr);
  gap:0;

  align-items:center;

  min-height:190px;

  border-bottom:1px solid rgba(255,255,255,.07);
}

.problem-node:first-of-type{
  border-top:1px solid rgba(255,255,255,.07);
}


/* номер */
.problem-node-number{
  align-self:start;

  padding-top:33px;

  color:rgba(106,150,255,.75);

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

  letter-spacing:.16em;
}


/* точка на оси */
.problem-node-point{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  height:100%;
}

.problem-node-point span{
  position:relative;
  z-index:3;

  width:9px;
  height:9px;

  border-radius:50%;

  background:#0B0F16;

  border:2px solid #4F7CFF;

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

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


/* горизонтальный сигнал вправо */
.problem-node-point::after{
  content:"";

  position:absolute;

  left:50%;

  width:calc(100% + 24px);
  height:1px;

  background:linear-gradient(
    90deg,
    rgba(79,124,255,.5),
    rgba(79,124,255,.12),
    transparent
  );

  transform:scaleX(.38);
  transform-origin:left center;

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


/* контент */
.problem-node-content{
  position:relative;

  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(260px,.65fr);

  gap:70px;

  align-items:center;

  padding:34px 20px 34px 30px;
}


/* очень мягкое свечение */
.problem-node-content::before{
  content:"";

  position:absolute;

  left:10%;
  top:50%;

  width:360px;
  height:120px;

  transform:translateY(-50%);

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

  border-radius:50%;

  filter:blur(70px);

  opacity:0;

  pointer-events:none;

  transition:opacity .4s ease;
}


.problem-node h3{
  position:relative;
  z-index:2;

  margin:0;

  max-width:650px;

  color:#F7F8FA;

  font-size:clamp(37px,4vw,62px);
  line-height:.94;

  font-weight:300;

  letter-spacing:-.055em;

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


.problem-node p{
  position:relative;
  z-index:2;

  margin:0;

  max-width:470px;

  color:#8F9BAD;

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

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


/* HOVER */
.problem-node:hover .problem-node-point span{
  background:#4F7CFF;

  transform:scale(1.25);

  box-shadow:
    0 0 0 9px rgba(79,124,255,.06),
    0 0 34px rgba(79,124,255,.55);
}

.problem-node:hover .problem-node-point::after{
  transform:scaleX(1);
}

.problem-node:hover .problem-node-content::before{
  opacity:1;
}

.problem-node:hover h3{
  transform:translateX(8px);
  color:#fff;
}

.problem-node:hover p{
  transform:translateX(5px);
  color:#B6C1D1;
}


/* тонкая маленькая метка справа */
.problem-node-content::after{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:5px;
  height:5px;

  transform:translateY(-50%);

  border-radius:50%;

  background:rgba(255,255,255,.14);

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

.problem-node:hover .problem-node-content::after{
  background:#4F7CFF;

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


/* TABLET */
@media(max-width:1000px){

  .problem-axis{
    left:96px;
  }

  .problem-node{
    grid-template-columns:60px 72px 1fr;
  }

  .problem-node-content{
    grid-template-columns:1fr;
    gap:14px;
  }

}


/* MOBILE */
@media(max-width:767px){

  .problem-map{
    margin-top:55px;
  }

  .problem-axis{
    left:35px;
  }

  .problem-node{
    grid-template-columns:0 70px 1fr;

    min-height:auto;
  }

  .problem-node-number{
    position:absolute;

    left:52px;
    top:24px;

    padding:0;

    font-size:10px;
  }

  .problem-node-point{
    grid-column:2;
  }

  .problem-node-point::after{
    width:58px;
  }
	
	.problem-node-content::before{
		width: 200px;
	}

  .problem-node-content{
    grid-column:3;

    padding:50px 0 28px 10px;

    gap:13px;
  }

  .problem-node h3{
    font-size:clamp(31px,9.5vw,45px);
  }

  .problem-node p{
    padding-right:8px;

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

  .problem-node-content::after{
    display:none;
  }

  .problem-node:hover h3,
  .problem-node:hover p{
    transform:none;
  }

}
.big-statement-light{
  position:relative;
  overflow:hidden;

  min-height:760px;

  display:flex;
  align-items:center;

  padding:clamp(110px,12vw,180px) 0;

  color:#0C1320;

  background:
    radial-gradient(
      circle at 79% 35%,
      rgba(255,255,255,.85),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 100%,
      rgba(79,124,255,.20),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      #E9F0FF 0%,
      #DDE8FF 42%,
      #EDF3FF 100%
    );

  border-top:1px solid rgba(49,95,214,.10);
  border-bottom:1px solid rgba(49,95,214,.14);
}