/* bbi-site 1.5.3 visual pass: product mockup bands, icon badges, gradient dividers, connection diagram */
.bbz-band{position:relative;padding:clamp(2rem,5vw,3.5rem) 0;overflow:hidden;background:radial-gradient(60% 80% at 15% 0,rgba(11,222,177,.08),transparent 70%),radial-gradient(60% 80% at 90% 100%,rgba(7,150,255,.09),transparent 70%)}
.bbz-wrap{width:min(1240px,100% - 2rem);margin:0 auto}
.bbz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.5rem)}
.bbz-card{margin:0;min-width:0;border-radius:16px;padding:.6rem;background:linear-gradient(160deg,rgba(11,222,177,.10),rgba(255,255,255,.02) 45%,rgba(7,150,255,.08));border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px -30px rgba(7,150,255,.55);transition:transform .3s ease,border-color .3s ease}
.bbz-card:hover{transform:translateY(-3px);border-color:rgba(11,222,177,.35)}
.bbz-frame{aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.bbz-frame svg,.bbz-flow svg{display:block;width:100%;height:auto}
.bbz-cap{display:flex;align-items:center;gap:.5rem;padding:.65rem .35rem .2rem;color:#d4d4d8;font-size:.85rem;font-weight:600;letter-spacing:.01em}
.bbz-chip{width:8px;height:8px;border-radius:50%;background:linear-gradient(90deg,#0bdeb1,#0796ff);box-shadow:0 0 10px rgba(11,222,177,.7)}
.bbz-flow{width:min(860px,100%);margin:0 auto}
.bbz-band--flow{padding:clamp(1.5rem,4vw,2.5rem) 0}
.bbz-div{height:1px;width:min(1240px,100% - 2rem);margin:0 auto;background:linear-gradient(90deg,transparent,rgba(11,222,177,.55),rgba(7,150,255,.55),transparent);opacity:.7}
.bbz-ic{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 0 .85rem;border-radius:13px;color:#5eead4;background:linear-gradient(150deg,rgba(11,222,177,.20),rgba(7,150,255,.14));border:1px solid rgba(11,222,177,.25);box-shadow:0 8px 24px -12px rgba(11,222,177,.6)}
.bbz-icwrap{display:block}
@media (max-width:860px){.bbz-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bbz-grid .bbz-card:nth-child(3){display:none}}
@media (max-width:560px){.bbz-grid{grid-template-columns:minmax(0,1fr);gap:.9rem}}
/* motion (only when allowed) */
@media (prefers-reduced-motion:no-preference){
 .bbz-line{animation:bbzDash 1.6s linear infinite}
 .bbz-halo{transform-box:fill-box;transform-origin:center;animation:bbzHalo 3s ease-out infinite}
 .bbz-caret{animation:bbzBlink 1s steps(1) infinite}
 .bbz-pulse{animation:bbzPulse 2.4s ease-in-out infinite}
 .bbz-typing circle{animation:bbzBlink 1.2s ease-in-out infinite}.bbz-typing circle:nth-child(3){animation-delay:.2s}.bbz-typing circle:nth-child(4){animation-delay:.4s}
 .bbz-gauge{animation:bbzGauge 2.2s ease-out both}
 .bbz-grow{transform-box:fill-box;transform-origin:left;animation:bbzGrow 2s ease-out both}
 .bbz-dot{animation:bbzPulse 2.4s ease-in-out infinite}
 .bbz-in,.bbz-in2{animation:bbzIn .8s ease-out both}.bbz-in2{animation-delay:.5s}
}
@keyframes bbzDash{to{stroke-dashoffset:-28}}
@keyframes bbzHalo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.45);opacity:0}}
@keyframes bbzBlink{50%{opacity:.2}}
@keyframes bbzPulse{50%{opacity:.7}}
@keyframes bbzGauge{from{stroke-dasharray:0 100}}
@keyframes bbzGrow{from{transform:scaleX(0)}}
@keyframes bbzIn{from{opacity:0}}
/* 1.5.3 name picker: live status rows + demo fallback */
figure.bb7-pick .bbz-row a,figure.bb7-pick .bbz-row .bbz-a{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:#0a0d14;border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none}
figure.bb7-pick .bbz-row b{overflow-wrap:anywhere;min-width:0}
figure.bb7-pick .bb7-replay{display:none}
figure.bb7-pick .bbz-row span{color:#d4d4d8;font-weight:600;display:inline-flex;align-items:center;gap:.35rem}
figure.bb7-pick .bbz-row.is-av a{border-color:rgba(11,222,177,.45)}figure.bb7-pick .bbz-row.is-av span{color:#5ff5d2}
figure.bb7-pick .bbz-row.is-tk b{text-decoration:line-through;color:#a1a1aa}figure.bb7-pick .bbz-row.is-tk span{color:#a1a1aa}figure.bb7-pick .bbz-row.is-tk a{background:#0c0c0f}
figure.bb7-pick .bbz-shim{color:#a1a1aa;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.14),rgba(255,255,255,.04));background-size:200% 100%;border-radius:6px;padding:0 .4rem}
.bbz-type{padding:.8rem 1rem;margin-bottom:.8rem;border-radius:12px;border:1px solid rgba(11,222,177,.35);background:#0a0d14;font-weight:600;color:#fafafa;min-height:3rem}
.bbz-typed{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid #0bdeb1;max-width:100%}
.bbz-real{margin-top:1rem}.bbz-real label{display:block;font-weight:600;margin-bottom:.4rem}.bbz-real div{display:flex;gap:.5rem}.bbz-real input{flex:1;min-width:0;padding:.7rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:#0a0d14;color:#fff;font:inherit}
@media (prefers-reduced-motion:no-preference){figure.bb7-pick .bbz-shim{animation:bbzShim 1.2s linear infinite}
 .bbz-typed{animation:bbzType 9s steps(21) infinite}
 .bbz-demo-rows .bbz-row{animation:bbzRow 9s ease infinite;animation-delay:calc(var(--d)*.25s)}}
@keyframes bbzShim{to{background-position:-200% 0}}
@keyframes bbzType{0%{width:0}30%,90%{width:21ch}100%{width:0}}
@keyframes bbzRow{0%,30%{opacity:0;transform:translateY(6px)}38%,90%{opacity:1;transform:none}100%{opacity:0}}