.apps-band, .apps-band * { box-sizing:border-box; }
  .apps-band { padding:104px 48px; border-bottom:1px solid #e7e4f0; color:#1d1b33; }
  .apps-head { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:26px; flex-wrap:wrap; }
  .apps-vps { display:flex; align-items:center; padding-bottom:6px; }
  .apps-vp { display:flex; align-items:center; gap:14px; }
  .apps-vp + .apps-vp { margin-left:24px; padding-left:24px; border-left:1px solid #e7e4f0; }
  .apps-vi { width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; background:#f5ecfd; color:#a34ef0;
    transition:background .45s ease, color .45s ease, box-shadow .45s ease, scale .45s cubic-bezier(.3,1.5,.5,1); }
  .apps-vi svg { width:20px; height:20px; }
  .apps-vp b { display:block; font:700 15px 'Sora',sans-serif; color:#1d1b33; }
  .apps-vp small { display:block; margin-top:3px; font-size:12.5px; color:#8f8ba6; }
  .apps-vp.apps-on .apps-vi { background:#a34ef0; color:#ffffff; scale:1.08; box-shadow:0 0 0 6px rgba(163,78,240,.14), 0 10px 24px rgba(163,78,240,.35); }

  .apps-wrap { position:relative; width:100%; max-width:1410px; margin:0 auto; aspect-ratio:1410/580; }
  .apps-stage { position:absolute; left:0; top:0; width:1410px; height:580px; transform-origin:0 0; transform:scale(.9532); }
  .apps-field { position:absolute; inset:0; overflow:clip; pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%); }
  .apps-ring { position:absolute; left:705px; top:363px; border-radius:50%; transform:translate(-50%,-50%); }
  .apps-ra { width:262px; height:262px; background:rgba(163,78,240,.10); box-shadow:inset 0 0 40px rgba(163,78,240,.10); }
  .apps-rb { width:318px; height:318px; background:rgba(163,78,240,.045); border:1px solid rgba(163,78,240,.10); }
  .apps-rc { width:700px; height:700px; border:1px dashed rgba(163,78,240,.15); }
  .apps-rd { width:930px; height:930px; border:1px dashed rgba(163,78,240,.10); }

  .apps-links { position:absolute; left:0; top:0; width:1410px; height:580px; max-width:none; z-index:2; overflow:visible; pointer-events:none; }
  .apps-mk { fill:none; stroke:#ffffff; stroke-width:10; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset .42s cubic-bezier(.4,.1,.2,1); }
  .apps-dash { fill:none; stroke:#a34ef0; stroke-opacity:.72; stroke-width:1.4; stroke-dasharray:5 6; stroke-linecap:round; }
  .apps-node { transform-box:fill-box; transform-origin:center; transition:scale .3s cubic-bezier(.3,1.7,.5,1); }
  .apps-node.apps-hit { scale:1.55; }
  .apps-node .apps-h { fill:rgba(163,78,240,.2); } .apps-node .apps-c { fill:#a34ef0; }

  .apps-orb { position:absolute; left:606px; top:264px; width:198px; height:198px; z-index:3; }
  .apps-ripple { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(163,78,240,.4); opacity:0; }
  .apps-disc { position:absolute; inset:0; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    background:radial-gradient(circle at 50% 28%, #ffffff 0%, #faf6ff 58%, #f1e5fd 100%);
    box-shadow:0 0 0 10px rgba(255,255,255,.65), 0 0 0 11px rgba(163,78,240,.14), 0 20px 50px rgba(163,78,240,.24), inset 0 -14px 30px rgba(163,78,240,.12); transition:box-shadow .5s ease; }
  .apps-orb.apps-boost .apps-disc { box-shadow:0 0 0 10px rgba(255,255,255,.72), 0 0 0 12px rgba(163,78,240,.32), 0 22px 64px rgba(163,78,240,.5), inset 0 -14px 30px rgba(163,78,240,.16); }
  .apps-orb.apps-hit .apps-disc { box-shadow:0 0 0 10px rgba(255,255,255,.72), 0 0 0 13px rgba(163,78,240,.4), 0 24px 70px rgba(163,78,240,.6), inset 0 -14px 30px rgba(163,78,240,.18); }
  .apps-disc svg { width:36px; height:36px; margin-bottom:8px; }
  .apps-disc b { font:700 25px 'Sora',sans-serif; letter-spacing:-.03em; color:#1d1b33; }
  .apps-disc small { margin-top:9px; font:500 8.5px/1.7 'IBM Plex Mono',monospace; letter-spacing:.14em; color:#a34ef0; }

  .apps-card { position:absolute; z-index:4; background:#ffffff; border-radius:14px; border:1px solid rgba(163,78,240,.11); overflow:hidden; overflow:clip;
    box-shadow:0 10px 28px rgba(33,25,64,.08), 0 1px 3px rgba(33,25,64,.04);
    transition:opacity .4s ease, translate .5s cubic-bezier(.2,.7,.2,1), scale .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
  .apps-card:hover, .apps-card:focus-within { translate:0 -4px; border-color:var(--c); box-shadow:0 18px 40px rgba(33,25,64,.14), 0 0 0 4px var(--g); }
  .apps-card.apps-glow { box-shadow:0 0 0 4px var(--g), 0 18px 42px rgba(33,25,64,.18); }
  .apps-ch { height:48px; padding:0 16px; display:flex; align-items:center; gap:10px; background:linear-gradient(180deg, var(--f) 0%, rgba(255,255,255,0) 100%); }
  .apps-ch i { width:28px; height:28px; border-radius:8px; background:var(--t); display:grid; place-items:center; flex:none; color:var(--c); }
  .apps-ch i svg { width:15px; height:15px; }
  .apps-ch b { flex:1; font:500 9.5px/1.45 'IBM Plex Mono',monospace; letter-spacing:.15em; text-transform:uppercase; color:var(--c); }
  .apps-ch small { font:500 10px/1 'IBM Plex Mono',monospace; color:#8f8ba6; white-space:nowrap; }
  .apps-list { list-style:none; margin:-1px 0 0; padding:0 16px; }
  .apps-list li { height:24px; display:flex; align-items:center; justify-content:space-between; transition:opacity .3s ease, translate .35s cubic-bezier(.2,.7,.2,1); }
  .apps-list a { font:600 13.5px 'Sora',sans-serif; letter-spacing:-.005em; color:#1d1b33; }
  .apps-list a:hover { color:var(--c); }
  .apps-ar { width:14px; height:14px; color:#d8d3e6; transition:translate .25s ease, color .25s ease; }
  .apps-list li:hover .apps-ar, .apps-list a:focus-visible + .apps-ar { translate:4px 0; color:var(--c); }
  .apps-tag { margin:10px 16px 0; padding:8px 0 10px; border-top:1px solid #efedf5; display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:500; line-height:18px; color:var(--c); transition:opacity .3s ease; }
  .apps-tag svg { width:12px; height:12px; flex:none; }
  .apps-purple { --c:#a34ef0; --f:#f5ecfd; --t:#ecdbfb; --g:rgba(163,78,240,.12); }
  .apps-green { --c:#16a34a; --f:#e9f7ef; --t:#d6f1e2; --g:rgba(22,163,74,.12); }
  .apps-cyan { --c:#0a95dc; --f:rgba(51,189,252,.12); --t:rgba(51,189,252,.2); --g:rgba(10,149,220,.12); }
  .apps-amber { --c:#d97706; --f:#fdf3e3; --t:#fbe5c4; --g:rgba(217,119,6,.12); }
  .apps-c-rev { left:271px; top:30px; width:262px; }
  .apps-c-svc { left:575px; top:18px; width:263px; }
  .apps-c-sup { left:877px; top:30px; width:264px; }
  .apps-c-fin { left:35px; top:275px; width:295px; }
  .apps-c-dat { left:877px; top:275px; width:228px; }
  .apps-c-dig { left:1138px; top:275px; width:237px; }

  .apps-bar { position:absolute; left:319px; top:508px; width:758px; height:54px; z-index:4; border-radius:27px; border:1px solid rgba(163,78,240,.38);
    background:linear-gradient(90deg, #f7efff 0%, #f5f1ff 50%, rgba(51,189,252,.10) 100%); display:flex; align-items:center; justify-content:center; gap:12px; overflow:hidden; overflow:clip;
    transition:opacity .4s ease, translate .5s cubic-bezier(.2,.7,.2,1); }
  .apps-bar::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%); translate:-120% 0; opacity:0; }
  .apps-bar.apps-sheen::after { animation:apps-sheen 1.8s ease-in-out forwards; }
  .apps-bar > b { font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; color:#a34ef0; margin-right:6px; white-space:nowrap; }
  .apps-chip { height:27px; padding:0 14px; border-radius:999px; background:#ffffff; border:1px solid #e7e4f0; display:inline-flex; align-items:center; font:500 11.5px/1 'IBM Plex Mono',monospace; color:#454160;
    transition:opacity .3s ease, scale .35s cubic-bezier(.3,1.5,.5,1), border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease; }
  .apps-chip.apps-lit { border-color:#a34ef0; background:#f5ecfd; color:#a34ef0; box-shadow:0 6px 16px rgba(163,78,240,.22); scale:1.06; }
  .apps-more { display:inline-flex; align-items:center; gap:8px; margin-top:34px; font-size:15px; font-weight:600; color:#a34ef0; }
  .apps-more svg { width:18px; height:18px; transition:translate .25s ease; }
  .apps-more:hover svg { translate:5px 0; }

  /* build-in states — only once the script runs (.apps-js), never under reduced motion */
  .apps-js .apps-ring { opacity:0; scale:.6; }
  .apps-js.apps-run .apps-ring { animation:apps-ringin .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) forwards; }
  .apps-js .apps-orb { opacity:0; scale:.7; }
  .apps-js.apps-run .apps-orb { animation:apps-orbin .6s cubic-bezier(.2,.8,.2,1) .05s forwards; }
  .apps-js .apps-ripple { animation:apps-ripple 4.2s ease-out infinite; }
  .apps-js .apps-ripple:nth-child(2) { animation-delay:1.4s; } .apps-js .apps-ripple:nth-child(3) { animation-delay:2.8s; }
  .apps-js .apps-orb.apps-boost .apps-ripple { animation-duration:2.2s; border-color:rgba(163,78,240,.6); }
  .apps-js .apps-disc { animation:apps-breathe 4.6s ease-in-out infinite; }
  .apps-js .apps-disc svg { animation:apps-tilt 6s ease-in-out infinite; }
  .apps-js .apps-dash { animation:apps-march 2.2s linear infinite; }
  .apps-js .apps-mk { stroke-dashoffset:1; } .apps-js .apps-mk.apps-on { stroke-dashoffset:0; }
  .apps-js .apps-node { scale:0; } .apps-js .apps-node.apps-on { scale:1; } .apps-js .apps-node.apps-on.apps-hit { scale:1.55; }
  .apps-js .apps-card { opacity:0; translate:0 24px; scale:.965; }
  .apps-js .apps-card.apps-in { opacity:1; translate:0 0; scale:1; }
  .apps-js .apps-card.apps-in:hover, .apps-js .apps-card.apps-in:focus-within { translate:0 -4px; }
  .apps-js .apps-list li { opacity:0; translate:-8px 0; }
  .apps-js .apps-card.apps-in li { opacity:1; translate:0 0; transition-delay:calc(.1s + var(--i) * .04s); }
  .apps-js .apps-tag { opacity:0; } .apps-js .apps-card.apps-in .apps-tag { opacity:1; transition-delay:calc(.2s + var(--n) * .04s); }
  .apps-js .apps-bar { opacity:0; translate:0 18px; } .apps-js .apps-bar.apps-in { opacity:1; translate:0 0; }
  .apps-js .apps-chip { opacity:0; scale:.8; }
  .apps-js .apps-bar.apps-in .apps-chip { opacity:1; scale:1; transition-delay:calc(var(--i) * .04s + .08s), calc(var(--i) * .04s + .08s), 0s, 0s, 0s, 0s; }
  .apps-js .apps-bar.apps-in .apps-chip.apps-lit { scale:1.06; transition-delay:0s; }

  @keyframes apps-ringin { to { opacity:1; scale:1; } }
  @keyframes apps-orbin { to { opacity:1; scale:1; } }
  @keyframes apps-ripple { 0% { scale:1; opacity:.55; } 100% { scale:2.2; opacity:0; } }
  @keyframes apps-breathe { 0%,100% { scale:1; } 50% { scale:1.03; } }
  @keyframes apps-tilt { 0%,100% { rotate:0deg; } 50% { rotate:9deg; } }
  @keyframes apps-march { to { stroke-dashoffset:-22; } }
  @keyframes apps-sheen { 0% { translate:-120% 0; opacity:1; } 100% { translate:120% 0; opacity:1; } }

  /* phones: the reference's stacked layout, no connectors */
  @media (max-width:767px) {
    .apps-band { padding:64px 20px; }
    .apps-vps { flex-wrap:wrap; gap:18px 28px; }
    .apps-vp + .apps-vp { margin-left:0; padding-left:0; border-left:0; }
    .apps-wrap { aspect-ratio:auto; max-width:none; }
    .apps-stage { position:static; width:auto; height:auto; transform:none !important; display:grid; grid-template-columns:1fr; gap:16px; }
    .apps-field, .apps-links, .apps-ripple { display:none; }
    .apps-orb { position:relative; left:auto; top:auto; justify-self:center; margin:20px 0 28px; }
    .apps-card { position:relative; left:auto; top:auto; width:auto; }
    .apps-bar { position:relative; left:auto; top:auto; width:auto; height:auto; flex-wrap:wrap; padding:16px; border-radius:22px; }
    .apps-bar > b { width:100%; text-align:center; margin:0 0 2px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .apps-band *, .apps-band *::before, .apps-band *::after { animation:none !important; transition:none !important; }
  }