/* ============================================================
   GUS AREA — site.css
   สไตล์หลักของหน้าเว็บ (index.php, privacypolicy.html)
   ใช้ร่วมกับ Tailwind (cdn.tailwindcss.com) + tailwind.config ใน head
   ============================================================ */

html{scroll-behavior:smooth}
body{font-family:'Inter','IBM Plex Sans Thai',sans-serif; line-height:1.65}
.th{font-family:'IBM Plex Sans Thai','Inter',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
::selection{background:#EC8E20; color:#000}

/* dark grid backdrop for hero/footer */
.grid-dark{
  background-image:
    linear-gradient(rgba(236,142,32,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,142,32,.06) 1px, transparent 1px);
  background-size:44px 44px;
}
.glow-orb{
  position:absolute; border-radius:9999px; filter:blur(90px); pointer-events:none;
}

/* terminal blink */
.cursor{display:inline-block; width:9px; height:1.05em; background:#EC8E20; vertical-align:-2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* status pulse */
.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* glass */
.glass-dark{background:rgba(11,14,20,.72); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%)}
.glass-light{background:rgba(255,255,255,.7); backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%)}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* progress fill */
.bar-fill{width:0; transition:width 1.1s cubic-bezier(.3,.8,.3,1)}

/* marquee */
.mq{display:flex; gap:40px; align-items:center; white-space:nowrap; animation:mq 55s linear infinite; width:max-content}
@keyframes mq{to{transform:translateX(-50%)}}

/* card hover sheen */
.svc-card{transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s}
.svc-card:hover{transform:translateY(-6px)}

/* dotted connector */
.dotline{background-image:radial-gradient(circle, #CBD2E0 1.4px, transparent 1.4px); background-size:10px 2px; background-repeat:repeat-x}

.scrollbar-none::-webkit-scrollbar{display:none}

/* works filter buttons */
.wf-btn{background:#fff; color:var(--slate2,#4A556B); border-color:#E6E9F1}
.wf-btn:hover{border-color:#EC8E20; color:#EC8E20}
.wf-btn.is-active{background:#EC8E20; color:#000; border-color:#EC8E20}

/* ============================================================
   Project modal (gallery slider)
   ============================================================ */
@keyframes pmRise{from{transform:translateY(22px) scale(.97); opacity:0}to{transform:none; opacity:1}}
.pm-slide{position:absolute; inset:0; opacity:0; transition:opacity .4s ease}
.pm-slide.active{opacity:1}
.pm-slide img{width:100%; height:100%; object-fit:cover}
.pm-dot{width:9px; height:9px; border-radius:9999px; background:rgba(255,255,255,.45); cursor:pointer; transition:all .15s; border:none}
.pm-dot.active{background:#EC8E20; width:24px}

/* ============================================================
   Privacy policy page content
   ============================================================ */
.policy h2{font-family:'IBM Plex Sans Thai','Inter',sans-serif; font-weight:700; font-size:1.25rem; color:#161B26; margin-top:2.25rem; margin-bottom:.75rem; padding-top:1.5rem; border-top:1px solid #E6E9F1}
.policy h2:first-child{margin-top:0; padding-top:0; border-top:0}
.policy .lang-block{margin-bottom:1rem}
.policy .lang-label{display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; color:#EC8E20; background:rgba(236,142,32,.08); border:1px solid rgba(236,142,32,.25); border-radius:9999px; padding:2px 10px; margin-bottom:.5rem}
.policy p{color:#4A556B; font-size:15px; line-height:1.75}
.policy ul{margin-top:.5rem; margin-bottom:.5rem; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:.5rem}
.policy ul li{color:#4A556B; font-size:14.5px; display:flex; gap:.6rem; align-items:flex-start}
.policy ul li::before{content:'+'; font-family:'JetBrains Mono',monospace; color:#EC8E20; font-weight:700; flex-shrink:0}