.home-developers{
  --guide-color:var(--color-surface-border-quiet);
}

.s08-container{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.s08-rows{
  display:flex;
  flex-direction:column;
  gap:40px;
}

@media (min-width:640px){
  .s08-container,
  .s08-rows{
    gap:48px;
  }
}

@media (min-width:940px){
  .s08-container,
  .s08-rows{
    gap:64px;
  }
}

.s08a-intro{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.s08a-title{
  display:block;
  max-width:856px;
  padding-right:16px;
  text-wrap:pretty;
}

.s08a-lead,
.s08a-sub{
  display:inline;
  margin:0;
  text-wrap:pretty;
}

@media (min-width:640px){
  .s08a-intro{
    gap:32px;
  }

  .s08a-title{
    padding-right:40px;
  }
}

@media (min-width:940px){
  .s08a-title{
    padding-right:8px;
  }
}

.s08b-block{
  display:flex;
  flex-direction:column;
  gap:56px;
}

.s08b-head{
  display:block;
  max-width:752px;
  padding-right:16px;
  text-wrap:pretty;
}

.s08b-lead,
.s08b-sub{
  display:inline;
  margin:0;
  text-wrap:pretty;
}

@media (min-width:640px){
  .s08b-block{
    gap:64px;
  }

  .s08b-head{
    padding-right:40px;
  }
}

.s08b-sys{
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  container-name:s08b;
}

.s08b-dots{
  position:absolute;
  inset:-60px -8px -80px -8px;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect width='2' height='2' fill='%2322467e'/></svg>");
  background-size:10px 10px;
  opacity:.46;
  -webkit-mask-image:linear-gradient(180deg,rgba(217,217,217,0),#737373 50%,rgba(217,217,217,0));
  mask-image:linear-gradient(180deg,rgba(217,217,217,0),#737373 50%,rgba(217,217,217,0));
}

.s08b-figure{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  max-width:1000px;
  height:530px;
  margin:auto;
}

.s08b-line,
.s08b-links{
  position:absolute;
  overflow:hidden;
  fill:none;
  vertical-align:middle;
}

.s08b-line path,
.s08b-links path{
  fill:none;
  stroke:var(--color-core-brandDark-500);
  stroke-dasharray:2 2;
}

.s08b-line--wide{
  display:none;
  inset:0;
  width:100%;
  height:100%;
}

.s08b-line--narrow{
  left:0;
  top:54%;
  width:100%;
  height:83px;
}

.s08b-left{
  position:absolute;
  top:52%;
  left:0;
}

.s08b-apps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:4px;
  width:112px;
  height:76px;
  padding:4px;
  border-radius:4px;
  background-color:var(--color-core-neutralDark-950);
}

.s08b-tile{
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  border:1px dashed var(--color-core-brandDark-700);
  border-radius:4px;
  perspective:250px;
}

.s08b-flip{
  position:absolute;
  inset:-1px;
  z-index:2;
  transform-style:preserve-3d;
  transition:transform 2s cubic-bezier(.9,0,.1,1);
}

.s08b-face{
  position:absolute;
  inset:0;
  border-radius:4px;
  background-size:100% 100%;
  backface-visibility:hidden;
}

.s08b-face--back{
  transform:rotateX(180deg);
}

.s08b-face[data-kind="1"]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='9' fill='%230060da'/%3E%3C/svg%3E")}
.s08b-face[data-kind="2"]{background-color:#4e93fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='8' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E")}
.s08b-face[data-kind="3"]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 9 31 20 20 31 9 20Z' fill='%23032354'/%3E%3C/svg%3E")}
.s08b-face[data-kind="4"]{background-color:#9dc3fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M11 12h18v4H11zM11 18h18v4H11zM11 24h11v4H11z' fill='%23002966'/%3E%3C/svg%3E")}
.s08b-face[data-kind="5"]{background-color:#e4ecf7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 10 31 29H9Z' fill='%230060da'/%3E%3C/svg%3E")}
.s08b-face[data-kind="6"]{background-color:#0060da;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='12' y='12' width='16' height='16' rx='3' fill='%23fff'/%3E%3C/svg%3E")}
.s08b-face[data-kind="7"]{background-color:#809cc8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M18 9h4v9h9v4h-9v9h-4v-9H9v-4h9Z' fill='%23051938'/%3E%3C/svg%3E")}
.s08b-face[data-kind="8"]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 22h5v8h-5zM17.500 16h5v14h-5zM25 10h5v20h-5z' fill='%234e93fe'/%3E%3C/svg%3E")}
.s08b-face[data-kind="9"]{background-color:#9dc3fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 8 23 17 32 20 23 23 20 32 17 23 8 20 17 17Z' fill='%23051938'/%3E%3C/svg%3E")}
.s08b-face[data-kind="10"]{background-color:#9dc3fe;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 27 20 12 28 27Z' fill='none' stroke='%23051938' stroke-width='1.500'/%3E%3Ccircle cx='12' cy='27' r='3' fill='%23051938'/%3E%3Ccircle cx='20' cy='12' r='3' fill='%23051938'/%3E%3Ccircle cx='28' cy='27' r='3' fill='%23051938'/%3E%3C/svg%3E")}

.s08b-chart{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:88px 75px 266px 100px;
}

.s08b-systems{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  height:fit-content;
  padding:8px;
  border-radius:6px;
  background-color:var(--color-core-neutralDark-950);
}

.s08b-row{
  display:grid;
  gap:8px;
}

.s08b-row--first{
  grid-template-columns:auto auto auto;
}

.s08b-row--second{
  grid-template-columns:1fr 1fr;
}

.s08b-box{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:32px;
  max-height:32px;
  border:1px dashed var(--color-core-brandDark-700);
  border-radius:4px;
  transition:border-color .5s cubic-bezier(.4,0,.2,1);
}

.s08b-box.is-on{
  border-color:transparent;
}

.s08b-chip{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:32px;
  padding:0 8px;
  border-radius:4px;
  background-color:var(--color-core-brandDark-800);
  color:var(--color-core-neutralDark-25);
  font-size:12px;
  font-weight:var(--fw-400);
  line-height:normal;
  white-space:nowrap;
  box-shadow:0 14.088px 21.132px -14.088px rgba(0,7,32,.25),0 8.453px 16.906px -8.453px rgba(0,0,0,.1);
  opacity:0;
  scale:.75;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),scale .5s cubic-bezier(.4,0,.2,1);
}

.s08b-box.is-on .s08b-chip{
  opacity:1;
  scale:1;
}

.s08b-top{
  position:relative;
  display:flex;
  justify-content:center;
}

.s08b-links{
  left:50%;
  z-index:-1;
  transform:translateX(-50%);
}

.s08b-links--wide{
  display:none;
}

.s08b-links--narrow{
  bottom:-265px;
}

.s08b-anchor{
  position:absolute;
  top:43px;
  bottom:0;
  left:50%;
  z-index:1;
  display:grid;
  grid-template-columns:185px 185px;
  width:370px;
  transform:translateX(-50%);
}

.s08b-action{
  position:relative;
  display:flex;
  align-items:center;
  justify-self:center;
  width:fit-content;
  height:32px;
  padding:6px 16px;
  border-radius:4px;
  background-color:var(--color-core-brandDark-600);
  color:var(--color-core-neutralDark-25);
  font-size:12px;
  font-weight:var(--fw-400);
  line-height:normal;
  white-space:nowrap;
}

.s08b-middle{
  position:absolute;
  top:52%;
  right:0;
}

.s08b-action--market{
  display:none;
}

.s08b-platform{
  position:absolute;
  top:265px;
  left:50%;
  transform:translate(-50%,-32px);
}

.s08b-platform-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  border-radius:6px;
  background-image:linear-gradient(288.31deg,#051938 -6.87%,#004cb0 105.95%);
  color:#fff;
  font-size:16px;
  font-weight:var(--fw-500);
  line-height:normal;
}

.s08b-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.s08b-psp-links{
  position:absolute;
  left:50%;
  bottom:0;
  overflow:hidden;
  fill:none;
  transform:translateX(-50%);
  vertical-align:middle;
}

.s08b-psp-base path{
  stroke:#012760;
  stroke-dasharray:2 2;
}

.s08b-psp-live path{
  stroke:var(--color-core-brandDark-500);
  stroke-dasharray:2 2;
}

.s08b-reveal{
  fill:none;
  stroke:#fff;
  stroke-width:4;
  stroke-dasharray:120;
  stroke-dashoffset:120;
  transition:stroke-dashoffset 1s cubic-bezier(.66,0,.34,1);
}

.s08b-reveal.is-on{
  stroke-dashoffset:0;
  transition-duration:2s;
  transition-delay:1.25s;
  transition-timing-function:cubic-bezier(.78,0,.22,1);
}

mask:nth-of-type(2) .s08b-reveal.is-on,
mask:nth-of-type(3) .s08b-reveal.is-on{
  transition-duration:3.25s;
  transition-delay:1.75s;
  transition-timing-function:cubic-bezier(.25,1,.5,1);
}

mask:nth-of-type(3) .s08b-reveal.is-on{
  transition-delay:2.25s;
}

.s08b-psp{
  position:relative;
  display:flex;
  gap:8px;
  align-self:flex-end;
  justify-self:center;
}

.s08b-psp-box{
  border:1px dashed #012760;
  border-radius:4px;
  transition:border-color .5s linear;
}

.s08b-psp-box.is-on{
  border-color:transparent;
  transition-delay:2.5s;
}

.s08b-psp-box.is-on:nth-child(3){
  transition-delay:3s;
}

.s08b-psp-chip{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  overflow:hidden;
  border-radius:4px;
  background-color:var(--color-core-brandDark-800);
  color:var(--color-core-neutralDark-25);
  font-size:12px;
  line-height:normal;
  opacity:0;
  transform:scale(.75);
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);
}

.s08b-psp-box.is-on .s08b-psp-chip{
  opacity:1;
  transform:scale(1);
  transition-delay:2.5s;
}

.s08b-psp-box.is-on:nth-child(3) .s08b-psp-chip{
  transition-delay:3s;
}

.s08b-right{
  position:absolute;
  top:68%;
  right:6%;
}

@container s08b (min-width:660px){
  .s08b-figure{
    width:fit-content;
    height:386px;
  }

  .s08b-line--narrow{
    top:50%;
  }

  .s08b-left{
    top:44%;
  }

  .s08b-apps{
    gap:8px;
    width:152px;
    height:105px;
    padding:8px;
    border-radius:6px;
  }

  .s08b-tile{
    width:40px;
    height:40px;
  }

  .s08b-chart{
    max-width:696px;
    grid-template-rows:48px 75px 160px auto;
  }

  .s08b-systems{
    flex-direction:row;
    height:48px;
  }

  .s08b-chip{
    padding:0 16px;
    font-size:14px;
  }

  .s08b-links--narrow{
    display:none;
  }

  .s08b-links--wide{
    display:block;
    bottom:-140px;
  }

  .s08b-anchor{
    grid-template-columns:308px 308px;
    width:616px;
  }

  .s08b-action,
  .s08b-psp-chip{
    font-size:14px;
  }

  .s08b-middle{
    top:47%;
  }

  .s08b-platform{
    top:193px;
    transform:translate(-50%,-60px);
  }
}

@container s08b (min-width:960px){
  .s08b-figure{
    grid-template-columns:152px auto 152px;
  }

  .s08b-line--narrow{
    display:none;
  }

  .s08b-line--wide{
    display:block;
  }

  .s08b-left{
    position:relative;
    top:auto;
    display:flex;
    align-items:center;
  }

  .s08b-chart{
    grid-template-rows:48px 75px 136px 32px auto;
  }

  .s08b-middle{
    position:relative;
    top:auto;
    right:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 36px;
  }

  .s08b-action--market{
    display:flex;
  }

  .s08b-right{
    position:relative;
    top:auto;
    right:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
}

@media (prefers-reduced-motion:reduce){
  .s08b-wrap,
  .s08b-flip,
  .s08b-box,
  .s08b-chip,
  .s08b-reveal,
  .s08b-psp-box,
  .s08b-psp-chip{
    transition:none;
  }
}