.section--engineer-guide-rd{
  padding-top:12px;
  padding-bottom:40px;
}

.engineer-guide-rd-card,
.engineer-guide-rd-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:300px;
  padding:38px 38px 42px;
  border-radius:34px;
  border:1px solid rgba(109,76,255,.08);
  touch-action:pan-y;
  background:
    radial-gradient(circle at 84% 74%, rgba(109,76,255,.06), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
  box-shadow:
    0 18px 50px rgba(0,0,0,.10),
    0 2px 8px rgba(0,0,0,.04);
}

.engineer-guide-rd-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.42) 46%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:0;
}

.engineer-guide-rd-content{
  position:relative;
  z-index:3;
  max-width:470px;
}

.engineer-guide-rd-heading-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}

.engineer-guide-rd-icon{
  width:52px;
  height:52px;
  border:1px solid rgba(109,76,255,.30);
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#6d4cff;
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(109,76,255,.08);
}

.engineer-guide-rd-icon svg{
  width:24px;
  height:24px;
  display:block;
}

.engineer-guide-rd-title{
  margin:0;
  color:#111111;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.engineer-guide-rd-copy{
  margin:0;
  max-width:440px;
  color:#5f5f68;
  font-size:1rem;
  line-height:1.8;
}

.engineer-guide-rd-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:30px;
  color:#5f3df5;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  transition:transform .22s ease, color .22s ease;
}

.engineer-guide-rd-link:hover{
  transform:translateY(-1px);
  color:#4420ea;
}

.engineer-guide-rd-link:focus-visible{
  outline:2px solid rgba(109,76,255,.35);
  outline-offset:4px;
  border-radius:999px;
}

.engineer-guide-particles{
  position:absolute;
  right:-8%;
  bottom:-12%;
  width:60%;
  height:300px;
  z-index:1;
  pointer-events:none;
  opacity:.95;
}

.engineer-guide-particles::before,
.engineer-guide-particles::after{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:repeat;
  opacity:.72;
  transform-origin:center;
  animation:engineerGuideFallbackDrift 18s ease-in-out infinite;
}

.engineer-guide-particles::before{
  background-image:radial-gradient(circle, rgba(109,76,255,.48) 0 1px, transparent 1.7px);
  background-size:18px 18px;
  transform:translate3d(4%, 8%, 0) rotate(-10deg) scaleX(1.14) scaleY(.72);
  clip-path:ellipse(48% 38% at 56% 56%);
}

.engineer-guide-particles::after{
  background-image:
    radial-gradient(circle, rgba(95,61,245,.38) 0 .95px, transparent 1.65px),
    radial-gradient(circle, rgba(183,168,255,.52) 0 .85px, transparent 1.45px);
  background-size:16px 16px, 22px 22px;
  background-position:0 0, 8px 9px;
  transform:translate3d(10%, 18%, 0) rotate(-16deg) scaleX(1.2) scaleY(.62);
  clip-path:ellipse(52% 34% at 58% 60%);
  animation-duration:22s;
  animation-direction:reverse;
}

.engineer-guide-particles.is-mounted::before,
.engineer-guide-particles.is-mounted::after{
  opacity:.08;
}

.engineer-guide-particles canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  position:relative;
  z-index:2;
}

@keyframes engineerGuideFallbackDrift{
  0%,100%{
    transform:translate3d(4%, 8%, 0) rotate(-10deg) scaleX(1.14) scaleY(.72);
  }
  50%{
    transform:translate3d(1%, 12%, 0) rotate(-6deg) scaleX(1.18) scaleY(.76);
  }
}

@media (max-width:900px){
  .engineer-guide-rd-card,
  .engineer-guide-rd-section{
    min-height:430px;
    padding:34px 28px 135px;
    border-radius:28px;
  }

  .engineer-guide-rd-content{
    max-width:100%;
  }

  .engineer-guide-rd-title{
    font-size:.9rem;
  }

  .engineer-guide-rd-copy{
    max-width:100%;
    font-size:.98rem;
    line-height:1.8;
  }

  .engineer-guide-particles{
    right:-24%;
    bottom:-22px;
    width:118%;
    height:250px;
    opacity:.78;
  }
}

@media (max-width:640px){
  .engineer-guide-rd-card,
  .engineer-guide-rd-section{
    padding:30px 22px 122px;
  }

  .engineer-guide-rd-heading-row{
    gap:14px;
    margin-bottom:20px;
  }

  .engineer-guide-rd-icon{
    width:48px;
    height:48px;
    border-radius:15px;
  }

  .engineer-guide-rd-copy{
    font-size:.95rem;
    line-height:1.72;
  }

  .engineer-guide-rd-link{
    margin-top:26px;
    font-size:.84rem;
  }

  .engineer-guide-particles{
    right:-34%;
    width:132%;
    height:230px;
  }
}

@media (prefers-reduced-motion:reduce){
  .engineer-guide-rd-link{
    transition:none;
  }

  .engineer-guide-particles::before,
  .engineer-guide-particles::after{
    animation:none;
  }
}
