@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap";:root{--primary: #00d97e;--primary-hover: #00b86a;--primary-soft: rgba(0, 217, 126, .1);--primary-glow: #00ff95;--secondary: #34d399;--secondary-hover: #10b981;--secondary-soft: rgba(52, 211, 153, .12);--accent: #f59e0b;--bg-dark: #ffffff;--bg-card: #ffffff;--bg-card-soft: #f7faf9;--text-light: #0a1f1a;--text-muted: #5b6b66;--border-light: #e6efe9;--border-strong: #c8d6cf;--shadow-card: 0 1px 2px rgba(10, 31, 26, .04), 0 8px 24px -10px rgba(10, 31, 26, .08);--shadow-card-hover: 0 2px 4px rgba(10, 31, 26, .06), 0 18px 36px -10px rgba(0, 217, 126, .22);--shadow-glow: 0 0 0 1px rgba(0, 217, 126, .18), 0 14px 32px -10px rgba(0, 217, 126, .32)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background:radial-gradient(circle at 50% -10%,rgba(0,217,126,.1),transparent 55%),radial-gradient(circle at 12% 92%,rgba(52,211,153,.08),transparent 40%),linear-gradient(180deg,#fff,#f3faf6);background-attachment:fixed;color:var(--text-light);line-height:1.6;overflow-x:hidden}body.lang-th{font-family:Bai Jamjuree,Outfit,sans-serif}#root{width:100%}.text-gradient{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.text-gradient-blue{background:linear-gradient(135deg,#00f6ff,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glass-panel{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-light);border-radius:24px}nav{position:fixed;top:0;width:100%;padding:1.5rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:100;background:#ffffffd6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-light);transition:all .3s ease;box-shadow:0 10px 30px #0f172a0f}.logo{font-size:1.75rem;font-weight:800;display:flex;align-items:center;gap:.5rem}.logo-icon{color:var(--primary);filter:drop-shadow(0 6px 16px rgba(0,217,126,.32))}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;border-radius:9999px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);border:none;font-family:Outfit,sans-serif;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;box-shadow:0 14px 30px -10px #00d97e73;font-weight:700}.btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff4d,#fff0);opacity:0;transition:opacity .3s}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 36px -10px #00d97e8c}.btn-primary:hover:after{opacity:1}.btn-secondary{background:#00d97e14;color:var(--primary);border:1px solid rgba(0,217,126,.24)}.btn-secondary:hover{background:#00d97e24;transform:translateY(-3px);box-shadow:0 12px 24px -8px #00d97e47}.container{max-width:1200px;margin:0 auto;padding:0 2rem}section{padding:6rem 0;position:relative}.hero{min-height:100vh;display:flex;align-items:center;padding-top:8rem;position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(0,217,126,.14),transparent 60%),radial-gradient(circle at 12% 88%,rgba(52,211,153,.18),transparent 42%),radial-gradient(circle at 88% 78%,rgba(0,217,126,.1),transparent 38%)}.hero:before{content:"";position:absolute;top:-150px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(0,217,126,.28),transparent 70%);filter:blur(50px);border-radius:50%;pointer-events:none;z-index:0}.hero:after{content:"";position:absolute;bottom:-180px;left:-100px;width:460px;height:460px;background:radial-gradient(circle,rgba(52,211,153,.26),transparent 70%);filter:blur(50px);border-radius:50%;pointer-events:none;z-index:0}.hero-content{max-width:1100px;margin:0 auto;text-align:center;position:relative;z-index:1}.hero h1{font-size:clamp(3rem,6vw,5rem);font-weight:800;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.02em}.hero p{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--text-muted);margin-bottom:2.5rem}.trusted-by{margin-top:5rem;padding-top:2rem;border-top:1px solid var(--border-light);overflow:hidden}.trusted-by p{font-size:.875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1.5rem}.marquee-container{display:flex;white-space:nowrap;gap:1.5rem;will-change:transform}.marquee-content{display:flex;gap:1.5rem;animation:marquee 80s linear infinite}.trusted-by:hover .marquee-content{animation-play-state:paused}.industry-tag{padding:.75rem 1.5rem;background:#ffffffc2;border:1px solid rgba(148,163,184,.18);border-radius:999px;font-size:1rem;font-weight:500;color:var(--text-light);transition:all .3s ease;cursor:default}.industry-tag:hover{background:#00d97e1a;color:var(--primary);border-color:#00d97e52;transform:scale(1.05);box-shadow:0 12px 24px #00d97e29}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes matesales-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:matesales-spin .9s linear infinite}.section-header{text-align:center;max-width:700px;margin:0 auto 4rem}.section-header h2{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;margin-bottom:1rem}.section-header p{font-size:1.125rem;color:var(--text-muted)}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media(max-width:768px){.comparison-grid{grid-template-columns:1fr}}.compare-card{padding:2.5rem;position:relative;overflow:hidden}.compare-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px}.compare-card.bad:before{background:#ef4444}.compare-card.good:before{background:linear-gradient(90deg,var(--primary),var(--secondary))}.compare-card.good{background:linear-gradient(180deg,#00d97e0d,#34d39912),var(--bg-card);border:1px solid rgba(0,217,126,.22)}.compare-card h3{font-size:1.5rem;margin-bottom:2rem;display:flex;align-items:center;gap:.75rem}.compare-list{list-style:none}.compare-list li{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;font-size:1.1rem;transition:transform .2s ease}.compare-list li:hover{transform:translate(5px)}.bad-icon{color:#ef4444;flex-shrink:0}.good-icon{color:var(--primary);flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,217,126,.45))}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.feature-box{padding:2.5rem;transition:all .3s cubic-bezier(.16,1,.3,1);cursor:pointer;background:var(--bg-card);box-shadow:var(--shadow-card)}.feature-box:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:var(--shadow-card-hover)}.feature-icon-wrapper{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--primary-soft),var(--secondary-soft));display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;color:var(--primary);transition:all .3s ease}.feature-box:hover .feature-icon-wrapper{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;transform:scale(1.1) rotate(5deg);box-shadow:0 14px 28px -8px #00d97e80}.feature-box h3{font-size:1.5rem;margin-bottom:1rem}.feature-box p{color:var(--text-muted)}.gamification-showcase{display:flex;align-items:center;gap:4rem;margin-top:5rem;padding:3rem;background:linear-gradient(135deg,#00d97e12,#34d39912),var(--bg-card);border-radius:32px;border:1px solid var(--border-light);box-shadow:var(--shadow-card);transition:all .5s ease}.gamification-showcase:hover{box-shadow:0 24px 60px -16px #00d97e47}@media(max-width:900px){.gamification-showcase{flex-direction:column}}.gamification-text{flex:1}.gamification-visual{flex:1;display:flex;flex-direction:column;gap:1rem}.level-card{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:var(--bg-card);border-radius:16px;border:1px solid var(--border-light);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),var(--secondary));transform:scaleY(0);transition:transform .3s ease}.level-card:hover{background:var(--bg-card);border-color:var(--border-strong);transform:translate(5px);box-shadow:var(--shadow-card)}.level-card.active{background:linear-gradient(135deg,#00d97e14,#34d39914),var(--bg-card);border-color:var(--primary);box-shadow:0 16px 36px -12px #00d97e61;transform:scale(1.03) translate(10px);z-index:10}.level-card.active:before{transform:scaleY(1)}.level-number{font-weight:800;font-size:1.25rem;color:var(--text-muted);min-width:80px;transition:color .3s ease}.level-card.active .level-number{color:var(--primary)}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;align-items:center}.price-card{padding:3rem 2rem;text-align:center;transition:all .4s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;perspective:1000px;background:var(--bg-card)}.price-card:hover{box-shadow:var(--shadow-card-hover)}.price-card.popular{border-color:var(--primary);background:linear-gradient(180deg,rgba(0,217,126,.08) 0%,var(--bg-card) 100%);position:relative;transform:scale(1.05);z-index:2;box-shadow:0 18px 40px -14px #00d97e57}.price-card.popular:hover{transform:scale(1.08) translateY(-10px);box-shadow:0 30px 60px -15px #00d97e6b}.popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;padding:.3rem 1rem;border-radius:999px;font-size:.875rem;font-weight:800;box-shadow:0 8px 18px -4px #00d97e8c}.price-tier{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.price-amount{font-size:3.5rem;font-weight:800;margin-bottom:.5rem;transition:all .3s ease}.price-card:hover .price-amount{transform:scale(1.1);color:var(--primary);text-shadow:0 6px 18px rgba(0,217,126,.32)}.price-amount span{font-size:1rem;color:var(--text-muted);font-weight:400}.price-desc{color:var(--text-muted);margin-bottom:2rem}.price-features{list-style:none;text-align:left;margin-bottom:2.5rem}.price-features li{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.price-features .check{color:var(--primary);filter:drop-shadow(0 2px 4px rgba(0,217,126,.4))}.cta-section{text-align:center;padding:7rem 2rem;position:relative;overflow:hidden;margin:4rem 1.5rem 2rem;border-radius:40px;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.3),transparent 42%),radial-gradient(circle at 82% 78%,rgba(0,255,149,.4),transparent 48%),linear-gradient(135deg,#00d97e,#10b981,#00b86a);box-shadow:0 30px 80px -30px #00d97ea6}.cta-glow{position:absolute;top:-120px;left:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%);filter:blur(40px);border-radius:50%;z-index:0;pointer-events:none}.cta-section:after{content:"";position:absolute;bottom:-160px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,rgba(0,255,149,.55),transparent 70%);filter:blur(60px);border-radius:50%;z-index:0;pointer-events:none}.cta-section:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px);background-size:28px 28px;opacity:.4;z-index:0;pointer-events:none}.cta-content{position:relative;z-index:10}.cta-content h2{color:#fff!important;text-shadow:0 2px 24px rgba(10,31,26,.22);letter-spacing:-.02em}.cta-content p{color:#ffffffeb!important}.cta-content .btn-primary{background:#fff!important;color:var(--primary)!important;box-shadow:0 18px 40px -12px #0a1f1a4d,0 4px 10px #0a1f1a1a!important}.cta-content .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 26px 50px -12px #0a1f1a6b,0 6px 14px #0a1f1a29!important}@media(max-width:768px){.cta-section{margin:2rem .5rem 1rem;padding:5rem 1.5rem;border-radius:28px}}footer{text-align:center;padding:3rem;border-top:1px solid var(--border-light);color:var(--text-muted)}@media(max-width:900px){nav{padding:1rem}.container{padding:0 1rem}section{padding:4rem 0}.hero{min-height:auto;padding-top:7rem;padding-bottom:4rem}.gamification-showcase,.compare-card,.feature-box,.price-card{padding:1.5rem}.price-card.popular,.price-card.popular:hover{transform:none}.cta-content .btn-primary,.btn{max-width:100%}}@media(max-width:640px){.logo{font-size:1.35rem}.hero h1{font-size:clamp(2.3rem,12vw,3.5rem)}.section-header{margin-bottom:2.5rem}.section-header p,.hero p,.industry-tag,.compare-list li,.feature-box p,.price-desc,footer{font-size:.95rem}.comparison-grid,.features-grid,.pricing-grid{grid-template-columns:1fr}.gamification-showcase{padding:1.25rem}.cta-section{margin:1.5rem .5rem 1rem;padding:4rem 1rem}.cta-content h2{font-size:2.2rem!important}footer{padding:2rem 1rem}}