:root{--wb-ease:cubic-bezier(.65,0,.35,1);--wb-push:1.0236;--wb-morph:600ms;--wb-reply-in:390ms}
.features-grid.four{grid-template-columns:repeat(4,1fr)}
.features-grid.four .feature-card{min-height:240px}
@media (max-width:1024px){.features-grid.four{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.features-grid.four{grid-template-columns:1fr}}
.wbar{max-width:760px;margin:0 auto 56px;text-align:center;color:#111}
.wbar .stage{transform-origin:50% 52%;transition:transform var(--wb-morph) var(--wb-ease)}
.wbar .stage.push{transform:scale(var(--wb-push));transition:transform var(--wb-push-dur,1400ms) linear}
.wbar .pill{display:inline-flex;padding:4px;border-radius:999px;font-size:14px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(30px);margin-bottom:18px}
.wbar .pill span{padding:7px 20px;border-radius:999px;color:rgba(255,255,255,.6);transition:background 150ms linear,color 150ms linear}
.wbar .pill span.on{background:#fff;color:#111}
.wbar .comp{display:flex;align-items:center;gap:12px;height:64px;padding:0 10px 0 24px;border-radius:999px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 12px 28px -12px rgba(0,0,0,.35);text-align:left}
.wbar svg.i{width:22px;height:22px;flex-shrink:0}
.wbar .txt{flex:1;min-width:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}
.wbar .txt:not(.ph){text-overflow:clip}
.wbar .bub{max-width:100%;text-align:left;line-height:1.4}
.wbar .txt.ph{color:rgba(99,99,99,.85)}
.wbar .txt.out{opacity:0;filter:blur(7px);transition:opacity 360ms linear,filter 300ms var(--wb-ease)}
.wbar .caret{display:inline-block;width:.065em;height:1em;background:#111;vertical-align:-.13em;margin-left:.05em;border-radius:1px}
.wbar .caret.blink{animation:wbBlink 1060ms steps(1) infinite}@keyframes wbBlink{50%{opacity:0}}
.wbar .voice{width:46px;height:46px;flex-shrink:0}
.wbar .reply{min-height:60px;margin-top:20px;display:flex;justify-content:center}
.wbar .bub{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:20px;font-size:17px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(24px);opacity:0;transform:translateY(12px);filter:blur(6px)}
.wbar .bub.show{opacity:1;transform:none;filter:none;transition:opacity var(--wb-reply-in) linear,transform var(--wb-reply-in) var(--wb-ease),filter var(--wb-reply-in) var(--wb-ease)}
.wbar .bub.hide{opacity:0;transition:opacity 400ms var(--wb-ease)}
.wbar .dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 30% 30%,#d9ccff,#6d4dff 70%)}
[data-theme="light"] .wbar .pill span{color:rgba(17,17,17,.55)}[data-theme="light"] .wbar .pill{background:rgba(255,255,255,.6);border-color:rgba(0,0,0,.08)}
[data-theme="light"] .wbar .bub{color:#111;background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.06)}
/* Beyond agent cards (app colours) */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.agent-card{border-radius:18px;border:1px solid rgba(255,255,255,.55);padding:18px 18px 20px;color:#111;display:flex;flex-direction:column;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.agent-icon{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.8);display:grid;place-items:center;margin-bottom:14px;color:#111}
.agent-card h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px;color:#111}
.agent-sub{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:10px;color:#111}
.agent-body{font-size:14px;line-height:1.55;color:rgba(17,17,17,.72);font-weight:400;margin-bottom:14px}
.agent-start{margin-top:auto;font-size:14px;font-weight:600;color:#111}
.agent-foot{text-align:center;margin:28px auto 0;max-width:60ch;font-size:14px;color:var(--muted)}
@media (max-width:1024px){.agent-grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.agent-grid{grid-template-columns:1fr}.wbar .comp{height:56px;gap:8px;padding:0 8px 0 18px}.wbar .txt{font-size:15px}.wbar .voice{width:40px;height:40px}.wbar .bub{font-size:15px}.wbar{margin-bottom:40px}}
@media (max-width:480px){.wbar .bub{font-size:14px;line-height:1.35;padding:10px 14px;gap:8px;border-radius:18px}.wbar .dot{width:12px;height:12px}.wbar .reply{min-height:60px}}
@media (max-width:374px){.wbar .bub{font-size:13px;padding:10px 12px}}
@media (prefers-reduced-motion:reduce){.wbar *{transition:none!important;animation:none!important}.wbar .stage{transform:none!important}}