/* ============================================================
   wansuk.com — Asset / Pikul (พิกุล) product page
   builds on style.css (aurora stage + glass primitives)
   สีประจำระบบคือม่วง (dot--violet)
   สัดส่วน: ภาพ ~40% ข้อความ ~60% — หน้านี้เน้น "อ่านแล้วเข้าใจคุณสมบัติ"
   ============================================================ */

/* ---------- 1. Page chrome ---------- */
.a-page{padding:24px 0 18px}
.a-badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r-pill);
  font-family:var(--ff-en);font-weight:700;font-size:14px;color:var(--navy-800);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.a-badge small{font-family:var(--ff-th);font-weight:500;font-size:13px;color:var(--ink-mute)}
.a-badge em{
  font-style:normal;font-family:var(--ff-th);font-size:12.5px;font-weight:700;color:#6b46d9;
  padding:3px 10px;border-radius:var(--r-pill);background:rgba(160,132,250,.16);
}

/* ---------- 2. Hero — ข้อความ 60% / ภาพ 40% ---------- */
.a-hero__grid{
  flex:1;
  display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(24px,3.4vw,44px);align-items:center;
  padding:clamp(24px,3.2vw,38px) 0 clamp(20px,2.6vw,30px);
}
.a-hero h1{
  font-family:var(--ff-th);margin-top:18px;letter-spacing:-.01em;
  font-size:clamp(31px,4.1vw,49px);font-weight:700;line-height:1.3;
}
.a-hero h1 .accent{
  font-weight:700;
  background:linear-gradient(108deg,#8b6cf7 0%,#6b46d9 34%,#1a73e8 70%,#0a2a63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.a-hero__lead{margin-top:16px;font-size:16.5px;color:var(--ink-soft);max-width:46ch;line-height:1.85}
.a-hero__lead b{color:var(--navy-800);font-weight:700}
.a-hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* artwork column — ตั้งใจให้เล็กกว่าฝั่งข้อความ */
.a-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px}
.a-art .art{width:100%;max-width:340px;filter:drop-shadow(0 26px 44px rgba(12,58,128,.24))}
.a-art .chip{top:2px;right:-6px}
.a-art .chip--free{top:auto;bottom:18px;right:auto;left:-12px;animation-delay:-2.4s}
.chip--free svg{color:#8b6cf7}

/* ---------- 2b. ภาพ hero ที่ขยับได้ (prefix .ax-) ----------
   แนวคิด: ขยับช้า ๆ พอให้รู้สึกว่ามีชีวิต ไม่แย่งสายตาจากข้อความ
   ทุกตัวปิดเองเมื่อผู้ใช้ตั้ง prefers-reduced-motion (ดูท้ายไฟล์)   */

/* การ์ดทะเบียนลอยขึ้น–ลง / ใบจ่ายของลอยสวนจังหวะกัน */
.ax-deck{animation:axFloat 8s ease-in-out infinite}
.ax-slip{animation:axFloat 8s ease-in-out infinite;animation-delay:-4s}
@keyframes axFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* แถวรายการไล่กันขึ้นมาตอนเปิดหน้า */
.ax-row{animation:axRowIn .8s cubic-bezier(.2,.8,.3,1) both}
.ax-row--1{animation-delay:.30s}
.ax-row--2{animation-delay:.48s}
.ax-row--3{animation-delay:.66s}
@keyframes axRowIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* คำค้นกับเคอร์เซอร์กะพริบในช่องค้นหา */
.ax-typed{transform-box:fill-box;transform-origin:left center;animation:axType 1s cubic-bezier(.2,.8,.3,1) .1s both}
@keyframes axType{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ax-caret{animation:axBlink 1.1s steps(1) 1.1s infinite both;opacity:0}
@keyframes axBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ปุ่มเพิ่มของ — วงแหวนกระเพื่อมเบา ๆ เป็นระยะ */
.ax-ring{transform-box:fill-box;transform-origin:center;animation:axRing 4.5s ease-out 1.4s infinite}
@keyframes axRing{
  0%{opacity:.55;transform:scale(1)}
  22%{opacity:0;transform:scale(1.22)}
  100%{opacity:0;transform:scale(1.22)}
}

/* เครื่องหมายถูก "พร้อมใช้" เด้งขึ้นมาหลังแถวแรกโผล่ */
.ax-check{transform-box:fill-box;transform-origin:center;animation:axPop .55s cubic-bezier(.34,1.56,.64,1) .85s both}
@keyframes axPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* ป้าย "ถูกยืมอยู่" — ไอคอนนาฬิกาเต้นเบา ๆ เหมือนกำลังนับเวลา */
.ax-clock{animation:axBreathe 3.4s ease-in-out 1.2s infinite}
@keyframes axBreathe{0%,100%{opacity:1}50%{opacity:.42}}

/* แสงกวาดผ่านผิวกระจกของการ์ด */
.ax-sweep{animation:axSweep 7s ease-in-out 1.6s infinite}
@keyframes axSweep{
  0%{transform:translateX(0)}
  45%,100%{transform:translateX(400px)}
}

/* ติ๊กถูกบนใบจ่ายของ */
.ax-ok{transform-box:fill-box;transform-origin:center;animation:axPop .55s cubic-bezier(.34,1.56,.64,1) 1.05s both}


/* ---------- การ์ด hero ขนาดเท่าหน้าแรก ----------
   .hero--full ใน style.css ให้ min-height:100svh มาแล้ว ตรงนี้ทับ padding
   (เพราะ .a-page ตั้งไว้) แล้วสั่งให้การ์ดยืดเต็มพื้นที่ที่เหลือ
   เนื้อหาต้องย่อตาม vh ด้วย ไม่งั้นจอเตี้ยจะล้นออกนอกการ์ด            */
.a-hero.hero--full{align-content:stretch;padding:clamp(10px,2.2vh,26px) 0}
.a-hero.hero--full h1{font-size:clamp(26px,min(4.3vw,6.1vh),51px)}
.a-hero.hero--full .a-hero__lead{margin-top:clamp(9px,1.7vh,16px);font-size:clamp(15px,2vh,17px)}
.a-hero.hero--full .a-hero__cta{margin-top:clamp(15px,2.8vh,26px)}
.a-hero.hero--full .a-art .art{max-width:min(340px,40vh)}
.a-hero.hero--full .a-art{min-height:0}

/* ---------- 3. Pain → answer ---------- */
.a-pain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.a-pain article{padding:24px 22px 22px;border-radius:var(--r-xl)}
.a-pain__q{
  display:flex;align-items:flex-start;gap:11px;
  font-size:16px;font-weight:600;color:var(--navy-800);line-height:1.6;
}
.a-pain__q svg{width:20px;height:20px;flex:none;margin-top:4px;color:#e08a3c}
.a-pain__a{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.75);
  font-size:14.4px;color:var(--ink-soft);line-height:1.85;
}
.a-pain__a b{color:#6b46d9;font-weight:700}

/* ---------- 4. Flow: three steps ---------- */
.a-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.a-frame{
  margin:0;padding:22px 20px 20px;border-radius:var(--r-xl);text-align:center;
  display:flex;flex-direction:column;
}
.a-frame svg{width:100%;max-width:196px;margin:0 auto;filter:drop-shadow(0 16px 26px rgba(12,58,128,.18))}
.a-frame figcaption{margin-top:auto;padding-top:18px;font-size:16px;font-weight:600;color:var(--navy-800)}
.a-frame figcaption i{
  display:block;margin-bottom:6px;font-family:var(--ff-en);font-style:normal;
  font-size:12px;font-weight:800;letter-spacing:.2em;color:#a084fa;
}
.a-frame figcaption span{display:block;margin-top:6px;font-size:13.6px;font-weight:400;color:var(--ink-mute);line-height:1.75}
.a-flow__tail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.a-tick{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-sm);
}
.a-tick svg{width:18px;height:18px;color:#6b46d9;flex:none}
.a-script{
  margin:0;font-family:var(--ff-script);font-size:clamp(32px,3.6vw,44px);font-weight:600;line-height:1;
  transform:rotate(-4deg);
  background:linear-gradient(100deg,#8b6cf7 0%,#6b8cff 48%,#1a73e8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 20px rgba(139,108,247,.22));
}

/* ---------- 5. Feature rows: ข้อความ 60% / ภาพ 40% ---------- */
.a-feat{display:grid;gap:22px}
.a-feat__row{
  display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(22px,3.2vw,44px);align-items:center;
  padding:clamp(24px,2.9vw,36px) clamp(22px,3vw,40px);border-radius:var(--r-xl);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,background .35s;
}
.a-feat__row:hover{transform:translateY(-5px);background:rgba(255,255,255,.7);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.9)}
/* even rows: artwork moves to the left */
.a-feat__row:nth-child(even) .a-feat__art{order:-1}

.a-feat__art{display:grid;place-items:center}
.a-feat__art svg{width:100%;max-width:360px;filter:drop-shadow(0 18px 30px rgba(12,58,128,.18))}

.a-feat__no{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-en);font-size:12px;font-weight:800;letter-spacing:.2em;color:#a084fa;
}
.a-feat__no::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(160,132,250,.55),rgba(160,132,250,0))}
.a-feat__row h3{margin-top:12px;font-size:clamp(19px,2.1vw,23px);font-weight:700;line-height:1.45}
.a-feat__row p{margin-top:8px;font-size:15px;color:var(--ink-soft);line-height:1.85}
.a-feat__row ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.a-feat__row li{position:relative;padding-left:22px;font-size:14.4px;color:var(--ink-soft);line-height:1.8}
.a-feat__row li b{color:var(--navy-800);font-weight:700}
.a-feat__row li::before{
  content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#c9b4ff,#7c4ddb);
}
/* สถานะของ — แถวป้ายเล็กใต้ฟีเจอร์ข้อ 1 */
.a-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.a-tags li{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.9);
}
.a-tags i{width:8px;height:8px;border-radius:50%;flex:none}
.a-tags .s-ready{background:linear-gradient(135deg,#8fe3bb,#22a36b)}
.a-tags .s-fix{background:linear-gradient(135deg,#ffd9a3,#f7961e)}
.a-tags .s-bad{background:linear-gradient(135deg,#ffb3d1,#f2578c)}
.a-tags .s-out{background:linear-gradient(135deg,#d7e2ee,#8ba3bd)}

/* ---------- 6. Who gets what ---------- */
.a-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.a-col{padding:26px 24px 24px;border-radius:var(--r-xl)}
.a-col__ico{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,#ffffff,#efe9ff);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);
}
.a-col__ico svg{width:23px;height:23px;color:#6b46d9}
.a-col h3{margin-top:16px;font-size:18px;font-weight:700}
.a-col ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.a-col li{position:relative;padding-left:26px;font-size:14.4px;color:var(--ink-soft);line-height:1.8}
.a-col li svg{position:absolute;left:0;top:5px;width:17px;height:17px;color:#7c4ddb}

/* ---------- 7. Who uses it ---------- */
.a-chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.a-chips li{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--navy-800);
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.a-chips svg{width:19px;height:19px;color:#6b46d9;flex:none}

/* ---------- 8. Getting started ---------- */
.a-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:astep}
.a-step{padding:24px 22px;border-radius:var(--r-xl)}
.a-step::before{
  counter-increment:astep;content:counter(astep);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--ff-en);font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#a98bfb,#6b46d9);box-shadow:0 10px 20px -10px rgba(107,70,217,.9);
}
.a-step h3{margin-top:14px;font-size:16px;font-weight:700;line-height:1.5}
.a-step p{margin-top:6px;font-size:13.8px;color:var(--ink-mute);line-height:1.8}

/* ---------- 9. FAQ ---------- */
.a-faq{display:grid;gap:12px;max-width:820px}
.a-faq details{padding:2px 22px;border-radius:var(--r-lg)}
.a-faq summary{
  list-style:none;cursor:pointer;padding:16px 34px 16px 0;position:relative;
  font-size:15.5px;font-weight:600;color:var(--navy-800);
}
.a-faq summary::-webkit-details-marker{display:none}
.a-faq summary::after{
  content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;margin-top:-6px;
  border-right:2.4px solid #6b46d9;border-bottom:2.4px solid #6b46d9;
  border-radius:2px;transform:rotate(45deg);transition:transform .25s;
}
.a-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.a-faq__a{padding:14px 0 18px;font-size:14.6px;color:var(--ink-soft);line-height:1.85;border-top:1px solid rgba(255,255,255,.7)}

/* ---------- 10. Closing ---------- */
.a-cta{
  display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:clamp(22px,3vw,40px);align-items:center;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3.2vw,42px);border-radius:var(--r-xl);
}
.a-cta h2{font-size:clamp(23px,2.8vw,31px);font-weight:700;line-height:1.45}
.a-cta p{margin-top:12px;font-size:15.5px;color:var(--ink-soft);max-width:48ch;line-height:1.85}
.a-cta__row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.a-cta__contact{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14.5px;color:var(--ink-soft);padding:0;list-style:none}
.a-cta__contact li{display:flex;align-items:center;gap:10px}
.a-cta__art svg{width:100%;max-width:280px;margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(12,58,128,.2))}

/* ---------- 11. Responsive ---------- */
@media (max-width:1040px){
  .a-hero__grid{grid-template-columns:1fr;gap:30px}
  .a-feat__row{grid-template-columns:1fr;gap:26px}
  .a-feat__row:nth-child(even) .a-feat__art{order:0}
  .a-feat__art svg{max-width:340px}
  .a-cols{grid-template-columns:1fr}
  .a-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-cta{grid-template-columns:1fr}
  .a-cta__art{order:-1}
}
@media (max-width:820px){
  .a-pain{grid-template-columns:1fr;gap:16px}
  .a-flow{grid-template-columns:1fr;gap:16px}
  .a-frame{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:18px;text-align:left}
  .a-frame svg{max-width:130px}
  .a-frame figcaption{margin-top:0;padding-top:0}
  .a-art{flex-direction:column;gap:12px;min-height:0}
  /* ชิปต้องเกาะบนภาพเหมือนจอใหญ่ ถ้าปล่อยเป็น static มันจะกลายเป็น
     แคปซูลลอยเพิ่มอีกสองอัน กินความสูงเกือบ 100px จนการ์ดล้นจอ
     ต้องประกาศ position:absolute ทับ เพราะ style.css บังคับ static ที่ ≤900px */
  .a-art{width:min(100%,250px);margin-inline:auto;padding-bottom:22px}
  .a-art .chip{
    position:absolute;top:2px;right:-4px;
    width:max-content;max-width:none;font-size:11.5px;padding:7px 12px;
    animation:bob 5s ease-in-out infinite;
  }
  .a-art .chip--free{top:auto;bottom:0;left:-6px;right:auto;animation-delay:-2.4s}
  .a-hero.hero--full .a-art .art{max-width:min(250px,23vh)}
}
@media (max-width:640px){
  /* ย่อปุ่มให้อยู่บรรทัดเดียว แทนที่จะซ้อนกันเป็นสองแคปซูล */
  .a-hero__cta{gap:10px}
  .a-hero__cta .btn{padding:11px 16px;font-size:13.5px}
  .a-hero__cta .btn svg{width:16px;height:16px}
  .a-steps{grid-template-columns:1fr}
  .a-hero h1{font-size:29px}
  .a-feat__row,.a-frame,.a-col,.a-step,.a-pain article{padding:22px 18px}
  .a-feat__row h3{font-size:18.5px}
  .a-faq details{padding:0 18px}
}

/* ---------- 12. ปิดแอนิเมชันภาพ hero เมื่อผู้ใช้ขอ ----------
   style.css ตัด duration ให้แล้ว ตรงนี้ตัด delay กับสถานะเริ่มต้นทิ้ง
   ไม่งั้นแถวรายการจะหายไปชั่วครู่ก่อนโผล่                       */
@media (prefers-reduced-motion:reduce){
  .ax-deck,.ax-slip,.ax-row,.ax-typed,.ax-caret,.ax-ring,.ax-check,.ax-clock,.ax-ok,.ax-sweep{
    animation:none!important;animation-delay:0s!important;
    opacity:1;transform:none;
  }
  .ax-caret,.ax-ring,.ax-sweep{display:none}
}