/* ============================================================
   wansuk.com — Housing / Mati (มติ) product page
   builds on style.css (aurora stage + glass primitives)
   ภาพนำ ข้อความรอง — สีประจำระบบคือเขียว (dot--green)
   ============================================================ */

/* ---------- 1. Page chrome ---------- */
.h-page{padding:24px 0 18px}
.h-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);
}
.h-badge small{font-family:var(--ff-th);font-weight:500;font-size:13px;color:var(--ink-mute)}

/* ---------- 2. Hero ---------- */
.h-hero__grid{
  flex:1;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3.6vw,48px);align-items:center;
  padding:clamp(24px,3.2vw,38px) 0 clamp(20px,2.6vw,30px);
}
.h-hero h1{
  font-family:var(--ff-th);margin-top:18px;letter-spacing:-.01em;
  font-size:clamp(32px,4.3vw,51px);font-weight:700;line-height:1.28;
}
.h-hero h1 .accent{
  font-weight:700;
  background:linear-gradient(108deg,#22a36b 0%,#2fb6a4 34%,#1a73e8 68%,#0a2a63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h-hero__lead{margin-top:16px;font-size:17px;color:var(--ink-soft);max-width:34ch}
.h-hero__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* village artwork */
.h-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.h-art .art{width:100%;max-width:400px;filter:drop-shadow(0 26px 44px rgba(12,58,128,.24))}
.h-art .chip{top:6px;right:-4px}
.h-art .chip--vote{top:auto;bottom:16px;right:auto;left:-12px;animation-delay:-2.4s}
.chip--vote svg{color:#22a36b}


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

/* ---------- 2c. ภาพหมู่บ้านที่ขยับได้ (prefix .hx-) ----------
   เล่าเป็นลำดับ: พื้นที่ดิน → บ้านผุดขึ้นทีละหลัง → หลังคาถูกลากเส้น →
   ใบเสร็จเลื่อนเข้าจากซ้าย → สมุดบัญชีเลื่อนเข้าจากขวา → ตัวเลขไล่ขึ้นทีละแถว
   จบแล้วเข้าลูปเบา ๆ: การ์ดลอย ต้นไม้ไหว ทางเดินมีเส้นวิ่ง            */
@keyframes hxUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes hxInL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes hxInR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes hxRow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes hxPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes hxDraw{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
@keyframes hxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hxBreathe{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes hxDash{to{stroke-dashoffset:-48}}
@keyframes hxSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes hxGlow{0%,100%{fill:#eaf6ff}50%{fill:#fff3d6}}

.hx-ground{animation:hxUp .7s cubic-bezier(.2,.8,.3,1) .15s both}
/* หลังกลางใหญ่สุด ให้ขึ้นก่อน แล้วค่อยสองหลังข้าง */
.hx-house--2{animation:hxUp .8s cubic-bezier(.2,.8,.3,1) .3s both}
.hx-house--1{animation:hxUp .8s cubic-bezier(.2,.8,.3,1) .46s both}
.hx-house--3{animation:hxUp .8s cubic-bezier(.2,.8,.3,1) .62s both}

/* หลังคาลากเส้นทีละหลัง ใช้ dasharray 150 ครอบความยาวเส้นจริงทุกหลัง */
.hx-roof{stroke-dasharray:150}
.hx-roof--2{animation:hxDraw .9s ease .55s both}
.hx-roof--1{animation:hxDraw .9s ease .7s both}
.hx-roof--3{animation:hxDraw .9s ease .85s both}

/* ไฟในหน้าต่างบ้านหลังกลาง ติดสลับกันเบา ๆ */
.hx-win--a{animation:hxGlow 5.5s ease-in-out 2.4s infinite}
.hx-win--b{animation:hxGlow 5.5s ease-in-out 4.2s infinite}

/* ต้นไม้ไหวตามลม หมุนจากโคนต้น */
.hx-tree{transform-box:fill-box;transform-origin:bottom center}
.hx-tree--1{animation:hxSway 6.5s ease-in-out infinite}
.hx-tree--2{animation:hxSway 7.5s ease-in-out -2.5s infinite}

/* เส้นประบนทางเดินไหลช้า ๆ */
.hx-path{animation:hxDash 7s linear 1.6s infinite}

/* การ์ดสองใบ — เข้ามาแล้วลอยสวนจังหวะกัน ต้องเขียน animation เป็นลิสต์เดียว
   ถ้าแยกประกาศ ตัวหลังจะลบตัวแรกทิ้ง */
.hx-slip{
  animation:hxInL .8s cubic-bezier(.2,.8,.3,1) .9s both,
            hxFloat 7s ease-in-out 2s infinite;
}
.hx-ledger{
  animation:hxInR .8s cubic-bezier(.2,.8,.3,1) 1.05s both,
            hxFloat 8s ease-in-out 2.4s infinite;
}

/* ตัวเลขในสมุดบัญชีไล่ขึ้นทีละแถว */
.hx-row--1{animation:hxRow .55s cubic-bezier(.2,.8,.3,1) 1.5s both}
.hx-row--2{animation:hxRow .55s cubic-bezier(.2,.8,.3,1) 1.65s both}
.hx-row--3{animation:hxRow .55s cubic-bezier(.2,.8,.3,1) 1.8s both}

.hx-dot{animation:hxBreathe 3.2s ease-in-out 2s infinite}
.hx-check{transform-box:fill-box;transform-origin:center;animation:hxPop .55s cubic-bezier(.34,1.56,.64,1) 1.7s both}

/* ---------- 3. Pain → answer ---------- */
.h-pain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.h-pain article{padding:24px 22px 22px;border-radius:var(--r-xl)}
.h-pain__q{
  display:flex;align-items:flex-start;gap:11px;
  font-size:16px;font-weight:600;color:var(--navy-800);line-height:1.6;
}
.h-pain__q svg{width:20px;height:20px;flex:none;margin-top:4px;color:#e08a3c}
.h-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;
}
.h-pain__a b{color:#1b8f60;font-weight:700}

/* ---------- 4. Money flow: three steps ---------- */
.h-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.h-frame{
  margin:0;padding:22px 20px 20px;border-radius:var(--r-xl);text-align:center;
  display:flex;flex-direction:column;
}
.h-frame svg{width:100%;max-width:210px;margin:0 auto;filter:drop-shadow(0 16px 26px rgba(12,58,128,.18))}
.h-frame figcaption{margin-top:auto;padding-top:18px;font-size:16px;font-weight:600;color:var(--navy-800)}
.h-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:#5fc79b;
}
.h-frame figcaption span{display:block;margin-top:6px;font-size:13.6px;font-weight:400;color:var(--ink-mute);line-height:1.75}
.h-flow__tail{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.h-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);
}
.h-tick svg{width:18px;height:18px;color:#22a36b;flex:none}
.h-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,#22a36b 0%,#3fc9c2 48%,#1a73e8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 20px rgba(34,163,107,.2));
}

/* ---------- 5. Feature rows: art and words swap sides ---------- */
.h-feat{display:grid;gap:22px}
.h-feat__row{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(22px,3.4vw,48px);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;
}
.h-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 right */
.h-feat__row:nth-child(even) .h-feat__art{order:2}

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

.h-feat__no{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-en);font-size:12px;font-weight:800;letter-spacing:.2em;color:#5fc79b;
}
.h-feat__no::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(95,199,155,.55),rgba(95,199,155,0))}
.h-feat__row h3{margin-top:12px;font-size:clamp(19px,2.1vw,23px);font-weight:700;line-height:1.45}
.h-feat__row p{margin-top:8px;font-size:15px;color:var(--ink-soft);line-height:1.8}
.h-feat__row ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.h-feat__row li{position:relative;padding-left:22px;font-size:14.4px;color:var(--ink-soft);line-height:1.8}
.h-feat__row li::before{
  content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,#8fe3bb,#22a36b);
}

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

/* ---------- 7. Who uses it ---------- */
.h-chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.h-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);
}
.h-chips svg{width:19px;height:19px;color:#1b8f60;flex:none}

/* ---------- 8. Getting started ---------- */
.h-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:hstep}
.h-step{padding:24px 22px;border-radius:var(--r-xl);position:relative}
.h-step::before{
  counter-increment:hstep;content:counter(hstep);
  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,#5fc79b,#1b8f60);box-shadow:0 10px 20px -10px rgba(27,143,96,.9);
}
.h-step h3{margin-top:14px;font-size:16px;font-weight:700;line-height:1.5}
.h-step p{margin-top:6px;font-size:13.8px;color:var(--ink-mute);line-height:1.8}

/* ---------- 9. FAQ ---------- */
.h-faq{display:grid;gap:12px;max-width:820px}
.h-faq details{padding:2px 22px;border-radius:var(--r-lg)}
.h-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);
}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{
  content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;margin-top:-6px;
  border-right:2.4px solid #1b8f60;border-bottom:2.4px solid #1b8f60;
  border-radius:2px;transform:rotate(45deg);transition:transform .25s;
}
.h-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.h-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 ---------- */
.h-cta{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,3vw,40px);align-items:center;
  padding:clamp(28px,3.4vw,42px) clamp(24px,3.2vw,42px);border-radius:var(--r-xl);
}
.h-cta h2{font-size:clamp(23px,2.8vw,31px);font-weight:700;line-height:1.45}
.h-cta p{margin-top:12px;font-size:15.5px;color:var(--ink-soft);max-width:44ch}
.h-cta__row{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.h-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}
.h-cta__contact li{display:flex;align-items:center;gap:10px}
.h-cta__art svg{width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 18px 30px rgba(12,58,128,.2))}

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

/* ---------- 12. ปิดแอนิเมชันภาพเมื่อผู้ใช้ขอ ----------
   style.css ตัด duration ให้แล้ว ตรงนี้ตัด delay กับสถานะเริ่มต้นทิ้ง
   ไม่งั้นชิ้นส่วนในภาพจะหายไปเป็นวินาทีก่อนโผล่                  */
@media (prefers-reduced-motion:reduce){
  .h-art [class*="hx-"]{
    animation:none!important;animation-delay:0s!important;
    opacity:1;transform:none;stroke-dashoffset:0;
  }
}