*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary: #F97316;--primary-light: #FDBA74;--primary-dark: #EA580C;--accent: #F59E0B;--accent-light: #FCD34D;--success: #10B981;--brand-gold: #FED79D;--brand-dark: #1A1A1A;--bg-primary: #0F172A;--bg-secondary: #0B1120;--bg-card: #1E293B;--bg-card-hover: #334155;--border: rgba(249, 115, 22, .12);--border-hover: rgba(249, 115, 22, .35);--text-primary: #F1F5F9;--text-secondary: #94A3B8;--text-muted: #64748B;--text-orange-light: #FED7AA;--gradient-primary: linear-gradient(135deg, #F97316 0%, #F59E0B 100%);--gradient-hero: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, .12) 0%, transparent 60%);--gradient-card: linear-gradient(145deg, rgba(249, 115, 22, .06) 0%, rgba(245, 158, 11, .03) 100%);--gradient-text: linear-gradient(to right, #FED7AA, #FB923C);--font-primary: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;--shadow-card: 0 4px 24px rgba(0, 0, 0, .3);--shadow-glow: 0 0 40px rgba(249, 115, 22, .12);--shadow-orange: 0 4px 20px rgba(249, 115, 22, .25);--container-width: 1200px;--section-padding: 100px}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;display:block;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{max-width:100%;margin:0;padding:0;text-align:left}a{color:var(--primary-light);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-light)}.container{max-width:var(--container-width);margin:0 auto;padding:0 24px}.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:#0f172ad9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(30,41,59,.8);transition:background .3s}.nav .container{display:flex;align-items:center;justify-content:space-between}.nav-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.2rem;color:var(--text-primary)}.nav-logo{width:36px;height:36px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-logo img{width:100%;height:100%}.nav-brand-text{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:.9rem;font-weight:700}.nav-links{display:flex;align-items:center;gap:32px;list-style:none}.nav-links a{color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--text-primary)}.nav-cta{padding:8px 20px!important;background:var(--gradient-primary)!important;color:#fff!important;border-radius:8px;font-weight:600!important;font-size:.85rem!important;transition:all .2s!important;box-shadow:0 2px 12px #f9731633}.nav-cta:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px #f973164d}.hero{position:relative;padding:160px 0 120px;text-align:center;overflow:hidden}.hero:before{content:"";position:absolute;top:-200px;left:50%;transform:translate(-50%);width:900px;height:900px;background:var(--gradient-hero);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:#f9731614;border:1px solid rgba(249,115,22,.2);border-radius:100px;font-size:.8rem;color:var(--primary-light);font-weight:500;margin-bottom:24px;animation:fadeInUp .6s ease-out}.hero-badge span{display:inline-block;animation:pulse 2s infinite}.hero h1{font-size:clamp(2.5rem,5vw,3.8rem);font-weight:800;line-height:1.15;margin-bottom:24px;animation:fadeInUp .6s ease-out .1s both}.hero h1 .gradient-text{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.15rem;color:var(--text-secondary);max-width:600px;margin:0 auto 40px;line-height:1.8;animation:fadeInUp .6s ease-out .2s both}.hero-actions{display:flex;align-items:center;justify-content:center;gap:16px;animation:fadeInUp .6s ease-out .3s both}.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .25s ease;border:none;font-family:var(--font-primary);text-decoration:none}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-orange)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px #f9731659;color:#fff}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid rgba(30,41,59,.8)}.btn-ghost:hover{border-color:var(--border-hover);color:var(--text-primary);background:#f973160d}.stats-bar{padding:40px 0;border-top:1px solid rgba(30,41,59,.6);border-bottom:1px solid rgba(30,41,59,.6)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}.stat-item h3{font-size:2rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.stat-item p{font-size:.85rem;color:var(--text-muted);font-weight:500}.features{padding:var(--section-padding) 0}.section-header{text-align:center;margin-bottom:60px}.section-tag{display:inline-block;font-size:.8rem;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}.section-title{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;margin-bottom:16px}.section-desc{font-size:1.05rem;color:var(--text-secondary);max-width:550px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-card{padding:32px;background:var(--gradient-card);border:1px solid rgba(30,41,59,.6);border-radius:16px;transition:all .3s ease;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-primary);opacity:0;transition:opacity .3s}.feature-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.feature-card:hover:before{opacity:1}.feature-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:20px;background:#f9731614;border:1px solid rgba(249,115,22,.15)}.feature-card h3{font-size:1.15rem;font-weight:600;margin-bottom:10px;color:var(--text-orange-light)}.feature-card p{font-size:.9rem;color:var(--text-secondary);line-height:1.7}.workflow{padding:var(--section-padding) 0;background:var(--bg-secondary)}.workflow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}.workflow-step{position:relative;padding:32px 24px;text-align:center;counter-increment:step}.workflow-step:before{content:counter(step);display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 20px;background:var(--gradient-primary);border-radius:50%;font-weight:700;font-size:1.1rem;color:#fff;box-shadow:0 4px 16px #f973164d}.workflow-step:after{content:"";position:absolute;top:55px;right:-12px;width:24px;height:2px;background:#f973164d}.workflow-step:last-child:after{display:none}.workflow-step h3{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--text-orange-light)}.workflow-step p{font-size:.85rem;color:var(--text-muted);line-height:1.6}.pricing{padding:var(--section-padding) 0}.footer{padding:60px 0 30px;border-top:1px solid rgba(30,41,59,.6)}.footer-content{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}.footer-brand p{color:var(--text-muted);font-size:.9rem;margin-top:8px;max-width:300px}.footer-links h4{font-size:.85rem;font-weight:600;margin-bottom:16px;color:var(--text-secondary)}.footer-links ul{list-style:none}.footer-links li{margin-bottom:10px}.footer-links a{color:var(--text-muted);font-size:.85rem}.footer-links a:hover{color:var(--text-primary)}.footer-bottom{padding-top:24px;border-top:1px solid rgba(30,41,59,.4);display:flex;justify-content:space-between;align-items:center}.footer-bottom p{font-size:.8rem;color:var(--text-muted)}.api-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:#10b98114;border:1px solid rgba(16,185,129,.2);border-radius:100px;font-size:.8rem;color:var(--success);font-weight:500}.api-status.offline{background:#ef444414;border-color:#ef444433;color:#ef4444}.api-status .dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}.api-status.offline .dot{background:#ef4444;animation:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.faq{padding:var(--section-padding) 0;background:var(--bg-secondary)}.faq-list{max-width:800px;margin:0 auto}.faq-item{border:1px solid rgba(30,41,59,.6);border-radius:12px;margin-bottom:12px;overflow:hidden;transition:all .3s}.faq-item:hover{border-color:var(--border-hover)}.faq-item[open]{border-color:#f973164d;background:var(--gradient-card)}.faq-item summary{padding:18px 24px;font-weight:600;font-size:1rem;cursor:pointer;color:var(--text-orange-light);list-style:none;display:flex;align-items:center;justify-content:space-between;transition:background .2s}.faq-item summary:hover{background:#f973160a}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:1.3rem;color:var(--primary);font-weight:300;transition:transform .2s}.faq-item[open] summary:after{content:"−"}.faq-item p{padding:0 24px 18px;font-size:.9rem;color:var(--text-secondary);line-height:1.8}.md-page{padding:100px 0 60px;min-height:60vh}.md-page h1{font-size:2rem;margin-bottom:16px;color:var(--text-orange-light)}.md-page h2{font-size:1.4rem;margin:32px 0 12px;color:var(--text-primary);border-bottom:1px solid rgba(249,115,22,.15);padding-bottom:8px}.md-page h3{font-size:1.1rem;margin:24px 0 8px;color:var(--text-orange-light)}.md-page p{color:var(--text-secondary);line-height:1.8;margin-bottom:12px}.md-page ul,.md-page ol{color:var(--text-secondary);margin-bottom:16px;padding-left:24px}.md-page li{margin-bottom:6px;line-height:1.7}.md-page strong{color:var(--text-primary)}.md-page blockquote{border-left:3px solid var(--primary);padding:12px 20px;margin:16px 0;background:#f973160d;border-radius:0 8px 8px 0}.md-page table{width:100%;border-collapse:collapse;margin:16px 0}.md-page th{background:#f973161a;padding:10px 16px;text-align:left;font-size:.85rem;color:var(--text-orange-light);border:1px solid rgba(30,41,59,.6)}.md-page td{padding:10px 16px;border:1px solid rgba(30,41,59,.6);font-size:.85rem;color:var(--text-secondary)}.md-page code{background:#f973161a;padding:2px 6px;border-radius:4px;font-size:.85em;color:var(--primary)}.md-page pre{background:var(--bg-tertiary);padding:16px;border-radius:8px;overflow-x:auto;margin:16px 0}.md-page pre code{background:none;padding:0;color:var(--text-secondary)}.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:40px;margin-bottom:60px}.guide-card{display:flex;align-items:center;gap:16px;padding:20px 24px;border:1px solid rgba(30,41,59,.6);border-radius:12px;background:var(--gradient-card);text-decoration:none;transition:all .3s}.guide-card:hover{border-color:#f9731666;transform:translateY(-2px);box-shadow:0 8px 24px #f973161a}.guide-card-icon{font-size:2rem;flex-shrink:0}.guide-card-content h3{font-size:.95rem;color:var(--text-orange-light);margin-bottom:4px}.guide-card-content p{font-size:.8rem;color:var(--text-secondary);line-height:1.5}.guide-card-arrow{font-size:1.2rem;color:var(--primary);flex-shrink:0;opacity:0;transform:translate(-8px);transition:all .3s}.guide-card:hover .guide-card-arrow{opacity:1;transform:translate(0)}.guide-breadcrumb{padding:40px 0 16px;font-size:.85rem;color:var(--text-secondary)}.guide-breadcrumb a{color:var(--primary);text-decoration:none}.guide-breadcrumb a:hover{text-decoration:underline}.guide-breadcrumb span{margin:0 8px}.guide-content img{display:block;max-width:100%;max-height:480px;margin:24px auto;border-radius:12px;border:1px solid rgba(249,115,22,.15);box-shadow:0 8px 32px #0000004d;-o-object-fit:contain;object-fit:contain}.guide-content{padding-bottom:40px}.guide-nav-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0 40px;border-top:1px solid rgba(30,41,59,.4)}.btn-ghost{background:transparent;border:1px solid rgba(249,115,22,.3);color:var(--primary);padding:10px 24px;border-radius:8px;text-decoration:none;font-size:.9rem;transition:all .3s}.btn-ghost:hover{background:#f973161a;border-color:var(--primary)}.pricing-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:40px;background:#0f172a99;border:1px solid rgba(30,41,59,.6);border-radius:12px;padding:4px;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto}.pricing-tab{padding:10px 28px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .3s;position:relative;font-weight:500}.pricing-tab:hover{color:var(--text-primary);background:#f973160d}.pricing-tab.active{background:linear-gradient(135deg,var(--primary),#ea580c);color:#fff;box-shadow:0 4px 16px #f973164d}.pricing-tab-badge{position:absolute;top:-12px;right:-12px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.55rem;padding:2px 8px;border-radius:20px;white-space:nowrap;font-style:italic;font-weight:600;box-shadow:0 2px 8px #ef444466}.pricing-urgency{background:linear-gradient(135deg,#ef44441f,#f9731614);border:1px solid rgba(239,68,68,.25);border-radius:12px;padding:16px 24px;text-align:center;margin-bottom:32px;animation:pulse-border 2s infinite}@keyframes pulse-border{0%,to{border-color:#ef444440}50%{border-color:#ef444499}}.pricing-urgency p{color:#fca5a5;font-size:.95rem;margin:0}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px;align-items:stretch}.pricing-grid.pricing-grid-2{grid-template-columns:repeat(2,1fr);max-width:640px;margin-left:auto;margin-right:auto}.price-card{display:flex;flex-direction:column;padding:20px 16px;border:1px solid rgba(30,41,59,.6);border-radius:16px;background:linear-gradient(165deg,#0f172acc,#1e293b66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.price-card:hover{border-color:#f9731640;transform:translateY(-4px);box-shadow:var(--shadow-glow)}.price-card.featured{border-color:#f9731680;background:linear-gradient(165deg,#f9731614,#0f172ae6);box-shadow:0 0 40px #f9731614;transform:scale(1.03)}.price-card.featured:hover{transform:scale(1.03) translateY(-4px);box-shadow:0 16px 48px #f9731626}.price-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--primary),#ea580c);color:#fff;font-size:.75rem;padding:4px 16px;border-radius:20px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px #f9731659}.price-name{font-size:1.1rem;font-weight:600;margin-bottom:0;color:var(--text-orange-light)}.price-desc{font-size:.78rem;color:var(--text-secondary);margin:2px 0 0}.price-subtitle{font-size:.7rem;color:#fca5a5;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.price-amount{font-size:2.5rem;font-weight:800;margin:4px 0 2px;background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.price-amount span{font-size:.9rem;-webkit-text-fill-color:var(--text-muted);font-weight:400}.price-currency{font-size:1.2rem;color:var(--primary);font-weight:600}.price-number{font-size:2.6rem;font-weight:800;color:var(--text-primary);line-height:1;letter-spacing:-1px}.price-period{font-size:.8rem;color:var(--text-secondary);margin-left:4px}.price-total{font-size:.78rem;color:var(--text-secondary);margin-top:0;opacity:.7}.price-after{font-size:.72rem;color:#f9731680;margin-top:4px;text-decoration:line-through}.price-features{list-style:none;padding:12px 0 0;margin:4px 0 12px;flex:1;border-top:1px solid rgba(30,41,59,.4)}.price-features li{padding:3px 0;font-size:.85rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.price-features li:before{content:"✓";color:var(--success);font-weight:700;flex-shrink:0}.price-cta{width:100%;text-align:center;margin-top:auto;padding:10px;font-size:.9rem;font-weight:600;border-radius:10px}.price-card.featured .price-cta{box-shadow:0 4px 16px #f973164d}@media(max-width:1024px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.nav-links{display:none}.hero{padding:120px 0 80px}.hero h1{font-size:2rem}.hero-actions{flex-direction:column}.stats-grid{grid-template-columns:repeat(2,1fr)}.features-grid,.workflow-steps{grid-template-columns:1fr}.workflow-step:after{display:none}.pricing-grid{grid-template-columns:1fr}.pricing-tabs{flex-wrap:wrap}.price-card.featured{transform:none}.price-card.featured:hover{transform:translateY(-4px)}.footer-content{flex-direction:column;gap:32px}.footer-bottom{flex-direction:column;gap:12px;text-align:center}.guide-grid{grid-template-columns:1fr}}