.ba-usecases h2 { margin-bottom: 22px; }
.ba-usecase-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.ba-usecase {
    --scene-a: #e6dcff;
    --scene-b: #5a3cb9;
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 15px;
    border: 1px solid #dedbec;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 14px 28px #20194012, 0 3px #e6e0f0;
    transition: transform .25s, box-shadow .25s;
}
.ba-usecase-shop { --scene-a: #d9f7ee; --scene-b: #15715e; }
.ba-usecase-game { --scene-a: #ffe5d8; --scene-b: #9b4229; }
.ba-usecase-scene {
    position: relative;
    min-height: 145px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    perspective: 520px;
    background: radial-gradient(ellipse at 45% 20%,white,transparent 55%), var(--scene-a);
}
.ba-usecase-scene::before {
    content: '';
    position: absolute;
    inset: 65% -20% -35%;
    background: repeating-linear-gradient(90deg,#ffffffa6 0 1px,transparent 1px 24px),
        repeating-linear-gradient(0deg,#ffffffa6 0 1px,transparent 1px 24px);
    transform: rotateX(45deg);
    transform-origin: top;
    z-index: -1;
}
.ba-usecase-object {
    width: 68px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--scene-b);
    color: white;
    font: 700 36px/1 system-ui;
    box-shadow: inset 0 1px #ffffff78, 6px 8px #1a133142, 12px 18px 22px #241a3645;
    transform: rotateX(12deg) rotateY(-19deg) rotateZ(-6deg);
    animation: ba-object-hover 4.5s ease-in-out;
}
.ba-usecase-shop .ba-usecase-object { animation-delay: -.8s; }
.ba-usecase-game .ba-usecase-object { animation-delay: -1.6s; }
.ba-usecase-signal {
    position: absolute;
    top: 62%;
    left: 55%;
    color: var(--scene-b);
    background: #fff;
    border-radius: 16px;
    padding: 4px 9px;
    font-size: .75rem;
    font-weight: 800;
    box-shadow: 0 6px 14px #221a3930;
    animation: ba-signal-hover 4.5s ease-in-out;
}
.ba-usecase h3 { font-size: 1.15rem; }
.ba-usecase p, .ba-usecase-foot { color: #505a73; }
.ba-usecase-actions { display: flex; flex-wrap: wrap; gap: 7px 12px; align-items: center; margin-top: 13px; font-size: .84rem; }
.ba-usecase-actions button { border: 0; border-radius: 8px; padding: 6px 9px; color: #3f29a8; background: #eee9ff; font-weight: 700; }
.ba-usecase-actions a, .ba-usecase-foot a { color: #4930af; text-decoration: underline; text-underline-offset: 3px; }
.ba-usecases .ba-usecase-foot { margin-top: 20px; font-size: .91rem; }
.ba-dispatch[data-stage="preview"] .ba-dispatch-notification { box-shadow: 0 0 22px #9673fb65; }
.ba-guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.ba-guide-index a { padding: 6px 10px; border: 1px solid #d9d3ee; border-radius: 9px; color: #4930af; background: #f5f1ff; font-size: .86rem; }
.ba-integration-guide section { scroll-margin-top: 18px; }
.ba-integration-guide h3 { margin-top: 18px; font-size: 1.12rem; }
.ba-integration-guide pre { max-width: 100%; overflow: auto; white-space: pre; }
@keyframes ba-object-hover {
    50% { transform: translateY(-8px) rotateX(18deg) rotateY(-11deg) rotateZ(-3deg); }
}
@keyframes ba-signal-hover {
    50% { transform: translate(3px,-5px); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .ba-usecase:hover { transform: translateY(-5px); box-shadow: 0 22px 38px #20194022, 0 3px #e6e0f0; }
}
@media (max-width: 760px) {
    .ba-usecase-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
    .ba-usecase-object, .ba-usecase-signal { animation: none; }
}