/* POLISH layer: รายละเอียดความสวยเพิ่มเติม เบา ไม่ทับของเดิม (ปิดอัตโนมัติถ้าผู้ใช้ตั้งลดการเคลื่อนไหว) */
::selection{background:rgba(255,42,42,.85);color:#fff}
html{scrollbar-color:#b10f16 #0b0405;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0b0405}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff3b3b,#b10f16);border-radius:10px;border:2px solid #0b0405}
:focus-visible{outline:2px solid #ff6a5a;outline-offset:3px;box-shadow:0 0 0 5px rgba(255,42,42,.22)}
/* ปุ่มแดง: แสงสะท้อนวิ่งผ่าน */
.btn.red{position:relative;overflow:hidden}
.btn.red::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);pointer-events:none}
/* แสงวิ่งใต้แถบเมนูบน + เส้นแบ่งระหว่างหัวข้อ */
header .hglow,.sdiv{position:absolute;left:0;right:0;height:1px;pointer-events:none;overflow:hidden}
header .hglow{bottom:-1px}
.sdiv{position:relative;margin:0 auto;max-width:1100px;background:linear-gradient(90deg,transparent,#2c1214 20%,#2c1214 80%,transparent)}
header .hglow i,.sdiv i{position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,#ff4a3a,transparent);box-shadow:0 0 12px 1px rgba(255,60,50,.8)}
/* FAQ: เปิดแล้วเลื่อนลงนุ่มๆ + หัวข้อขยับเมื่อชี้ */
details summary{transition:color .2s,padding-left .25s;cursor:pointer}
details summary:hover{color:#ff6a5a;padding-left:6px}
/* รูปตัวอย่างโปรแกรม: ซูมนิดๆ + เรืองแสง */
#preview img{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,filter .5s}
#preview img:hover{transform:scale(1.025);box-shadow:0 18px 50px rgba(255,42,42,.28);filter:saturate(1.12)}
/* ปุ่มหลักหายใจเบาๆ ดึงสายตา */
.cta-pulse{animation:ctaP 2.8s ease-out infinite}
@keyframes ctaP{0%{box-shadow:0 10px 30px rgba(255,42,42,.35),0 0 0 0 rgba(255,60,50,.55)}70%,100%{box-shadow:0 10px 30px rgba(255,42,42,.35),0 0 0 16px rgba(255,60,50,0)}}
@media (prefers-reduced-motion:no-preference){
  .btn.red:hover::after{animation:shine .8s ease}
  @keyframes shine{to{left:130%}}
  header .hglow i{animation:sweep 5.5s linear infinite}
  .sdiv i{left:-30%}.sdiv.on i{animation:sweep 1.6s ease-out 1}
  @keyframes sweep{to{left:100%}}
  details[open]>p{animation:fq .35s ease both}
  @keyframes fq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .sdiv{opacity:0;transition:opacity .6s}.sdiv.on{opacity:1}
}
@media (prefers-reduced-motion:reduce){.cta-pulse{animation:none}.sdiv{opacity:1}}

/* สลับรูปหน้าจอโปรแกรมในหน้าแรก (ซ้อนกัน เฟดสลับ) */
.shot .frame img.alt{position:absolute;left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;opacity:0;transition:opacity .9s ease}
.shot .frame img:not(.alt){transition:opacity .9s ease}
.shot .frame.swap img.alt{opacity:1}
.shot .frame.swap img:not(.alt){opacity:0}
@media(prefers-reduced-motion:reduce){.shot .frame img.alt,.shot .frame img:not(.alt){transition:none}}