:root{--text:#4b5563;--text-h:#0a0a0a;--bg:#fff;--surface:#fff;--surface-muted:#f5f5f5;--surface-strong:#e5e7eb;--border:#d4d4d4;--accent:#111;--highlight:#e5e7eb;--muted-highlight:#f3f4f6;--sans:Inter, "Noto Sans Thai", "Leelawadee UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font:17px/1.55 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);min-width:320px;margin:0}button,input,textarea,select{font:inherit}a{transition:color .18s,background .18s,border-color .18s,transform .18s}h1,h2,h3{color:var(--text-h)}h1{letter-spacing:0;max-width:780px;margin:0;font-size:clamp(3rem,8vw,6.6rem);line-height:.94}h2{letter-spacing:0;margin:0 0 12px;font-size:clamp(2rem,4vw,3.4rem);line-height:1}p{margin:0}::selection{color:#000;background:var(--highlight)}.page-shell{min-height:100svh;overflow:hidden}.topbar{z-index:10;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe6;justify-content:space-between;align-items:center;gap:24px;padding:18px clamp(20px,5vw,72px);display:flex;position:sticky;top:0}.brand-mark,.nav-links,.hero-actions,.download-section,footer{align-items:center;display:flex}.brand-mark{color:var(--text-h);gap:10px;font-weight:800;text-decoration:none}.brand-icon{object-fit:cover;border-radius:8px;width:34px;height:34px;box-shadow:0 10px 25px #0a0a0a1f}.nav-links{gap:6px}.drawer-toggle,.drawer-backdrop{display:none}.nav-links a{box-sizing:border-box;min-height:38px;color:var(--text);border-radius:8px;padding:8px 12px;font-size:.9rem;font-weight:700;text-decoration:none}.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current=page]{color:var(--text-h);background:var(--surface-strong);outline:none}.hero-section{background:linear-gradient(130deg, #e5e7ebbf, transparent 36%), linear-gradient(315deg, #f5f5f5f2, transparent 34%), var(--bg);grid-template-columns:minmax(0,1fr) minmax(340px,.72fr);align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(56px,8vw,108px) clamp(20px,5vw,72px) 72px;display:grid}.hero-copy{max-width:720px}.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:900}.hero-lede{max-width:650px;color:var(--text);margin-top:24px;font-size:clamp(1.05rem,2vw,1.28rem)}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:30px}.primary-action,.secondary-action{box-sizing:border-box;border-radius:8px;min-height:48px;padding:12px 18px;font-weight:800;text-decoration:none}.primary-action{color:#fff;background:var(--text-h)}.secondary-action{color:var(--text-h);border:1px solid var(--border);background:var(--surface)}.phone-preview{justify-content:center;display:flex}.phone-frame{box-sizing:border-box;background:#0a0a0a;border:10px solid #0a0a0a;border-radius:34px;width:min(330px,82vw);padding:0;position:relative;overflow:hidden;box-shadow:0 32px 80px #0a0a0a38}.phone-screenshot{width:100%;height:auto;display:block}.infographic-section,.content-grid,.split-section,.download-section,.legal-page{border-top:1px solid var(--border);padding:72px clamp(20px,5vw,72px)}.section-heading{max-width:720px}.section-heading p:not(.eyebrow){color:var(--text)}.flow-grid,.card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:30px;display:grid}.flow-grid article,.info-card,.consent-item{border:1px solid var(--border);background:var(--surface);border-radius:8px}.flow-grid article{min-height:184px;padding:22px}.flow-step{width:42px;height:42px;color:var(--text-h);background:var(--highlight);border-radius:50%;justify-content:center;align-items:center;font-size:.82rem;font-weight:900;display:inline-flex}h3{color:var(--text-h);margin:18px 0 8px;font-size:1.08rem}.flow-grid p,.info-card p,.consent-item p{color:var(--text);margin:0}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.info-card{padding:24px}.split-section{grid-template-columns:minmax(0,.85fr) minmax(300px,1fr);align-items:start;gap:clamp(28px,5vw,70px);display:grid}.check-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.check-list li{border:1px solid var(--border);color:var(--text-h);background:var(--surface);border-radius:8px;padding:18px 18px 18px 50px;position:relative}.check-list li:before{content:"";border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);width:14px;height:8px;position:absolute;top:22px;left:18px;transform:rotate(-45deg)}.consent-panel{background:var(--surface-muted)}.consent-list{gap:14px;display:grid}.consent-item{grid-template-columns:24px minmax(0,1fr);gap:14px;padding:18px;display:grid}.consent-item span{border:2px solid var(--accent);background:linear-gradient(135deg,#0000 50%,#1111111a 50%);border-radius:6px;width:22px;height:22px;margin-top:2px}.download-section,.legal-download{grid-template-columns:minmax(280px,1fr) auto;align-items:center;gap:clamp(20px,4vw,54px);display:grid}.download-section{background:linear-gradient(90deg, #e5e7ebe6, transparent), var(--bg)}.store-buttons{flex-wrap:wrap;gap:12px;display:flex}.store-button{box-sizing:border-box;color:#fff;border-radius:8px;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;min-width:190px;min-height:64px;padding:10px 16px;text-decoration:none;display:grid;box-shadow:0 16px 32px #0a0a0a29}.app-store-button{background:#000}.play-store-button{color:#202124;background:#fff;border:1px solid #dadce0}.store-button:hover,.store-button:focus-visible{outline:none;transform:translateY(-2px)}.store-button small,.store-button strong{display:block}.store-button small{color:#ffffffc7;font-size:.72rem;line-height:1.1}.store-button strong{color:#fff;font-size:1.25rem;line-height:1.1}.play-store-button small{color:#5f6368}.play-store-button strong{color:#202124}.store-icon{color:currentColor;width:32px;height:32px}.legal-page{background:linear-gradient(150deg, #e5e7ebcc, transparent 32%), var(--bg);min-height:calc(100svh - 88px)}.legal-page .section-heading{max-width:860px}.legal-page h1{max-width:900px;font-size:clamp(2.65rem,6vw,5.4rem)}.legal-intro{max-width:760px;margin-top:18px;font-size:1.08rem}.legal-page .card-grid,.legal-page .check-list,.legal-page .consent-list{margin-top:36px}.policy-consent{margin-top:56px}.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px;display:grid}.contact-card a{color:var(--text-h);-webkit-text-decoration-color:var(--border);text-decoration-color:var(--border);text-underline-offset:4px;font-weight:800}.legal-download{border:1px solid var(--border);background:var(--surface);border-radius:8px;margin-top:48px;padding:28px}footer{border-top:1px solid var(--border);color:var(--text);flex-wrap:wrap;justify-content:space-between;gap:12px;padding:26px clamp(20px,5vw,72px);font-size:.9rem}footer strong{color:var(--text-h)}@media (width<=900px){.hero-section,.split-section,.download-section,.legal-download{grid-template-columns:1fr}.topbar{flex-direction:row;align-items:center;position:sticky}.drawer-toggle{z-index:31;border:1px solid var(--border);width:42px;height:42px;color:var(--text-h);background:var(--surface);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:9px;display:flex;position:relative}.drawer-toggle span{background:currentColor;border-radius:999px;width:20px;height:2px;display:block}.drawer-backdrop{z-index:20;opacity:0;pointer-events:none;background:#0a0a0a57;border:0;transition:opacity .18s;display:block;position:fixed;inset:0}.drawer-backdrop[data-open=true]{opacity:1;pointer-events:auto}.nav-links{z-index:30;border-left:1px solid var(--border);background:var(--surface);flex-direction:column;align-items:stretch;gap:8px;width:min(320px,86vw);height:100svh;padding:88px 20px 20px;transition:transform .22s;display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-24px 0 60px #0a0a0a2e}.nav-links[data-open=true]{transform:translate(0)}.nav-links a{min-height:48px;padding:12px 14px;font-size:1rem}.hero-section{padding-top:42px}.flow-grid,.card-grid,.contact-grid{grid-template-columns:1fr}.store-buttons{flex-direction:column;align-items:stretch}.store-button{width:100%}}@media (width<=520px){.hero-actions{flex-direction:column;align-items:stretch}.primary-action,.secondary-action{text-align:center}.phone-frame{border-width:5px;border-radius:24px;width:min(300px,86vw)}}
