body{margin:0;background:#FBF9F6}
a{color:#16110C}a:hover{color:#E8600A}
.spin-step{animation:spinstep 8s steps(8,end) infinite;transform-origin:0 0}
@keyframes spinstep{to{transform:rotate(-360deg)}}
.hub-t{opacity:0;animation:hubt 8s linear infinite}
@keyframes hubt{0%,12.4%{opacity:1}12.5%,100%{opacity:0}}
.slow-spin{animation:slowspin 60s linear infinite;transform-origin:center}
@keyframes slowspin{to{transform:rotate(360deg)}}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
.press{animation:press 2.4s ease-in-out infinite}
@keyframes press{0%,40%,100%{transform:translateY(0);box-shadow:0 6px 0 #E3DACE}50%,85%{transform:translateY(5px);box-shadow:0 1px 0 #E3DACE;background:linear-gradient(#FFE9D2,#FFD5A8)}}
.wobble{animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-8deg) translate(0,0)}50%{transform:rotate(-2deg) translate(-18px,-10px)}}
.draw{stroke-dasharray:80;stroke-dashoffset:80;animation:draw 3s ease-in-out infinite}
@keyframes draw{30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:80}}
/* desktop scene */
.cur{animation:cur 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cur{0%{left:86%;top:12%}22%{left:52%;top:42%}40%,92%{left:41%;top:32%}100%{left:86%;top:12%}}
.desk-wheel{animation:dw 7s ease-out infinite}
@keyframes dw{0%,24%{opacity:0;transform:translate(-50%,-50%) scale(.55)}32%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}92%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
.toast{animation:toast 7s ease-out infinite}
@keyframes toast{0%,80%{opacity:0;transform:translateY(16px)}86%,98%{opacity:1;transform:none}100%{opacity:0}}
.fill{animation:fill 7s ease-in-out infinite}
@keyframes fill{0%,82%{width:0}97%,100%{width:100%}}
/* PDF */
.mp1{animation:mp1 6s ease-in-out infinite}.mp2{animation:mp2 6s ease-in-out infinite}.mp3{animation:mp3 6s ease-in-out infinite}
@keyframes mp1{0%,15%{transform:translate(-150px,20px) rotate(-10deg)}45%,85%{transform:translate(-10px,-10px) rotate(-3deg)}100%{transform:translate(-150px,20px) rotate(-10deg)}}
@keyframes mp2{0%,20%{transform:translate(0,-40px) rotate(4deg)}50%,85%{transform:translate(0,0) rotate(0)}100%{transform:translate(0,-40px) rotate(4deg)}}
@keyframes mp3{0%,25%{transform:translate(150px,20px) rotate(10deg)}55%,85%{transform:translate(10px,10px) rotate(3deg)}100%{transform:translate(150px,20px) rotate(10deg)}}
.merged{opacity:0;animation:merged 6s ease-out infinite}
@keyframes merged{0%,58%{opacity:0;transform:translateY(10px)}66%,88%{opacity:1;transform:none}100%{opacity:0}}
.sig{stroke-dasharray:420;stroke-dashoffset:420;animation:sig 5s ease-in-out infinite}
@keyframes sig{10%{stroke-dashoffset:420}55%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
.swapA{animation:swapA 5s ease-in-out infinite}.swapB{animation:swapB 5s ease-in-out infinite}
@keyframes swapA{0%,25%{transform:translateX(0)}45%,85%{transform:translateX(-84px)}100%{transform:translateX(0)}}
@keyframes swapB{0%,25%{transform:translateX(0) translateY(0)}35%{transform:translateX(42px) translateY(-26px) rotate(6deg)}45%,85%{transform:translateX(84px) translateY(0)}100%{transform:translateX(0)}}
.shackle{animation:shackle 4s ease-in-out infinite}
@keyframes shackle{0%,55%{transform:translateY(-9px)}65%,90%{transform:translateY(0)}100%{transform:translateY(-9px)}}
.pwd{opacity:0;animation:pwd 4s ease-out infinite}
@keyframes pwd{0%,8%{opacity:0;transform:scale(.4)}14%,92%{opacity:1;transform:none}100%{opacity:0}}
.wm{animation:wm 4s ease-in-out infinite}
@keyframes wm{0%,20%{opacity:0;transform:rotate(-30deg) scale(1.3)}45%,90%{opacity:.28;transform:rotate(-30deg) scale(1)}100%{opacity:0;transform:rotate(-30deg) scale(1.3)}}
.sp1{animation:sp1 4.5s ease-in-out infinite}.sp3{animation:sp3 4.5s ease-in-out infinite}
@keyframes sp1{0%,25%{transform:translateX(0)}55%,90%{transform:translateX(-70px) rotate(-6deg)}100%{transform:translateX(0)}}
@keyframes sp3{0%,25%{transform:translateX(0)}55%,90%{transform:translateX(70px) rotate(6deg)}100%{transform:translateX(0)}}
.scan{animation:scan 3.6s ease-in-out infinite}
@keyframes scan{0%{top:6%}60%,100%{top:94%}}
.line-in{opacity:0;animation:linein 3.6s ease-out infinite}
@keyframes linein{0%,15%{opacity:0;transform:translateX(-10px)}25%,95%{opacity:1;transform:none}100%{opacity:0}}
.num-in{opacity:0;animation:numin 4s ease-out infinite}
@keyframes numin{0%,15%{opacity:0;transform:translateY(6px)}30%,90%{opacity:1;transform:none}100%{opacity:0}}
/* images */
.orig{animation:orig 8s ease-in-out infinite}
@keyframes orig{0%,25%{opacity:1;filter:blur(0)}35%{opacity:.6;filter:blur(3px)}40%,90%{opacity:0}100%{opacity:1}}
.gone{opacity:0;animation:gone 8s ease-in-out infinite}
@keyframes gone{0%,38%{opacity:0;transform:translateX(8px)}46%,90%{opacity:1;transform:none}100%{opacity:0}}
.shield-scan{animation:shieldscan 8s ease-in-out infinite}
@keyframes shieldscan{0%,12%{top:-10%;opacity:0}14%{opacity:1}40%{top:105%;opacity:1}42%,100%{top:105%;opacity:0}}
.clean{opacity:0;animation:clean 8s ease-in-out infinite}
@keyframes clean{0%,52%{opacity:0;transform:scale(.85)}60%,90%{opacity:1;transform:none}100%{opacity:0}}
.cropbox{animation:crop 9s ease-in-out infinite}
@keyframes crop{0%,26%{width:62%;height:78%}33%,59%{width:88%;height:50%}66%,92%{width:38%;height:86%}100%{width:62%;height:78%}}
.r1,.r2,.r3{opacity:0;animation:ratio 9s linear infinite}
.r2{animation-delay:-6s}.r3{animation-delay:-3s}
@keyframes ratio{0%,32%{opacity:1}33.3%,100%{opacity:0}}
.shrink{animation:shrink 5s ease-in-out infinite}
@keyframes shrink{0%,20%{width:100%}60%,90%{width:26%}100%{width:100%}}
.big-n{animation:bign 5s steps(1) infinite}.small-n{opacity:0;animation:smalln 5s steps(1) infinite}
@keyframes bign{0%{opacity:1}55%{opacity:0}95%{opacity:1}}
@keyframes smalln{0%{opacity:0}55%{opacity:1}95%{opacity:0}}
.flip-a{animation:flipa 4s ease-in-out infinite;backface-visibility:hidden}
.flip-b{animation:flipb 4s ease-in-out infinite;backface-visibility:hidden}
@keyframes flipa{0%,35%{transform:rotateY(0)}50%,85%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes flipb{0%,35%{transform:rotateY(-180deg)}50%,85%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.gray{animation:gray 5s ease-in-out infinite}
@keyframes gray{0%,25%{filter:grayscale(0)}50%,85%{filter:grayscale(1)}100%{filter:grayscale(0)}}
.toicon{animation:toicon 5s ease-in-out infinite}
@keyframes toicon{0%,20%{width:150px;height:100px;border-radius:8px}55%,90%{width:56px;height:56px;border-radius:14px}100%{width:150px;height:100px;border-radius:8px}}
.halve{animation:halve 5s ease-in-out infinite}
@keyframes halve{0%,20%{transform:scale(1)}55%,90%{transform:scale(.5)}100%{transform:scale(1)}}
/* video */
.wave{animation:wave 1.1s ease-in-out infinite;transform-origin:bottom}
@keyframes wave{50%{transform:scaleY(.25)}}
.frame{opacity:0;animation:frame 1.2s steps(1) infinite}
@keyframes frame{0%{opacity:1}25%,100%{opacity:0}}
.flash{animation:flash 3s ease-out infinite}
@keyframes flash{0%,60%{opacity:0}63%{opacity:.95}80%,100%{opacity:0}}
.res{animation:res 5s ease-in-out infinite}
@keyframes res{0%,20%{width:92%;height:84%}55%,90%{width:46%;height:42%}100%{width:92%;height:84%}}
.res-a{animation:bign 5s steps(1) infinite}.res-b{opacity:0;animation:smalln 5s steps(1) infinite}
.mute-w{animation:mutew 4s ease-in-out infinite}
@keyframes mutew{0%,30%{opacity:1}45%,90%{opacity:0}100%{opacity:1}}
.slash{stroke-dasharray:40;stroke-dashoffset:40;animation:slash 4s ease-in-out infinite}
@keyframes slash{0%,35%{stroke-dashoffset:40}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.rot90{animation:rot90 4s ease-in-out infinite}
@keyframes rot90{0%,25%{transform:rotate(0)}50%,90%{transform:rotate(90deg)}100%{transform:rotate(0)}}
.even{animation:even 4s ease-in-out infinite;transform-origin:bottom}
@keyframes even{0%,25%{transform:scaleY(var(--h))}55%,90%{transform:scaleY(.6)}100%{transform:scaleY(var(--h))}}
.cut{animation:cut 4s ease-in-out infinite;transform-origin:center}
@keyframes cut{0%,25%{opacity:1;transform:scaleX(1)}50%,90%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}
/* desktop scene, 16 s story: formats → tools → actions → tools, then drop */
.d-cur{animation:dcur 16s ease-in-out infinite}
@keyframes dcur{0%{left:89%;top:9%}5%{left:48%;top:44%}9%,16.5%{left:48%;top:calc(44% - 102px)}17.5%,23.5%{left:calc(48% - 72px);top:calc(44% - 72px)}24.5%,32%{left:calc(48% - 102px);top:44%}34%,40.5%{left:48%;top:calc(44% - 102px)}41.5%,49%{left:calc(48% - 72px);top:calc(44% - 72px)}51.5%,58.5%{left:48%;top:calc(44% - 102px)}59.5%,67%{left:calc(48% - 88px);top:calc(44% - 51px)}70.5%,82%{left:48%;top:calc(44% + 102px)}95%,100%{left:89%;top:9%}}
.d-ghost{animation:dghost 16s linear infinite}
@keyframes dghost{0%,1%{opacity:0}3%,80%{opacity:1}82%,100%{opacity:0}}
.d-src{animation:dsrc 16s linear infinite}
@keyframes dsrc{0%,2%{opacity:1}4%,81%{opacity:.35}84%,100%{opacity:1}}
.d-wheel{animation:dwheel 16s ease-out infinite}
@keyframes dwheel{0%,5%{opacity:0;transform:translate(-50%,-50%) scale(.6)}8%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}83%,100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
.d-chips{animation:dchips 16s ease-out infinite}
@keyframes dchips{0%,6%{opacity:0;transform:translate(-50%,10px)}9%,80%{opacity:1;transform:translate(-50%,0)}83%,100%{opacity:0;transform:translate(-50%,10px)}}
.on-f{animation:onf 16s linear infinite}
@keyframes onf{0%,31%{opacity:1}33%,68%{opacity:0}70%,100%{opacity:1}}
.on-t{opacity:0;animation:ont 16s linear infinite}
@keyframes ont{0%,31%{opacity:0}33%,50%{opacity:1}52%,100%{opacity:0}}
.on-a{opacity:0;animation:ona 16s linear infinite}
@keyframes ona{0%,50%{opacity:0}52%,68%{opacity:1}70%,100%{opacity:0}}
.hl{opacity:0;animation:hl 16s linear infinite}
@keyframes hl{0%,7.4%{opacity:1}7.5%,100%{opacity:0}}
.hlL{opacity:0;animation:hlL 16s linear infinite}
@keyframes hlL{0%,11.4%{opacity:1}11.5%,100%{opacity:0}}
.d-toast{opacity:0;animation:dtoast 16s ease-out infinite}
@keyframes dtoast{0%,82%{opacity:0;transform:translateY(14px)}85%,97%{opacity:1;transform:none}100%{opacity:0}}
.d-fill{animation:dfill 16s ease-in-out infinite}
@keyframes dfill{0%,83%{width:0}92%,100%{width:100%}}
.d-new{opacity:0;animation:dnew 16s ease-out infinite}
@keyframes dnew{0%,88%{opacity:0;transform:scale(.4)}91%,98%{opacity:1;transform:none}100%{opacity:0}}
.card{background:#FFFFFF;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1px #EEE7DD}
.stage{height:170px;border-radius:16px;background:#F6F2EC;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tag{align-self:flex-start;font:600 11.5px 'IBM Plex Mono',monospace;border-radius:6px;padding:2px 8px}
.free{background:#EAF4EC;color:#1E7A46}.pro{background:#FFF1DC;color:#B4770E}
.eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:#FFF1E4;color:#B84A00;border-radius:999px;padding:5px 14px;font-size:13.5px;font-weight:600}
.chip{animation:chip 4s ease-in-out infinite}
@keyframes chip{50%{transform:translateY(-10px)}}
.spark{animation:spark 3s ease-in-out infinite}
@keyframes spark{50%{transform:scale(1.25) rotate(20deg);opacity:.6}}
.pg{width:64px;height:84px;background:#FFFFFF;border-radius:6px;box-shadow:0 0 0 1px #E6DED3,0 10px 18px -12px rgba(0,0,0,.35);padding:9px;display:flex;flex-direction:column;gap:5px}
.pg i{display:block;height:4px;border-radius:2px;background:#EAE2D7}
.pg b{display:block;height:6px;border-radius:3px;background:#3B2E22;width:60%}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.hub-t{opacity:0}.hub-t:first-of-type{opacity:1}.r1,.small-n,.res-b,.clean,.gone,.merged,.pwd,.num-in,.line-in{opacity:1}.orig{opacity:0}}

/* ---------- scanner card ---------- */
.scan-card{grid-column:1/-1;flex-direction:row;align-items:center;gap:32px;padding:28px}
.scan-stage{flex:1.2;min-width:0;height:240px;border-radius:16px;background:#F6F2EC;display:flex;align-items:center;justify-content:center;gap:26px;direction:ltr}
.scan-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.scan-photo{width:190px;height:200px;border-radius:12px;background:radial-gradient(80% 70% at 30% 30%,#8A6A4E,#4A3626);display:flex;align-items:center;justify-content:center;overflow:hidden}
.scan-paper{width:118px;height:150px;background:linear-gradient(135deg,#E9DFCF,#C9B79C 70%,#A99478);padding:14px;display:flex;flex-direction:column;gap:6px;transform:perspective(400px) rotateX(18deg) rotateZ(-12deg) skewX(-6deg);box-shadow:-10px 18px 20px rgba(0,0,0,.45);animation:paperwobble 6s ease-in-out infinite}
@keyframes paperwobble{50%{transform:perspective(400px) rotateX(14deg) rotateZ(-9deg) skewX(-4deg)}}
.scan-paper b,.scan-result b{display:block;height:7px;width:62%;border-radius:3px;background:#3B2E22}
.scan-paper i,.scan-result i{display:block;height:4px;border-radius:2px;background:rgba(59,46,34,.35)}
.scan-result{position:relative;width:150px;height:200px;background:#FFFFFF;border-radius:4px;padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 1px #E6DED3,0 18px 30px -16px rgba(0,0,0,.35);animation:scanout 6s ease-in-out infinite}
.scan-result i{background:#2A221B;opacity:.55}
@keyframes scanout{0%,35%{opacity:0;transform:perspective(400px) rotateX(14deg) rotateZ(-10deg) scale(.8);filter:sepia(.8) brightness(.8)}60%,92%{opacity:1;transform:none;filter:none}100%{opacity:0}}
.scan-mark{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:4px;font-size:9px;color:#6B6B6B;direction:rtl}
.scan-dot{width:9px;height:9px;border-radius:50%;background:#7A7A7A;box-shadow:inset 0 0 0 2px #CFCFCF}
.scan-arrow{flex:none}
.ceen-line{font-size:14.5px;color:#6E6155}
.ceen-line a{color:#4F6EF4;font-weight:700;text-decoration:none}
.ceen-line a:hover{text-decoration:underline}

/* ---------- responsive: tablet and phone ---------- */
@media (max-width: 1000px){
  header nav{display:none!important}
  section [style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  section [style*="grid-template-columns: minmax"]{grid-template-columns:1fr!important}
  #top>div{padding:56px 24px 40px!important}
  #top h1{font-size:48px!important}
  #top [style*="height: 520px"]{height:440px!important}
  h2{font-size:36px!important}
  section [style*="justify-content: space-between; align-items: flex-end"]{flex-direction:column;align-items:flex-start!important}
  #desk [style*="height: 640px"]{zoom:.75}
  .scan-card{flex-direction:column;align-items:stretch}
}
@media (max-width: 640px){
  body{font-size:15px}
  header>div{padding:0 16px!important;height:64px!important}
  section>div{padding-left:16px!important;padding-right:16px!important}
  section{padding-top:64px!important;padding-bottom:64px!important}
  section [style*="grid-template-columns: repeat"]{grid-template-columns:1fr!important}
  #top h1{font-size:38px!important}
  #top [style*="height: 520px"]{height:380px!important;zoom:.78}
  h2{font-size:30px!important}
  #desk [style*="height: 640px"]{zoom:.5}
  .scan-stage{height:auto;padding:20px;gap:14px;zoom:.85}
  footer>div{flex-direction:column;align-items:flex-start!important;padding-left:16px!important;padding-right:16px!important}

  #download [style*="width: 560px"]{width:100%!important}
}

/* keep animated pieces from widening the page */
html,body{overflow-x:hidden}
section{overflow-x:clip}
@media (max-width: 640px){
  #images [style*="width: 390px"]{width:100%!important}
  #images [style*="padding: 48px"]{padding:28px 22px!important}
  #images [style*="padding: 40px"]{padding:28px 16px!important}
  #images [style*="width: 190px"]{width:120px!important}
  #pdf [style*="height: 250px"]{zoom:.8}
}