@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=JetBrains+Mono:wght@600;700;800&family=Anuphan:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Kanit:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap";:root{--brand-orange:#f39c12;--brand-orange-hover:#e08e0b;--brand-orange-light:#f39c1214;--brand-orange-border:#f39c1240;--bg-main:#0b0f17;--bg-surface:#131b2a;--bg-card:#182234;--bg-card-hover:#1e2b42;--border-subtle:#233148;--border-highlight:#334461;--text-primary:#fff;--text-secondary:#94a3b8;--text-muted:#64748b;--font-prompt:"Prompt", "Inter", sans-serif;--font-ibm:"IBM Plex Sans Thai", "Inter", sans-serif;--font-anuphan:"Anuphan", "Inter", sans-serif;--font-noto:"Noto Sans Thai", "Inter", sans-serif;--font-sarabun:"Sarabun", "Inter", sans-serif;--font-kanit:"Kanit", "Inter", sans-serif;--font-tech:"JetBrains Mono", monospace;--font-main:var(--font-prompt)}.font-tech{font-family:var(--font-tech), monospace!important;letter-spacing:-.01em!important}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-main);letter-spacing:.015em;-webkit-font-smoothing:antialiased;line-height:1.7}input,textarea,select,button{font-family:inherit}h1,h2,h3,h4,h5,h6{letter-spacing:.015em;line-height:1.4}.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}.hero-bg{background-color:var(--bg-main);background-image:linear-gradient(90deg,#ffffff05 1px,#0000 1px),linear-gradient(#ffffff05 1px,#0000 1px),radial-gradient(circle at 85% 15%,#f39c121f 0%,#0000 60%);background-position:0 -28px,0 -28px,85% 15%;background-size:56px 56px,56px 56px,100% 100%;position:relative}.btn-brand{background-color:var(--brand-orange);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.6rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:background-color .15s,filter .15s;display:inline-flex}.btn-brand:hover{background-color:var(--brand-orange-hover)}.btn-brand:active{filter:brightness(.9)}.btn-outline{color:var(--text-primary);border:1px solid var(--border-highlight);cursor:pointer;background-color:#ffffff08;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.6rem;font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .2s,border-color .2s,color .2s;display:inline-flex}.btn-outline:hover{border-color:var(--brand-orange-border);color:var(--brand-orange);background-color:#f39c121a}.card-clean{background-color:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px;transition:all .25s}.product-row{scroll-margin-top:110px}.card-clean:hover{background-color:var(--bg-card-hover);border-color:var(--brand-orange-border)}.badge-clean{letter-spacing:.22em;text-transform:uppercase;color:var(--brand-orange);background:0 0;border:none;padding:0;font-size:.82rem;font-weight:700;display:inline-block}.lang-switcher{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:6px;padding:2px;display:flex}.lang-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 10px;font-size:.78rem;font-weight:700;transition:all .2s}.lang-btn.active{background-color:var(--brand-orange);color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--brand-orange)}.marquee-container{width:100%;padding:10px 0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%)}.marquee-track{align-items:center;gap:1.5rem;width:max-content;animation:65s linear infinite scrollMarquee;display:flex}.marquee-track:hover{animation-play-state:paused}@keyframes scrollMarquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.client-logo-card{border:1px solid var(--border-subtle);background-color:#fff;border-radius:12px;justify-content:center;align-items:center;min-width:170px;height:76px;padding:12px 24px;transition:transform .2s,border-color .2s;display:flex;box-shadow:0 4px 12px #0003}.client-logo-card img{object-fit:contain;filter:grayscale(20%);max-width:130px;max-height:48px;transition:filter .2s,transform .2s}.client-logo-card:hover img{filter:grayscale(0%);transform:scale(1.06)}.hero-static-stack{perspective:1200px;width:100%;max-width:640px;height:520px;margin:0 auto;position:relative}.static-layer-card{width:78%;transform-style:preserve-3d;background:0 0;border:1px solid #ffffff29;border-radius:12px;text-decoration:none;transition:all .5s cubic-bezier(.2,.8,.2,1);display:block;position:absolute;overflow:hidden;box-shadow:-15px 25px 50px #000000d9,0 0 0 1px #ffffff0d}.static-layer-card:hover,.static-layer-card.is-active-selected{border-color:#f39c12bf;box-shadow:-25px 35px 70px #000000f2,0 0 30px #f39c1259;z-index:10!important;filter:brightness()!important;transform:rotateY(-18deg)rotateX(12deg)rotate(3deg)translateY(-14px)scale(1.03)!important}.static-layer-card.layer-back{z-index:1;filter:brightness(.8);top:0;left:28%;transform:rotateY(-18deg)rotateX(12deg)rotate(3deg)scale(.92)}.static-layer-card.layer-middle{z-index:2;filter:brightness(.9);top:95px;left:14%;transform:rotateY(-18deg)rotateX(12deg)rotate(3deg)scale(.96)}.static-layer-card.layer-front{z-index:3;border-color:#f39c1266;top:190px;left:0%;transform:rotateY(-18deg)rotateX(12deg)rotate(3deg)scale(1);box-shadow:-20px 30px 60px #000000e6,0 0 25px #f39c1233}.layer-mac-header{-webkit-backdrop-filter:blur(10px);z-index:2;background:#121a2a59;border-bottom:1px solid #ffffff24;justify-content:space-between;align-items:center;height:34px;padding:0 14px;transition:all .35s;display:flex;position:relative}.static-layer-card:hover .layer-mac-header{-webkit-backdrop-filter:none;background:#141c2b;border-bottom-color:#fff3}.layer-mac-dots{align-items:center;gap:6px;display:flex}.layer-mac-dot{border-radius:50%;width:9px;height:9px}.layer-mac-dot.red{background:#ff5f56}.layer-mac-dot.yellow{background:#ffbd2e}.layer-mac-dot.green{background:#27c93f}.layer-title-text{color:var(--text-secondary);align-items:center;gap:5px;font-size:.73rem;font-weight:600;display:flex}.layer-body-img{aspect-ratio:16/9.6;background:#06090f;width:100%;position:relative;overflow:hidden}.layer-body-img img{object-fit:contain;object-position:center;width:100%;height:100%;transition:transform .4s;display:block}.static-layer-card:hover .layer-body-img img{transform:scale(1.02)}.card-overlay-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3;background:#0b0f17e0;border:1px solid #ffffff1f;border-radius:8px;justify-content:space-between;align-items:center;padding:10px 16px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.caption-link{color:var(--brand-orange);align-items:center;gap:4px;font-size:.8rem;font-weight:600;text-decoration:none;transition:color .2s;display:flex}.caption-link:hover{color:#fff}.reveal-on-scroll{opacity:0;will-change:opacity, transform;transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);transform:translateY(28px)}.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}@media (width<=960px){.container{padding:0 1.25rem}.hero-static-stack{max-width:100%;height:380px}.static-layer-card{width:86%}.static-layer-card.layer-back{top:0;left:14%}.static-layer-card.layer-middle{top:70px;left:7%}.static-layer-card.layer-front{top:140px;left:0%}}@media (width<=768px){.container{padding:0 1rem}h1{font-size:clamp(1.8rem,6vw,2.8rem)!important;line-height:1.3!important}h2{font-size:clamp(1.5rem,5vw,2.2rem)!important;line-height:1.35!important}.client-logo-card{min-width:140px;height:64px;padding:8px 16px}.client-logo-card img{max-width:110px;max-height:38px}.hero-static-stack{height:300px}.static-layer-card.layer-back{top:0;left:10%}.static-layer-card.layer-middle{top:50px;left:5%}.static-layer-card.layer-front{top:100px;left:0%}.card-overlay-badge{padding:6px 10px;bottom:8px;left:8px;right:8px}.card-overlay-badge .caption-link span{font-size:.75rem}}@media (width<=480px){.btn-brand,.btn-outline{justify-content:center;width:100%;padding:.85rem 1rem}.hero-static-stack{height:240px}.static-layer-card.layer-back{top:0}.static-layer-card.layer-middle{top:35px}.static-layer-card.layer-front{top:70px}}