
  .apps-band, .apps-band * { box-sizing:border-box; }  /* the references assume a global border-box reset the page does not have */
  .apps-band { padding:104px 48px; border-bottom:1px solid #e7e4f0; }
  .apps-head { display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:36px; flex-wrap:wrap; }
  .apps-stats { display:flex; align-items:center; }
  .apps-stat { display:flex; align-items:center; gap:12px; padding:0 26px; border-left:1px solid #e7e4f0; }
  .apps-stat:first-child { border-left:none; padding-left:0; }
  .apps-stat:last-child { padding-right:0; }
  .apps-stat i { width:44px; height:44px; border-radius:12px; background:#f5ecfd; color:#a34ef0; display:flex; align-items:center; justify-content:center; flex:none; }
  .apps-stat i svg { width:20px; height:20px; }
  .apps-stat b { display:block; font:700 15px 'Sora',sans-serif; color:#1d1b33; }
  .apps-stat small { display:block; font-size:12.5px; color:#8f8ba6; margin-top:2px; }

  .apps-stage { position:relative; aspect-ratio:1772/700; }
  .apps-stage::before { content:""; position:absolute; left:50%; top:64%; width:78%; height:150%; transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center, rgba(163,78,240,.10), rgba(163,78,240,.04) 40%, transparent 68%); pointer-events:none; }
  .apps-wires { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .apps-card { position:absolute; z-index:1; background:#ffffff; border:1px solid #e7e4f0; border-radius:16px; padding:14px 18px 12px;
    box-shadow:0 20px 44px rgba(33,25,64,.07); transition:border-color .2s ease, transform .2s ease; }
  .apps-card:hover { border-color:#a34ef0; transform:translateY(-2px); }
  .apps-ch { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .apps-ch i { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
  .apps-ch b { font:500 10.5px 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
  .apps-ch small { margin-left:auto; font:500 10.5px 'IBM Plex Mono',monospace; color:#8f8ba6; white-space:nowrap; }
  .apps-list { display:flex; flex-direction:column; gap:0; }
  .apps-list a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 8px; margin:0 -8px; border-radius:7px;
    font:600 13.5px/1.45 'Sora',sans-serif; color:#1d1b33; }
  .apps-list a span:last-child { color:#d8d3e6; }
  .apps-list a:hover { background:#f5f5fa; color:#1d1b33; }
  .apps-list a:hover span:last-child { color:#a34ef0; }
  .apps-tag { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid #efedf5; font-size:12px; font-weight:500; }
  .apps-tag svg { width:14px; height:14px; flex:none; }
  .apps-purple { --c:#a34ef0; --f:#f5ecfd; } .apps-green { --c:#16a34a; --f:#e9f7ef; } .apps-cyan { --c:#0a95dc; --f:rgba(51,189,252,.12); } .apps-amber { --c:#d97706; --f:#fdf3e3; }
  .apps-card .apps-ch i { background:var(--f); color:var(--c); } .apps-card .apps-ch b { color:var(--c); } .apps-card .apps-tag { color:var(--c); }
  .apps-card { background:linear-gradient(180deg, var(--f) 0, #ffffff 58px); }

  .apps-hub { position:absolute; z-index:1; left:50%; top:62%; width:14.1%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
    background:radial-gradient(circle at 50% 35%, #ffffff 0, #faf6ff 60%, #f5ecfd 100%);
    box-shadow:0 0 0 14px rgba(163,78,240,.06), 0 0 0 30px rgba(163,78,240,.03), 0 30px 70px rgba(163,78,240,.18);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; }
  .apps-hub i { width:36px; height:36px; background:#a34ef0; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display:block; margin-bottom:4px; }
  .apps-hub b { font:700 26px 'Sora',sans-serif; letter-spacing:-.02em; color:#1d1b33; }
  .apps-hub small { font:500 9.5px 'IBM Plex Mono',monospace; letter-spacing:.16em; color:#a34ef0; line-height:1.6; }

  .apps-pill { position:absolute; z-index:1; left:22.57%; top:88%; width:53.9%; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    border:1px solid rgba(163,78,240,.35); background:linear-gradient(90deg, rgba(163,78,240,.05), rgba(51,189,252,.08)); border-radius:999px; padding:14px 32px; }
  .apps-pill > b { font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.16em; color:#a34ef0; }
  .apps-pill > span { background:#ffffff; border:1px solid #e7e4f0; border-radius:999px; padding:5px 14px; font:500 11.5px 'IBM Plex Mono',monospace; color:#454160; }
  .apps-more { margin-top:32px; }

  .apps-c1 { left:19.19%; top:2%;    width:18.74%; }
  .apps-c2 { left:40.75%; top:0;     width:18.79%; }
  .apps-c3 { left:62.19%; top:2%;    width:18.85%; }
  .apps-c4 { left:2.93%;  top:46%;   width:21.05%; }
  .apps-c5 { left:62.19%; top:54%;   width:16.25%; }
  .apps-c6 { left:80.7%;  top:46%;   width:16.93%; }

  @media (max-width:1000px) {
    .apps-stats { display:none; }
    .apps-stage { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .apps-stage::before, .apps-wires { display:none; }
    .apps-card, .apps-hub, .apps-pill { position:static; width:auto; transform:none; left:auto; top:auto; }
    .apps-hub { grid-column:1 / -1; width:150px; margin:6px auto; }
    .apps-pill { grid-column:1 / -1; }
  }
  @media (max-width:600px) { .apps-stage { grid-template-columns:1fr; } }
