/* Service examples: scoped colour, visible progress and in-view animation. */
.demo-wrap:not([data-kind="maps"]){--qt-demo-accent:#2449ff;--qt-demo-dark:#152668;--qt-demo-soft:#eef2ff;--qt-demo-pop:#b8c5ff;--blue:var(--qt-demo-accent);--pale:var(--qt-demo-soft);background:linear-gradient(145deg,var(--qt-demo-soft),#fff 78%);border-color:color-mix(in srgb,var(--qt-demo-accent) 19%,#fff);box-shadow:0 15px 48px color-mix(in srgb,var(--qt-demo-accent) 8%,transparent)}
.demo-wrap[data-kind="web"]{--qt-demo-accent:#2f4ce0;--qt-demo-dark:#17245f;--qt-demo-soft:#eef2ff;--qt-demo-pop:#b8c5ff}
.demo-wrap[data-kind="shop"]{--qt-demo-accent:#bc4625;--qt-demo-dark:#582718;--qt-demo-soft:#fff1e8;--qt-demo-pop:#ffad78}
.demo-wrap[data-kind="social"]{--qt-demo-accent:#8031b7;--qt-demo-dark:#431b67;--qt-demo-soft:#f7edff;--qt-demo-pop:#deafff}
.demo-wrap[data-kind="reviews"]{--qt-demo-accent:#08756e;--qt-demo-dark:#083d3b;--qt-demo-soft:#eafaf6;--qt-demo-pop:#78e2cf}
.demo-wrap[data-kind="app"]{--qt-demo-accent:#6d39c4;--qt-demo-dark:#321564;--qt-demo-soft:#f2edff;--qt-demo-pop:#c7afff}
.demo-wrap[data-kind="chat"]{--qt-demo-accent:#0b7043;--qt-demo-dark:#123f31;--qt-demo-soft:#ebfbf1;--qt-demo-pop:#83e3ac}
.demo-wrap[data-kind="seo"]{--qt-demo-accent:#264cc0;--qt-demo-dark:#182d66;--qt-demo-soft:#eff4ff;--qt-demo-pop:#a7c6ff}
.demo-wrap[data-kind="ads"]{--qt-demo-accent:#c04421;--qt-demo-dark:#612d22;--qt-demo-soft:#fff1e9;--qt-demo-pop:#ffa783}
.demo-wrap[data-kind="socialads"]{--qt-demo-accent:#b8326a;--qt-demo-dark:#5b1938;--qt-demo-soft:#fff0f6;--qt-demo-pop:#ffa2cd}
.demo-wrap[data-kind="analytics"]{--qt-demo-accent:#036e95;--qt-demo-dark:#123d53;--qt-demo-soft:#eaf9ff;--qt-demo-pop:#8bddff}
.demo-wrap[data-kind="email"]{--qt-demo-accent:#af375f;--qt-demo-dark:#5a1c35;--qt-demo-soft:#fff0f5;--qt-demo-pop:#ffc0d3}
.demo-wrap[data-kind="retention"]{--qt-demo-accent:#915600;--qt-demo-dark:#4c310b;--qt-demo-soft:#fff8e5;--qt-demo-pop:#ffdc7e}
.demo-wrap[data-kind="workflow"]{--qt-demo-accent:#087a72;--qt-demo-dark:#073f3b;--qt-demo-soft:#eafaf6;--qt-demo-pop:#83e4d6}
.demo-wrap[data-kind="brand"]{--qt-demo-accent:#7541bf;--qt-demo-dark:#351b65;--qt-demo-soft:#f4efff;--qt-demo-pop:#d3b0ff}
.demo-wrap[data-kind="creative"]{--qt-demo-accent:#bd294b;--qt-demo-dark:#591831;--qt-demo-soft:#fff0f3;--qt-demo-pop:#ffb0c0}
.demo-wrap[data-kind="strategy"]{--qt-demo-accent:#245fc1;--qt-demo-dark:#133666;--qt-demo-soft:#edf5ff;--qt-demo-pop:#9bc9ff}
.demo-wrap[data-kind="cro"]{--qt-demo-accent:#a6590c;--qt-demo-dark:#5b3210;--qt-demo-soft:#fff6e8;--qt-demo-pop:#ffcc81}
.demo-wrap[data-kind="catalog"]{--qt-demo-accent:#067672;--qt-demo-dark:#0b4241;--qt-demo-soft:#e9fbf8;--qt-demo-pop:#7ae3cd}
.demo-wrap[data-kind="distribution"]{--qt-demo-accent:#bf4528;--qt-demo-dark:#5e281d;--qt-demo-soft:#fff1eb;--qt-demo-pop:#ffb594}
.demo-wrap[data-kind="loyalty"]{--qt-demo-accent:#955619;--qt-demo-dark:#4f3115;--qt-demo-soft:#fff5e5;--qt-demo-pop:#ffcd83}
.demo-wrap[data-kind="booking"]{--qt-demo-accent:#056b9b;--qt-demo-dark:#133d5a;--qt-demo-soft:#ecf8ff;--qt-demo-pop:#8ddaff}
.demo-wrap[data-kind="locations"]{--qt-demo-accent:#4563b3;--qt-demo-dark:#233369;--qt-demo-soft:#eef3ff;--qt-demo-pop:#adbeff}
.demo-wrap[data-kind="care"]{--qt-demo-accent:#26754c;--qt-demo-dark:#193e2c;--qt-demo-soft:#edf9f1;--qt-demo-pop:#a7e4bc}
.demo-wrap:not([data-kind="maps"]) .sample-badge{color:var(--qt-demo-dark);background:var(--qt-demo-soft);border-color:color-mix(in srgb,var(--qt-demo-accent) 25%,white)}
.demo-wrap:not([data-kind="maps"]) .widget-heading>b{color:var(--qt-demo-dark)}
.demo-wrap:not([data-kind="maps"]) .segmented button.active{color:var(--qt-demo-dark);box-shadow:0 2px 8px color-mix(in srgb,var(--qt-demo-accent) 13%,transparent)}
.demo-wrap:not([data-kind="maps"]) .mini-button:hover{background:var(--qt-demo-dark)}
.demo-wrap:not([data-kind="maps"]) .small-pill{color:var(--qt-demo-dark);background:var(--qt-demo-soft)}

/* Existing and new demo animations are idle until their observer activates them. */
.demo-wrap:not([data-kind="maps"]) *,.demo-wrap:not([data-kind="maps"]) *:before,.demo-wrap:not([data-kind="maps"]) *:after{animation-play-state:paused!important}
.demo-wrap.demo-active:not([data-kind="maps"]) *,.demo-wrap.demo-active:not([data-kind="maps"]) *:before,.demo-wrap.demo-active:not([data-kind="maps"]) *:after{animation-play-state:running!important}
.demo-wrap:not([data-kind="maps"]) .qt-demo-stage:not(.running):not(.complete){animation:qt-demo-stage var(--qt-stage-duration,7s) ease-in-out infinite;animation-delay:var(--qt-stage-delay,0s);border-radius:5px}

/* Websites: a coded brand mark and a readable sequence of readiness checks. */
.demo-wrap[data-kind="web"] .web-brand-art{background:linear-gradient(145deg,var(--qt-demo-dark),var(--qt-demo-accent));isolation:isolate;min-height:190px}
.demo-wrap[data-kind="web"] .web-brand-art img{display:none}
.demo-wrap[data-kind="web"] .web-brand-art:before{content:'';position:absolute;inset:10px;display:grid;place-items:center;font:400 120px/1 var(--heading);color:var(--qt-demo-pop);animation:qt-demo-turn 14s linear infinite}
.demo-wrap[data-kind="web"] .web-brand-art:after{content:'';position:absolute;inset:30px 20px;border:1px solid #ffffff40;border-radius:26%;transform:rotate(-15deg);animation:qt-demo-orbit 7s ease-in-out infinite}
.demo-wrap[data-kind="web"] .web-brand-art>span{z-index:2}
.demo-wrap[data-kind="web"] .web-benefits{gap:7px}
.demo-wrap[data-kind="web"] .web-benefits>span{padding:6px 3px}
.demo-wrap[data-kind="web"] .web-enquiry>span{animation:qt-demo-list-scan 4.8s ease-in-out infinite}
.demo-wrap[data-kind="web"] .web-enquiry>span:nth-child(2){animation-delay:1.6s}
.demo-wrap[data-kind="web"] .web-enquiry>span:nth-child(3){animation-delay:3.2s}

/* Shop, social and app imagery becomes a small reference within an active UI. */
.demo-wrap[data-kind="shop"] .store-image{height:120px;background:linear-gradient(125deg,var(--qt-demo-dark),var(--qt-demo-accent));isolation:isolate}
.demo-wrap[data-kind="shop"] .store-image img{position:absolute;right:16px;top:15px;width:93px;height:90px;border:3px solid #ffffffa6;border-radius:10px;object-fit:cover;z-index:1}
.demo-wrap[data-kind="shop"] .store-image:before{content:'';position:absolute;left:13%;top:-70px;width:230px;height:230px;border:1px solid #ffffff30;border-radius:50%;animation:qt-demo-orbit 8s ease-in-out infinite}
.demo-wrap[data-kind="shop"] .store-image:after{content:'';position:absolute;left:19%;top:-48px;width:188px;height:188px;border:1px dashed #ffffff4d;border-radius:50%;animation:qt-demo-turn 23s linear infinite}
.demo-wrap[data-kind="shop"] .store-image-label{left:15px;bottom:22px;max-width:calc(100% - 132px);font-size:9px;background:#ffffff12;z-index:2}
.demo-wrap[data-kind="shop"] .store-product{position:relative;padding-bottom:25px}
.demo-wrap[data-kind="shop"] .store-product:after{content:'';height:3px;position:absolute;left:16px;right:16px;bottom:10px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--qt-demo-pop),var(--qt-demo-accent),transparent);transform-origin:left;animation:qt-demo-progress 5.5s ease-in-out infinite}
.demo-wrap[data-kind="shop"] .bag-count{border-radius:5px;padding:5px 7px;background:var(--qt-demo-soft);color:var(--qt-demo-dark)!important}
.demo-wrap[data-kind="social"] .social-demo{padding-bottom:0}
.demo-wrap[data-kind="social"] .social-photo{height:150px;background:linear-gradient(125deg,var(--qt-demo-dark),var(--qt-demo-accent));isolation:isolate}
.demo-wrap[data-kind="social"] .social-photo img{position:absolute;right:14px;top:22px;width:106px;height:106px;border:3px solid #ffffffaa;border-radius:50%;z-index:1}
.demo-wrap[data-kind="social"] .social-overlay{font-size:34px;left:21px;top:25px;max-width:calc(100% - 135px);z-index:2}
.demo-wrap[data-kind="social"] .social-photo:before{content:'';position:absolute;width:220px;height:220px;border:1px solid #ffffff3d;border-radius:50%;right:-5px;top:-33px;animation:qt-demo-orbit 7.5s ease-in-out infinite}
.demo-wrap[data-kind="social"] .social-calendar{width:100%;margin:14px 0 0;box-shadow:0 8px 22px color-mix(in srgb,var(--qt-demo-accent) 10%,transparent)}
.demo-wrap[data-kind="social"] .calendar-item{padding-left:7px;padding-right:7px}
.demo-wrap[data-kind="social"] .calendar-day{color:var(--qt-demo-dark);background:var(--qt-demo-soft)}
.demo-wrap[data-kind="app"] .app-visual{height:135px;background:linear-gradient(120deg,var(--qt-demo-dark),var(--qt-demo-accent));isolation:isolate}
.demo-wrap[data-kind="app"] .app-visual img{width:148px;height:119px;position:absolute;right:8px;top:8px;object-fit:cover;border-radius:8px;z-index:1}
.demo-wrap[data-kind="app"] .app-visual:before{content:'';position:absolute;width:210px;height:210px;left:3%;top:-35px;border:1px dashed #ffffff58;border-radius:50%;animation:qt-demo-turn 24s linear infinite}
.demo-wrap[data-kind="app"] .app-visual:after{content:'';position:absolute;left:32px;top:29px;right:auto;bottom:auto;width:72px;height:72px;border:2px solid #ffffff52;background:#ffffff0c;border-radius:19px;box-shadow:none;transform:rotate(-12deg);animation:qt-demo-orbit 6.5s ease-in-out infinite}
.demo-wrap[data-kind="app"] .app-floating-label{left:18px;bottom:16px;max-width:calc(100% - 155px);font-size:8px;line-height:1.5;background:#ffffff1f;z-index:2}
.demo-wrap[data-kind="app"] .app-icon{background:var(--qt-demo-soft);color:var(--qt-demo-accent);animation:qt-demo-icon-pulse 5s ease-in-out infinite}

/* Reviews and SEO: visible draft and page-quality sequences, without fake decisions. */
.demo-wrap[data-kind="reviews"] .reply-card{position:relative;overflow:hidden;border-left-color:var(--qt-demo-accent);padding-bottom:25px}
.demo-wrap[data-kind="reviews"] .reply-card:after{content:'';position:absolute;bottom:9px;left:18px;right:18px;height:3px;background:linear-gradient(90deg,var(--qt-demo-pop),var(--qt-demo-accent));border-radius:3px;transform-origin:left;animation:qt-demo-progress 6s ease-in-out infinite}
.demo-wrap[data-kind="reviews"] .review-avatar{background:var(--qt-demo-soft);color:var(--qt-demo-dark);animation:qt-demo-icon-pulse 5s ease-in-out infinite}
.demo-wrap[data-kind="seo"] .search-box{position:relative;overflow:hidden}
.demo-wrap[data-kind="seo"] .search-box:after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--qt-demo-accent),transparent);animation:qt-demo-scan 5s ease-in-out infinite}
.demo-wrap[data-kind="seo"] .search-result h4{color:var(--qt-demo-accent)}
.demo-wrap[data-kind="seo"] .seo-checks>span{padding:7px 6px}

/* Campaigns and analytics: sample charts draw while the example is visible. */
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .chart-line{stroke:var(--qt-demo-accent);stroke-dasharray:510;animation:qt-demo-chart 6.5s ease-in-out infinite}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .chart-area{fill:color-mix(in srgb,var(--qt-demo-accent) 11%,transparent);animation:qt-demo-chart-fill 6.5s ease-in-out infinite}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .line-chart circle{fill:var(--qt-demo-accent);transform-box:fill-box;transform-origin:center;animation:qt-demo-dot 3.25s ease-in-out infinite}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .metric-row>div{position:relative;padding:10px 6px 17px;overflow:hidden}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .metric-row>div:after{content:'';position:absolute;bottom:4px;left:6px;width:72%;height:3px;background:var(--qt-demo-accent);border-radius:3px;transform-origin:left;animation:qt-demo-progress 5.5s ease-in-out infinite}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .metric-row>div:nth-child(2):after{width:54%;background:var(--qt-demo-pop);animation-delay:1s}
.demo-wrap:is([data-kind="ads"],[data-kind="socialads"],[data-kind="analytics"]) .metric-row>div:nth-child(3):after{width:83%;animation-delay:2s}

/* Messaging: visible journey connectors and activity around real sample conversations. */
.demo-wrap[data-kind="email"] .email-body{background:linear-gradient(140deg,var(--qt-demo-accent),var(--qt-demo-dark))}
.demo-wrap[data-kind="email"] .email-body p{color:#fff0f5}
.demo-wrap[data-kind="email"] .journey-dots>span{padding:7px 5px;min-width:0}
.demo-wrap[data-kind="email"] .journey-dots>i{height:2px;position:relative;overflow:hidden}
.demo-wrap[data-kind="email"] .journey-dots>i:after{content:'';position:absolute;inset:0;background:var(--qt-demo-accent);transform-origin:left;animation:qt-demo-progress 4.5s ease-in-out infinite}
.demo-wrap[data-kind="email"] .journey-dots>i:nth-of-type(2):after{animation-delay:1.5s}
.demo-wrap[data-kind="retention"] .retention-circle{background:linear-gradient(135deg,var(--qt-demo-pop),#fff5c9);color:var(--qt-demo-dark)}
.demo-wrap[data-kind="retention"] .retention-circle:before{content:'';position:absolute;width:195px;height:195px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--qt-demo-accent) 45%,transparent);animation:qt-demo-turn 24s linear infinite}
.demo-wrap[data-kind="retention"] .retention-steps>div{padding:9px 7px}
.demo-wrap[data-kind="chat"] .chat-spark{color:var(--qt-demo-pop);animation:qt-demo-spark 6s ease-in-out infinite}
.demo-wrap[data-kind="chat"] .chat-top{background:linear-gradient(120deg,var(--qt-demo-dark),var(--qt-demo-accent))}
.demo-wrap[data-kind="chat"] .chat-avatar{position:relative;background:var(--qt-demo-pop)}
.demo-wrap[data-kind="chat"] .chat-avatar:after{content:'';position:absolute;inset:-4px;border:1px solid #a9f5c985;border-radius:50%;animation:qt-demo-dot 4s ease-in-out infinite}

/* Workflows and strategy: travel through the existing connected stages. */
.demo-wrap[data-kind="workflow"] .workflow-nodes>i{position:relative;width:2px;background:var(--qt-demo-soft)}
.demo-wrap[data-kind="workflow"] .workflow-nodes>i:after{content:'';position:absolute;top:0;left:-1px;width:4px;height:6px;background:var(--qt-demo-accent);border-radius:4px;animation:qt-demo-travel 2.6s ease-in-out infinite}
.demo-wrap[data-kind="workflow"] .workflow-nodes>i:nth-of-type(2):after{animation-delay:.8s}
.demo-wrap[data-kind="workflow"] .workflow-nodes>i:nth-of-type(3):after{animation-delay:1.6s}
.demo-wrap[data-kind="strategy"] .blueprint-title{background:linear-gradient(130deg,var(--qt-demo-accent),var(--qt-demo-dark))}
.demo-wrap[data-kind="strategy"] .blueprint-route>div{padding:7px}
.demo-wrap[data-kind="strategy"] .blueprint-route>i{position:relative;border-color:var(--qt-demo-accent);margin-left:23px}
.demo-wrap[data-kind="strategy"] .blueprint-route>i:after{content:'';position:absolute;left:-3px;top:0;width:5px;height:7px;background:var(--qt-demo-accent);border-radius:5px;animation:qt-demo-travel 2.7s ease-in-out infinite}
.demo-wrap[data-kind="strategy"] .blueprint-route>i:nth-of-type(2):after{animation-delay:1.3s}

/* Brand and video previews use coded shapes rather than a dominant static picture. */
.demo-wrap[data-kind="brand"] .brand-poster{position:relative;isolation:isolate;overflow:hidden;background:#2449ff}
.demo-wrap[data-kind="brand"] .brand-swatches button:first-child:before{background:#2449ff}
.demo-wrap[data-kind="brand"] .brand-poster:before{content:'';position:absolute;right:-45px;top:30px;width:205px;height:205px;border:1px solid #ffffff4d;border-radius:28%;transform:rotate(20deg);z-index:-1;animation:qt-demo-turn 24s linear infinite}
.demo-wrap[data-kind="brand"] .brand-poster:after{content:'';position:absolute;right:5px;top:65px;width:145px;height:145px;border:1px dashed #ffffff42;border-radius:50%;z-index:-1;animation:qt-demo-orbit 9s ease-in-out infinite}
.demo-wrap[data-kind="creative"] .creative-frame{background:linear-gradient(135deg,var(--qt-demo-accent),var(--qt-demo-dark));color:white;height:345px;isolation:isolate}
.demo-wrap[data-kind="creative"] .creative-frame img{position:absolute;right:18px;bottom:70px;width:80px;height:80px;object-fit:cover;border:2px solid #ffffff75;border-radius:50%;opacity:.8}
.demo-wrap[data-kind="creative"] .creative-frame:before{content:'';position:absolute;right:-30px;top:24px;width:205px;height:205px;border:1px dashed #ffffff52;border-radius:50%;animation:qt-demo-turn 25s linear infinite}
.demo-wrap[data-kind="creative"] .creative-frame:after{background:linear-gradient(145deg,#ffffff09,transparent 55%,#00000020)}
.demo-wrap[data-kind="creative"] .creative-frame:not(.playing) .creative-play{animation:qt-demo-icon-pulse 3.8s ease-in-out infinite}
.demo-wrap[data-kind="creative"] .creative-timeline:after{content:'';position:absolute;left:0;top:0;width:28%;height:100%;background:#ffffff75;border-radius:2px;animation:qt-demo-scan 5.4s ease-in-out infinite}
.demo-wrap[data-kind="creative"] .creative-frame.playing .creative-timeline:after{display:none}

/* Conversion, catalog and distribution: scans and sequential quality checks. */
.demo-wrap[data-kind="cro"] .cro-page{position:relative;overflow:hidden;background:var(--qt-demo-soft);border-color:color-mix(in srgb,var(--qt-demo-accent) 23%,white)}
.demo-wrap[data-kind="cro"] .cro-page:after{content:'';position:absolute;left:-100%;top:0;bottom:0;width:50%;background:linear-gradient(90deg,transparent,#ffffff65,transparent);pointer-events:none;animation:qt-demo-wash 7.5s ease-in-out infinite}
.demo-wrap[data-kind="cro"] .cro-trust>span{padding:6px 3px}
.demo-wrap[data-kind="cro"] .cro-page.variant-a{background:#f5f5f7;border-color:var(--line)}
.demo-wrap[data-kind="catalog"] .feed-channels>span{background:var(--qt-demo-soft);border-color:color-mix(in srgb,var(--qt-demo-accent) 21%,white);color:var(--qt-demo-dark)}
.demo-wrap[data-kind="catalog"] .feed-channels>i{background:color-mix(in srgb,var(--qt-demo-accent) 25%,white)}
.demo-wrap[data-kind="catalog"] .feed-channels>i:after{background:var(--qt-demo-accent);box-shadow:0 0 0 3px var(--qt-demo-soft)}
.demo-wrap[data-kind="distribution"] .video-plan{background:linear-gradient(140deg,var(--qt-demo-dark),var(--qt-demo-accent))}
.demo-wrap[data-kind="distribution"] .video-plan span{color:#ffdfd1}
.demo-wrap[data-kind="distribution"] .video-icon{background:#ffffff1b;color:#ffe2d4;position:relative;animation:qt-demo-icon-pulse 4.5s ease-in-out infinite}
.demo-wrap[data-kind="distribution"] .video-icon:after{content:'';position:absolute;inset:-7px;border:1px solid #ffffff42;border-radius:50%;animation:qt-demo-dot 4.5s ease-in-out infinite}
.demo-wrap[data-kind="distribution"] .distribution-track>div{padding:9px 6px}
.demo-wrap[data-kind="distribution"] .distribution-footer i{color:var(--qt-demo-accent)}

/* Loyalty, bookings, branches and maintenance retain their existing actions and values. */
.demo-wrap[data-kind="loyalty"] .loyalty-card{background:linear-gradient(135deg,var(--qt-demo-accent),var(--qt-demo-dark))}
.demo-wrap[data-kind="loyalty"] .loyalty-card:after{border:1px dashed #ffffff50;animation:qt-demo-turn 25s linear infinite}
.demo-wrap[data-kind="loyalty"] .loyalty-card>div:nth-child(2)>span{color:#ffe7c8}
.demo-wrap[data-kind="loyalty"] .loyalty-message{color:#fff4e5}
.demo-wrap[data-kind="loyalty"] .loyalty-progress{position:relative;overflow:visible}
.demo-wrap[data-kind="loyalty"] .loyalty-progress:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff60,transparent);animation:qt-demo-scan 6s ease-in-out infinite;pointer-events:none}
.demo-wrap[data-kind="loyalty"] .loyalty-actions>button{border-color:color-mix(in srgb,var(--qt-demo-accent) 22%,white)}
.demo-wrap[data-kind="booking"] .booking-service>span{position:relative;border-color:var(--qt-demo-pop)}
.demo-wrap[data-kind="booking"] .booking-service>span:after{content:'';position:absolute;inset:-4px;border:1px dashed color-mix(in srgb,var(--qt-demo-accent) 40%,transparent);border-radius:50%;animation:qt-demo-turn 16s linear infinite}
.demo-wrap[data-kind="booking"] .booking-days>button.active{background:linear-gradient(150deg,var(--qt-demo-accent),var(--qt-demo-dark));animation:qt-demo-icon-pulse 5s ease-in-out infinite}
.demo-wrap[data-kind="booking"] .booking-times>button.active{background:var(--qt-demo-soft);border-color:var(--qt-demo-accent);color:var(--qt-demo-dark)}
.demo-wrap[data-kind="booking"] .booking-result{position:relative;overflow:hidden}
.demo-wrap[data-kind="booking"] .booking-result.ready:after{content:'';height:2px;background:var(--qt-demo-accent);position:absolute;left:0;right:0;bottom:0;transform-origin:left;animation:qt-demo-progress 4s ease-in-out infinite}
.demo-wrap[data-kind="locations"] .location-network{background:var(--qt-demo-soft);border-color:var(--qt-demo-pop)}
.demo-wrap[data-kind="locations"] .location-connectors{position:relative}
.demo-wrap[data-kind="locations"] .location-connectors i{background:var(--qt-demo-pop)}
.demo-wrap[data-kind="locations"] .location-connectors i:after{content:'';position:absolute;width:4px;height:7px;left:-1.5px;top:0;background:var(--qt-demo-accent);border-radius:4px;animation:qt-demo-travel 3.5s ease-in-out infinite}
.demo-wrap[data-kind="locations"] .location-connectors i:nth-child(2):after{animation-delay:1.1s}
.demo-wrap[data-kind="locations"] .location-connectors i:nth-child(3):after{animation-delay:2.2s}
.demo-wrap[data-kind="locations"] .location-details>div{padding-left:7px;padding-right:7px}
.demo-wrap[data-kind="care"] .care-summary{background:var(--qt-demo-soft);border:1px solid var(--qt-demo-pop)}
.demo-wrap[data-kind="care"] .care-summary>span{animation:qt-demo-spark 7s ease-in-out infinite}
.demo-wrap[data-kind="care"] .care-checks>div{position:relative;overflow:hidden}
.demo-wrap[data-kind="care"] .care-checks>div:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--qt-demo-accent);transform:scaleX(0);transform-origin:left;animation:qt-demo-progress 8s ease-in-out infinite;animation-delay:var(--qt-stage-delay,0s)}

@keyframes qt-demo-stage{0%,16%{background:var(--qt-demo-soft);box-shadow:inset 3px 0 0 var(--qt-demo-accent)}24%,100%{background:transparent;box-shadow:inset 3px 0 0 transparent}}
@keyframes qt-demo-progress{0%,12%{transform:scaleX(.08);opacity:.5}48%,72%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.08);opacity:.5}}
@keyframes qt-demo-scan{0%,12%{transform:translateX(-100%);opacity:0}22%{opacity:1}72%{opacity:1}90%,100%{transform:translateX(280%);opacity:0}}
@keyframes qt-demo-wash{0%,12%{transform:translateX(0)}70%,100%{transform:translateX(420%)}}
@keyframes qt-demo-turn{to{transform:rotate(360deg)}}
@keyframes qt-demo-orbit{0%,100%{transform:translate(0,0) rotate(-15deg)}50%{transform:translate(8px,-6px) rotate(15deg)}}
@keyframes qt-demo-icon-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--qt-demo-accent) 0%,transparent)}45%{box-shadow:0 0 0 6px color-mix(in srgb,var(--qt-demo-accent) 15%,transparent)}}
@keyframes qt-demo-dot{0%,100%{opacity:.45;transform:scale(.9)}45%{opacity:1;transform:scale(1.22)}}
@keyframes qt-demo-travel{0%,10%{transform:translateY(-1px);opacity:.15}45%{opacity:1}90%,100%{transform:translateY(17px);opacity:.1}}
@keyframes qt-demo-chart{0%,8%{stroke-dashoffset:510}58%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:510}}
@keyframes qt-demo-chart-fill{0%,8%{opacity:.2}58%,82%{opacity:1}100%{opacity:.2}}
@keyframes qt-demo-list-scan{0%,20%{background:var(--qt-demo-soft);color:var(--qt-demo-dark);box-shadow:inset 2px 0 0 var(--qt-demo-accent)}30%,100%{background:transparent;box-shadow:inset 2px 0 0 transparent}}
@keyframes qt-demo-spark{0%,100%{transform:rotate(0) scale(1)}45%{transform:rotate(90deg) scale(1.08)}}

/* Keep motion controls authoritative, including animations defined by the base site. */
.motion-paused .demo-wrap:not([data-kind="maps"]) *,.motion-paused .demo-wrap:not([data-kind="maps"]) *:before,.motion-paused .demo-wrap:not([data-kind="maps"]) *:after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.demo-wrap:not([data-kind="maps"]) *,.demo-wrap:not([data-kind="maps"]) *:before,.demo-wrap:not([data-kind="maps"]) *:after{animation:none!important;transition:none!important}.demo-wrap:not([data-kind="maps"]) .qt-demo-stage{box-shadow:none!important}}
@media(max-width:420px){.demo-wrap[data-kind="social"] .social-overlay{font-size:29px;left:17px}.demo-wrap[data-kind="social"] .social-photo img{width:86px;height:86px;right:11px;top:30px}.demo-wrap[data-kind="social"] .social-overlay{max-width:calc(100% - 111px)}.demo-wrap[data-kind="shop"] .store-image img{width:81px;height:81px;right:12px;top:20px}.demo-wrap[data-kind="shop"] .store-image-label{font-size:8px;max-width:calc(100% - 111px)}.demo-wrap[data-kind="app"] .app-visual img{width:128px;height:106px;top:15px;right:4px}.demo-wrap[data-kind="app"] .app-floating-label{left:13px;font-size:7px;max-width:calc(100% - 135px)}.demo-wrap[data-kind="creative"] .creative-line{font-size:43px}.demo-wrap[data-kind="creative"] .creative-frame{height:325px}}