/* Chat story: the real app screen, framed by a restrained connection motif. */
.social-section {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(26px, 5vw, 76px);
  margin: 30px 0 34px;
  padding: clamp(34px, 5vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(212, 172, 204, .19);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 19% 40%, rgba(182, 88, 129, .14), transparent 38%),
    radial-gradient(ellipse at 90% 14%, rgba(140, 115, 196, .11), transparent 42%),
    linear-gradient(125deg, #1c1923 4%, #15151d 57%, #1a1823);
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 25px 62px rgba(0, 0, 0, .21);
}

.social-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 220, 239, .5) 0 1px, transparent 1.5px);
  background-size: 137px 131px;
  background-position: 36px 23px;
  opacity: .16;
  pointer-events: none;
}

.social-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 720px;
  padding-bottom: 32px;
}

.social-stage::before {
  content: "";
  position: absolute;
  width: min(80%, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 87, 134, .2), rgba(128, 91, 179, .08) 50%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.social-orbit {
  position: absolute;
  inset: 7% 3%;
  border: 1px solid rgba(196, 144, 184, .18);
  border-radius: 50%;
  transform: rotate(-16deg);
  pointer-events: none;
}

.social-orbit::before {
  content: "";
  position: absolute;
  inset: 7% 10%;
  border: 1px dashed rgba(168, 142, 197, .14);
  border-radius: 50%;
}

.social-orbit-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(255, 215, 239, .72);
  border-radius: 50%;
  background: #b96895;
  box-shadow: 0 0 16px rgba(228, 118, 164, .54);
}

.social-orbit .node-one { top: 14%; left: 14%; }
.social-orbit .node-two { top: 44%; right: -4px; width: 5px; height: 5px; background: #a78cc7; }
.social-orbit .node-three { bottom: 10%; left: 21%; width: 4px; height: 4px; background: #a78cc7; }
.social-glint { position: absolute; top: 18%; right: 7%; width: 23px; height: 23px; fill: none; stroke: #bf9eca; stroke-width: 1.1; opacity: .66; }

.social-section .gater-device.social-device {
  --device-width: clamp(285px, 26vw, 326px);
  --device-tilt: -1.5deg;
  --device-shadow-blur: 70px;
  --device-layer: 1;
  justify-self: center;
  box-shadow:
    0 0 0 1px rgba(218, 212, 226, .16),
    0 0 0 3px rgba(190, 123, 167, .12),
    0 30px 70px rgba(0, 0, 0, .52),
    0 16px 40px rgba(111, 41, 83, .18),
    inset 0 1px rgba(255, 255, 255, .22);
}

.social-copy { position: relative; z-index: 1; min-width: 0; }
.social-copy h2 { max-width: 560px; margin: 17px 0 21px; font-size: clamp(2.35rem, 4.1vw, 3.7rem); line-height: 1.04; }
.social-copy > p { max-width: 510px; margin: 0; color: #c4bdcb; font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.75; }
.social-signals { display: flex; flex-wrap: wrap; gap: 12px 21px; max-width: 520px; margin: 31px 0 0; padding: 21px 0 0; border-top: 1px solid rgba(204, 171, 204, .2); list-style: none; }
.social-signals li { display: inline-flex; align-items: center; gap: 8px; color: #e6d9e7; font-size: .86rem; font-weight: 650; white-space: nowrap; }
.social-signals .ui-icon { width: 19px; height: 19px; color: #e28aac; stroke-width: 1.7; }
.social-signals li:nth-child(2) .ui-icon { color: #b09ad8; }

@media (max-width: 900px) {
  .social-section { gap: 20px; padding: 35px; }
  .social-stage { min-height: 665px; }
  .social-section .gater-device.social-device { --device-width: min(34vw, 295px); }
}

@media (max-width: 760px) {
  .social-section { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 18px 0 28px; padding: 35px 24px 30px; border-radius: 25px; }
  .social-copy { order: 0; }
  .social-copy h2 { max-width: 560px; margin: 13px 0 14px; font-size: clamp(2.05rem, 7vw, 3.15rem); }
  .social-copy > p { line-height: 1.65; }
  .social-signals { gap: 11px 17px; margin-top: 21px; padding-top: 17px; }
  .social-stage { order: 1; min-height: 0; padding: 32px 0 42px; }
  .social-orbit { inset: 7% 0 9%; }
  .social-section .gater-device.social-device { --device-width: min(76vw, 320px); --device-tilt: 0deg; }
}

@media (max-width: 430px) {
  .social-section { padding: 29px 18px 25px; }
  .social-copy h2 { font-size: clamp(1.95rem, 8.2vw, 2.45rem); }
  .social-signals { column-gap: 16px; }
  .social-signals li { font-size: .8rem; }
  .social-section .gater-device.social-device { --device-width: min(76vw, 300px); }
}