/* ตลาดบ้านที่ดิน — landing page
   Brand: royal blue #0B3F8C (structure) + red #E4002B (action).
   The colours below are documentation; the markup uses the literal hex so the
   page renders identically everywhere, including inside SVG presentation
   attributes. Change both if you re-theme. */
   :root{
    --ink:#0B3F8C; --action:#E4002B; --action-dark:#C10024;
    --body:#3D5075; --muted:#5A6B85; --muted-2:#8496AE; --muted-3:#9BAAC0;
    --border:#E3E7EE; --border-soft:#DDE3EC;
    --surface:#FFFFFF; --surface-1:#FAFBFD; --surface-2:#F2F5FA; --surface-3:#F7F9FC;
    --tint-blue:#EEF3FB; --tint-pink:#FDECEF; --tint-mint:#EAF7F1; --tint-lav:#F0EFFA;
  }
  *{box-sizing:border-box}
  img,svg{max-width:100%}
  :focus-visible{outline:3px solid #E4002B;outline-offset:2px;border-radius:6px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  }
  html{scroll-behavior:smooth}
   
  /* burger icon swap */
  .navburger .i-x{display:none}
  .navburger[aria-expanded="true"] .i-x{display:block}
  .navburger[aria-expanded="true"] .i-bars{display:none}
  [hidden]{display:none!important}
   
  html,body{margin:0!important;padding:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden}
  x-dc,x-dc>*,#root,#app,.dc-root,.dc-stage{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}
  body{font-family:'Anuphan','Noto Sans Thai',sans-serif;background:#FFFFFF;color:#0B3F8C;-webkit-font-smoothing:antialiased}
  x-dc{display:block!important}
  a{color:#0B3F8C}a:hover{color:#E4002B}
  .pulse{animation:pulse 2.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
  .pop-in{animation:popin .42s cubic-bezier(.2,.9,.25,1)}
  @keyframes popin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .bob{animation:bob 7s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .svc{transition:box-shadow .26s,transform .26s,border-color .26s}
  .svc:hover{transform:translateY(-6px) rotate(.35deg);box-shadow:0 14px 34px rgba(11,63,140,.12);border-color:#A9BBD6}
  .fa{transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s,border-color .26s}
  .fa:hover{transform:translateY(-7px);box-shadow:0 16px 34px rgba(11,63,140,.13);border-color:#CBD6E6}
  .fa:active{transform:translateY(-2px)}
  .fa .faart{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .fa:hover .faart{transform:scale(1.06)}
  .fa .fatitle{transition:color .2s}
  .fa:hover .fatitle{color:#E4002B}
  .prog{animation:prog 4.8s linear infinite}
  @keyframes prog{from{width:0}to{width:100%}}
  .navlinks{display:flex;align-items:center;gap:30px;font-size:16px;font-weight:500;min-width:0}
  .navlogin{display:inline-flex}
  .navcta{display:inline-flex}
  .navburger{display:none;transition:background .18s,border-color .18s}
  .navburger:hover{background:#F2F5FA;border-color:#CBD6E6}
  .navpanel{display:none;position:absolute;left:0;right:0;top:100%;background:#FFFFFF;border-bottom:1px solid #E3E7EE;box-shadow:0 14px 30px rgba(11,63,140,.10);padding:0 clamp(16px,4vw,72px);z-index:50}
  @media (max-width:1080px){.navlinks{display:none}.navburger{display:inline-flex}.navpanel{display:block}}
  @media (max-width:560px){.navlogin{display:none}.navsub{display:none}}
  @media (max-width:420px){.navcta{display:none}}
  @media (max-width:760px){.mqfade{display:none}}
  .sbar{transition:border-color .2s,box-shadow .2s}
  .sbar:focus-within{border-color:#A9BBD6;box-shadow:0 6px 20px rgba(11,63,140,.12)}
  .sinput{outline:none}
  .sinput::placeholder{color:#9BAAC0}
  .tchip{transition:background .18s,border-color .18s,color .18s,transform .18s}
  .tchip:hover{transform:translateY(-1px)}
  .tlink{background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s}
  .tlink:hover{background-size:100% 1.5px}
  .mq{animation:mq 34s linear infinite}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mqwrap:hover .mq{animation-play-state:paused}
  .cloudA{animation:drift 22s ease-in-out infinite}
  .cloudB{animation:drift 30s ease-in-out infinite 1.5s}
  .cloudC{animation:drift 26s ease-in-out infinite .8s}
  @keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(34px)}}
  .balloon{animation:balloon 9s ease-in-out infinite}
  @keyframes balloon{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(2.5deg)}}
  .nbadge{transform:rotate(-1.2deg);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s}
  .nbadge:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 10px 24px rgba(11,63,140,.14)}
  .twinkle{animation:twinkle 2.4s ease-in-out infinite}
  @keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.3) rotate(18deg)}}
  .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
  .g3s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .step{transition:transform .26s cubic-bezier(.2,.8,.2,1),background .26s,border-color .26s}
  .step:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
  .step .stepart{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .step:hover .stepart{transform:scale(1.05)}
  /* every grid steps down at the same desktop threshold as the hero and the nav */
  @media(max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g3s{grid-template-columns:1fr}.steparrow{display:none}}
  @media(max-width:860px){.g2{grid-template-columns:1fr}}
  @media(max-width:680px){.g3,.g4{grid-template-columns:1fr}}
  .heroWrap{flex-wrap:nowrap}
  .heroLeft{flex:1 1 0;min-width:0;align-items:flex-start}
  .heroRight{flex:0 1 512px;min-width:0}
  @media(max-width:1080px){
    .heroWrap{flex-direction:column;justify-content:center;gap:34px}
    .heroLeft{flex:0 0 auto;width:100%;max-width:640px;margin-inline:auto;align-items:center;text-align:center}
    .heroLeft p{margin-inline:auto}
    .heroRight{flex:0 0 auto;order:-1;width:100%;max-width:560px;margin-inline:auto}
    .heroAnno{justify-content:center;padding-right:0}
    .shead{justify-content:center;text-align:center}
    .sheadCol{align-items:center;text-align:center;margin-inline:auto}
    .sheadCol p{margin-inline:auto}
  }
  @media(max-width:640px){
    .footGrid{text-align:center}
    .footGrid > div{align-items:center}
    .footGrid span{justify-content:center}
  }
  @media(max-width:900px){.skyline{height:160px;opacity:.75}}
  @media(max-width:620px){.skyline{height:110px;opacity:.55}}
  @media(max-width:700px){.anno{transform:scale(.82);transform-origin:right top}}
  .wiggle{animation:wiggle 2.9s ease-in-out infinite}
  @keyframes wiggle{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(-1.6deg)}}
  .draw{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1.1s ease-out .35s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  .ping{animation:ping 2.6s ease-out infinite}
  @keyframes ping{0%{box-shadow:0 0 0 0 rgba(228,0,43,.42)}70%{box-shadow:0 0 0 13px rgba(228,0,43,0)}100%{box-shadow:0 0 0 0 rgba(228,0,43,0)}}
  .tdot{animation:tdot 1.15s ease-in-out infinite}
  @keyframes tdot{0%,62%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  @keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
  .btn{transition:transform .18s,box-shadow .18s,background .18s}
  .btn:hover{transform:translateY(-2px)}
  .btn-solid:hover{box-shadow:0 6px 16px rgba(228,0,43,.24)}
  .btn-ghost:hover{background:#EEF3FB}
  .navlink{transition:color .18s}
  .navlink:hover{color:#E4002B}
  .flink{transition:color .18s}
  .flink:hover{color:#0B3F8C}
  .seg{transition:background .18s,color .18s,box-shadow .18s}
  .chip{transition:border-color .2s,transform .2s}
  .chip:hover{border-color:#B9CBE6;transform:translateY(-2px)}
  /* ---------- floating contact widget (LINE OA) ---------- */
  .cwbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border:none;border-radius:50%;background:#0B3F8C;color:#FFFFFF;cursor:pointer;box-shadow:0 10px 26px rgba(11,63,140,.28);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
  .cwbtn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 32px rgba(11,63,140,.34)}
  .cwbtn:active{transform:translateY(-1px) scale(1)}
  /* attention ring lives on ::after so it never fights the button's own shadow */
  .cwbtn::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 0 rgba(228,0,43,.42);animation:ping 2.6s ease-out infinite}
  .cwbtn .i-close{display:none}
  .cwbtn[aria-expanded="true"]{background:#E4002B;box-shadow:0 10px 26px rgba(228,0,43,.30)}
  .cwbtn[aria-expanded="true"]::after{animation:none;box-shadow:none}
  .cwbtn[aria-expanded="true"] .i-chat{display:none}
  .cwbtn[aria-expanded="true"] .i-close{display:block}
  .cwpanel{width:min(322px,calc(100vw - 28px));max-height:min(76vh,580px);overflow-y:auto;overflow-x:hidden;border-radius:16px;background:#FFFFFF;border:1px solid #E3E7EE;box-shadow:0 20px 48px rgba(11,63,140,.22)}
  .cwclose{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;border-radius:8px;background:rgba(255,255,255,.12);color:#FFFFFF;cursor:pointer;flex-shrink:0;transition:background .18s}
  .cwclose:hover{background:rgba(255,255,255,.26)}
  .cwqr{display:flex}
  .cwcopy{flex-shrink:0;height:31px;padding:0 12px;border:1px solid #DDE3EC;border-radius:8px;background:#FFFFFF;color:#3D5075;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .18s,color .18s}
  .cwcopy:hover{border-color:#A9BBD6;color:#0B3F8C}
  .cwcopy[data-done]{border-color:#06C755;color:#06C755}
  .cwline{transition:transform .18s,box-shadow .18s,background .18s}
  .cwline:hover{transform:translateY(-2px);background:#05B24C;color:#FFFFFF;box-shadow:0 8px 20px rgba(6,199,85,.30)}
  /* a QR you cannot scan with the phone that is showing it */
  @media(max-width:560px){.cwqr{display:none}.cwbtn{width:56px;height:56px}}
  @media(max-height:660px){.cwqr{display:none}}
  .cwchat{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;border:none;border-radius:10px;background:#0B3F8C;color:#FFFFFF;font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
  .cwchat:hover{transform:translateY(-2px);background:#15509F;box-shadow:0 8px 20px rgba(11,63,140,.26)}
  .cwor{display:flex;align-items:center;gap:10px}