.hero-demo{z-index:1;flex-direction:column;align-items:center;width:100%;margin-top:3rem;display:flex;position:relative}.hero-demo-wrapper{width:100%;max-width:1000px;position:relative}.hero-demo-grid{background:var(--color-white);width:100%;height:456px;box-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a, 0 0 0 1px var(--color-gray-200);border-radius:12px;position:relative;overflow:hidden}.hero-demo-grid *{scrollbar-width:none;-ms-overflow-style:none}.hero-demo-grid ::-webkit-scrollbar{display:none}.hero-demo-grid>div:first-child{position:absolute;inset:0}.hero-demo-fade{pointer-events:none;z-index:2;background:linear-gradient(#0000,#fff);height:48px;position:absolute;bottom:0;left:0;right:0}.hero-demo-grid-dim{pointer-events:none;opacity:0;z-index:3;background:#ffffff8c;transition:opacity .3s;position:absolute;inset:0}.hero-demo-grid-dim.active{opacity:1}.hero-demo-morph{z-index:10;background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:16px;width:340px;height:310px;transition:width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),border-radius .5s cubic-bezier(.4,0,.2,1),box-shadow .5s cubic-bezier(.4,0,.2,1);position:absolute;bottom:-40px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 12px #00000014,0 1px 3px #0000000a}.hero-morph-shrinking,.hero-morph-indicator{border-radius:999px;height:56px;box-shadow:0 0 40px 24px #fff,0 0 60px 40px #fffc,0 4px 12px #00000014,0 1px 3px #0000000a}.hero-morph-chat,.hero-morph-expanding,.hero-morph-chat-response{border-radius:16px;width:340px;height:310px;box-shadow:0 4px 12px #00000014,0 1px 3px #0000000a}.hero-morph-chat-layer,.hero-morph-indicator-layer{position:absolute;inset:0}.hero-morph-chat-layer{opacity:1;transition:opacity .2s}.hero-morph-shrinking .hero-morph-chat-layer,.hero-morph-indicator .hero-morph-chat-layer{opacity:0}.hero-morph-expanding .hero-morph-chat-layer{opacity:0;animation:.2s ease-out .3s forwards heroMorphChatFadeIn}@keyframes heroMorphChatFadeIn{to{opacity:1}}.hero-morph-chat-response .hero-morph-chat-layer{opacity:1}.hero-morph-indicator-layer{opacity:0;pointer-events:none;white-space:nowrap;align-items:center;gap:12px;padding:0 20px;transition:opacity .2s;display:flex}.hero-morph-shrinking .hero-morph-indicator-layer{opacity:0;animation:.2s ease-out .25s forwards heroMorphIndicatorFadeIn}@keyframes heroMorphIndicatorFadeIn{to{opacity:1}}.hero-morph-indicator .hero-morph-indicator-layer{opacity:1}.hero-morph-expanding .hero-morph-indicator-layer,.hero-morph-chat .hero-morph-indicator-layer,.hero-morph-chat-response .hero-morph-indicator-layer{opacity:0}.hero-morph-measurer{white-space:nowrap;pointer-events:none;visibility:hidden;border:1px solid #0000;align-items:center;gap:12px;padding:14px 20px;display:flex;position:absolute;top:-9999px;left:-9999px}.hero-morph-measurer .lotics-wave-avatar,.hero-morph-indicator-layer .lotics-wave-avatar{flex-shrink:0;width:28px;height:28px}.hero-morph-indicator-label{color:var(--color-gray-700);white-space:nowrap;font-size:14px;font-weight:500}.hero-morph-shimmer{background:linear-gradient(90deg, var(--color-gray-600) 0%, var(--color-gray-600) 35%, var(--color-gray-300) 50%, var(--color-gray-600) 65%, var(--color-gray-600) 100%);-webkit-text-fill-color:transparent;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:1.5s linear infinite heroMorphShimmer}@keyframes heroMorphShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.hero-indicator-icon{object-fit:contain;vertical-align:middle;flex-shrink:0;width:24px;height:24px;margin:0 4px}@media (width<=768px){.hero-demo{margin-top:calc(1rem + 24px)}.hero-demo-wrapper{max-width:100%}.hero-demo-grid{transform-origin:top;border-radius:8px;width:133.33%;height:420px;margin-left:-16.67%;transform:scale(.75)}.hero-demo-morph{width:320px;height:300px;bottom:22px}.hero-morph-shrinking,.hero-morph-indicator{width:240px;height:48px}.hero-morph-chat,.hero-morph-expanding,.hero-morph-chat-response{width:320px;height:300px}}