.sec-ring{--bg:#011614;
  --neon:#7AFF9B;
  --accent:#7AFF9B;          /* retints to the active agent */
  --text:#E7F0E6;
  --muted:#8FA79B;
  --dim:#5D7268;
  --hair:rgba(122,255,155,.14);
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --spring:cubic-bezier(.22,1.12,.34,1);
  --ease:cubic-bezier(.22,.7,.28,1);
  --suit:92px;                 /* bubble diameter — JS drives this off the viewport */}
.sec-ring *{box-sizing:border-box;margin:0;padding:0}
/* clip-x only: the wrapped strip and the glow must never widen the document */
.sec-ring .ring-section{position:relative;padding:110px 0 120px;isolation:isolate;overflow-x:clip}
.sec-ring #ring-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* The glow lives INSIDE .ring now, concentric with the moon and sized from
   it. It used to be a child of the section pinned at `top:56%` — an eyeballed
   figure that only roughly coincided with the ring's centre, so the halo sat
   off the moon, and it needed JS to chase the ring whenever a card opened.
   Parented to .ring it is centred by construction and inherits the shift. */
.sec-ring .core-glow{
  position:absolute;z-index:0;pointer-events:none;
  width:var(--glow);height:var(--glow);
  left:calc(var(--glow) / -2);top:calc(var(--glow) / -2);
  background:radial-gradient(circle,
    rgba(122,255,155,.10) 0%,
    rgba(122,255,155,.045) 30%,
    rgba(4,255,218,.02) 48%,
    transparent 68%);
}
.sec-ring .wrap{position:relative;z-index:2;max-width:1360px;margin:0 auto;padding:0 56px}
/* ── headline ─────────────────────────────────────────── */
.sec-ring .head{text-align:center;max-width:700px;margin:0 auto 40px}
.sec-ring .head h2{font-size:clamp(36px,4.2vw,60px);line-height:1.06;letter-spacing:-.025em;font-weight:500}
.sec-ring .head h2 em{font-style:normal;color:var(--accent);transition:color .5s var(--ease)}
.sec-ring .head p{margin:18px auto 0;font-size:18px;line-height:1.55;color:var(--muted);font-weight:300;max-width:520px}
/* ── stage ────────────────────────────────────────────── */
.sec-ring .stage{position:relative;height:760px;cursor:grab;touch-action:pan-y}
.sec-ring .stage.grabbing{cursor:grabbing}
.sec-ring .stage .panel{cursor:auto}
.sec-ring .ring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translateX(0);
  transition:transform .82s var(--spring);
}
.sec-ring .stage.open .ring{transform:translateX(var(--shift))}
/* the moon. --moon is written from measure() so it tracks the ring radius
   at every viewport, the same way --suit does for the bubbles.
   z-index 1: under the orbit line (4), the hub and the agents (20), so the
   crew reads as being in front of it rather than embedded in it. */
.sec-ring .moon{
  position:absolute;z-index:1;pointer-events:none;
  /* .ring is a 0x0 positioning anchor, so any inherited `max-width:100%`
     (the composed page's reset has one) resolves to 0 and the moon collapses
     to a 0-wide sliver. Opt out explicitly. */
  max-width:none;
  width:var(--moon);height:var(--moon);
  left:calc(var(--moon) / -2);top:calc(var(--moon) / -2);
  border-radius:50%;
  /* A restrained halo. The thing that used to read as a hard ring here was
     NOT this — it was 13px of dark background baked into the exported plate
     between the limb (r199) and the alpha mask (r212), which rendered as a
     dark disc sitting under the moon. The asset is cropped to the limb now,
     so there is nothing to hide and the glow can stay subtle.
     drop-shadow follows the element's ALPHA, not its box, so it hugs the disc
     and cannot introduce an edge of its own. */
  filter:saturate(.85) brightness(.92)
         drop-shadow(0 0 30px rgba(180,255,224,.20))
         drop-shadow(0 0 100px rgba(122,255,155,.11));
  opacity:.95;
}
.sec-ring .stage.open .moon{opacity:.5;transition:opacity .5s var(--ease)}
.sec-ring .orbit{position:absolute;pointer-events:none;z-index:4;overflow:visible}
.sec-ring .orbit .path{fill:none;stroke:rgba(122,255,155,.19);stroke-width:1;stroke-dasharray:2 8;stroke-linecap:round;
  transition:stroke .5s var(--ease)}
/* short arc seated on the orbit beneath the OPEN agent only */
.sec-ring #ring-segs, .sec-ring .orbit .seg{transform-box:view-box}
.sec-ring .orbit .seg{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;opacity:0;
  transition:opacity .4s var(--ease),stroke .45s var(--ease)}
.sec-ring .orbit .seg.on{opacity:1;filter:drop-shadow(0 0 7px var(--accent))}
/* hub */
.sec-ring .hub{
  position:absolute;width:250px;height:250px;border-radius:50%;z-index:6;pointer-events:none;
  container-type:inline-size;
  border:1px solid rgba(122,255,155,.2);
  background:radial-gradient(circle at 50% 40%,rgba(18,53,53,.9),rgba(1,22,20,.55));
  display:grid;place-items:center;text-align:center;
  transition:opacity .45s var(--ease),transform .6s var(--spring);
}
.sec-ring .stage.open .hub{opacity:0;transform:scale(.86)}
.sec-ring .hub .k{font-family:var(--mono);font-size:max(9px,4cqi);letter-spacing:.2em;color:var(--accent);transition:color .5s var(--ease)}
.sec-ring .hub .t{font-size:max(13px,7.6cqi);font-weight:500;line-height:1.2;margin-top:3.6cqi}
.sec-ring .hub .s{font-size:max(10px,5cqi);color:var(--muted);font-weight:300;margin-top:2.8cqi}
/* ── agent nodes ──────────────────────────────────────── */
.sec-ring .node{position:absolute;left:0;top:0;width:0;height:0;z-index:20;will-change:transform}
.sec-ring .node .bob{position:absolute;left:calc(var(--suit) / -2);top:calc(var(--suit) / -2);width:var(--suit);
  display:flex;flex-direction:column;align-items:center;cursor:pointer}
.sec-ring .node .suit{
  position:relative;width:var(--suit);height:var(--suit);border-radius:50%;
  /* transparent, not a dark disc: the avatar brings its own light plate, and
     a fill behind it just showed as a rim where the two circles disagreed */
  border:1.5px solid rgba(122,255,155,.32);background:transparent;
  display:grid;place-items:center;
  transition:border-color .35s var(--ease),box-shadow .5s var(--ease),background .35s var(--ease);
}
.sec-ring .node .suit img{width:100%;height:100%;display:block;border-radius:50%;max-width:none}
.sec-ring .node .tag{margin-top:11px;white-space:nowrap;text-align:center;
  font-size:clamp(11px,.92vw,13px);font-weight:500;color:#9DB3A6;
  transition:color .35s var(--ease)}
.sec-ring .node .tag small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--dim);margin-top:4px;font-weight:400}
.sec-ring .node .bob:hover .suit{border-color:rgba(122,255,155,.8);box-shadow:0 0 26px rgba(122,255,155,.25)}
.sec-ring .node.sel .suit{border-color:var(--accent);box-shadow:0 0 0 5px rgba(122,255,155,.08),0 0 40px -4px var(--accent)}
.sec-ring .node.sel .tag{color:var(--accent)}
.sec-ring .stage.open .node{opacity:.34;transition:opacity .45s var(--ease)}
.sec-ring .stage.open .node.sel{opacity:1;z-index:22}
/* ── card ─────────────────────────────────────────────── */
.sec-ring .panel{
  /* display:none until live — visibility:hidden would keep its box in the layout */
  position:absolute;z-index:40;display:none;opacity:0;
  border:1px solid var(--hair);
  background:linear-gradient(168deg,rgba(20,58,54,.72),rgba(1,22,20,.95));
  backdrop-filter:blur(14px);
  box-shadow:0 50px 110px -55px #000,0 0 0 1px rgba(122,255,155,.05) inset;
  padding:clamp(24px,2.4vw,34px) clamp(24px,2.7vw,38px) clamp(22px,2.1vw,30px);
  border-radius:340px;
  transform-origin:50% 50%;
  will-change:transform,opacity,border-radius;
}
.sec-ring .panel.live{display:block}
.sec-ring .panel.anim{transition:transform .72s var(--spring),opacity .34s var(--ease),border-radius .72s var(--spring)}
.sec-ring .panel.shown{opacity:1;transform:none;border-radius:22px}
/* retract is faster and eases IN — it should feel sucked back, not eased out */
.sec-ring .panel.fast{transition:transform .34s cubic-bezier(.55,0,.85,.35),opacity .3s var(--ease),border-radius .34s cubic-bezier(.55,0,.85,.35)}
.sec-ring .pTop{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sec-ring .count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.sec-ring .count b{color:var(--accent);font-weight:400;transition:color .5s var(--ease)}
.sec-ring .close{width:32px;height:32px;border-radius:50%;border:1px solid rgba(122,255,155,.22);background:transparent;
  color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:border-color .2s,color .2s,transform .2s}
.sec-ring .close:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
.sec-ring .close svg{width:12px;height:12px}
.sec-ring .idhead{display:flex;align-items:center;gap:15px;margin-top:20px}
.sec-ring .idhead .sm{width:clamp(46px,3.9vw,56px);height:clamp(46px,3.9vw,56px);border-radius:50%;flex:none;
  border:1.5px solid var(--accent);
  background:rgba(1,22,20,.9);display:grid;place-items:center;transition:border-color .5s var(--ease)}
.sec-ring .idhead .sm svg{width:82%;height:82%}
.sec-ring .idhead h3{font-size:clamp(22px,2.1vw,29px);font-weight:500;letter-spacing:-.02em;line-height:1.08}
.sec-ring .idhead p{font-size:clamp(12px,.95vw,13px);color:var(--muted);margin-top:4px;font-weight:300;font-family:var(--mono);letter-spacing:.04em}
.sec-ring .lede{margin-top:clamp(14px,1.5vw,20px);font-size:clamp(14px,1.18vw,16px);line-height:1.58;color:#CDDECD;font-weight:300}
.sec-ring .rule{height:1px;background:var(--hair);margin:clamp(15px,1.6vw,22px) 0 clamp(13px,1.3vw,18px)}
.sec-ring .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);margin-bottom:clamp(9px,1vw,13px)}
.sec-ring .does{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.85vw,11px) 22px}
.sec-ring .does li{display:flex;gap:10px;font-size:clamp(12.5px,1.03vw,14px);line-height:1.42;color:#C2D3C2;font-weight:300}
.sec-ring .does li svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--accent);transition:color .5s var(--ease)}
.sec-ring .chips{display:flex;flex-wrap:wrap;gap:7px}
.sec-ring .chips span{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid rgba(122,255,155,.19);
  color:var(--muted);background:rgba(122,255,155,.03)}
.sec-ring .quote{margin-top:clamp(15px,1.7vw,22px);padding:14px 17px;border-left:2px solid var(--accent);
  background:rgba(122,255,155,.05);
  border-radius:0 8px 8px 0;font-size:clamp(13.5px,1.1vw,15px);font-weight:500;color:#E4F5E4;line-height:1.4;
  transition:border-color .5s var(--ease)}
.sec-ring .pFoot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(17px,1.8vw,24px)}
.sec-ring .cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#022018;border:0;border-radius:10px;
  padding:13px 22px;font-family:var(--sans);font-size:14.5px;font-weight:500;cursor:pointer;
  transition:transform .18s var(--spring),box-shadow .25s,background .5s var(--ease)}
.sec-ring .cta:hover{transform:translateY(-2px)}
.sec-ring .cta svg{width:14px;height:14px}
.sec-ring .arrows{display:flex;gap:8px}
.sec-ring .step{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid rgba(122,255,155,.22);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sec-ring .step:hover{border-color:var(--accent);color:var(--accent);background:rgba(122,255,155,.06)}
.sec-ring .step svg{width:13px;height:13px}
/* content stagger */
.sec-ring .panel .body{opacity:0;transition:opacity .3s var(--ease)}
.sec-ring .panel.shown .body{opacity:1;transition-delay:.16s}
/* contents slide in from the right as the shell grows out of its bubble */
.sec-ring .panel [data-s]{opacity:0;transform:translate(34px,6px)}
.sec-ring .panel.shown [data-s]{opacity:1;transform:none;
  transition:opacity .46s var(--ease),transform .62s var(--spring)}
.sec-ring .panel.shown [data-s="1"]{transition-delay:.20s}
.sec-ring .panel.shown [data-s="2"]{transition-delay:.27s}
.sec-ring .panel.shown [data-s="3"]{transition-delay:.34s}
.sec-ring .panel.shown [data-s="4"]{transition-delay:.41s}
.sec-ring .panel.shown [data-s="5"]{transition-delay:.48s}
/* hint — same treatment as the section headline, just smaller */
.sec-ring .hint{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:290px;
  font-size:clamp(24px,2.4vw,34px);font-weight:500;line-height:1.08;letter-spacing:-.025em;
  color:var(--text);
  transition:opacity .38s var(--ease),transform .55s var(--spring)}
.sec-ring .hint em{font-style:normal;color:var(--accent);transition:color .5s var(--ease)}
.sec-ring .stage.open .hint{opacity:0;transform:translate(-32px,-50%);pointer-events:none}
/* ── mobile ───────────────────────────────────────────── */
@media (max-width:1024px){.sec-ring .wrap{padding:0 20px}
.sec-ring .ring-section{padding:70px 0 80px}
.sec-ring .head{margin-bottom:24px}
.sec-ring .head h2{font-size:clamp(30px,7.6vw,44px)}
.sec-ring .head p{font-size:16px}
.sec-ring .stage{transition:height .62s var(--spring)}
.sec-ring .orbit{transition:opacity .3s var(--ease)}
.sec-ring .ring{scrollbar-width:none}
.sec-ring .ring::-webkit-scrollbar{display:none}
/* ring state — bubble + hub sizes come from JS via --suit */
.sec-ring .node .tag{opacity:0;font-size:clamp(9.5px,2.8vw,11.5px);white-space:normal;line-height:1.22;margin-top:9px}
.sec-ring .node .tag small{display:none}
.sec-ring .hub .s{display:none}
/* hint sits centred under the circle on mobile */
.sec-ring .hint{left:50%;top:auto;bottom:4px;transform:translate(-50%,0);
    max-width:none;white-space:nowrap;text-align:center;
    font-size:clamp(21px,6.4vw,30px)}
.sec-ring .stage.open .hint{opacity:0;transform:translate(-50%,16px)}
/* opened: the ring becomes a scrollable strip sitting above the card */
/* opened: bubbles become an endless JS-positioned strip above the card */
.sec-ring .stage.m-open .orbit, .sec-ring .stage.m-open .hub{opacity:0;pointer-events:none}
.sec-ring .stage.m-open .node .tag{opacity:.5;transition:opacity .35s var(--ease) .25s}
.sec-ring .stage.m-open .node.sel .tag{opacity:1}
/* selected marker under the bubble in the strip */
.sec-ring .stage.m-open .node .bob::after{content:'';position:absolute;left:50%;bottom:-6px;
    width:0;height:2px;border-radius:2px;background:var(--accent);transform:translateX(-50%);
    transition:width .42s var(--spring),background .5s var(--ease)}
.sec-ring .stage.m-open .node.sel .bob::after{width:36px}
.sec-ring .stage.m-open .panel{position:absolute;left:0!important;width:100%!important;
    margin-top:0!important;padding:24px 20px}
.sec-ring .does{grid-template-columns:1fr}
.sec-ring .idhead h3{font-size:23px}
.sec-ring .lede{font-size:15px}
.sec-ring .pFoot{flex-wrap:wrap;gap:14px}}
@media (prefers-reduced-motion:reduce){.sec-ring *{transition-duration:.01ms!important}}