.join-grid{
  display:flex;
  justify-content:center;
  align-items:stretch;
}

.join-panel{
  position:relative;
  width:min(100%,920px);
  min-height:420px;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:20px;
  padding:58px clamp(24px,6vw,76px);
  text-align:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:32px;
  background:
    radial-gradient(circle at 0 0,rgba(231,45,130,.18),transparent 28%),
    radial-gradient(circle at 100% 100%,rgba(16,210,208,.15),transparent 30%),
    linear-gradient(145deg,rgba(34,23,32,.96),rgba(13,12,18,.98));
  box-shadow:0 26px 80px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);
}

.join-panel::before{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-140px;
  width:330px;
  height:330px;
  border-radius:50%;
  background:rgba(16,210,208,.13);
  pointer-events:none;
  z-index:-1;
}

.join-panel::after{
  content:"";
  position:absolute;
  top:-120px;
  left:-95px;
  width:250px;
  height:250px;
  border-radius:50%;
  background:rgba(231,45,130,.14);
  pointer-events:none;
  z-index:-1;
}

.join-kicker{
  margin:0;
  color:var(--cyan-2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.join-panel h2{
  max-width:760px;
  margin:0;
  font-size:clamp(34px,5vw,64px);
  line-height:1.02;
  letter-spacing:-.045em;
}

.join-panel>p:not(.join-kicker){
  max-width:620px;
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.join-panel .accent{
  color:#fff;
  font-weight:800;
}

.join-cta{
  width:fit-content;
  min-width:290px;
  justify-content:center;
  margin-top:8px;
  box-shadow:0 12px 30px rgba(16,210,208,.22);
}

@media (max-width:760px){
  .join-panel{
    min-height:390px;
    gap:18px;
    padding:42px 22px;
    border-radius:24px;
  }

  .join-panel h2{font-size:clamp(34px,10vw,48px)}
  .join-cta{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .join-panel{transition:none}
}