.sec-band, .sec-band * { box-sizing:border-box; }
  .sec-band { padding:104px 48px; color:#1d1b33; }
  .sec-head { text-align:center; max-width:680px; margin:0 auto 64px; }
  .sec-lnk { display:inline-block; font-size:15px; font-weight:600; color:#a34ef0; }
  .sec-lnk svg { display:inline-block; vertical-align:-3px; margin-left:6px; width:18px; height:18px; transition:translate .25s ease; }
  .sec-lnk:hover svg { translate:5px 0; }

  .sec-cols { display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); align-items:start; max-width:1200px; margin:0 auto; }
  .sec-pan { position:relative; border-radius:22px; border:1px solid #e7e4f0; overflow:hidden; overflow:clip;
    transition:opacity .45s ease var(--d,0s), translate .55s cubic-bezier(.2,.7,.2,1) var(--d,0s), scale .55s cubic-bezier(.2,.7,.2,1) var(--d,0s), box-shadow .3s ease 0s, border-color .3s ease 0s; }
  .sec-ph { display:flex; align-items:center; justify-content:space-between; gap:12px; height:66px; padding:0 28px; border-bottom:1px solid #e7e4f0; }
  .sec-pt { font:500 11.5px/1 'IBM Plex Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }

  /* act one: the stack you have today */
  .sec-left { background:#f7f7fb; }
  .sec-left .sec-pt { color:#8f8ba6; }
  .sec-tag { font:500 11px/1 'IBM Plex Mono',monospace; letter-spacing:.04em; color:#8f8ba6; padding:7px 11px; border-radius:7px; border:1px solid #d8d3e6; background:#fbfbfd; }
  .sec-row { display:flex; gap:16px; padding:22px 28px; border-bottom:1px solid #e7e4f0;
    transition:opacity .35s ease calc(var(--d,0s) + .1s + var(--i) * .07s), translate .4s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .1s + var(--i) * .07s), background .25s ease 0s; }
  .sec-row:hover { background:#f1f0f6; }
  .sec-rico { width:36px; height:36px; border-radius:10px; background:#efedf5; color:#8f8ba6; display:grid; place-items:center; flex:none; transition:translate .25s ease; }
  .sec-row:hover .sec-rico { translate:3px 0; }
  .sec-rico svg, .sec-nd svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .sec-row h4 { margin:1px 0 0; font:700 16px 'Sora',sans-serif; color:#686386; letter-spacing:-.01em; }
  .sec-row p { margin:4px 0 0; font-size:14px; line-height:1.5; color:#8f8ba6; }
  .sec-ft { display:flex; flex-wrap:wrap; gap:6px 10px; padding:20px 28px; font:400 12px/1.4 'IBM Plex Mono',monospace; color:#8f8ba6; }
  .sec-ft span, .sec-ft i { font-style:normal; transition:opacity .3s ease calc(var(--d,0s) + .42s + var(--i) * .07s); }
  .sec-ft i { color:#d8d3e6; }

  /* the hand-off arrow */
  .sec-arrow { position:relative; z-index:3; justify-self:center; margin-top:146px; width:42px; height:42px; border-radius:50%; background:#ffffff; color:#a34ef0;
    display:grid; place-items:center; box-shadow:0 8px 22px rgba(33,25,64,.14), 0 0 0 1px #e7e4f0;
    transition:opacity .3s ease var(--d,0s), scale .45s cubic-bezier(.3,1.7,.5,1) var(--d,0s); }
  .sec-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .sec-arrow::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(163,78,240,.55); opacity:0; }
  .sec-arrow.sec-ping::after { animation:sec-ping 1.1s ease-out 1; }

  /* act two: one platform */
  .sec-right { background:linear-gradient(180deg, #ffffff 0%, #fcfaff 100%); box-shadow:0 22px 56px rgba(163,78,240,.09); }
  .sec-right::before { content:""; position:absolute; right:-30px; top:-50px; width:300px; height:300px; pointer-events:none;
    background:radial-gradient(circle, rgba(163,78,240,.2) 0%, rgba(163,78,240,0) 66%); transition:opacity 1s ease calc(var(--d,0s) + .3s); }
  .sec-right .sec-pt { color:#a34ef0; position:relative; }
  .sec-live { position:relative; width:7px; height:7px; border-radius:50%; background:#a34ef0; margin-right:4px; }
  .sec-steps { position:relative; padding:26px 28px 6px; }
  .sec-step { position:relative; display:grid; grid-template-columns:22px 36px minmax(0,1fr); column-gap:16px; align-items:start; padding-bottom:40px; }
  .sec-step:last-child { padding-bottom:30px; }
  .sec-no { font:500 11.5px/1 'IBM Plex Mono',monospace; color:#a34ef0; padding-top:12px; letter-spacing:.04em; transition:opacity .3s ease calc(var(--d,0s) + .2s + var(--i) * .1s); }
  .sec-nd { position:relative; z-index:1; width:36px; height:36px; border-radius:10px; background:#f5ecfd; color:#a34ef0; display:grid; place-items:center;
    transition:opacity .3s ease calc(var(--d,0s) + .16s + var(--i) * .1s), scale .45s cubic-bezier(.3,1.7,.5,1) calc(var(--d,0s) + .16s + var(--i) * .1s), background .3s ease 0s, color .3s ease 0s, box-shadow .3s ease 0s; }
  .sec-nd svg { width:17px; height:17px; stroke-width:1.7; }
  .sec-nd svg .sec-f { fill:currentColor; stroke:none; }
  .sec-tx { transition:opacity .35s ease calc(var(--d,0s) + .22s + var(--i) * .1s), translate .4s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .22s + var(--i) * .1s); }
  .sec-step h4 { margin:1px 0 0; font:700 16px 'Sora',sans-serif; letter-spacing:-.01em; color:#1d1b33; transition:color .3s ease; }
  .sec-step p { margin:4px 0 0; font-size:14px; line-height:1.5; color:#686386; }
  .sec-step:not(:last-child)::after { content:""; position:absolute; left:calc(22px + 16px + 18px); top:40px; width:1px; height:calc(100% - 44px);
    background:linear-gradient(180deg, #dcc3fa, #ecdffd); transform-origin:top; transition:transform .16s linear calc(var(--d,0s) + .32s + var(--i) * .1s); }
  .sec-step.sec-on .sec-nd { background:#a34ef0; color:#ffffff; box-shadow:0 0 0 6px rgba(163,78,240,.14), 0 10px 22px rgba(163,78,240,.32); }
  .sec-step.sec-on h4 { color:#a34ef0; }

  .sec-chips { display:flex; flex-wrap:nowrap; gap:8px; padding:14px 28px 28px; }
  .sec-chip { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:999px; border:1px solid #e9d8fb; background:#ffffff; white-space:nowrap;
    font:500 11px/1 'IBM Plex Mono',monospace; color:#454160;
    transition:opacity .3s ease calc(var(--d,0s) + .6s + var(--j) * .06s), scale .4s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .6s + var(--j) * .06s), border-color .25s ease 0s, background .25s ease 0s, transform .25s ease 0s, box-shadow .25s ease 0s; }
  .sec-chip svg { width:12px; height:12px; flex:none; fill:none; stroke:#a34ef0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .sec-chip:hover { border-color:#a34ef0; background:#fcf8ff; transform:translateY(-2px); box-shadow:0 8px 18px rgba(163,78,240,.14); }

  /* build-in states — only once the script runs (.sec-js), never under reduced motion */
  .sec-js .sec-pan { opacity:0; translate:0 22px; scale:.985; } .sec-js .sec-pan.sec-in { opacity:1; translate:0 0; scale:1; }
  .sec-js .sec-row { opacity:0; translate:-12px 0; } .sec-js .sec-left.sec-in .sec-row { opacity:1; translate:0 0; }
  .sec-js .sec-ft span, .sec-js .sec-ft i { opacity:0; } .sec-js .sec-left.sec-in .sec-ft span, .sec-js .sec-left.sec-in .sec-ft i { opacity:1; }
  .sec-js .sec-arrow { opacity:0; scale:.5; } .sec-js .sec-arrow.sec-in { opacity:1; scale:1; }
  .sec-js .sec-right::before { opacity:0; } .sec-js .sec-right.sec-in::before { opacity:1; }
  .sec-js .sec-right.sec-in .sec-live { animation:sec-live 2.4s ease-out infinite; }
  .sec-js .sec-no { opacity:0; } .sec-js .sec-right.sec-in .sec-no { opacity:1; }
  .sec-js .sec-nd { opacity:0; scale:.5; } .sec-js .sec-right.sec-in .sec-nd { opacity:1; scale:1; }
  .sec-js .sec-tx { opacity:0; translate:0 8px; } .sec-js .sec-right.sec-in .sec-tx { opacity:1; translate:0 0; }
  .sec-js .sec-step:not(:last-child)::after { transform:scaleY(0); } .sec-js .sec-right.sec-in .sec-step:not(:last-child)::after { transform:scaleY(1); }
  .sec-js .sec-chip { opacity:0; scale:.85; } .sec-js .sec-right.sec-in .sec-chip { opacity:1; scale:1; }
  @keyframes sec-ping { 0% { opacity:.9; scale:1; } 100% { opacity:0; scale:2; } }
  @keyframes sec-live { 0% { box-shadow:0 0 0 0 rgba(163,78,240,.5); } 70%,100% { box-shadow:0 0 0 9px rgba(163,78,240,0); } }

  @media (max-width:767px) {
    .sec-band { padding:64px 20px; }
    .sec-head { margin-bottom:40px; }
    .sec-cols { grid-template-columns:1fr; row-gap:14px; }
    .sec-arrow { margin-top:0; rotate:90deg; }
    .sec-ph, .sec-row, .sec-ft { padding-left:18px; padding-right:18px; }
    .sec-row { gap:12px; }
    .sec-steps { padding:22px 18px 4px; }
    .sec-step { grid-template-columns:18px 32px minmax(0,1fr); column-gap:10px; }
    .sec-nd { width:32px; height:32px; }
    .sec-no { padding-top:10px; }
    .sec-step:not(:last-child)::after { left:calc(18px + 10px + 16px); top:36px; }
    .sec-chips { flex-wrap:wrap; padding:10px 18px 22px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sec-band *, .sec-band *::before, .sec-band *::after { animation:none !important; transition:none !important; }
  }