@font-face{font-family:Thai;src:url(assets/thai.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Mitr;src:url(assets/display.ttf) format("truetype");font-weight:600;font-display:swap}
:root{color-scheme:light;--ink:#182d27;--muted:#596861;--orange:#c74c19;--green:#253f36;--paper:#fcf8ee;--line:#e8e0d0}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 9% 38%,#f9eacf 0%,transparent 46%),var(--paper);color:var(--ink);font:400 16px/1.62 Thai,system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid #ae4315;outline-offset:4px}
p,h1,h2,h3{margin:0}
.shell{max-width:1390px;margin:auto;padding:0 clamp(19px,5.1vw,74px)}
.top{min-height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:9px;line-height:.95;font:900 28px/.89 system-ui,sans-serif;letter-spacing:-.085em}
.brand>span>span{color:var(--orange)}
.brand small{display:block;margin:6px 0 0 1px;font:700 11px/1 Thai,sans-serif;letter-spacing:0}
.brand img{object-fit:contain}
.contact,.bottom a{font-size:.83rem;font-weight:700}
.contact span,.bottom a span{margin-left:.25em;color:var(--orange)}
.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(28px,5vw,78px);padding:clamp(32px,4.7vw,70px) 0 clamp(24px,3.2vw,50px)}
.copy{padding:5px 0 20px}
.status{background:#fff9ec;border:1px solid #e9cba4;border-radius:100px;padding:6px 12px;color:#793916;font-size:.8rem;font-weight:750;display:inline-flex;align-items:center;gap:8px;margin-bottom:24px}
.status span{width:8px;height:8px;border-radius:50%;background:#dc6427;box-shadow:0 0 0 3px #f9e0c5}
.eyebrow{font-size:.71rem;font-weight:800;letter-spacing:.11em;color:#58675d}
h1{font:600 clamp(35px,4.25vw,69px)/1.23 Mitr,Thai,sans-serif;letter-spacing:-.044em;margin:13px 0 17px}
h1 em{color:var(--orange);font-style:normal}
.intro{max-width:39ch;color:#46564e;font-size:clamp(.99rem,1.45vw,1.17rem)}
.cta{display:inline-flex;gap:24px;align-items:center;padding:12px 17px;margin-top:26px;background:var(--green);color:#fff;border-radius:10px;font-weight:750;font-size:.89rem;box-shadow:0 6px 12px #25403626;min-height:48px}
.cta:hover{background:#34574b}
.cta span{font:600 1.28rem system-ui}
.note{margin-top:15px;font-size:.76rem;color:var(--muted)}
.preview{padding:clamp(13px,1.5vw,23px);border:1px solid #ede1d0;border-radius:24px;background:#fffef9;box-shadow:0 17px 42px #68491f13;min-width:0;scroll-margin:16px}
.preview-top{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:12px}
.preview-top h2{font:600 clamp(.96rem,1.5vw,1.34rem)/1.35 Mitr,Thai,sans-serif;margin-top:4px}
.count{font:700 .76rem/1.3 system-ui;color:#6e776d;white-space:nowrap;padding-bottom:1px}
.count b{font-size:1rem;color:var(--orange)}
.stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:412px;overflow:hidden;border-radius:16px;background:#efd9b4}
.art{position:absolute;inset:0;z-index:-2;background:#ecd8ad url(assets/journey.webp) center 32%/cover no-repeat}
.stage:after{position:absolute;inset:0;content:"";z-index:-1;background:linear-gradient(90deg,#e7cea84d,#f8e1bb24 50%,#b89a702b),linear-gradient(0deg,#452c2180,transparent 20%)}
.demo-label,.stage-note{position:absolute;border-radius:100px;padding:3px 8px;font-size:.64rem;font-weight:700;z-index:1}
.demo-label{top:11px;left:10px;background:#fffcf2;color:#27392f}
.stage-note{bottom:9px;right:8px;background:#31271ee8;color:white}
.phone{width:min(224px,73%);height:377px;background:#fffefa;border:6px solid #1b2926;border-radius:24px;box-shadow:0 15px 27px #201d1e7f;overflow:hidden;display:flex;flex-direction:column}
.phone-top{font:700 10px/1.1 system-ui;display:flex;justify-content:space-between;padding:6px 10px 5px}
.app-head{display:flex;align-items:center;gap:5px;padding:5px 10px 7px;border-bottom:1px solid #eee5d9;font:900 13px/1.2 system-ui}
.app-head span{font:700 9px/1 Thai,sans-serif;margin-left:auto;color:#695348;background:#fff0df;border-radius:20px;padding:5px}
.app-head img{object-fit:contain}
.panel{flex:1;padding:9px 9px 0;min-height:0}
.panel h3{font-size:16px;font-weight:850;line-height:1.35}
.sub{color:#57645c;font-size:9px;margin:2px 0 8px}
.select{border:1px solid #e9dbce;border-radius:7px;display:flex;align-items:center;gap:6px;padding:6px;margin-bottom:5px;font-size:10px;white-space:nowrap}
.select span:first-child{font-size:9px;color:#635346}
.select span:last-child{margin-left:auto}
.days{display:flex;justify-content:space-between;gap:2px;margin:8px 0;font-size:9px;text-align:center}
.days>*{border:1px solid #ede5d8;border-radius:5px;padding:2px 0;flex:1}
.days b{background:#a94318;color:#fff;border-color:#a94318}
.trip{display:flex;align-items:center;gap:9px;border:1px solid #eee3d4;padding:6px;border-radius:7px;margin-bottom:5px;line-height:1.2}
.trip strong{font:800 15px/1 system-ui;color:#a44116}
.trip b,.trip small,.notice small,.notice b{display:block;font-size:10px}
.trip small,.notice small{font-size:9px;color:#57645c;margin-top:3px}
.trip i{margin-left:auto;font-style:normal}
.map{display:block;width:100%;height:153px;object-fit:contain;background:#f0f0de;border-radius:8px;border:1px solid #e0e1ce}
.notice{display:flex;gap:7px;align-items:center;background:#edf5e9;border-radius:7px;padding:5px 6px;margin-top:6px;line-height:1.15}
.notice.warm{background:#ffeee5;color:#9e3918}
.live{background:#358453;border-radius:50%;width:8px;height:8px;margin:2px;flex:none}
.app-footer{display:flex;justify-content:space-around;border-top:1px solid #eee5d9;padding:7px 4px;font-size:8px;color:#53645b;font-weight:700}
.controls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:11px}
.tabs,.arrows{display:flex;align-items:center;gap:5px}
.controls button{font:750 clamp(.67rem,1.1vw,.77rem)/1.2 Thai,sans-serif;white-space:nowrap;border:1px solid #e9e0d4;border-radius:7px;background:#fffef9;color:#35473d;padding:5px clamp(5px,.75vw,11px);min-height:39px;cursor:pointer}
.controls button:hover{background:#f6eddd}
.controls button[aria-selected="true"]{background:#fbe7d5;color:#853813;border-color:#f5d1b4}
.arrows button{font:700 16px/1 system-ui;width:35px;padding:3px;min-height:39px}
.caption{font-size:.75rem;color:#53645b;margin-top:7px;min-height:2.45em}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;border-top:1px solid var(--line);font-size:.77rem;color:#4f5f55;padding:16px 0 20px}
.bottom b{color:var(--green)}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
@media(max-width:850px){.hero{gap:24px}.shell{padding-inline:22px}.preview{border-radius:18px}.stage{min-height:400px}}
@media(max-width:680px){.top{min-height:69px}.hero{display:block;padding-top:29px}.copy{padding-bottom:26px}.status{margin-bottom:15px}h1{font-size:clamp(35px,9vw,52px);margin:8px 0 12px}.cta{margin-top:19px}.preview-top h2{font-size:1.03rem}.stage{min-height:405px}.art{background-position:center 31%}.bottom{font-size:.74rem}}
@media(max-width:360px){.shell{padding-inline:13px}.preview{padding:10px}.arrows button{width:30px}.tabs,.arrows{gap:3px}.controls button{padding-inline:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}