.hero-scene{width:100%;container-type:inline-size;min-width:0;isolation:isolate}
.hero-scene__art{position:relative;height:585px;width:100%;color:#14243d}
.hero-scene__backdrop{position:absolute;inset:40px 0 32px 25px;border-radius:36px;background:radial-gradient(ellipse at 15% 0%,#ffce54 0%,#f5aa1c 75%);box-shadow:0 20px 45px #f5aa1c24;z-index:-1}
.hero-scene svg{display:block;width:22px;height:22px;flex-shrink:0}
.hero-benefit{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:13px 15px;box-shadow:0 12px 30px #14243d12;z-index:5;white-space:nowrap}
.hero-benefit strong{display:block;font:800 14px/1.25 Outfit,sans-serif;letter-spacing:-.02em}.hero-benefit div>span{display:block;color:#59708f;font-size:11px;margin-top:3px}
.hero-benefit__icon{width:30px;height:30px;border-radius:9px;background:#e0f2ed;color:#168675;display:grid;place-items:center;font-weight:800}.hero-benefit__icon svg{width:18px;height:18px}
.hero-benefit--context{top:0;left:0}.hero-benefit--lead{bottom:0;right:0}
.hero-scene #hero-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.hero-tracks{fill:none;stroke:#14243d;stroke-width:1.5;stroke-dasharray:4 6;opacity:.25}
.hero-signals{fill:none;stroke-width:3;stroke-linecap:round;stroke:#f5aa1c}.hero-signals path{opacity:0;stroke-dasharray:100;stroke-dashoffset:100;vector-effect:non-scaling-stroke}
#h-flow-ai,#h-flow-out{stroke:#168675}
.hero-customer{position:absolute;top:180px;left:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:7px}
.hero-customer__icon{width:44px;height:44px;border:2px solid #f5aa1c;border-radius:50%;background:#14243d;color:#ffc93a;display:grid;place-items:center;box-shadow:0 5px 16px #14243d20}
.hero-customer>span{background:#fff;border:1px solid #e2e8f0;padding:5px 7px;border-radius:7px;font-size:10px;font-weight:600}
.hero-agent{position:absolute;top:24px;right:0;z-index:4;display:flex;gap:9px;align-items:center;padding:11px 13px;background:#fff;border:1px solid #168675;border-radius:13px;box-shadow:0 6px 20px #14243d12}
.hero-agent>span{width:30px;height:30px;background:#e0f2ed;border-radius:8px;display:grid;place-items:center;color:#168675}.hero-agent svg{width:19px;height:19px}.hero-agent strong{display:block;font:700 13px Outfit,sans-serif}.hero-agent small{display:block;color:#59708f;font-size:10px;margin-top:2px}.hero-agent>i,.hero-inbox__status i,.hero-footer__dot{width:6px;height:6px;background:#168675;border-radius:50%;display:inline-block}
.kaxon-page .hero-scene #ui-mockup{position:absolute;top:104px;left:16%;right:4%;bottom:80px;inset-block:104px 80px;border:1px solid #e2e8f0!important;border-radius:22px!important;box-shadow:0 20px 44px #14243d20!important;background:#fff!important;overflow:hidden;display:flex;flex-direction:column;z-index:2}
.hero-inbox__header{padding:14px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #e2e8f0;flex-shrink:0}.hero-inbox__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#14243d;color:#ffc93a}.hero-inbox__mark svg{width:18px;height:18px}.hero-inbox__header strong{font:700 14px Outfit,sans-serif;display:block}.hero-inbox__header small{display:block;font-size:10px;color:#59708f;margin-top:2px}.hero-inbox__status{display:flex;gap:5px;align-items:center;margin-left:auto;font-size:10px;color:#168675;background:#e0f2ed;padding:5px 7px;border-radius:6px;white-space:nowrap}
.hero-chat{background:#f8fafc;padding:12px 14px;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}.hero-chat__date{font-size:9px;color:#59708f;text-align:center;letter-spacing:.02em}
.hero-message{padding:9px 11px;border-radius:13px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 3px 8px #14243d05;max-width:91%;color:#14243d}.hero-message--customer{align-self:flex-start;border-bottom-left-radius:4px}.hero-message p{font-size:13px;line-height:1.45;margin:0}.hero-message>small{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;margin-bottom:4px;color:#59708f}
.hero-response{position:relative;align-self:stretch}.hero-message--ai{margin-left:auto;max-width:94%;background:#e7f5ef;border-color:#bfdfd1;border-bottom-right-radius:4px}.hero-message--ai>small{color:#168675}.hero-message--ai small svg{width:13px;height:13px}.hero-message--ai small>span{margin-left:auto;font-size:8px;font-weight:500;color:#59708f}.hero-message__sent{margin-top:5px;text-align:right;color:#168675;font-size:11px}.hero-message__sent span{font-size:9px}
.hero-typing{position:absolute;top:5px;right:0;border:1px solid #bfdfd1;background:#e7f5ef;border-radius:12px;padding:12px;display:none;align-items:center;gap:10px;font-size:11px;color:#168675}.hero-typing i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#168675;margin:0 2px;animation:hero-dot 1s infinite}.hero-typing i:nth-child(2){animation-delay:.15s}.hero-typing i:nth-child(3){animation-delay:.3s}@keyframes hero-dot{0%,70%,100%{transform:translateY(0);opacity:.4}35%{transform:translateY(-3px);opacity:1}}
.hero-chat__action{align-self:flex-end;font-size:11px;color:#168675;font-weight:700}.hero-chat__action>span{display:block;border:1px solid #bfdfd1;background:#e0f2ed;border-radius:8px;padding:7px 10px}.hero-chat__action b{margin-left:12px}
.hero-inbox__footer{font-size:9px;color:#59708f;display:flex;align-items:center;gap:6px;padding:9px 15px;border-top:1px solid #e2e8f0;flex-shrink:0}.hero-scene__note{position:absolute;bottom:2px;left:4px;font:700 22px/1.05 Caveat,cursive;transform:rotate(-5deg);color:#b77706}
.hero-scene[data-paused=true] .hero-typing i{animation-play-state:paused}
@container(max-width:499px){.hero-scene__art{height:635px}.hero-benefit{padding:10px 12px}.hero-benefit strong{font-size:12px}.hero-agent{top:75px;right:15px}.kaxon-page .hero-scene #ui-mockup{top:154px;inset-block:154px 80px;left:14%;right:0}.hero-customer{top:230px}.hero-scene__note{display:none}}
@container(max-width:399px){.hero-scene__art{height:auto;display:flex;flex-direction:column;gap:16px;padding:0 8px 16px}.hero-scene__backdrop{inset:35px 0 0 12px;border-radius:28px}.hero-benefit,.hero-agent{position:relative;inset:auto;align-self:flex-start}.hero-agent{align-self:center}.hero-benefit--lead{align-self:flex-end}.hero-customer,.hero-scene #hero-connections{display:none}.kaxon-page .hero-scene #ui-mockup{position:relative;inset:auto!important;width:100%;margin:0!important;min-height:420px}.hero-chat{padding:14px 12px}.hero-inbox__header{padding:12px}.hero-benefit div>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-typing i{animation:none}}