:root{
  --ink:#252422; --muted:#77736d; --paper:#f8f5ee; --card:#fffdf8;
  --line:#ded8cb; --accent:#8a7a67; --soft:#eee8dc;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans Thai",sans-serif;line-height:1.75}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:auto;padding:28px 22px 70px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:34px}
.brand{font-weight:700;letter-spacing:-.02em}
.navlinks{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.navlinks a:hover{text-decoration:underline}
.hero{text-align:center;padding:28px 0 18px}
.kicker{font-size:11px;letter-spacing:.2em;color:var(--muted);margin-bottom:10px}
h1{font-size:clamp(42px,8vw,74px);line-height:.95;letter-spacing:-.055em;margin:0 0 7px}
.keyword{font-size:13px;letter-spacing:.25em;font-weight:700}
.thai{font-size:14px;color:var(--muted);margin-top:2px}
.visual{margin:30px auto 22px;max-width:640px;aspect-ratio:1.35/1;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#efe8db,#fffdf8);display:grid;place-items:center;overflow:hidden}
.visual .shape{width:54%;height:54%;position:relative;opacity:.8}
.shape.sun{border-radius:50%;background:#d9c7a7;box-shadow:0 0 0 26px #eee4d3}
.shape.star:before{content:"✦";font-size:160px;line-height:1;color:#bcae98}
.shape.world{border:2px solid #a99b87;border-radius:50%;box-shadow:inset 0 0 0 18px #eee7da}
.shape.wheel{border:10px dotted #9c8d79;border-radius:50%}
.shape.strength:before{content:"❀";font-size:150px;color:#9a8f78}
.shape.lovers:before{content:"♫";font-size:150px;color:#8d806e}
.quote{font-size:20px;line-height:1.55;text-align:center;margin:20px auto 10px;max-width:650px}
.scroll{text-align:center;color:var(--muted);font-size:13px;margin:18px 0 44px}
.section{padding:30px 0;border-top:1px solid var(--line)}
.section h2{font-size:24px;line-height:1.25;margin:5px 0 12px;letter-spacing:-.025em}
.section p{margin:0;color:#403d39}
.intro{font-size:16px}
.bigmessage{font-size:25px;line-height:1.35;font-weight:700;text-align:center;padding:35px 10px}
.try{background:var(--soft);border-radius:24px;padding:28px;margin:26px 0}
.try h2{margin-top:0}
.keep{font-size:19px;text-align:center;padding:28px 10px}
.shop{display:flex;justify-content:center;margin:32px 0}
.shop a{background:var(--ink);color:white;padding:12px 20px;border-radius:999px;font-size:13px;letter-spacing:.05em}
.counter{margin:20px 0;text-align:center;color:var(--muted);font-size:12px}
.counter strong{color:var(--ink)}
.footer{text-align:center;padding-top:36px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.footer .small{margin-top:10px;font-size:11px}
@media(max-width:600px){.wrap{padding:22px 16px 50px}.nav{align-items:flex-start}.navlinks{justify-content:flex-end}.visual{border-radius:20px}.quote{font-size:18px}}