@font-face{font-family:LINE Seed Sans TH;src:url(/fonts/LINESeedSansTH_W_Bd.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--dark:#212121;--dark-dark:#0e0e0e;--primary:#2563eb;--primary-dark:#1d4ed8;--bg:#f8fafc;--text:#0f172a;--gray:#64748b;--white:#fff}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:LINE Seed Sans TH,sans-serif}a{text-decoration:none}.navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:999;background:#ffffffeb;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;width:100%;padding:18px 8%;display:flex;position:fixed;top:0;left:0}.logo img{width:auto;height:48px}.desktop-menu{align-items:center;gap:35px;list-style:none;display:flex}.desktop-menu a{color:#0f172a;font-weight:700;transition:all .3s}.desktop-menu a:hover{color:#2563eb}.menu-btn{cursor:pointer;background:#f8fafc;border:none;border-radius:14px;width:46px;height:46px;transition:all .3s;display:none}.menu-btn:hover{color:#2563eb;background:#eff6ff}.mobile-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998;background:#0f172a73;animation:.25s fadeIn;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-menu{z-index:9999;background:#fff;width:100%;max-width:420px;height:100vh;transition:transform .35s cubic-bezier(.22,.61,.36,1);position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:10px 0 50px #00000014}.mobile-menu.show{transform:translate(0)}.mobile-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:20px;display:flex}.mobile-header img{width:auto;height:42px}.close-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:42px;height:42px;font-size:22px;transition:all .3s;display:flex}.close-btn:hover{color:#2563eb}.mobile-start-btn{color:#fff;background:#2563eb;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:700;transition:all .3s}.mobile-start-btn:hover{background:#1d4ed8}.mobile-links{padding:10px 24px 30px}.mobile-links a{color:#0f172a;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:22px 0;font-size:22px;font-weight:700;transition:all .3s;display:flex}.mobile-links a:after{content:"→";opacity:0;transition:all .3s;transform:translate(-10px)}.mobile-links a:hover{color:#2563eb;padding-left:8px}.mobile-links a:hover:after{opacity:1;transform:translate(0)}@media (max-width:768px){.navbar{padding:15px 20px}.desktop-menu{display:none}.menu-btn{justify-content:center;align-items:center;display:flex}.logo img{height:42px}}@media (max-width:480px){.mobile-menu{max-width:100%}.mobile-header{padding:16px}.mobile-header img{height:36px}.mobile-start-btn{padding:10px 14px;font-size:13px}.mobile-links a{font-size:20px}}.logo{color:var(--primary);font-size:26px;font-weight:700}.navbar ul{gap:30px;list-style:none;display:flex}.navbar a{color:var(--text);font-weight:500}.hero{text-align:center;background-image:url(/images/hero-bg.png);background-position:50%;background-size:cover;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(circle,#fff0 0%,#ffffff26 50%,#fff6 100%);position:absolute;inset:0}.hero-content{z-index:2;position:relative}.hero span{color:var(--primary);font-weight:600}.hero h1{margin:20px 0;font-size:72px;line-height:1.1}.hero p{color:var(--gray);margin-bottom:40px;font-size:20px}.hero-buttons{justify-content:center;gap:15px;display:flex}.btn-dark{background:var(--dark);color:#fff;border-radius:12px;padding:15px 35px;transition:all .3s}.btn-dark:hover{background:var(--dark-dark)}.btn-primary{background:var(--primary);color:#fff;border-radius:12px;padding:15px 35px;transition:all .3s}.btn-primary:hover{background:var(--primary-dark)}.btn-outline{border:2px solid var(--primary);color:var(--primary);border-radius:12px;padding:15px 35px}.section{padding:100px 8%}.section h2{text-align:center;margin-bottom:50px;font-size:42px}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;display:grid}.card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:35px;transition:all .3s;box-shadow:0 10px 30px #0000000d}.card:hover{transform:translateY(-8px)}.card h3{color:var(--primary);margin-bottom:10px}.portfolio-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;justify-content:center;align-items:center;height:250px;font-size:24px;font-weight:700;display:flex;box-shadow:0 10px 30px #0000000d}.contact{color:#fff;text-align:center;background:linear-gradient(135deg,#2563eb,#3b82f6);padding:100px 20px}.contact h2{margin-bottom:15px;font-size:48px}.contact p{margin-bottom:35px}@media (max-width:768px){.hero h1{font-size:42px}.navbar ul{display:none}.hero-buttons{flex-direction:column}}.typing{color:#2563eb;white-space:nowrap;border-right:3px solid #2563eb;font-size:20px;font-weight:700;animation:4s steps(40,end) infinite typing,.8s infinite blink;display:inline-block;overflow:hidden}@keyframes typing{0%{width:0}50%{width:100%}90%{width:100%}to{width:0}}@keyframes blink{50%{border-color:#0000}}.service-section{padding:120px 8%}.service-section h2{text-align:center;margin-bottom:80px;font-size:54px}.service-item{grid-template-columns:1fr 1fr;align-items:center;gap:80px;margin-bottom:120px;display:grid}.reverse .service-image{order:2}.reverse .service-content{order:1}.service-image img{border-radius:25px;width:100%;box-shadow:0 20px 50px #00000014}.service-content span{color:#2563eb;font-weight:700}.service-content h3{color:#0f172a;margin:15px 0;font-size:48px}.service-content p{color:#64748b;margin-bottom:25px;font-size:18px;line-height:1.8}.service-content a{color:#2563eb;font-weight:700}.cta{padding:100px 8%}.cta-box{color:#fff;background:linear-gradient(135deg,#2563eb,#3b82f6);border-radius:30px;justify-content:space-between;align-items:center;padding:80px;display:flex}.footer{color:#fff;background:url(/images/footer-bg.png) 0 0/cover;padding:80px 8% 30px}.footer-grid{grid-template-columns:2fr 1fr 1fr;gap:50px;display:grid}.footer h3{margin-bottom:15px;font-size:32px}.footer h4{margin-bottom:20px}.footer a{color:#cbd5e1;margin-bottom:10px;display:block}.copyright{text-align:center;color:#94a3b8;border-top:1px solid #ffffff1a;margin-top:50px;padding-top:30px}.portfolio-section{background:#f8fafc;padding:120px 8%}.portfolio-section h2{text-align:center;color:#0f172a;margin-bottom:70px;font-size:54px}.portfolio-card{border-radius:24px;transition:all .4s;position:relative;overflow:hidden;box-shadow:0 20px 40px #0f172a14}.portfolio-card:hover{transform:translateY(-10px)}.portfolio-card img{object-fit:cover;width:100%;height:100%;display:block}.portfolio-overlay{color:#fff;background:linear-gradient(#0000,#0f172aeb);padding:30px;position:absolute;bottom:0;left:0;right:0}.portfolio-overlay span{color:#60a5fa;font-size:14px;font-weight:700}.portfolio-overlay h3{margin-top:8px;font-size:30px}@media (max-width:1024px){.hero h1{font-size:56px}.service-item{gap:40px}.service-content h3{font-size:36px}.cta-box{padding:50px}.footer-grid{grid-template-columns:1fr 1fr}}@media (max-width:768px){.navbar{padding:16px 20px}.navbar ul{display:none}.logo{font-size:24px}.hero{padding:120px 20px 80px}.hero h1{font-size:42px;line-height:1.15}.hero p{margin-bottom:30px;font-size:16px}.typing{font-size:16px}.hero-buttons{flex-direction:column;width:100%}.btn-primary,.btn-outline{text-align:center;width:100%}.section,.service-section,.portfolio-section,.cta{padding:80px 20px}.section h2,.service-section h2,.portfolio-section h2{margin-bottom:50px;font-size:36px}.service-item{grid-template-columns:1fr;gap:30px;margin-bottom:80px}.reverse .service-image,.reverse .service-content{order:unset}.service-content{text-align:center}.service-content h3{font-size:32px}.service-content p{font-size:16px}.portfolio-grid{grid-template-columns:1fr}.portfolio-card{min-height:280px}.portfolio-overlay h3{font-size:24px}.cta-box{text-align:center;flex-direction:column;gap:25px;padding:40px 25px}.cta-box h2{font-size:32px}.footer{padding:60px 20px 30px}.footer-grid{text-align:center;grid-template-columns:1fr;gap:35px}.footer h3{font-size:28px}}@media (max-width:480px){.hero h1{font-size:34px}.hero p{font-size:15px}.typing{font-size:14px}.service-content h3{font-size:28px}.section h2,.service-section h2,.portfolio-section h2{font-size:30px}.portfolio-card{min-height:220px}.portfolio-overlay{padding:20px}.portfolio-overlay h3{font-size:20px}.cta-box h2{font-size:28px}}.service-hero{text-align:center;background:radial-gradient(circle at top,#dbeafe,#0000 60%),#fff;padding:180px 20px 120px}.service-hero span{color:#2563eb;font-weight:700}.service-hero h1{margin:20px 0;font-size:64px}.service-hero p{color:#64748b;max-width:700px;margin:auto;font-size:18px}.pricing{background:#fff;padding:120px 8%}.pricing-header{text-align:center;margin-bottom:60px}.pricing-header span{color:#2563eb;font-weight:700}.pricing-header h2{margin:15px 0;font-size:52px}.pricing-header p{color:#64748b}.pricing-grid{grid-template-columns:repeat(3,1fr);gap:30px;display:grid}.pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:40px;transition:all .3s;position:relative;box-shadow:0 10px 40px #0000000d}.pricing-card:hover{transform:translateY(-10px)}.featured{border:2px solid #2563eb;transform:scale(1.05)}.badge{color:#fff;background:#2563eb;border-radius:999px;padding:8px 20px;position:absolute;top:-15px;left:50%;transform:translate(-50%)}.price{color:#2563eb;margin:25px 0;font-size:48px;font-weight:700}.pricing-card ul{list-style:none}.pricing-card li{color:#64748b;margin-bottom:14px}.pricing-btn{color:#fff;text-align:center;background:#2563eb;border-radius:12px;margin-top:30px;padding:14px;display:block}@media (max-width:992px){.pricing-grid{grid-template-columns:1fr}.featured{transform:none}.service-hero h1{font-size:48px}}@media (max-width:768px){.service-hero{padding:140px 20px 80px}.service-hero h1,.pricing-header h2,.price{font-size:36px}}.tech-stack{text-align:center;padding:100px 8%}.tech-stack h2{margin-bottom:60px;font-size:48px}.tech-logos{flex-wrap:wrap;justify-content:center;align-items:center;gap:60px;display:flex}.tech-logos img{object-fit:contain;filter:grayscale();opacity:.7;width:70px;height:70px;transition:all .3s}.tech-logos img:hover{filter:none;opacity:1;transform:translateY(-5px)}@media (max-width:992px){.tech-stack{padding:80px 6%}.tech-stack h2{margin-bottom:50px;font-size:40px}.tech-logos{gap:40px}.tech-logos img{width:60px;height:60px}}@media (max-width:768px){.tech-stack{padding:70px 20px}.tech-stack h2{margin-bottom:40px;font-size:32px}.tech-logos{gap:30px}.tech-logos img{width:50px;height:50px}}@media (max-width:480px){.tech-stack h2{font-size:28px}.tech-logos{gap:20px}.tech-logos img{width:40px;height:40px}}.portfolio-action{text-align:center;margin-top:50px}.portfolio-btn{color:#fff;background:#2563eb;border-radius:14px;align-items:center;gap:12px;padding:16px 32px;font-size:16px;font-weight:700;transition:all .3s;display:inline-flex}.portfolio-btn:hover{background:#1d4ed8;transform:translateY(-3px)}.portfolio-btn i{transition:all .3s}.portfolio-btn:hover i{transform:translate(5px)}.portfolio-hero{text-align:center;background:radial-gradient(circle at top,#dbeafe,#0000 60%),#fff;padding:180px 20px 120px}.portfolio-hero span{color:#2563eb;font-weight:700}.portfolio-hero h1{margin:20px 0;font-size:72px}.portfolio-hero p{color:#64748b;max-width:700px;margin:auto}.portfolio-showcase{flex-direction:column;gap:40px;padding:120px 8%;display:flex}.work-card{background:#fff;border:1px solid #e2e8f0;border-radius:30px;grid-template-columns:1fr 1fr;align-items:center;gap:50px;display:grid;overflow:hidden;box-shadow:0 15px 40px #0000000d}.work-card img{object-fit:cover;width:100%;height:100%}.work-content{padding:40px}.work-content span{color:#2563eb;font-weight:700}.work-content h3{margin:15px 0;font-size:42px}.work-content p{color:#64748b;margin-bottom:20px}.work-content a{color:#2563eb;font-weight:700}.portfolio-page{padding:140px 8% 100px}.portfolio-header{text-align:center;margin-bottom:60px}.portfolio-header span{color:#2563eb;font-weight:700}.portfolio-header h1{margin:15px 0;font-size:56px}.portfolio-header p{color:#64748b}.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;display:grid}.portfolio-item{background:#fff;border:1px solid #e2e8f0;border-radius:24px;transition:all .3s;overflow:hidden;box-shadow:0 10px 30px #0000000d}.portfolio-item:hover{transform:translateY(-8px)}.portfolio-item img{object-fit:cover;width:100%;height:240px;display:block}.portfolio-content{padding:24px}.portfolio-top{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.portfolio-top h3{color:#0f172a;margin-bottom:8px;font-size:22px}.portfolio-top p{color:#64748b;font-size:15px;line-height:1.6}.portfolio-tag{white-space:nowrap;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}.starter{color:#16a34a;background:#ecfdf5}.medium{color:#2563eb;background:#eff6ff}.business{color:#d97706;background:#fef3c7}@media (max-width:992px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.portfolio-page{padding:120px 20px 80px}.portfolio-header h1{font-size:38px}.portfolio-grid{grid-template-columns:1fr}.portfolio-item img{height:220px}.portfolio-top{flex-direction:column}.portfolio-tag{align-self:flex-start}}.contact-hero{text-align:center;background:radial-gradient(circle at top,#dbeafe,#0000 60%),#fff;padding:180px 20px 100px}.contact-hero span{color:#2563eb;font-weight:700}.contact-hero h1{margin:20px 0;font-size:64px}.contact-hero p{color:#64748b}.contact-section{grid-template-columns:400px 1fr;gap:40px;padding:100px 8%;display:grid}.contact-info,.contact-form{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:40px;box-shadow:0 10px 30px #0000000d}.contact-info h2,.contact-form h2{margin-bottom:30px}.contact-item{align-items:center;gap:15px;margin-bottom:20px;display:flex}.contact-item i{color:#2563eb;font-size:24px}.contact-form form{flex-direction:column;gap:15px;display:flex}.contact-form input,.contact-form textarea{border:1px solid #e2e8f0;border-radius:12px;padding:15px;font-family:inherit}.contact-form button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:12px;padding:15px}.contact-faq{padding:100px 8%}.contact-faq h2{text-align:center;margin-bottom:50px}.faq-item{background:#fff;border:1px solid #e2e8f0;border-radius:20px;margin-bottom:20px;padding:25px}.faq-item p{color:#64748b;margin-top:10px}@media (max-width:768px){.contact-hero h1{font-size:42px}.contact-section{grid-template-columns:1fr;padding:80px 20px}.contact-faq{padding:80px 20px}}.contact-banner{border-radius:24px;min-height:500px;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000000d}.contact-banner img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.banner-overlay{text-align:center;color:#fff;background:linear-gradient(135deg,#00000085,#00000085);flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;inset:0}.banner-overlay h2{margin-bottom:15px;font-size:42px}.banner-overlay p{max-width:500px;margin-bottom:30px}.banner-btn{color:#2563eb;background:#fff;border-radius:12px;padding:15px 30px;font-weight:700}@media (max-width:992px){.contact-banner{min-height:400px}.banner-overlay h2{font-size:34px}.banner-overlay p{font-size:16px}}@media (max-width:768px){.contact-section{grid-template-columns:1fr;padding:80px 20px}.contact-banner{min-height:350px}.banner-overlay{padding:30px 20px}.banner-overlay h2{font-size:28px;line-height:1.3}.banner-overlay p{margin-bottom:25px;font-size:15px}.banner-btn{text-align:center;width:100%;max-width:250px;padding:14px 20px}}@media (max-width:480px){.contact-banner{border-radius:20px;min-height:300px}.banner-overlay h2{font-size:24px}.banner-overlay p{font-size:14px}.banner-btn{max-width:220px;font-size:14px}}.logo{align-items:center;display:flex}.logo img{width:auto;height:45px;display:block}@media (max-width:768px){.logo img{height:38px}}