*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#B02F00;--primary-dark:#8A2400;--primary-light:#D63800;--primary-ultra-light:#FFEBE5;--text-dark:#1a1a1a;--text-gray:#4a4a4a;--text-light:#6a6a6a;--bg-light:#f9f9f9;--bg-white:#ffffff;--bg-cream:#FFF8F5;--border-color:#e8e8e8;--shadow:0 4px 20px rgba(176, 47, 0, 0.08);--shadow-hover:0 12px 40px rgba(176, 47, 0, 0.15);--shadow-lg:0 20px 60px rgba(0, 0, 0, 0.1);--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px}body{font-family:'DM Sans','Noto Sans Thai UI',sans-serif;line-height:1.7;color:var(--text-dark);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:0 24px}.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgb(13 13 13 / .9);backdrop-filter:blur(14px);border-bottom:1px solid rgb(255 255 255 / .08);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform 0.3s ease,opacity 0.3s ease}.site-nav.nav-visible{transform:translateY(0);opacity:1;pointer-events:auto}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}.nav-logo{display:inline-flex;align-items:center}.nav-logo img{height:32px;width:auto}.nav-links{display:flex;align-items:center;gap:16px}.nav-links a{color:rgb(255 255 255 / .9);text-decoration:none;font-weight:500;font-size:.95rem;transition:color 0.2s ease}.nav-links a:hover{color:#fff}.nav-links .nav-cta{padding:10px 20px;font-size:.95rem;border-radius:var(--radius-md);box-shadow:none}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(145deg,#0D0D0D 0%,#1A1A1A 50%,#0D0D0D 100%);color:#fff;overflow:hidden}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/backgrounds/banner-refer.webp) no-repeat center;background-size:cover;opacity:.35}.hero::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgb(0 0 0 / .4) 0%,transparent 30%,transparent 70%,rgb(176 47 0 / .1) 100%)}.hero-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 40%,rgb(176 47 0 / .25) 0%,transparent 60%)}.hero-content{position:relative;z-index:2;text-align:center;padding:60px 20px;max-width:900px}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgb(176 47 0 / .2);border:1px solid rgb(255 255 255 / .2);padding:8px 20px;border-radius:50px;font-size:.9rem;font-weight:500;color:#FFB899;margin-bottom:24px;backdrop-filter:blur(10px);animation:fadeInDown 0.6s ease-out}.hero h1{font-size:clamp(2.2rem, 5.5vw, 4rem);font-weight:800;margin-bottom:24px;line-height:1.15;letter-spacing:-.02em;text-shadow:0 4px 30px rgb(0 0 0 / .4);animation:fadeInUp 0.8s ease-out}.hero h1 span{color:var(--primary-light);position:relative}.hero-subtitle{font-size:clamp(1.1rem, 2.5vw, 1.5rem);margin-bottom:40px;color:rgb(255 255 255 / .85);font-weight:400;line-height:1.6;max-width:700px;margin-left:auto;margin-right:auto;animation:fadeInUp 1s ease-out 0.2s backwards}.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:50px;animation:fadeInUp 1s ease-out 0.4s backwards}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:18px 36px;font-size:1.05rem;font-weight:600;text-decoration:none;border-radius:var(--radius-md);transition:all 0.35s cubic-bezier(.4,0,.2,1);cursor:pointer;border:2px solid #fff0;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s}.btn:hover::before{left:100%}.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:0 6px 25px rgb(176 47 0 / .4),0 2px 10px rgb(0 0 0 / .2)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgb(176 47 0 / .5),0 4px 15px rgb(0 0 0 / .25)}.btn-secondary{background:rgb(255 255 255 / .1);color:#fff;border:2px solid rgb(255 255 255 / .3);backdrop-filter:blur(10px)}.btn-secondary:hover{background:#fff;color:var(--text-dark);border-color:#fff}.btn-outline{background:#fff0;color:var(--primary-color);border:2px solid var(--primary-color)}.btn-outline:hover{background:var(--primary-color);color:#fff}.btn-large{padding:20px 48px;font-size:1.15rem;border-radius:var(--radius-lg)}.hero-stats{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:50px;animation:fadeInUp 1s ease-out 0.6s backwards}.stat{display:flex;flex-direction:column;align-items:center;padding:24px 32px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .1);border-radius:var(--radius-lg);backdrop-filter:blur(10px);min-width:160px;transition:all 0.3s ease}.stat:hover{background:rgb(255 255 255 / .1);transform:translateY(-5px)}.stat-number{font-size:2.5rem;font-weight:800;color:var(--primary-light);line-height:1;margin-bottom:8px;text-shadow:0 2px 10px rgb(176 47 0 / .3)}.stat-label{font-size:.95rem;color:rgb(255 255 255 / .75);text-align:center}.trust-bar{background:var(--bg-white);padding:40px 0;border-bottom:1px solid var(--border-color);position:relative;z-index:10}.trust-inner{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:30px}.trust-item{display:flex;align-items:center;gap:15px}.trust-icon{font-size:2.2rem;background:var(--primary-ultra-light);width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%}.trust-text{display:flex;flex-direction:column}.trust-number{font-size:1.6rem;font-weight:800;color:var(--primary-color);line-height:1.2}.trust-label{font-size:.9rem;color:var(--text-light);font-weight:500}@media (max-width:768px){.trust-bar{padding:30px 0}.trust-inner{justify-content:center;gap:24px}.trust-item{flex:1;min-width:120px;justify-content:center;text-align:center;flex-direction:column;gap:10px}.trust-icon{width:54px;height:54px;font-size:1.8rem}.trust-number{font-size:1.4rem}.trust-label{font-size:.8rem}}.how-it-works{padding:110px 0;background:var(--bg-white);position:relative;overflow:hidden}.how-it-works::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgb(176 47 0 / .05) 0%,transparent 70%);border-radius:50%}.how-it-works h2,.benefits h2,.calculator h2,.target-audience h2,.faq h2,.final-cta h2{font-size:clamp(1.8rem, 4vw, 2.5rem);text-align:center;margin-bottom:16px;color:var(--text-dark);font-weight:700;letter-spacing:-.01em}.section-subtitle{text-align:center;font-size:1.15rem;color:var(--text-gray);margin-bottom:50px;max-width:600px;margin-left:auto;margin-right:auto}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:50px}.step{text-align:center;padding:40px 28px;background:var(--bg-white);border-radius:var(--radius-xl);position:relative;transition:all 0.4s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);overflow:visible}.step::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--primary-light));transform:scaleX(0);transition:transform 0.4s ease}.step:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:#fff0}.step:hover::before{transform:scaleX(1)}.step-number{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:44px;height:44px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;box-shadow:0 4px 15px rgb(176 47 0 / .3);z-index:2}.step-icon{font-size:3rem;margin:20px 0 16px;line-height:1}.step h3{font-size:1.35rem;margin-bottom:14px;color:var(--text-dark);font-weight:600}.step p{color:var(--text-light);line-height:1.7;font-size:.98rem}.benefits{padding:110px 0;background:var(--bg-cream)}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:50px}.benefit-card{background:var(--bg-white);padding:36px 32px;border-radius:var(--radius-xl);box-shadow:var(--shadow);transition:all 0.4s cubic-bezier(.4,0,.2,1);border:1px solid #fff0;position:relative;overflow:hidden}.benefit-card::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;background:linear-gradient(180deg,var(--primary-color),var(--primary-light));opacity:0;transition:opacity 0.3s ease}.benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--primary-ultra-light)}.benefit-card:hover::before{opacity:1}.benefit-icon{font-size:2.5rem;margin-bottom:20px;display:inline-block;background:var(--primary-ultra-light);width:64px;height:64px;line-height:64px;text-align:center;border-radius:var(--radius-md)}.benefit-card h3{font-size:1.25rem;margin-bottom:14px;color:var(--primary-color);font-weight:600}.benefit-card p{color:var(--text-light);line-height:1.75;font-size:.98rem}.app-screenshot{padding:0;background:var(--text-dark);overflow:hidden}.app-screenshot img{width:100%;max-height:700px;max-width:1080px;object-fit:cover;display:block;margin:0 auto}@media (min-width:1080px){.app-screenshot img{width:700px}}.calculator{padding:110px 0;background:linear-gradient(145deg,var(--primary-color) 0%,#8A2400 100%);color:#fff;position:relative;overflow:hidden}.calculator::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgb(255 255 255 / .08) 0%,transparent 60%);border-radius:50%}.calculator::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgb(0 0 0 / .2) 0%,transparent 60%);border-radius:50%}.calculator h2{color:#fff;position:relative;z-index:1}.calculator .section-subtitle{color:rgb(255 255 255 / .85);position:relative;z-index:1}.calculator-widget{max-width:560px;margin:50px auto 0;background:rgb(255 255 255 / .12);padding:44px;border-radius:var(--radius-xl);backdrop-filter:blur(20px);border:1px solid rgb(255 255 255 / .15);position:relative;z-index:1}.calculator-input{margin-bottom:36px}.calculator-input label{display:block;margin-bottom:18px;font-size:1.05rem;font-weight:500;color:rgb(255 255 255 / .95)}.calculator-input .slider-container{display:flex;align-items:center;gap:16px}.calculator-input input[type="range"]{flex:1;height:8px;background:rgb(255 255 255 / .25);border-radius:4px;outline:none;-webkit-appearance:none}.calculator-input input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;background:#fff;cursor:pointer;border-radius:50%;box-shadow:0 3px 10px rgb(0 0 0 / .25);transition:transform 0.2s ease}.calculator-input input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}.calculator-input input[type="range"]::-moz-range-thumb{width:26px;height:26px;background:#fff;cursor:pointer;border-radius:50%;box-shadow:0 3px 10px rgb(0 0 0 / .25);border:none}.calculator-input span{display:inline-block;min-width:70px;font-size:1.35rem;font-weight:700;color:#fff;text-align:right}.calculator-result{text-align:center;padding:40px 28px;background:rgb(255 255 255 / .18);border-radius:var(--radius-lg);margin-top:24px;border:1px solid rgb(255 255 255 / .1)}.result-label{font-size:1.05rem;margin-bottom:16px;opacity:.9;font-weight:500}.result-amount{font-size:3.2rem;font-weight:800;color:#fff;margin-bottom:14px;text-shadow:0 2px 20px rgb(0 0 0 / .2);line-height:1}.result-note{font-size:.88rem;opacity:.75;max-width:400px;margin:0 auto}.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;position:relative;z-index:1}.target-audience{padding:110px 0;background:var(--bg-white)}.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:50px}.audience-card{text-align:center;padding:36px 24px;border:2px solid var(--border-color);border-radius:var(--radius-xl);transition:all 0.4s cubic-bezier(.4,0,.2,1);background:var(--bg-white);position:relative;overflow:hidden}.audience-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--primary-light));transform:scaleX(0);transition:transform 0.4s ease}.audience-card:hover{border-color:var(--primary-ultra-light);transform:translateY(-6px);box-shadow:var(--shadow-hover)}.audience-card:hover::after{transform:scaleX(1)}.audience-emoji{font-size:3rem;margin-bottom:20px;display:inline-block}.audience-card h3{font-size:1.2rem;margin-bottom:12px;color:var(--primary-color);font-weight:600}.audience-card p{color:var(--text-light);line-height:1.65;font-size:.95rem}.app-screenshot-2{padding:0;background:var(--text-dark);overflow:hidden}.app-screenshot-2 img{width:100%;max-height:700px;max-width:1080px;object-fit:cover;display:block;margin:0 auto}@media (min-width:1080px){.app-screenshot-2 img{width:700px}}.faq{padding:110px 0;background:var(--bg-cream)}.faq-list{max-width:780px;margin:50px auto 0}.faq-item{background:var(--bg-white);border-radius:var(--radius-lg);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border-color);transition:all 0.3s ease}.faq-item:hover{box-shadow:var(--shadow-hover)}.faq-question{padding:26px 32px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.3s ease}.faq-question:hover{background:var(--primary-ultra-light)}.faq-question h3{font-size:1.1rem;color:var(--text-dark);font-weight:600;margin:0;padding-right:20px;line-height:1.4}.faq-toggle{font-size:1.8rem;color:var(--primary-color);font-weight:300;transition:transform 0.3s ease;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--primary-ultra-light);border-radius:50%}.faq-item.active .faq-toggle{transform:rotate(45deg);background:var(--primary-color);color:#fff}.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(.4,0,.2,1),padding 0.4s cubic-bezier(.4,0,.2,1)}.faq-item.active .faq-answer{max-height:400px;padding:0 32px 28px}.faq-answer p{color:var(--text-light);line-height:1.8;font-size:.98rem}.faq-answer a{color:var(--primary-color);text-decoration:underline;font-weight:500}.faq-answer a:hover{color:var(--primary-dark)}.final-cta{padding:120px 0;background:linear-gradient(145deg,#0D0D0D 0%,#1A1A1A 100%);color:#fff;text-align:center;position:relative;overflow:hidden}.final-cta::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 50% 100%,rgb(176 47 0 / .2) 0%,transparent 60%)}.final-cta h2{color:#fff;margin-bottom:20px;position:relative;z-index:1}.final-cta>p{font-size:1.2rem;margin-bottom:36px;opacity:.9;position:relative;z-index:1}.cta-note{font-size:.9rem;opacity:.6;margin-top:24px;letter-spacing:.02em}.footer{background:#B02F00;color:rgb(255 255 255);padding:60px 0 30px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:40px}.footer-section h4{color:#fff;font-size:1.15rem;margin-bottom:20px;font-weight:600}.footer-section p{line-height:1.8}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:12px}.footer-section ul li a{color:rgb(255 255 255);text-decoration:none;transition:all 0.3s ease;display:inline-block;padding:2px 0}.footer-section ul li a:hover{color:rgb(255 255 255 / .7);transform:translateX(4px)}.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid rgb(255 255 255 / .4)}.footer-bottom p{font-size:.9rem;opacity:.85}.list-inline{list-style:none;padding:0;margin:0}.list-inline-item{display:inline-block}.footer-section img{height:40px;vertical-align:middle}html{scroll-behavior:smooth}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.fade-in-up{animation:fadeInUp 0.6s ease-out}.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}@media (max-width:768px){.container{padding:0 20px}.nav-inner{height:58px}.nav-links{gap:10px}.nav-links a{font-size:.9rem}.nav-links .nav-cta{padding:8px 16px;font-size:.9rem}.hero{min-height:auto;padding:70px 0 90px}.hero::before{background:url(../images/backgrounds/banner-refer-zoom.webp) no-repeat center;background-size:cover}.hero-content{padding:20px 16px}.hero-badge{font-size:.85rem;padding:6px 16px;margin-bottom:20px}.hero h1{font-size:2rem;line-height:1.2;margin-bottom:18px}.hero-subtitle{font-size:1.05rem;margin-bottom:30px}.hero-cta{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:40px}.btn{width:100%;padding:16px 28px;font-size:1rem}.hero-stats{gap:16px;margin-top:36px}.stat{padding:18px 20px;min-width:100px;flex:1}.stat-number{font-size:2rem}.stat-label{font-size:.85rem}.how-it-works,.benefits,.calculator,.target-audience,.faq{padding:70px 0}.final-cta{padding:80px 0}.steps{grid-template-columns:1fr;gap:24px}.step{padding:32px 24px 28px}.step-number{width:40px;height:40px;font-size:1.1rem;top:-14px}.step h3{font-size:1.2rem}.step p{font-size:.95rem}.benefits-grid{grid-template-columns:1fr;gap:20px}.benefit-card{padding:28px 24px}.benefit-card h3{font-size:1.15rem}.audience-grid{grid-template-columns:repeat(2,1fr);gap:16px}.audience-card{padding:28px 16px}.audience-card h3{font-size:1.05rem}.audience-card p{font-size:.88rem}.calculator-widget{padding:32px 24px;margin-top:36px}.calculator-input{margin-bottom:28px}.calculator-input label{font-size:.98rem;margin-bottom:14px}.calculator-input span{font-size:1.15rem;min-width:55px}.calculator-result{padding:32px 20px}.result-label{font-size:.98rem}.result-amount{font-size:2.5rem}.result-note{font-size:.82rem}.cta-buttons{flex-direction:column;align-items:stretch;gap:12px}.btn-large{width:100%;padding:16px 32px;font-size:1.05rem}.faq-question{padding:22px 24px}.faq-question h3{font-size:1rem;padding-right:16px}.faq-toggle{width:28px;height:28px;font-size:1.5rem}.faq-item.active .faq-answer{padding:0 24px 22px}.faq-answer p{font-size:.92rem}.final-cta>p{font-size:1.05rem;padding:0 10px}.cta-note{font-size:.82rem;padding:0 10px}.footer-content{grid-template-columns:1fr;text-align:center;gap:30px}.footer-section ul{padding:0}.footer{padding:50px 0 24px}}@media (max-width:480px){.container{padding:0 16px}.hero h1{font-size:1.7rem}.hero-subtitle{font-size:.95rem}.hero-badge{font-size:.8rem}.stat{padding:14px 16px;min-width:85px}.stat-number{font-size:1.7rem}.stat-label{font-size:.8rem}.audience-grid{grid-template-columns:1fr}.how-it-works h2,.benefits h2,.calculator h2,.target-audience h2,.faq h2,.final-cta h2{font-size:1.6rem}.section-subtitle{font-size:1rem;margin-bottom:36px}.result-amount{font-size:2.2rem}}.loading{opacity:.6;pointer-events:none}img{max-width:100%;height:auto}a:focus,button:focus,input:focus{outline:2px solid var(--primary-color);outline-offset:2px}a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible){outline:none}