:root{
  --green:#10b981; --green-dim:rgba(16,185,129,.12); --green-line:rgba(16,185,129,.35); --on-green:#04130d;
  --bg:#060606; --surface:#0f0f0f; --surface2:#151515; --border:#252525; --border2:#3a3a3a;
  --text:#efefef; --text2:var(--text2); --text3:var(--text3); --muted:#9a9a9a; --dimmer:#6e6e6e; --card-title:var(--card-title);
  --nav-bg:rgba(6,6,6,.82); --code-bg:#0b0b0b; --code-text:#d8d8d8;
  --th:'IBM Plex Sans Thai','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --green:#0a8f63; --green-dim:rgba(16,185,129,.10); --green-line:rgba(10,143,99,.40);
  --bg:#f7f7f5; --surface:#ffffff; --surface2:#efefec; --border:#e2e2de; --border2:#c9c9c4;
  --text:#141414; --text2:#2b2b2b; --text3:#333; --muted:#5f5f5f; --dimmer:#858585; --card-title:#555;
  --nav-bg:rgba(247,247,245,.85); --code-bg:#f1f1ee; --code-text:#222; color-scheme:light;
}}
:root[data-theme="light"]{
  --green:#0a8f63; --green-dim:rgba(16,185,129,.10); --green-line:rgba(10,143,99,.40);
  --bg:#f7f7f5; --surface:#ffffff; --surface2:#efefec; --border:#e2e2de; --border2:#c9c9c4;
  --text:#141414; --text2:#2b2b2b; --text3:#333; --muted:#5f5f5f; --dimmer:#858585; --card-title:#555;
  --nav-bg:rgba(247,247,245,.85); --code-bg:#f1f1ee; --code-text:#222; color-scheme:light;
}
/* language switch */
:root[lang="th"] [data-l="en"], :root[lang="en"] [data-l="th"]{display:none!important}
.tog{display:flex;gap:6px;align-items:center}
.tog button{font:600 .76rem var(--mono);background:var(--surface);color:var(--muted);border:1px solid var(--border);border-radius:8px;height:32px;min-width:36px;padding:0 9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.tog button:hover{color:var(--text);border-color:var(--border2)}
.tog .on{color:var(--green)}
.tog svg{width:15px;height:15px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--th);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media (max-width:480px){.wrap{padding:0 16px}}

/* nav */
nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:16px}
.brand{font-family:var(--mono);font-size:.82rem;color:var(--green);letter-spacing:.1em;font-weight:600;text-decoration:none}
.nav-links{display:flex;gap:22px;font-size:.88rem}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--text)}
@media (max-width:720px){.nav-links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:.92rem;font-weight:600;text-decoration:none;border:1px solid var(--border);color:var(--text);background:var(--surface);transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--border2)}
.btn.primary{background:var(--green);border-color:var(--green);color:var(--on-green)}
.btn.primary:hover{filter:brightness(1.08)}
.btn svg{width:16px;height:16px}

/* labels */
.label{font-family:var(--mono);font-size:.68rem;color:var(--green);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.label::before{content:"";width:22px;height:1px;background:var(--green)}
h1,h2,h3{line-height:1.3;font-weight:700}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:12px}
.lead{color:var(--muted);max-width:680px}
section{padding:88px 0;border-top:1px solid var(--border)}
@media (max-width:480px){section{padding:64px 0}}

/* hero */
.hero{padding:96px 0 72px;border-top:none}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.01em;margin-bottom:6px}
.hero .name-en{font-family:var(--mono);color:var(--dimmer);font-size:.9rem;letter-spacing:.08em;margin-bottom:22px}
.hero .tagline{font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:600;margin-bottom:10px}
.hero .tagline em{font-style:normal;color:var(--green)}
.hero .seek{color:var(--muted);margin-bottom:28px;max-width:640px}
.hero-photo{width:200px;height:200px;border-radius:22px;object-fit:cover;border:1px solid var(--border);filter:grayscale(.15)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.en-summary{margin-top:44px;padding:20px 22px;border:1px solid var(--border);border-left:2px solid var(--green);border-radius:12px;background:var(--surface);font-family:'Inter',sans-serif;font-size:.9rem;color:var(--text3);line-height:1.65}
.en-summary b{color:var(--text)}
.en-summary .tag{font-family:var(--mono);font-size:.64rem;color:var(--green);letter-spacing:.16em;display:block;margin-bottom:6px}
@media (max-width:720px){.hero-grid{grid-template-columns:1fr}.hero-photo{width:120px;height:120px;border-radius:16px;order:-1}.hero{padding-top:56px}}

/* how I work */
.honest{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
.step .n{font-family:var(--mono);color:var(--green);font-size:.78rem;margin-bottom:8px}
.step h3{font-size:1rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.9rem;line-height:1.6}
@media (max-width:860px){.honest{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.honest{grid-template-columns:1fr}}

/* case study */
.case{padding:44px 0;border-top:1px solid var(--border)}
.case:first-of-type{border-top:none;padding-top:20px}
.case-head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.case-num{font-family:var(--mono);color:var(--green);font-size:.85rem}
.case h3{font-size:clamp(1.25rem,2.6vw,1.6rem)}
.case .sub{color:var(--muted);margin-bottom:24px}
.case-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:start}
.case-grid.flip .media{order:-1}
@media (max-width:860px){.case-grid{grid-template-columns:1fr}.case-grid.flip .media{order:0}}
.beats{display:grid;gap:14px}
.beat{border-left:2px solid var(--border);padding:2px 0 2px 16px}
.beat .k{font-size:.78rem;font-weight:600;color:var(--dimmer);margin-bottom:2px}
.beat p,.beat li{font-size:.94rem;color:var(--text2)}
.beat ul{padding-left:18px}
.beat.result{border-left-color:var(--green)}
.beat.result .k{color:var(--green)}
.beat.mkt{border-left-color:var(--border2);background:var(--surface);border-radius:0 10px 10px 0;padding:12px 16px}
.media{position:sticky;top:76px}
.shot{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#111}
.shot img{width:100%;height:auto}
.cap{font-size:.78rem;color:var(--dimmer);margin-top:8px;line-height:1.5}
.phone{width:min(300px,100%);margin:0 auto;border:1px solid var(--border);border-radius:26px;overflow:hidden;background:var(--surface2)}
.phone video{width:100%;aspect-ratio:9/16;object-fit:cover}
.duo{display:grid;grid-template-columns:2.3fr 1fr;gap:12px;align-items:end}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:.76rem;padding:4px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.chip.ok{border-color:var(--green-line);color:var(--green)}

/* about */
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px}
.card h3{font-size:.85rem;color:var(--card-title);margin-bottom:14px;font-weight:600}
.card .big{font-weight:700;font-size:1.05rem}
.card .meta{color:var(--muted);font-size:.9rem}
.card ul{list-style:none;display:grid;gap:8px}
.card li{font-size:.93rem;color:var(--text2);padding-left:14px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--green)}
.lang-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.93rem}
.lang-row:last-child{border-bottom:none}
.lang-row span:last-child{color:var(--muted)}
@media (max-width:720px){.about-grid{grid-template-columns:1fr}}

/* contact */
.contact-box{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.contact-box a{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;transition:border-color .15s}
.contact-box a:hover{border-color:var(--green-line)}
.contact-box .k{font-size:.78rem;color:var(--dimmer);margin-bottom:6px}
.contact-box .v{font-weight:600;word-break:break-all}
@media (max-width:720px){.contact-box{grid-template-columns:1fr}}

footer{border-top:1px solid var(--border);padding:28px 0 40px}
footer p{color:var(--dimmer);font-size:.72rem;font-family:var(--mono)}

/* proposal pages */
.prop-hero{padding:72px 0 40px}
.prop-hero .for{font-family:var(--mono);font-size:.72rem;color:var(--green);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.prop-hero h1{font-size:clamp(1.7rem,4.2vw,2.7rem);margin-bottom:16px}
.seen{display:grid;gap:10px;margin-top:20px}
.seen li{list-style:none;font-size:.93rem;color:var(--text2);padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.seen li b{color:var(--text)}
.play{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--border)}
.play .n{font-family:var(--mono);font-size:1.8rem;color:var(--green);font-weight:700;line-height:1}
.play h3{font-size:1.2rem;margin-bottom:10px}
.play p{color:var(--text2);font-size:.95rem;margin-bottom:10px}
.play .kpi{font-size:.85rem;color:var(--muted)}
.play .kpi b{color:var(--green);font-weight:600}
.play .proof{font-size:.85rem;color:var(--muted);margin-top:4px}
.play .proof a{color:var(--green)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.timeline .card .d{color:var(--green);font-size:.8rem;margin-bottom:6px}
.timeline .card p{font-size:.9rem;color:var(--text2)}
@media (max-width:720px){.timeline{grid-template-columns:1fr}.play{grid-template-columns:1fr;gap:8px}}
.sources{font-size:.8rem;color:var(--dimmer)}
.sources a{color:var(--muted);word-break:break-all}
.note{font-size:.85rem;color:var(--muted);padding:14px 16px;border:1px dashed var(--border);border-radius:10px;margin-top:24px}

/* deep-dive pages */
.dd-type{display:inline-block;font-size:.78rem;padding:4px 12px;border-radius:999px;border:1px solid var(--green-line);color:var(--green);margin-bottom:16px}
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:24px}
.flow .node{flex:1 1 128px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative}
.flow .node .n{font-family:var(--mono);color:var(--green);font-size:.72rem;margin-bottom:4px}
.flow .node b{display:block;font-size:.95rem;margin-bottom:2px}
.flow .node span{font-size:.84rem;color:var(--muted);line-height:1.55;display:block}
.flow .node.human{border-color:var(--green-line);background:var(--green-dim)}
.flow-legend{font-size:.8rem;color:var(--dimmer);margin-top:10px}
.flow-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--green-dim);border:1px solid var(--green-line);margin-right:6px;vertical-align:-1px}
.shots{display:grid;gap:16px;margin-top:24px}
.shots.two{grid-template-columns:1fr 1fr}
@media (max-width:720px){.shots.two{grid-template-columns:1fr}}
.code{margin-top:28px}
.code h3{font-size:1.05rem;margin-bottom:6px}
.code .why{color:var(--text2);font-size:.93rem;margin-bottom:10px}
.code pre{background:var(--code-bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.65;color:var(--code-text);tab-size:2}
.code .src{font-family:var(--mono);font-size:.7rem;color:var(--dimmer);margin-top:6px}
.decide{display:grid;gap:12px;margin-top:20px}
.decide .card p{font-size:.92rem;color:var(--text2)}
.decide .card b{display:block;margin-bottom:4px}
.fix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.fix .card .k{font-size:.78rem;color:var(--dimmer);font-weight:600;margin-bottom:4px}
.fix .card p{font-size:.92rem;color:var(--text2)}
.fix .card .ans{color:var(--green);font-size:.78rem;font-weight:600;margin-top:10px;margin-bottom:4px}
@media (max-width:720px){.fix{grid-template-columns:1fr}}
.deep-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--green);text-decoration:none}
.deep-link:hover{text-decoration:underline}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pager a{color:var(--muted);text-decoration:none;font-size:.9rem}
.pager a:hover{color:var(--text)}