/* Live, resolution-independent product demo. No video or external dependencies. */
.hero{background:radial-gradient(ellipse at 76% 42%,#c4e8ff 0,transparent 51%),linear-gradient(110deg,#fff,#edf8ff 50%,#def2ff)}
.motion-demo{position:absolute;right:1.2%;top:0;width:52%;height:100%;font-size:1.2cqw;isolation:isolate}
.demo-glow{position:absolute;inset:8% -10% 10%;border-radius:50%;background:radial-gradient(ellipse,#82c6ff65,transparent 66%);filter:blur(12px)}
.demo-phone{position:absolute;width:17em;height:34.6em;padding:.45em;border:1px solid #667585;border-radius:2.9em;background:linear-gradient(120deg,#d6e4f1,#1b2534 10%,#050b14 70%,#7690a6);box-shadow:1.2em 2em 3em #18385835,inset 0 0 0 .15em #ffffff50;will-change:transform;overflow:hidden;transition:box-shadow .8s}
.demo-phone:after{content:'';position:absolute;inset:.5em;border:1px solid #ffffff40;border-radius:2.4em;pointer-events:none}
.caller-phone{left:0;top:6em;transform:rotate(-8deg);z-index:2;animation:phone-drift 7s ease-in-out infinite}
.stats-phone{right:0;top:10.1em;transform:rotate(7deg);z-index:3;animation:stats-drift 8s ease-in-out infinite}
.phone-island{position:absolute;width:5.7em;height:1.45em;top:1.05em;left:50%;transform:translateX(-50%);border-radius:2em;background:#080d15;z-index:5}
.phone-status{position:absolute;top:1.4em;left:1.6em;right:1.5em;display:flex;justify-content:space-between;font-size:.65em;font-weight:700;z-index:4;color:#0b244c}
.caller-phone .phone-status{color:#fff}
.call-screen,.stats-screen{height:100%;border-radius:2.4em;overflow:hidden;position:relative}
.call-screen{padding:4.4em 1.15em 1.3em;text-align:center;color:white;background:radial-gradient(ellipse at 50% 20%,#1972b5,#083868 49%,#041c3a 100%)}
.call-brand{font-size:1.9em;font-weight:700;letter-spacing:-.06em}.call-subtitle{font-size:.75em;color:#badcff;margin-top:.6em}
.avatar-orbit{position:relative;width:6.5em;height:6.5em;display:grid;place-items:center;margin:2.5em auto 1.3em}.call-avatar{display:grid;place-items:center;width:5.5em;height:5.5em;border-radius:50%;background:linear-gradient(140deg,#fff,#cfeaff);box-shadow:0 0 3em #7dccff66;z-index:1}.call-avatar svg{width:3.2em;fill:none;stroke:#1383df;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.orbit{position:absolute;inset:0;border:1px solid #b4e5ff60;border-radius:50%;animation:call-ring 2.7s ease-out infinite}.orbit.second{animation-delay:1.35s}.call-state{font-size:.85em;color:#c5e8ff;letter-spacing:.04em}
.voice-bars{height:3em;display:flex;align-items:center;justify-content:center;gap:.19em;opacity:0;transition:opacity .5s}.voice-bars i{display:block;width:.18em;height:var(--h);max-height:2.7em;background:#83dbff;border-radius:1em;transform:scaleY(.25);animation:voice-wave .7s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-73ms);animation-play-state:paused}
.transcript{position:absolute;top:19.3em;left:1.1em;right:1.1em;opacity:0;transform:translateY(.7em);transition:opacity .5s,transform .5s;background:#ffffff0e;border:1px solid #ffffff16;border-radius:1em;padding:1em;text-align:left}.transcript>span{font-size:.52em;letter-spacing:.18em;color:#86c9ff}.transcript p{font-size:.9em;line-height:1.5;margin-top:.5em;min-height:3em}
.call-bottom{position:absolute;bottom:1.6em;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.65em}.call-bottom>span{font-size:.75em;line-height:1.6;color:#c5e8ff;margin-bottom:1em}.call-bottom small{font-size:.65em;color:#d4eaff}.answer-call{display:grid;place-items:center;width:3.8em;height:3.8em;font:inherit;border:0;border-radius:50%;background:#36cb8a;box-shadow:0 0 0 .5em #41e49912;transition:background .4s,transform .25s;color:white}.answer-call:hover{transform:scale(1.1)}.answer-call svg{width:1.65em;fill:currentColor}.motion-demo[data-stage="ringing"] .answer-call svg{animation:call-wiggle 1.7s infinite}
.stats-screen{background:linear-gradient(150deg,#fff,#eef6fe);padding:4em 1.15em 1em}.stats-eyebrow{font-size:.49em;letter-spacing:.17em;color:#6786a6;font-weight:700}.stats-screen h3{font-size:1.45em;line-height:1.16;letter-spacing:-.055em;padding:0;margin:.5em 0 .9em;white-space:normal}.stats-day{display:flex;justify-content:space-between;align-items:center;font-size:.7em;font-weight:700}.stats-day span{font-size:.8em;font-weight:400;color:#74879e}
.calorie-ring{width:9em;height:9em;margin:1em auto;border-radius:50%;background:conic-gradient(from -90deg,#1888ff var(--progress),#e0edfa 0);padding:.62em;transform:rotate(-0deg);box-shadow:0 .5em 1.5em #489af015}.calorie-ring>div{height:100%;background:#f8fcff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.calorie-ring strong{font-size:2.3em;letter-spacing:-.07em;font-variant-numeric:tabular-nums}.calorie-ring small{font-size:.62em;color:#71839b;margin-top:.25em}
.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.65em}.macro-grid>div{display:flex;flex-direction:column;gap:.35em}.macro-grid strong{font-size:1.1em;font-variant-numeric:tabular-nums}.macro-grid strong small{font-size:.6em;color:#647e99;margin-left:.1em}.macro-grid>div>span{font-size:.6em;color:#71839b}.macro-grid i{display:block;height:.28em;border-radius:2em;background:#e0eaf3;overflow:hidden;margin-top:.15em}.macro-grid b{display:block;height:100%;width:var(--target);background:var(--color);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.logged-meal{display:flex;align-items:center;gap:.6em;background:#fff;border:1px solid #e4edf6;border-radius:.8em;padding:.6em;margin-top:1.3em;box-shadow:0 .2em .8em #193b6210}.logged-meal img{width:2.5em;height:2.6em;object-fit:cover;border-radius:.45em}.logged-meal strong{font-size:.65em;display:block}.logged-meal small{font-size:.52em;display:block;color:#7a8ca3;margin-top:.35em}.meal-check{margin-left:auto;color:#20a875;font-size:.8em;opacity:0;transition:opacity .6s}.water-row{display:flex;justify-content:space-between;margin-top:1.1em;font-size:.7em}.water-row>span{color:#5c809f}.water-track{height:.35em;border-radius:1em;background:#dcecf8;overflow:hidden;margin-top:.6em}.water-track span{display:block;width:12%;height:100%;background:#4ab4ed;transform:scaleX(0);transform-origin:left;transition:transform 1.7s}.insight-note{display:flex;gap:.5em;align-items:center;font-size:.55em;color:#547796;background:#e8f3fd;border-radius:.6em;padding:.8em;margin-top:1.2em;min-height:3.5em}.insight-dot{width:.5em;height:.5em;background:#299bdb;border-radius:50%;flex-shrink:0}.example-label{font-size:.45em;color:#8396aa;text-align:center;margin-top:.8em}
.motion-demo[data-stage="listening"] .orbit,.motion-demo[data-stage="complete"] .orbit{animation:none;opacity:0}.motion-demo[data-stage="listening"] .voice-bars{opacity:1}.motion-demo[data-stage="listening"] .voice-bars i{animation-play-state:running}.motion-demo:not([data-stage="ringing"]) .transcript{opacity:1;transform:translateY(0)}.motion-demo:not([data-stage="ringing"]) .call-bottom>span{display:none}.motion-demo[data-stage="listening"] .answer-call{background:#f46c75}.motion-demo[data-stage="listening"] .answer-call svg{transform:rotate(135deg)}.motion-demo[data-stage="complete"] .macro-grid b,.motion-demo[data-stage="complete"] .water-track span{transform:scaleX(1)}.motion-demo[data-stage="complete"] .meal-check{opacity:1}.motion-demo[data-stage="complete"] .stats-phone{box-shadow:1.2em 2em 3em #18385835,0 0 3em #399bff30}
.demo-toolbar{position:absolute;bottom:3em;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6em;z-index:5;white-space:nowrap}.demo-steps{display:flex;gap:.2em;background:#ffffffc9;border:1px solid #ffffff;border-radius:3em;padding:.35em;box-shadow:0 .4em 1.5em #2866a410;backdrop-filter:blur(12px)}.demo-steps button{font:inherit;font-size:.64em;border:0;border-radius:2em;padding:.9em 1.05em;background:transparent;color:#6785a4;transition:background .3s,color .3s}.demo-steps button span{margin-left:.35em}.demo-steps button[aria-pressed="true"]{background:#0a75e8;color:white;box-shadow:0 .2em .5em #0572ed25}#pause-demo{font:inherit;width:2.4em;height:2.4em;border-radius:50%;border:1px solid white;background:#ffffffc9;color:#1978c6}.demo-caption{position:absolute;bottom:1.8em;left:0;width:100%;text-align:center;font-size:.48em;letter-spacing:.16em;color:#6789aa}
.button{transition:transform .25s,box-shadow .25s,filter .25s}.button:hover{transform:translateY(-2px);box-shadow:0 8px 22px #0875ff24}.button:active{transform:translateY(0)}.phone-slide img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}.phone-slide:hover img{transform:translateY(-8px) rotate(-1deg)}.motion-reveal{transition:opacity .8s,transform .8s}.motion-reveal.is-pending{opacity:0;transform:translateY(28px)}.phone-slide:nth-child(2){transition-delay:.1s}.phone-slide:nth-child(3){transition-delay:.2s}.preview-live{display:flex;align-items:center;justify-content:center;gap:7px;margin:10px auto 0;color:#5482a5;font-size:12px}.preview-live i{height:5px;width:5px;border-radius:50%;background:#39b98d;box-shadow:0 0 0 4px #39b98d15;animation:live-dot 2s infinite}.carousel-heading h2{letter-spacing:-.04em}.hero-copy{animation:copy-in .9s both}
@keyframes phone-drift{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-.65em) rotate(-6.5deg)}}@keyframes stats-drift{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(.55em) rotate(5.5deg)}}@keyframes call-ring{0%{transform:scale(.8);opacity:0}20%{opacity:.65}100%{transform:scale(1.8);opacity:0}}@keyframes call-wiggle{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(-15deg)}20%,40%{transform:rotate(15deg)}}@keyframes voice-wave{to{transform:scaleY(1)}}@keyframes live-dot{50%{opacity:.4}}@keyframes copy-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.motion-paused *,.motion-suspended *{animation-play-state:paused!important}
@media(max-width:650px){.hero-copy{order:0}.motion-demo{position:relative;order:1;right:auto;top:auto;width:100%;height:122vw;max-height:650px;font-size:2.35vw}.caller-phone{left:3.5em;top:2.4em}.stats-phone{right:2.7em;top:6em}.demo-toolbar{bottom:4em}.demo-caption{bottom:4.2em}.hero{background:radial-gradient(ellipse at 50% 70%,#b9e2ff,#eef8ff 75%)}.demo-glow{inset:0}.demo-steps button{font-size:.85em;padding:.8em 1.1em}#pause-demo{width:3em;height:3em}.demo-caption{font-size:.6em}.phone-status{font-size:.7em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-reveal.is-pending{opacity:1;transform:none}}