/* Approved Infinity Ribbon. Every selector stays inside the hero animation. */
.landing-ribbon{--display:'Space Grotesk',Arial,sans-serif;--sans:'DM Sans',Arial,sans-serif;font-family:var(--sans);box-sizing:border-box}
.landing-ribbon *{box-sizing:border-box}
.landing-ribbon svg{display:block;width:100%;height:100%}
.landing-ribbon{position:relative;min-width:0;width:100%;height:590px;isolation:isolate;overflow:hidden;}
.landing-ribbon .stage-glow{position:absolute;inset:8% -10%;border-radius:50%;background:radial-gradient(ellipse,#0c66d32b,transparent 63%);pointer-events:none}
.landing-ribbon .orbit-trails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.7;pointer-events:none}
.landing-ribbon .orbit-trails ellipse{fill:none;stroke:url(#ribbon-trail);stroke-width:.8;stroke-dasharray:2 6;transform-origin:350px 300px}
.landing-ribbon .trail-b{transform:rotate(-12deg) scale(.83)}
.landing-ribbon .bot-symbol{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#2b86ff,#0849ce);color:white;font:700 25px/1 var(--display);letter-spacing:-.1em;position:relative}
.landing-ribbon .bot-symbol>span{font-size:18px;align-self:center;margin-top:6px;margin-left:1px}
.landing-ribbon .orbit-world{position:absolute;left:50%;top:50%;width:700px;height:600px;transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:center;pointer-events:none}
.landing-ribbon .interaction{position:absolute;left:350px;top:300px;width:440px;height:390px;margin-left:-220px;margin-top:-195px;will-change:transform,opacity;transform-origin:center;pointer-events:none}
.landing-ribbon .orbit-person{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;opacity:1;transition:opacity .65s}
.landing-ribbon .person-face{width:47px;height:47px;display:block;flex:none;border-radius:50%;overflow:hidden;box-shadow:0 6px 18px #0002;border:2px solid #d2e5fc44}
.landing-ribbon .orbit-person>.person-face{width:64px;height:64px;border:2px solid #aacdfb55;box-shadow:0 0 26px #5b9dff1c}
.landing-ribbon .orbit-person>small{display:block;white-space:nowrap;font-size:11px;letter-spacing:.01em;color:#9bbbdc;text-align:center;margin-top:8px}
.landing-ribbon .person-mode{position:absolute;width:24px;height:24px;background:#153c70;border:1px solid #6093d96b;color:#97cfff;padding:5px;border-radius:50%;top:43px;right:0}
.landing-ribbon .front-ui{height:100%;opacity:0;transition:opacity .6s;position:relative}
.landing-ribbon .interaction.is-front .front-ui{opacity:1}
.landing-ribbon .interaction.is-front .orbit-person{opacity:0}
.landing-ribbon .interaction.is-front{filter:none!important}
.landing-ribbon .interaction-label{color:#98b4d7;font-size:10px;font-weight:500;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px}
.landing-ribbon .alive-dot{display:inline-block;height:5px;width:5px;background:#7bd7e9;border-radius:50%;box-shadow:0 0 10px #62d4e9}
.landing-ribbon .call-content{padding-top:4px}
.landing-ribbon .call-cast{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:18px}
.landing-ribbon .call-cast>.person-face{width:54px;height:54px}
.landing-ribbon .cast-dots{font-size:14px;letter-spacing:6px;color:#4879b5;overflow:hidden;max-width:76px}
.landing-ribbon .bot-face{height:39px;width:39px;display:block;flex:none;border-radius:12px;overflow:hidden;box-shadow:0 0 20px #075cf51f}
.landing-ribbon .bot-face .bot-symbol{width:100%;height:100%;font-size:25px}
.landing-ribbon .call-cast>.bot-face{width:49px;height:49px;border-radius:16px}
.landing-ribbon .call-instrument{display:flex;align-items:center;justify-content:center;gap:40px;margin:31px 0 27px}
.landing-ribbon .receiver{position:relative;width:100px;height:100px;padding:29px;border-radius:50%;color:white;background:linear-gradient(145deg,#328bff,#0644bf);box-shadow:inset 0 1px 3px #d9efff44,0 0 50px #1664ff36;flex:none;transform-origin:center}
.landing-ribbon .receiver i{position:absolute;inset:-10px;border:1px solid #3e8bed40;border-radius:50%;animation:ribbon-receiver-ring 3.4s infinite}
.landing-ribbon .receiver i:last-child{inset:-23px;animation-delay:.8s}
.landing-ribbon .receiver>svg{filter:drop-shadow(0 2px 3px #00379d44)}
.landing-ribbon .waveform{display:flex;align-items:center;gap:4px;height:75px;width:174px;flex:none}
.landing-ribbon .waveform>i{width:3px;height:var(--amplitude);background:linear-gradient(#a4eff5,#3b83f9);border-radius:8px;transform-origin:center;animation:ribbon-voice-meter 1.1s calc(var(--bar)*-.085s) infinite alternate}
.landing-ribbon .interaction.is-listening .waveform>i{background:linear-gradient(#a1c1e5,#5b7ba5);animation-duration:1.6s}
.landing-ribbon .interaction.is-speaking .receiver{animation:ribbon-phone-breathe 3s ease-in-out infinite}
.landing-ribbon .spoken{width:90%;margin:auto;text-align:center}
.landing-ribbon .spoken>span{font-size:8px;letter-spacing:.16em;color:#739ac6}
.landing-ribbon .spoken p{font-size:18px;line-height:1.6;color:#e0edff;margin:9px 0 0;font-weight:400;letter-spacing:-.02em;min-height:59px}
.landing-ribbon .outcome{display:flex;align-items:center;justify-content:center;gap:8px;color:#83d7ba;font-size:10px;letter-spacing:.01em;line-height:1.6;margin-top:23px}
.landing-ribbon .outcome i{font-style:normal;width:17px;height:17px;display:grid;place-items:center;border:1px solid #72d7b455;border-radius:50%;font-size:9px}
.landing-ribbon .beat{opacity:0;translate:0 12px;filter:blur(3px);transition:opacity .75s ease,translate 1s cubic-bezier(.18,.7,.2,1),filter .8s}
.landing-ribbon .beat.is-shown{opacity:1;translate:0 0;filter:none}
.landing-ribbon .chat-content{padding-top:0;display:flex;flex-direction:column;gap:15px}
.landing-ribbon .chat-content>.interaction-label{margin-bottom:8px}
.landing-ribbon .floating-message{display:flex;align-items:flex-start;gap:12px;max-width:400px}
.landing-ribbon .floating-message>.person-face{width:36px;height:36px;margin-top:4px}
.landing-ribbon .floating-message>.bot-face{width:36px;height:36px;margin-top:4px;border-radius:11px}
.landing-ribbon .floating-message>div{border-radius:14px 14px 14px 3px;padding:13px 17px;background:#e6effa;color:#1f405e;box-shadow:0 8px 30px #0000000f;max-width:330px}
.landing-ribbon .floating-message small{font-size:7px;letter-spacing:.12em;color:#7289a2;display:block;margin-bottom:5px}
.landing-ribbon .floating-message p{font-size:12px;line-height:1.65;margin:0}
.landing-ribbon .customer-message{align-self:flex-start;margin-right:38px}
.landing-ribbon .ai-message{align-self:flex-end;margin-left:38px}
.landing-ribbon .ai-message>div{background:#163d76;color:#ddecff;border:1px solid #4a88d433;border-radius:14px 14px 3px 14px;box-shadow:0 10px 35px #003e8c17}
.landing-ribbon .ai-message small{color:#74a4dc}
.landing-ribbon .chat-content>.outcome{margin-top:4px}
.landing-ribbon .interaction[data-mode=call].is-front .receiver{border:1px solid #89bfff22}
.landing-ribbon .orbit-trails{transform:rotate(-13deg)}
.landing-ribbon .trail-a{transform:translateX(-105px) scaleX(.62) rotate(-28deg)}
.landing-ribbon .trail-b{transform:translateX(105px) scaleX(.62) rotate(28deg)}
.landing-ribbon .receiver{background:linear-gradient(145deg,#8886e9,#4e56bb);box-shadow:0 0 60px #7b7ee344}
.landing-ribbon .receiver i{border-color:#9196ed44}
.landing-ribbon .waveform>i{background:linear-gradient(#ced7ff,#7a9ae9)}
.landing-ribbon .ai-message>div{background:#2b3566;color:#e3e9ff;border-color:#7e92d933}
@keyframes ribbon-receiver-ring{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.25);opacity:0}}
@keyframes ribbon-voice-meter{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
@keyframes ribbon-phone-breathe{0%,100%{scale:1}50%{scale:1.04}}
@media (min-width:1500px){
.landing-ribbon{height:650px}
}
@media (max-width:1100px){
.landing-ribbon{height:560px}
}
@media (max-width:860px){
.landing-ribbon{order:1;height:590px;width:100%;max-width:700px;margin:auto}
}
@media (max-width:500px){
.landing-ribbon{height:440px;margin-top:8px;overflow:hidden}
}
@media (max-width:500px){
.landing-ribbon{height:480px}
.landing-ribbon .interaction{height:590px;margin-top:-295px}
.landing-ribbon .chat-content{gap:18px;padding-top:18px}
.landing-ribbon .interaction-label{font-size:14px;min-height:30px}
.landing-ribbon .floating-message{max-width:420px;gap:14px}
.landing-ribbon .floating-message>.person-face,.landing-ribbon .floating-message>.bot-face{width:48px;height:48px}
.landing-ribbon .floating-message>div{padding:15px 17px;max-width:345px}
.landing-ribbon .floating-message p{font-size:19px;line-height:1.5}
.landing-ribbon .floating-message small{font-size:10px;margin-bottom:7px}
.landing-ribbon .chat-content>.outcome{font-size:14px;margin-top:12px}
.landing-ribbon .outcome i{width:23px;height:23px;font-size:12px}
.landing-ribbon .call-content{padding-top:65px}
.landing-ribbon .call-cast{margin-top:25px}
.landing-ribbon .call-cast>.person-face,.landing-ribbon .call-cast>.bot-face{width:68px;height:68px}
.landing-ribbon .call-instrument{margin:38px 0 30px;gap:30px}
.landing-ribbon .receiver{width:135px;height:135px;padding:37px}
.landing-ribbon .waveform{height:100px;width:185px;gap:4px}
.landing-ribbon .waveform>i{height:calc(var(--amplitude)*1.3);width:3px}
.landing-ribbon .spoken>span{font-size:12px}
.landing-ribbon .spoken p{font-size:25px;line-height:1.55;min-height:83px}
.landing-ribbon .call-content>.outcome{font-size:14px;margin-top:30px}
.landing-ribbon .bot-face .bot-symbol{font-size:31px}
.landing-ribbon .bot-symbol>span{font-size:22px}
}
.landing-ribbon[data-paused=true] .receiver,.landing-ribbon[data-paused=true] .receiver i,.landing-ribbon[data-paused=true] .waveform>i{animation-play-state:paused!important}
.landing-ribbon .brand-avatar{overflow:hidden;background:none;display:block;border-radius:22%;letter-spacing:normal}
.landing-ribbon .brand-avatar img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;filter:none}
.landing-ribbon .bot-face{border-radius:22%;background:none;box-shadow:0 0 28px #8191ed30}
.landing-ribbon .orbit-person{transform:translate(-50%,calc(-50% + var(--arrival-offset,0px))) scale(var(--arrival-scale,1));transition:none}
.landing-ribbon .call-content{padding-top:12px}
.landing-ribbon .call-visual{height:190px;position:relative;margin:22px 0 18px;isolation:isolate}
.landing-ribbon .call-cast{position:absolute;inset:0;margin:0;display:block}
.landing-ribbon .call-cast>.person-face,.landing-ribbon .call-cast>.bot-face{position:absolute;left:50%;top:50%;width:94px;height:94px;border-radius:50%;opacity:1;will-change:transform;z-index:1}
.landing-ribbon .call-cast>.person-face{transform:translate(calc(-50% - 153px * var(--cast-reveal,0)),-50%) scale(var(--cast-reveal,0));border:2px solid #c1ceff88}
.landing-ribbon .call-cast>.bot-face{transform:translate(calc(-50% + 153px * var(--cast-reveal,0)),-50%) scale(var(--cast-reveal,0));border:0;border-radius:22%}
.landing-ribbon .call-visual>.receiver{position:absolute;left:50%;top:50%;width:132px;height:132px;padding:39px;display:block;z-index:3;transform:translate(-50%,-50%) scale(var(--receiver-scale,1));opacity:var(--receiver-opacity,1);animation:none!important;transition:none}
.landing-ribbon .call-visual>.receiver i{inset:-8px;border:1px solid #babdff;transform:scale(var(--ring-scale,1));opacity:var(--ring-opacity,0);animation:none!important}
.landing-ribbon .call-visual>.waveform{position:absolute;left:50%;top:50%;margin:0;width:174px;height:85px;justify-content:center;gap:3px;opacity:var(--wave-reveal,0);transform:translate(-50%,-50%) scaleX(calc(.82 + .18 * var(--wave-reveal,0)));z-index:2;transition:none}
.landing-ribbon .call-visual>.waveform>i{flex:none;width:3px}
.landing-ribbon .spoken{position:relative;height:106px;width:96%;margin:0 auto;opacity:1;translate:none;filter:none}
.landing-ribbon .call-turn{position:absolute;inset:0;text-align:center;opacity:0;will-change:opacity,transform}
.landing-ribbon .call-turn>span{font-size:9px;letter-spacing:.13em;color:#8eabd5}
.landing-ribbon .call-turn p{font-size:21px;line-height:1.5;color:#e0edff;margin:12px 0 0;letter-spacing:-.025em;min-height:64px}
.landing-ribbon .call-content>.outcome{margin-top:10px}
.landing-ribbon .interaction.is-listening .customer-face{box-shadow:0 0 0 5px #a4bdff12,0 0 32px #8dacf52b}
.landing-ribbon .interaction.is-speaking .call-cast>.bot-face{box-shadow:0 0 0 5px #a4bdff12,0 0 36px #8dacf544}
@media (max-width:500px){
.landing-ribbon .call-content{padding-top:62px}
.landing-ribbon .call-visual{height:220px;margin:28px 0 22px}
.landing-ribbon .call-cast>.person-face,.landing-ribbon .call-cast>.bot-face{width:108px;height:108px}
.landing-ribbon .call-cast>.person-face{transform:translate(calc(-50% - 154px * var(--cast-reveal,0)),-50%) scale(var(--cast-reveal,0))}
.landing-ribbon .call-cast>.bot-face{transform:translate(calc(-50% + 154px * var(--cast-reveal,0)),-50%) scale(var(--cast-reveal,0))}
.landing-ribbon .call-visual>.receiver{width:150px;height:150px;padding:44px}
.landing-ribbon .call-visual>.waveform{width:170px}
.landing-ribbon .call-visual>.waveform>i{height:var(--amplitude)}
.landing-ribbon .spoken{height:126px}
.landing-ribbon .call-turn>span{font-size:12px}
.landing-ribbon .call-turn p{font-size:28px;line-height:1.5;margin-top:14px;min-height:84px}
.landing-ribbon .call-content>.outcome{margin-top:14px}
}
.hero-theatre--ribbon .landing-ribbon{height:480px;margin:0}
@media(max-width:600px){.hero-theatre--ribbon .landing-ribbon{height:445px}}
@media(prefers-reduced-motion:reduce){.landing-ribbon *{animation:none!important;transition:none!important}}