/* Continuous portrait backdrop and restrained overlay. */
.hero-slide:before{content:"";position:absolute;inset:-5%;background-position:center;background-size:cover;filter:blur(25px);transform:scale(1.04)}
.hero-slide[data-person=man]:before{background-image:url('assets/hero/man-original.png')}
.hero-slide[data-person=woman]:before{background-image:url('assets/hero/woman-original.png')}
.hero-slide .model-photo{mask-image:linear-gradient(to right,transparent 0%,#000 13%,#000 87%,transparent 100%)}
.visual .product{background:rgba(255,255,255,.64);border-color:rgba(255,255,255,.24);backdrop-filter:blur(12px);box-shadow:0 4px 18px #00000012}
.visual small{font-size:9px;opacity:.7;background:#2229}
/* The main scenario leads with its message, directly above the image. */
.scene-primary .scene-text{padding:0 2px 16px}
.scene-primary .scene-label{font-size:25px;margin-top:4px}
.scene-primary .scene-text h3{font-size:19px;margin:6px 0}
.scene-primary .scene-image{aspect-ratio:1.7}
.scene-secondary-stack{padding-top:0}
.scene-note,.material-note,.image-caption{font-size:10px;color:#6e6e73;opacity:.72;text-align:right;line-height:1.5}
.material-note{border:0;padding-top:0;margin:22px 0 0}
.experience{position:relative;padding-bottom:34px}.experience-tip{position:absolute;right:0;bottom:0;margin:0;text-align:right!important;max-width:100%}
.privacy-copy p{margin:18px 0;line-height:1.9}
/* Three looping, recognisable interface sequences; visual demos have no live controls. */
.walkthrough{position:relative;height:220px;background:#eeeff1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.demo-window{width:100%;max-width:315px;height:185px;background:#fff;border:1px solid #e2e2e6;border-radius:12px;box-shadow:0 9px 25px #1d1d1f12;overflow:hidden}
.demo-bar{height:26px;padding:0 11px;display:flex;align-items:center;gap:4px;background:#fafafa;border-bottom:1px solid #eeeeef;color:#8c8c92;font-size:9px}
.demo-bar i{width:5px;height:5px;border-radius:50%;background:#d2d2d7}.demo-bar span{margin-left:7px}
.demo-body{position:relative;padding:11px 15px;font-size:10px;color:#1d1d1f}
.demo-body>strong{display:block;font-size:13px;line-height:1.3}.demo-body>p{font-size:9px;margin:3px 0 7px;line-height:1.3;color:#89898d}
.demo-assets{display:flex;gap:8px}.demo-assets>div{position:relative;width:72px;height:61px;border:1px solid #e2e2e6;border-radius:6px;background:#fafafa;text-align:center;animation:asset-appear 5s infinite}
.demo-assets>div:nth-child(2){animation-delay:.5s}.demo-assets img,.demo-assets svg{width:57px;height:31px;object-fit:contain;display:block;margin:1px auto}
.demo-assets span{display:block;font-size:9px;color:#85858a}.demo-assets b{position:absolute;right:4px;top:3px;font-size:9px;color:#3f9a63}
.demo-progress{height:3px;width:155px;background:#eee;border-radius:3px;margin:6px 0;overflow:hidden}.demo-progress span{display:block;width:100%;height:100%;background:#d24f00;transform-origin:left;animation:progress 5s infinite}
.demo-action{display:inline-block;padding:5px 12px;background:#d24f00;color:#fff;font-size:10px;border-radius:5px;font-weight:600;line-height:1}
.demo-preview{height:68px;background:#f5f5f7;border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center;margin:4px 0 7px}
.demo-preview img{width:100px;height:50px;object-fit:contain}.demo-check{position:absolute;right:7px;top:6px;color:#26834c;font-size:9px;animation:show-state 5s infinite}
.demo-published,.demo-copied{margin-left:8px;color:#24814d;font-size:10px;animation:show-state 5s infinite}
.demo-link{border:1px solid #dedee1;border-radius:6px;background:#fafafa;padding:11px 9px;margin:10px 0 13px;color:#777;font-size:10px}.demo-link span{float:right}
.demo-cursor{position:absolute;left:66%;top:69%;font-size:22px;color:#212124;text-shadow:0 1px 2px #fff;animation:cursor-click 5s infinite;pointer-events:none}
.review-demo .demo-cursor{left:37%;top:74%}.share-demo .demo-cursor{left:43%;top:72%}
@keyframes asset-appear{0%,12%{opacity:.3;transform:translateY(5px)}30%,85%{opacity:1;transform:none}100%{opacity:.3}}
@keyframes progress{0%,12%{transform:scaleX(0)}50%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes show-state{0%,42%{opacity:0;transform:translateY(3px)}55%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cursor-click{0%,12%{opacity:0;transform:translate(18px,10px)}22%,45%{opacity:1;transform:translate(0,0)}50%{transform:scale(.85)}60%,80%{opacity:1;transform:scale(1)}100%{opacity:0}}
#contactDetails{margin-top:24px}.contact-call{display:inline-flex;align-items:center;gap:13px;border:1px solid #dedee2;background:#fff;border-radius:16px;padding:13px 17px;box-shadow:0 5px 18px #17171909;transition:transform .2s,border-color .2s}.contact-call:hover{transform:translateY(-2px);border-color:#d24f00}.call-icon{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#fff2e9;color:#d24f00;font-size:19px}.contact-call small,.contact-call strong{display:block}.contact-call small{font-size:10px;color:#777;line-height:1.4}.contact-call strong{font-size:18px;letter-spacing:.4px;margin-top:2px}.call-arrow{font-size:16px;color:#d24f00;margin-left:13px}
@media(max-width:600px){.scene-primary .scene-text{padding:0 0 14px}.scene-primary .scene-label{font-size:21px}.scene-primary .scene-text h3{font-size:16px}.walkthrough{height:205px}.demo-window{height:180px}.merchant-simple{gap:24px}.merchant-simple li{padding:0}.material-note{margin-top:24px}.hero-slide:before{filter:blur(20px)}.privacy-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.demo-assets>div,.demo-progress span,.demo-check,.demo-published,.demo-copied,.demo-cursor{animation:none}.demo-cursor{display:none}.demo-progress span{transform:scaleX(1)}}