/* VDAI OS · интерактивные сферы. Самодостаточный модуль: токены заданы на .sx */
.sx{--sx-ink:#172128;--sx-muted:#53616a;--sx-line:#dce3e5;--sx-paper:#f5f7f8;--sx-panel:#fff;--sx-blue:#314d78;
  font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif;color:var(--sx-ink);margin:0 auto;max-width:1120px;padding:0 20px;box-sizing:border-box}
.sx *{box-sizing:border-box}
.sx-layout{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.sx-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.sx-stage{margin:0}}
.sx-stage{position:relative;width:100%;max-width:640px;aspect-ratio:1;margin:0 auto;border:1px solid var(--sx-line);border-radius:28px;background:#fff;overflow:hidden}
.sx-stage::before{content:"";position:absolute;inset:7%;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(23,33,40,.07) 0 1px,transparent 1px 64px),
  conic-gradient(from -90deg,rgba(31,111,92,.12),rgba(47,95,168,.12),rgba(184,68,43,.1),rgba(215,169,53,.12),rgba(106,76,160,.1),rgba(31,111,92,.12))}
.sx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:30%;min-width:150px;aspect-ratio:1;border:2px solid var(--sx-ink);border-radius:50%;
  background:rgba(255,255,255,.97);display:grid;place-items:center;text-align:center;padding:14px;box-shadow:0 14px 40px rgba(23,33,40,.12)}
.sx-core b{display:block;font-size:clamp(16px,2.2vw,21px);line-height:1.1;letter-spacing:-.03em}
.sx-core span{display:block;margin-top:6px;font-size:14px;line-height:1.3;color:var(--sx-muted)}
.sx-node{position:absolute;z-index:3;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:clamp(104px,19%,132px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--c),#fff 40%);background:#fff;padding:8px;cursor:pointer;text-align:center;display:grid;place-content:center;gap:2px;
  box-shadow:0 10px 26px rgba(23,33,40,.1);transition:transform .18s ease,border-color .18s,box-shadow .18s,background .18s;animation:sx-float 6s ease-in-out infinite;animation-delay:var(--d)}
.sx-node i{font-style:normal;font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--c);line-height:1}
.sx-node b{font-size:14px;line-height:1.15;letter-spacing:-.02em}
.sx-node:hover,.sx-node:focus-visible{border-color:var(--c);box-shadow:0 16px 40px rgba(23,33,40,.18)}
.sx-node[aria-expanded="true"]{background:color-mix(in srgb,var(--c),#fff 88%);border:2px solid var(--c);transform:translate(-50%,-50%) scale(1.1);animation-play-state:paused}
.sx-node:focus-visible,.sx-acc-btn:focus-visible,.sx-cta:focus-visible{outline:3px solid #426bad;outline-offset:3px}
@keyframes sx-float{0%,100%{margin-top:0}50%{margin-top:-6px}}
@media(prefers-reduced-motion:reduce){.sx-node{animation:none;transition:none}.sx-detail{animation:none!important}}
/* карточка-«ящик» */
.sx-detail{border:1px solid var(--sx-line);border-top:4px solid var(--c,var(--sx-blue));border-radius:24px;background:var(--sx-panel);padding:26px;box-shadow:0 18px 40px rgba(23,33,40,.07);animation:sx-in .28s ease}
@keyframes sx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sx-detail h3{font-size:24px;line-height:1.15;letter-spacing:-.04em;margin:0 0 8px}
.sx-detail p{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--sx-muted)}
.sx-label{display:block;margin:16px 0 8px;font-size:14px;font-weight:700;color:var(--sx-ink)}
.sx-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.sx-metrics li{border:1px solid var(--sx-line);border-radius:14px;padding:10px;background:var(--sx-paper)}
.sx-metrics b{display:block;font-size:18px;letter-spacing:-.03em;color:var(--c,var(--sx-blue))}
.sx-metrics span{display:block;margin-top:3px;font-size:14px;line-height:1.3;color:var(--sx-muted)}
.sx-proofs{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sx-proofs li{font-size:14px;line-height:1.45;padding-left:20px;position:relative}
.sx-proofs li::before{content:"✓";position:absolute;left:0;color:var(--c,#1f6f5c);font-weight:700}
.sx-note{margin-top:10px;font-size:14px;line-height:1.4;color:var(--sx-muted)}
.sx-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sx-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:50px;background:var(--sx-ink);color:#fff;font-size:15px;font-weight:650;text-decoration:none}
.sx-cta.alt{background:#fff;color:var(--sx-ink);border:1px solid var(--sx-ink)}
.sx-hint{margin-top:12px;text-align:center;font-size:14px;color:var(--sx-muted)}
/* мобильный режим: сфера → аккордеон */
.sx-acc{display:none;gap:10px}
.sx-acc-item{border:1px solid var(--sx-line);border-radius:20px;background:#fff;overflow:hidden}
.sx-acc-btn{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:12px 16px;background:none;text-align:left;font-size:16px;font-weight:700;letter-spacing:-.02em;cursor:pointer;border:0}
.sx-acc-btn i{font-style:normal;font-size:14px;font-weight:800;color:var(--c);letter-spacing:.08em}
.sx-acc-btn::after{content:"+";margin-left:auto;font-size:24px;color:var(--c)}
.sx-acc-btn[aria-expanded="true"]::after{content:"–"}
.sx-acc-item .sx-detail{border:0;border-top:1px solid var(--sx-line);border-radius:0;padding:16px}
@media(max-width:560px){
  .sx{padding:0 16px}
  .sx-layout{display:none}
  .sx-acc{display:grid}
  .sx-metrics{grid-template-columns:1fr}
  .sx-cta{width:100%}
}
#spheres .screen-query-badge{font-size:14px;text-transform:none;letter-spacing:0}