.buddy-section{
  position:relative;
  padding:84px 0;
  border-top:1px solid var(--hairline);
}
.buddy-section > .wrap{position:relative;z-index:1;}
.buddy-section > .wrap > .section-eyebrow:first-child{
  margin-bottom:28px;
  text-align:center;
}

.buddy-section .buddy-panel{
  max-width:1000px;
  margin:0 auto;
  padding:36px 22px 30px;
  border-radius:20px;
  border:1px solid rgba(123,194,196,0.14);
  background:radial-gradient(120% 90% at 50% -10%, #0e2c34 0%, var(--buddy-ink-bg) 55%, #040f13 100%);
}
.buddy-section header.hd{
  display:flex;flex-direction:column;gap:8px;align-items:center;
  margin-bottom:10px;padding-top:28px;
  text-align:center;
}
.buddy-section .buddy-eyebrow{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--buddy-aqua);
  opacity:.85;
}
.buddy-section h2.buddy-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(28px,4.8vw,46px);
  line-height:1.06;
  margin:0;
  letter-spacing:-.01em;
  color:var(--buddy-text);
}
.buddy-section h2.buddy-title .g{color:var(--buddy-aqua);}
.buddy-section .sub{
  color:var(--buddy-muted);
  font-family:var(--font-body);
  font-size:clamp(15px,1.9vw,18px);
  max-width:60ch;
  line-height:1.5;
  margin:0 auto;
  text-align:center;
}
.buddy-section .stage{position:relative;width:100%;margin-top:6px;}
.buddy-section svg.scene{width:100%;height:auto;display:block;overflow:visible;}
.buddy-section .caption{
  position:absolute;left:50%;top:77%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(33,114,133,.20),rgba(11,34,41,.55));
  border:1px solid rgba(123,194,196,.28);
  border-radius:999px;padding:9px 16px 9px 12px;backdrop-filter:blur(6px);
  font-size:14px;max-width:min(88%,620px);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;box-shadow:0 8px 30px rgba(0,0,0,.35);
  transition:opacity .35s ease, transform .35s ease;
}
.buddy-section .caption .who{
  font-family:var(--font-display);
  font-weight:600;font-size:12px;
  letter-spacing:.04em;color:#07171c;background:var(--buddy-aqua);
  padding:3px 9px;border-radius:999px;flex:none;
}
.buddy-section .caption .who.you{background:var(--buddy-out);color:#2a1a00;}
.buddy-section .caption .txt{color:var(--buddy-text);overflow:hidden;text-overflow:ellipsis;}
.buddy-section .foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:14px;
}
.buddy-section .legend{
  display:flex;flex-wrap:wrap;gap:18px;
  font-size:12.5px;color:var(--buddy-muted);
  font-family:var(--font-body);
}
.buddy-section .legend b{color:var(--buddy-text);font-weight:600;}
.buddy-section .key{display:inline-flex;align-items:center;gap:7px;}
.buddy-section .key .dot{width:10px;height:10px;border-radius:50%;}
.buddy-section .key .dot.out{background:var(--buddy-out);box-shadow:0 0 10px var(--buddy-out);}
.buddy-section .key .dot.back{background:var(--buddy-back);box-shadow:0 0 10px var(--buddy-back);}
.buddy-section .key .dot.piers{background:var(--buddy-aqua);}
.buddy-section .ctrl{display:flex;gap:8px;}
.buddy-section button.btn{
  font-family:var(--font-display);
  font-weight:500;font-size:13px;color:var(--buddy-text);
  background:var(--buddy-card);border:1px solid rgba(123,194,196,.28);border-radius:9px;
  padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s;
}
.buddy-section button.btn:hover{background:rgba(123,194,196,.14);border-color:var(--buddy-aqua);}
.buddy-section button.btn:focus-visible{outline:2px solid var(--buddy-aqua);outline-offset:2px;}
.buddy-section .arm-label{font-family:var(--font-display);font-weight:600;font-size:15px;fill:var(--buddy-text);}
.buddy-section .arm-desc{font-family:var(--font-body);font-weight:400;font-size:11.5px;fill:var(--buddy-muted);}
.buddy-section .node-name{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;}

@media (max-width:560px){
  .buddy-section .caption{white-space:normal;font-size:12.5px;}
  .buddy-section .arm-desc{display:none;}
}
@media (max-width:640px){
  .buddy-section{padding:64px 0;}
  .buddy-section .buddy-panel{padding:28px 16px 24px;}
  .buddy-section header.hd{padding-top:20px;}
}
@media (prefers-reduced-motion: reduce){
  .buddy-section *{transition:none !important;}
}