/* Qbot motion language: floating documents, travelling light, soft spring feedback. */
:root{--bg:#f3f4ee}body{background:var(--bg)}
.header{position:relative}.header:after{content:"";position:absolute;bottom:-1px;left:12%;width:76%;height:1px;background:linear-gradient(90deg,transparent,#afc68a,transparent)}
.brand-icon{box-shadow:0 4px 15px #a9cc4e25;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}.brand:hover .brand-icon{transform:rotate(-9deg) scale(1.08);box-shadow:0 6px 20px #a9cc4e50}
.motion-toggle{display:grid;place-items:center;width:32px;height:32px;padding:7px;border:1px solid #dfe6d4;border-radius:50%;color:#76885c;background:#ffffff88;transition:background .2s,transform .2s}.motion-toggle svg{width:16px;height:16px}.motion-toggle:hover{background:#edf5d9;transform:rotate(8deg)}.motion-toggle[aria-pressed=false]{color:#a0a992;background:transparent}
.intro.visual-intro{position:relative;isolation:isolate}.visual-intro:before{content:none}
.transfer-hero{animation:qbot-float 7s ease-in-out infinite;will-change:transform}
.upload-panel,.settings-panel,.transfer-card{box-shadow:0 5px 18px #38491a04;transition:border-color .3s,box-shadow .3s,transform .3s}.upload-panel:hover,.settings-panel:hover,.transfer-card:hover{border-color:#cfdcbc;box-shadow:0 13px 38px #38491a09}
.step{display:grid;place-items:center;min-width:24px;height:24px;border:1px solid #e4eadb;border-radius:8px;background:#f8faf4;color:#87986c}
.drop-zone{position:relative;overflow:hidden;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}.drop-zone:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#d9f96822,transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}.drop-zone:hover:before,.drop-zone.dragging:before{opacity:1}.drop-zone:hover{box-shadow:inset 0 0 30px #c2d89b14}.drop-zone .upload-art{transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 7px 7px #6980440c)}.drop-zone:hover .upload-art{transform:translateY(-8px) rotate(-5deg)}
.drop-zone.dragging{border-color:#82a640;border-style:solid;box-shadow:0 0 0 5px #b9d97729,inset 0 0 36px #d9f96818;transform:scale(1.012)}.drop-zone.dragging .upload-art{animation:qbot-receive .9s ease-in-out infinite}
.drop-zone:after{content:"";position:absolute;top:-80%;left:-55%;width:30%;height:260%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(25deg);pointer-events:none}.drop-zone:hover:after{animation:qbot-sweep 1s ease-out both}
.primary,.secondary,.danger{position:relative;overflow:hidden;transition:transform .22s,box-shadow .22s,background .22s}.primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 18px #abc84332}.primary:not(:disabled):active,.secondary:active{transform:translateY(1px) scale(.985)}.primary>span{transition:transform .25s}.primary:not(:disabled):hover>span{transform:translate(3px,-3px)}
.click-wave{position:absolute!important;width:24px;height:24px;left:50%;top:50%;border-radius:50%;background:#ffffff80;pointer-events:none;animation:qbot-ripple .65s ease-out forwards!important}
.text-input{transition:border-color .2s,box-shadow .2s,background .2s}.text-input:focus{border-color:#a7bc85;background:#fff;box-shadow:0 0 0 4px #c7dca52b}.retention-options label{transition:background .25s,border-color .25s,transform .2s,box-shadow .25s}.retention-options label:hover{transform:translateY(-2px)}.retention-options label:has(input:checked){box-shadow:0 3px 9px #93ad6620}
.file-row{animation:qbot-file-in .32s cubic-bezier(.2,.8,.2,1) both}.file-symbol{transition:transform .25s,background .25s}.file-row:hover .file-symbol{transform:rotate(-6deg);background:#e9f2d7}.remove-file{transition:color .2s,transform .2s}.remove-file:hover{color:#a35b48;transform:rotate(90deg)}
.notice:not([hidden]),.received-note:not([hidden]){animation:qbot-reveal .32s ease both}.toast:not([hidden]){animation:qbot-toast .3s cubic-bezier(.2,.8,.2,1) both}.error-message:not([hidden]){animation:qbot-reveal .25s ease both}.success-icon{box-shadow:0 6px 24px #b3cd6640;animation:qbot-success .65s cubic-bezier(.2,.8,.2,1) both}
.benefits>div{transition:transform .25s}.benefits>div:hover{transform:translateY(-4px)}.benefit-number{display:inline-block;transition:color .25s,transform .25s}.benefits>div:hover .benefit-number{color:#6d8a39;transform:translateX(4px)}
.motion-ready .motion-enter{animation:qbot-reveal .65s cubic-bezier(.2,.8,.2,1) both}.motion-ready .settings-panel.motion-enter{animation-delay:.1s}.motion-ready .benefits.motion-enter{animation-delay:.05s}
.is-uploading .progress-box progress::-webkit-progress-value{background:repeating-linear-gradient(110deg,#87a644 0 12px,#a1bd65 12px 24px);background-size:52px 100%;animation:qbot-progress 1s linear infinite;transition:width .25s}.is-uploading .progress-box progress::-moz-progress-bar{background:repeating-linear-gradient(110deg,#87a644 0 12px,#a1bd65 12px 24px)}.is-uploading .upload-panel{border-color:#b2c888;box-shadow:0 0 0 3px #d9e9bf33}
@keyframes qbot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes qbot-receive{0%,100%{transform:translateY(-3px) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes qbot-sweep{from{left:-55%}to{left:135%}}
@keyframes qbot-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.7}to{transform:translate(-50%,-50%) scale(20);opacity:0}}
@keyframes qbot-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes qbot-file-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes qbot-toast{from{opacity:0;transform:translate(-50%,12px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes qbot-success{0%{opacity:0;transform:scale(.75) rotate(-12deg)}65%{transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes qbot-progress{to{background-position:52px 0}}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .transfer-hero{will-change:auto}.motion-off .drop-zone:hover:after{display:none}
@media(max-width:760px){.header nav{gap:12px}.transfer-hero{animation-duration:9s}.motion-toggle{width:29px;height:29px;padding:6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.transfer-hero{will-change:auto}.drop-zone:hover:after{display:none}}

.hero-scene{position:relative;width:100%;max-width:834px;margin:auto}
.hero-scene .transfer-hero{max-height:none;border-radius:0;animation:none;will-change:auto;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.transfer-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wave-trail{fill:none;stroke:#efffbb;stroke-width:9;stroke-linecap:round;stroke-dasharray:4 96;stroke-dashoffset:4;opacity:0;filter:drop-shadow(0 0 9px #c8f365);animation:qbot-transfer 4.8s ease-in-out infinite}
.wave-echo{stroke-width:3;stroke:#fff;animation-delay:.26s}
@keyframes qbot-transfer{0%{stroke-dashoffset:4;opacity:0}15%{opacity:.85}75%{opacity:.85}95%,100%{stroke-dashoffset:-100;opacity:0}}
@media(prefers-reduced-motion:reduce){.wave-trail{display:none}}