/* ---------- หน้าสอนเติมพ้อยต์ ---------- */
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px)}
.topbar a.brand{color:var(--text);text-decoration:none;min-width:0}
.brand-sub{font-style:normal;font-weight:500;font-size:14px;color:var(--muted);padding-left:10px;margin-left:2px;border-left:1px solid var(--line-2);white-space:nowrap}
.top-cta{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 14px 8px 16px;border-radius:999px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
.top-cta:hover{background:var(--brand-h)}
.top-cta .ic{width:16px;height:16px;transition:transform .15s}
.top-cta:hover .ic{transform:translateX(2px)}
.top-cta:focus-visible,.topbar a.brand:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
@media (max-width:360px){.brand-sub{display:none}}
.demo{padding:20px 16px}
.stage{display:flex;align-items:center;gap:24px}
.caption{flex:1;min-width:0}
.cap-num{font-size:13px;color:var(--brand-text);font-weight:600}
.caption h2{font-size:20px;margin:4px 0 6px}
.caption p{margin:0;color:var(--muted);min-height:48px}
.caption h2,.caption p{animation:capIn .4s ease}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.progress{height:4px;background:var(--line);border-radius:4px;margin:14px 0;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--brand);border-radius:4px}
.progress i.run{animation:prog var(--dur,4.5s) linear forwards}
.paused .progress i.run{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.ctrl{display:flex;gap:8px;flex-wrap:wrap}
.ctrl .back-btn{padding:6px 14px}

.dots{list-style:none;display:flex;justify-content:center;gap:8px;margin:16px 0 0;padding:0}
.dots button{width:10px;height:10px;border-radius:999px;border:0;background:var(--line-2);padding:0;cursor:pointer;transition:width .25s,background .25s}
.dots button.on{width:26px;background:var(--brand)}
.dots button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- โทรศัพท์จำลอง ---------- */
.phone{position:relative;flex:none;width:220px;height:440px;border-radius:32px;background:#1d2129;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:16px;background:#1d2129;border-radius:0 0 10px 10px;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:23px;background:var(--bg);overflow:hidden;font-size:11px;line-height:1.4}
.scr{position:absolute;inset:0;padding:30px 12px 12px;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s}

.m-logo{display:block;margin:18px auto 6px;width:44px;height:44px}
.m-title{text-align:center;font-weight:600;font-size:14px;margin-bottom:12px}
.m-label{color:var(--muted);font-size:10px;margin:6px 0 3px}
.m-input{height:30px;border:1px solid var(--line-2);border-radius:7px;background:#fff;padding:0 8px;display:flex;align-items:center;overflow:hidden}
.type{display:inline-block;white-space:nowrap;overflow:hidden;width:0;border-right:1.5px solid transparent}
.m-btn{margin-top:14px;height:32px;border-radius:8px;background:var(--brand);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;position:relative}
.m-btn.big{height:36px;font-size:12px}
.m-bar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.m-bar b{font-size:13px}
.m-bar span{color:var(--muted);font-size:10px}
.m-sub{font-weight:600;font-size:12px;margin:4px 0 8px}
.m-packs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.m-pack{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center;transition:border-color .2s,background .2s}
.m-pack b{display:block;font-size:14px}
.m-pack small{color:var(--muted);font-size:9.5px}
.m-sum{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.m-sum div{display:flex;justify-content:space-between;padding:3px 0;color:var(--muted)}
.m-sum .tot{border-top:1px dashed var(--line-2);margin-top:3px;padding-top:6px;color:var(--text)}
.m-sum .tot b{font-size:14px}
.m-sum .get b{color:var(--ok)}
.m-btn .spin{display:inline-block;width:0;height:13px;border:0 solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%}
.m-btn .lbl-a,.m-btn .lbl-b{display:inline-block;white-space:nowrap;overflow:hidden}
.m-btn .lbl-b{max-width:0}
.m-opt{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 8px 8px 30px;margin-bottom:6px;position:relative;transition:border-color .2s,background .2s}
.m-opt b{display:block;font-size:11.5px}
.m-opt small{color:var(--muted);font-size:9.5px}
.radio{position:absolute;left:9px;top:50%;margin-top:-7px;width:14px;height:14px;border:1.5px solid var(--line-2);border-radius:50%;background:#fff}
.radio::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .2s}
.qr{position:relative;width:130px;height:130px;margin:10px auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;overflow:hidden}
.qr-svg{width:100%;height:100%;display:block;fill:#1d2129}
.scanline{position:absolute;left:6px;right:6px;top:8px;height:2px;background:var(--brand);box-shadow:0 0 8px var(--brand);opacity:0}
.m-amt{text-align:center;font-size:18px;font-weight:700}
.bank{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;width:max-content;padding:6px 12px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-weight:600;opacity:0;transform:translateY(8px)}
.bank i{width:12px;height:12px;border-radius:50%;background:var(--ok)}
.ok-ring{width:70px;height:70px;margin:34px auto 12px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;transform:scale(0)}
.ok-ring svg{width:38px;height:38px;fill:none;stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.m-note{text-align:center;color:var(--muted)}
.m-balance{margin:16px 0 0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
.m-balance span{display:block;color:var(--muted);font-size:10px}
.m-balance b{font-size:20px;color:var(--ok)}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:70px;left:50%;width:6px;height:9px;border-radius:2px;opacity:0}
.confetti i:nth-child(odd){background:var(--brand)}
.confetti i:nth-child(even){background:#3b82f6}
.confetti i:nth-child(3n){background:var(--ok)}

/* นิ้วกด */
.finger{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(29,33,41,.28);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);opacity:0;z-index:2}
.finger::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--brand);opacity:0}

/* ---------- ภาพเคลื่อนไหวแต่ละขั้น (ทำงานเมื่อมี .on) ---------- */
@keyframes typing{to{width:var(--w)}}
@keyframes caret{50%{border-color:var(--text)}}
.s1.on .t-user{--w:64px;animation:typing .8s steps(8) .3s forwards,caret .5s step-end 2}
.s1.on .t-pass{--w:62px;animation:typing .8s steps(8) 1.3s forwards}
@keyframes fingerIn{0%{opacity:0;transform:translate(40px,60px)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tap{0%,100%{transform:scale(1)}50%{transform:scale(.8)}}
@keyframes ripple{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
@keyframes btnPress{0%,100%{transform:none}50%{transform:scale(.96);filter:brightness(.92)}}
.f1{left:95px;top:244px}
.s1.on .f1{animation:fingerIn .6s ease 2.2s forwards,tap .3s ease 2.9s}
.s1.on .f1::after{animation:ripple .6s ease 2.9s}
.s1.on .press{animation:btnPress .3s ease 2.9s}

.f2{left:40px;top:96px}
.s2.on .f2{animation:fingerIn .6s ease .6s forwards,tap .3s ease 1.3s}
.s2.on .f2::after{animation:ripple .6s ease 1.3s}
@keyframes pick{to{border-color:var(--brand);background:var(--brand-soft)}}
.s2.on .pick{animation:pick .2s ease 1.4s forwards}

.f3{left:95px;top:196px}
.s3.on .f3{animation:fingerIn .6s ease .9s forwards,tap .3s ease 1.6s}
.s3.on .f3::after{animation:ripple .6s ease 1.6s}
.s3.on .press2{animation:btnPress .3s ease 1.6s}
@keyframes spinOn{to{width:13px;border-width:2px;margin-right:6px}}
@keyframes lblOff{to{max-width:0}}
@keyframes lblOn{to{max-width:200px}}
.m-btn .lbl-a{max-width:200px}
.s3.on .press2 .spin{animation:spinOn 0s 1.8s forwards,spin .8s linear 1.8s infinite}
.s3.on .press2 .lbl-a{animation:lblOff 0s 1.8s forwards}
.s3.on .press2 .lbl-b{animation:lblOn 0s 1.8s forwards}

.f4{left:150px;top:66px}
.s4.on .f4{animation:fingerIn .6s ease .5s forwards,tap .3s ease 1.2s}
.s4.on .f4::after{animation:ripple .6s ease 1.2s}
@keyframes optOn{to{border-color:var(--brand);background:var(--brand-soft)}}
@keyframes radioOn{to{transform:scale(1)}}
@keyframes radioBd{to{border-color:var(--brand)}}
.s4.on .o1{animation:optOn .2s ease 1.3s forwards}
.s4.on .o1 .radio{animation:radioBd .2s ease 1.3s forwards}
.s4.on .o1 .radio::after{animation:radioOn .2s ease 1.3s forwards}

@keyframes scan{0%{top:8px;opacity:1}50%{top:120px;opacity:1}100%{top:8px;opacity:1}}
@keyframes rise{to{opacity:1;transform:none}}
.s5.on .scanline{animation:scan 1.6s ease-in-out .3s 2}
.s5.on .bank{animation:rise .4s ease 3.3s forwards}

@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.s6.on .ok-ring{animation:popIn .45s ease .1s forwards}
.s6.on .ok-ring svg{animation:draw .4s ease .5s forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(320deg)}}
.s6.on .confetti i{animation:burst 1.1s ease-out .5s forwards}
.confetti i:nth-child(1){--x:-80px;--y:-40px}
.confetti i:nth-child(2){--x:70px;--y:-50px}
.confetti i:nth-child(3){--x:-60px;--y:60px}
.confetti i:nth-child(4){--x:85px;--y:40px}
.confetti i:nth-child(5){--x:-20px;--y:-70px}
.confetti i:nth-child(6){--x:30px;--y:80px}
.confetti i:nth-child(7){--x:-90px;--y:10px}
.confetti i:nth-child(8){--x:95px;--y:-5px}

/* หยุดชั่วคราว */
.paused .scr.on,.paused .scr.on *,.paused .scr.on *::after{animation-play-state:paused !important}

/* ---------- สรุปขั้นตอน ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:10px 10px 10px 48px;border-radius:var(--r-sm);transition:background .25s}
.steps li::before{content:counter(st);position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--wait-bg);color:var(--muted);font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.steps li b{display:block;font-weight:600}
.steps li span{color:var(--muted);font-size:14px}
.steps li.on{background:var(--brand-soft)}
.steps li.on::before{background:var(--brand);color:#fff}
.steps-list .go{margin-top:14px;text-align:center;text-decoration:none}

@media (max-width:520px){
  .stage{flex-direction:column;gap:16px}
  .caption{width:100%;text-align:center}
  .ctrl{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .scr,.scr.on{transition:none}
  .scr.on *,.scr.on *::after,.progress i.run{animation-duration:.01s !important;animation-delay:0s !important;animation-iteration-count:1 !important}
}