@import"https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";:root{--color-primary: #800020;--color-primary-dark: #5C0017;--color-primary-light: #A6002B;--color-secondary: #FFFFF0;--color-secondary-dark: #FFF8DC;--color-accent: #D4AF37;--color-accent-hover: #C9A86A;--color-text-primary: #4A1C1C;--color-text-secondary: #6B3535;--color-text-light: #8B5555;--color-bg-primary: #FAF7F2;--color-bg-secondary: #FFFFFF;--color-bg-card: #FFFFF0;--color-income: #2D7A3E;--color-expense: #C41E3A;--color-success: #2D7A3E;--color-warning: #D4AF37;--color-error: #C41E3A;--font-heading: "Prompt", sans-serif;--font-body: "Noto Sans Thai", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-size-6xl: 3.75rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--spacing-4xl: 6rem;--shadow-sm: 0 1px 2px 0 rgba(128, 0, 32, .05);--shadow-md: 0 4px 6px -1px rgba(128, 0, 32, .1), 0 2px 4px -1px rgba(128, 0, 32, .06);--shadow-lg: 0 10px 15px -3px rgba(128, 0, 32, .1), 0 4px 6px -2px rgba(128, 0, 32, .05);--shadow-xl: 0 20px 25px -5px rgba(128, 0, 32, .1), 0 10px 10px -5px rgba(128, 0, 32, .04);--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--container-max-width: 1200px;--container-padding: var(--spacing-md)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-body);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--color-primary);margin-bottom:var(--spacing-md)}h1{font-size:var(--font-size-5xl);font-weight:700}h2{font-size:var(--font-size-4xl);font-weight:600}h3{font-size:var(--font-size-3xl);font-weight:600}h4{font-size:var(--font-size-2xl);font-weight:500}p{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-light)}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--container-padding)}section{padding:var(--spacing-4xl) 0}section.visible{opacity:1;transform:translateY(0)}.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}.btn{display:inline-block;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:600;text-align:center;text-decoration:none;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-secondary)}.btn-primary:hover{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--color-secondary)}.btn-accent{background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-hover) 100%);color:var(--color-text-primary)}.btn-accent:hover{background:linear-gradient(135deg,var(--color-accent-hover) 0%,var(--color-accent) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-xl)}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);transition:all var(--transition-base)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.hero{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-secondary);padding:var(--spacing-4xl) 0;min-height:90vh;display:flex;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,240,0.1)"/></svg>');opacity:.3}.hero-content{position:relative;z-index:1;text-align:center}.hero h1{color:var(--color-secondary);font-size:var(--font-size-6xl);margin-bottom:var(--spacing-lg);animation:fadeInUp .8s ease-out}.hero-subtitle{font-size:var(--font-size-xl);color:var(--color-secondary-dark);margin-bottom:var(--spacing-2xl);max-width:700px;margin-left:auto;margin-right:auto;animation:fadeInUp .8s ease-out .2s backwards}.hero-cta{animation:fadeInUp .8s ease-out .4s backwards}.hero-image{margin-top:var(--spacing-2xl);animation:fadeInUp .8s ease-out .6s backwards}.hero-image img{max-width:100%;height:auto;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.how-it-works{background:var(--color-bg-secondary)}.steps-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-2xl);margin-top:var(--spacing-2xl)}.step{text-align:center;padding:var(--spacing-xl);background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-base)}.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.step-icon{font-size:var(--font-size-6xl);margin-bottom:var(--spacing-lg);display:inline-block;animation:bounce 2s infinite}.step:nth-child(2) .step-icon{animation-delay:.2s}.step:nth-child(3) .step-icon{animation-delay:.4s}.step-number{display:inline-block;width:40px;height:40px;background:var(--color-primary);color:var(--color-secondary);border-radius:var(--radius-full);line-height:40px;font-weight:700;margin-bottom:var(--spacing-md)}.step h3{color:var(--color-primary);margin-bottom:var(--spacing-md)}.step-example{background:var(--color-bg-primary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-body);color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-md)}.features{background:var(--color-bg-primary)}.section-title{text-align:center;margin-bottom:var(--spacing-3xl)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.feature-card{background:var(--color-bg-card);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all var(--transition-base);border:2px solid transparent}.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:var(--color-accent)}.feature-icon{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-md);display:block}.feature-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm)}.feature-card p{color:var(--color-text-secondary);font-size:var(--font-size-base)}.screenshots{background:var(--color-bg-secondary)}.screenshots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-2xl);margin-top:var(--spacing-2xl)}.screenshot-item{text-align:center}.screenshot-item img{max-width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:all var(--transition-base)}.screenshot-item img:hover{transform:scale(1.02);box-shadow:var(--shadow-xl)}.screenshot-caption{margin-top:var(--spacing-md);font-size:var(--font-size-lg);color:var(--color-text-secondary);font-weight:500}.faq{background:var(--color-bg-primary)}.faq-container{max-width:800px;margin:var(--spacing-2xl) auto 0}.faq-item{background:var(--color-bg-card);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm);overflow:hidden;transition:all var(--transition-base)}.faq-item:hover{box-shadow:var(--shadow-md)}.faq-question{width:100%;padding:var(--spacing-lg);background:none;border:none;text-align:left;font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:600;color:var(--color-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-fast)}.faq-question:hover{color:var(--color-primary-light)}.faq-icon{font-size:var(--font-size-xl);transition:transform var(--transition-base)}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-slow),padding var(--transition-slow);padding:0 var(--spacing-lg)}.faq-item.active .faq-answer{max-height:500px;padding:0 var(--spacing-lg) var(--spacing-lg)}.faq-answer p{color:var(--color-text-secondary);line-height:1.8}.footer{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);color:var(--color-secondary);padding:var(--spacing-3xl) 0 var(--spacing-xl)}.footer-cta{text-align:center;margin-bottom:var(--spacing-3xl)}.footer-cta h2{color:var(--color-secondary);margin-bottom:var(--spacing-lg)}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}.footer-section h4{color:var(--color-accent);margin-bottom:var(--spacing-md)}.footer-links{list-style:none}.footer-links li{margin-bottom:var(--spacing-sm)}.footer-links a{color:var(--color-secondary-dark);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--color-accent)}.footer-bottom{text-align:center;padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,240,.2);color:var(--color-secondary-dark);font-size:var(--font-size-sm)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){:root{--font-size-6xl: 2.5rem;--font-size-5xl: 2rem;--font-size-4xl: 1.75rem;--spacing-4xl: 3rem}.hero h1{font-size:var(--font-size-5xl)}.hero-subtitle{font-size:var(--font-size-lg)}.steps-container,.features-grid,.screenshots-grid{grid-template-columns:1fr}.footer-content{grid-template-columns:1fr;text-align:center}}@media(max-width:480px){:root{--container-padding: var(--spacing-md);--spacing-4xl: 2rem}.btn{width:100%;padding:var(--spacing-md) var(--spacing-lg)}.hero{min-height:auto;padding:var(--spacing-3xl) 0}section{padding:var(--spacing-2xl) 0}}.text-center{text-align:center}