:root{--bg:#f7f8fa;--panel:#fff;--panel-2:#f2f4f7;--border:#e6e8ee;--border-strong:#d5d9e2;--text:#16181d;--muted:#667085;--accent:#e84142;--accent-2:#c22c2d;--accent-soft:#fdeceb;--ok:#067647;--ok-bg:#ecfdf3;--ok-border:#abefc6;--warn:#b54708;--warn-bg:#fffaeb;--warn-border:#fedf89;--shadow-sm:0 1px 2px rgba(16,24,40,.05);--shadow-md:0 10px 24px -10px rgba(16,24,40,.14);--ring:0 0 0 4px rgba(232,65,66,.14)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans Thai,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;-webkit-text-size-adjust:100%}body{background-image:radial-gradient(900px 320px at 50% -120px,rgba(232,65,66,.07),transparent 70%)}::selection{background:var(--accent-soft)}a{color:inherit;text-decoration:none}code{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:.9em}.header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px max(clamp(16px,4vw,24px),env(safe-area-inset-right)) 12px max(clamp(16px,4vw,24px),env(safe-area-inset-left));border-bottom:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;background:hsla(0,0%,100%,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10}.brand{font-weight:800;font-size:clamp(16px,4vw,18px);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.brand span{color:var(--accent)}.nav{display:flex;align-items:center;gap:4px;font-size:14px;flex:none}.nav a{color:var(--muted);font-weight:500;padding:7px 12px;border-radius:999px;transition:color .15s ease,background .15s ease}.nav a:hover{color:var(--text);background:var(--panel-2)}.nav button{margin-left:6px}.container{max-width:880px;margin:0 auto;padding:clamp(28px,6vw,40px) max(clamp(16px,4vw,24px),env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(clamp(16px,4vw,24px),env(safe-area-inset-left))}.page-title{font-size:clamp(24px,6vw,30px);font-weight:800;letter-spacing:-.5px;line-height:1.2;margin:0 0 8px}.subtitle{color:var(--muted);margin:0 0 clamp(24px,5vw,32px);font-size:clamp(14px,3.6vw,15px);line-height:1.6;max-width:60ch}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));grid-gap:clamp(12px,3vw,16px);gap:clamp(12px,3vw,16px)}.grid>a{display:flex;min-width:0}.card>.muted:last-child{margin-top:auto}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:clamp(18px,4.5vw,22px);display:flex;flex-direction:column;gap:12px;height:100%;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}@media (hover:hover){.card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}}.card:active{border-color:var(--border-strong)}.card h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}.badge-emblem{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 30% 20%,#ff7a7a 0,var(--accent) 55%,#b02021 100%);color:#fff;font-weight:800;font-size:18px;letter-spacing:.5px;box-shadow:inset 0 0 0 3px hsla(0,0%,100%,.4),0 6px 14px -4px rgba(232,65,66,.45);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.badge-art{width:100%;height:100%;object-fit:cover;display:block}.badge-emblem-lg{width:clamp(76px,22vw,96px);height:clamp(76px,22vw,96px);font-size:clamp(24px,7vw,30px);margin:0 auto 18px}.claim-head{text-align:center;margin-bottom:18px}.claim-head .page-title{margin-bottom:12px}.claim-head .stat-row{justify-content:center}.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted)}.pill-ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-border)}.pill-warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-border)}.pill-accent{color:var(--accent-2);background:var(--accent-soft);border-color:#f6c2c1}.muted{color:var(--muted);font-size:13px;line-height:1.6}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--panel);color:var(--text);border:1px solid var(--border-strong);border-radius:10px;padding:9px 16px;min-height:40px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:var(--shadow-sm);transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.btn:hover:not(:disabled){background:var(--panel-2);border-color:#c3c9d4}.btn:focus-visible{outline:none;box-shadow:var(--ring)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px -4px rgba(232,65,66,.5)}.btn-primary:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}.btn-warn{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn)}.btn-lg{width:100%;padding:14px;min-height:52px;font-size:16px;border-radius:12px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:clamp(14px,4vw,20px);padding:clamp(20px,5.5vw,32px);max-width:520px;margin:0 auto;box-shadow:var(--shadow-sm)}.form{display:flex;flex-direction:column;gap:16px}.field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}.field input[type=datetime-local],.field input[type=number],.field input[type=text],.field input[type=url]{width:100%;background:var(--panel);border:1px solid var(--border-strong);border-radius:10px;padding:12px 13px;min-height:46px;color:var(--text);font-size:16px;font-family:inherit;box-shadow:var(--shadow-sm);transition:border-color .15s ease,box-shadow .15s ease}.field input::placeholder{color:#98a2b3}.field input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--muted)}.checkbox-row input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent)}.checkbox-row label{margin:0;font-weight:500;color:var(--muted)}.notice{border:1px solid var(--warn-border);color:var(--warn);background:var(--warn-bg);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.6;margin-bottom:20px}.error-text{color:var(--accent-2);font-size:13px;word-break:break-word}.success-box{border:1px solid var(--ok-border);background:var(--ok-bg);border-radius:14px;padding:22px;text-align:center}.success-box h3{color:var(--ok);margin:0 0 8px;font-size:18px}.qr-box{display:flex;flex-direction:column;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:clamp(14px,4vw,20px);margin-top:16px;width:100%;max-width:280px;margin-left:auto;margin-right:auto;box-shadow:var(--shadow-sm)}.qr-box svg{width:100%;height:auto;max-width:220px}.footer-note{margin-top:48px;text-align:center;color:var(--muted);font-size:12px}.stat-row{display:flex;gap:8px;flex-wrap:wrap}.hero-wrap{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(24px,6vw,56px)}.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/hero-bg.svg) no-repeat top/cover;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 94%);mask-image:linear-gradient(180deg,#000 0,#000 48%,transparent 94%)}.hero-bg:after,.hero-bg:before{content:"";position:absolute;inset:-25% -25% auto -25%;height:130%;will-change:transform}.hero-bg:before{background:radial-gradient(38% 46% at 26% 26%,rgba(255,138,61,.26),transparent 72%),radial-gradient(34% 44% at 78% 18%,rgba(124,92,255,.16),transparent 72%);animation:heroDriftA 22s ease-in-out infinite alternate}.hero-bg:after{background:radial-gradient(46% 44% at 52% 4%,rgba(232,65,66,.26),transparent 70%),radial-gradient(32% 34% at 86% 60%,rgba(34,211,238,.12),transparent 72%);animation:heroDriftB 28s ease-in-out infinite alternate}@keyframes heroDriftA{0%{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}@keyframes heroDriftB{0%{transform:translate3d(3%,2%,0) scale(1.08)}to{transform:translate3d(-4%,-3%,0) scale(1)}}.hero{max-width:780px;margin:0 auto;padding:clamp(48px,12vw,96px) max(clamp(16px,4vw,24px),env(safe-area-inset-right)) clamp(32px,8vw,56px) max(clamp(16px,4vw,24px),env(safe-area-inset-left));text-align:center}.eyebrow{display:inline-block;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--panel);box-shadow:var(--shadow-sm);color:var(--muted);font-size:13px;font-weight:600}.hero-title{margin:20px 0 0;font-size:clamp(34px,9vw,60px);line-height:1.05;letter-spacing:-1.5px;font-weight:800}.hero-title span{color:var(--accent)}.hero-sub{margin:18px auto 0;max-width:620px;color:var(--muted);font-size:clamp(15px,3.8vw,17px);line-height:1.6}.hero-actions{margin-top:clamp(24px,6vw,32px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.hero-actions .btn{flex:1 1 auto;max-width:260px;justify-content:center}.hero-note{margin-top:20px;color:var(--muted);font-size:13px}.section{max-width:980px;margin:0 auto;padding:clamp(32px,8vw,56px) max(clamp(16px,4vw,24px),env(safe-area-inset-right)) clamp(32px,8vw,56px) max(clamp(16px,4vw,24px),env(safe-area-inset-left))}.section-title{margin:0 0 clamp(20px,5vw,28px);font-size:clamp(22px,5.5vw,28px);letter-spacing:-.5px;text-align:center}.steps{list-style:none;margin:0;padding:0;display:grid;grid-gap:clamp(12px,3vw,16px);gap:clamp(12px,3vw,16px);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));counter-reset:step}.feature,.step{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:clamp(18px,4.5vw,24px);box-shadow:var(--shadow-sm)}.feature h3,.step h3{margin:12px 0 8px;font-size:17px;letter-spacing:-.2px}.feature p,.step p{margin:0;font-size:14px;line-height:1.6}.step-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:15px}.feature-grid{display:grid;grid-gap:clamp(12px,3vw,16px);gap:clamp(12px,3vw,16px);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}.cta{max-width:640px;margin:0 auto;padding:clamp(32px,8vw,48px) clamp(16px,4vw,24px);text-align:center}.cta h2{margin:0 0 10px;font-size:clamp(22px,5.5vw,28px);letter-spacing:-.5px}.cta p{margin:0 0 24px}.site-footer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;border-top:1px solid var(--border);margin-top:24px;padding:28px clamp(16px,4vw,24px) calc(28px + env(safe-area-inset-bottom));color:var(--muted);font-size:13px;text-align:center}.site-footer a{color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:3px}.site-footer a:hover{color:var(--text)}@media (hover:hover){.feature:hover,.step:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}}@media (max-width:380px){.nav{gap:0;font-size:13px}.nav a{padding:7px 8px}.nav button{margin-left:4px;padding:9px 12px}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.card:hover{transform:none}.hero-bg:after,.hero-bg:before{animation:none!important}}