@import url('/platform/system-ui.css');
:root{font-family:'Noto Sans Thai',system-ui,sans-serif;color:#173f32;background:#fbfcf8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}.nav{max-width:1240px;margin:auto;height:100px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:9px;font-size:25px;letter-spacing:-1px;font-weight:750}.brand b{display:grid;place-items:center;background:#25563c;color:#fff;border-radius:13px;width:40px;height:40px;font-size:31px;line-height:1}.brand span{font-size:8px;letter-spacing:2px;margin-left:9px;color:#91a085}.nav nav{display:flex;gap:32px;font-size:13px;color:#76876f}.nav-login{border:1px solid #dce5d4;border-radius:30px;padding:10px 18px;font-size:12px}.nav-login span{margin-left:14px}main{max-width:1184px;margin:auto;padding:0 24px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:635px;padding:30px 0 55px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;color:#8da17c;display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#71a75c}h1{font-size:54px;line-height:1.4;letter-spacing:-2px;margin:25px 0 20px;font-weight:750}h1>span{color:#6c8f45}.hero-copy>p{font-size:15px;color:#819073;line-height:1.95;margin:0 0 30px}.hero-actions{display:flex;gap:25px;align-items:center}.button{background:#285d3e;color:#fff;display:inline-flex;justify-content:space-between;align-items:center;padding:16px 25px;gap:30px;border-radius:13px;font-size:13px;font-weight:600}.button:hover{background:#1d492f}.text-link{font-size:12px;color:#627c50}.caption{font-size:10px;color:#a0ac93;margin-top:17px}.hero-visual{height:530px;position:relative;isolation:isolate}.visual-orbit{position:absolute;inset:20px -10px 10px;border-radius:50%;background:radial-gradient(ellipse,#e6edd6 25%,#f0f3e6 60%,transparent 70%);z-index:-1}.story-card{background:#fff;width:320px;padding:17px;border:1px solid #e2e8da;border-radius:22px;box-shadow:0 20px 50px #3d5d2010;position:absolute;top:20px;left:20px;transform:rotate(-5deg)}.post-author{display:flex;gap:9px;align-items:center}.avatar{width:34px;height:34px;border-radius:50%;background:#e2e9c8;display:grid;place-items:center;color:#758a52;font-size:13px}.post-author b,.chat-top b{font-size:11px}.post-author small,.chat-top small{display:block;font-size:8px;color:#9aa58e}.post-author>span{margin-left:auto;color:#9ea892}.landscape{height:230px;border-radius:12px;position:relative;overflow:hidden;background:#e8ead1;margin-top:15px}.sun{position:absolute;top:25px;right:43px;width:53px;height:53px;border-radius:50%;background:#e0b984}.hill{position:absolute;border-radius:50% 50% 0 0;width:370px;height:200px;bottom:-90px;left:-60px;transform:rotate(20deg);background:#9dae7a}.hill.front{left:80px;bottom:-100px;transform:rotate(-25deg);background:#4e7252}.landscape-text{position:absolute;top:24px;left:20px;color:#435c38;font-size:23px;line-height:1.1;letter-spacing:-1px;font-weight:650}.story-card>p{font-size:11px;margin:16px 0}.post-icons{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef1e8;padding-top:10px;color:#718766}.post-icons small{font-size:8px}.chat-float{position:absolute;top:300px;right:0;width:290px;background:white;border:1px solid #e3eadc;border-radius:20px;padding:17px;box-shadow:0 15px 50px #34591b10;transform:rotate(4deg)}.chat-top{display:flex;gap:8px;align-items:center}.peach{background:#f2e4d1;color:#bc9973}.chat-top>span{margin-left:auto;color:#a8bb8a}.message{font-size:10px;padding:10px 12px;background:#f1f4e9;border-radius:10px 10px 10px 2px;width:fit-content;margin-top:12px}.message.own{background:#3c6b49;color:#fff;margin-left:auto;border-radius:10px 10px 2px 10px}.floating-note{position:absolute;top:8px;right:0;font-size:10px;color:#819667;transform:rotate(5deg)}.illustration-label{position:absolute;bottom:0;left:50px;font-size:9px;color:#9fac93}.intro{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #e5eadc;padding:45px 0 30px;gap:30px}h2{font-size:29px;line-height:1.5;letter-spacing:-.8px;margin:15px 0 0}.intro>p{font-size:13px;line-height:1.9;color:#859476}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.feature{border:1px solid #e3e9d9;border-radius:20px;padding:27px;background:#f3f6eb;min-height:320px;transition:transform .2s}.feature:hover{transform:translateY(-4px)}.feature.chat{background:#eef3ec}.feature.friends{background:#f7f3e9}.feature-icon{font-size:30px;color:#678156}h3{font-size:19px;margin:12px 0}.feature>p{font-size:12px;color:#859276;line-height:1.8}.feature-link{display:block;font-size:11px;font-weight:600;margin-top:20px}.mini-post{display:flex;gap:10px;background:#fff;padding:13px;border-radius:10px;margin:22px 0}.mini-post>span{height:26px;width:26px;background:#dbe5c6;border-radius:50%}.mini-post>div{flex:1}.mini-post b,.mini-post i{height:5px;background:#e9eddf;width:90%;display:block;border-radius:4px;margin:5px 0}.mini-post b{width:35%;background:#b6c7a1}.mini-chat{height:71px;margin-top:22px}.mini-chat span{background:#fff;padding:8px 15px;font-size:10px;border-radius:10px;display:table}.mini-chat span+span{margin:5px 0 0 auto;background:#d0ddc4}.avatar-stack{display:flex;padding:22px 0}.avatar-stack i{height:42px;width:42px;border-radius:50%;background:#dfdfc5;display:grid;place-items:center;font:13px system-ui;border:3px solid #f7f3e9;margin-right:-8px}.avatar-stack i:nth-child(2){background:#e5cbb2}.avatar-stack i:nth-child(3){background:#c5d1bb}.join{background:#244f36;border-radius:23px;margin:50px 0 22px;padding:42px 50px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff}.join .eyebrow{color:#b1c998}.join h2{font-size:36px}.join p{font-size:12px;color:#b1c3a4}.button.light{background:#edf2db;color:#315333}.release-note{font-size:10px;line-height:1.9;color:#99a38e;text-align:center;margin-bottom:40px}footer{max-width:1184px;margin:auto;border-top:1px solid #e3e9da;padding:27px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:20px}footer .brand b{width:30px;height:30px;font-size:25px}footer>span,footer>a:last-child{font-size:10px;color:#88977a}a:focus-visible{outline:3px solid #8cae66;outline-offset:5px}
@media(max-width:1000px){h1{font-size:42px}.hero{gap:15px}.story-card{left:0;width:275px}.landscape{height:200px}.chat-float{width:245px;top:285px}.floating-note{font-size:8px}.nav nav{gap:20px}}
@media(max-width:650px){.nav{height:78px;padding:0 20px}.nav nav{display:none}.nav-login{font-size:10px;padding:8px 12px}.brand{font-size:22px}.brand span{display:none}main{padding:0 20px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:28px 0 30px;gap:10px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:39px;letter-spacing:-1.8px;margin-top:20px}.hero-copy>p{font-size:13px}.button{padding:14px 19px;font-size:12px;gap:20px}.hero-actions{gap:19px}.text-link{font-size:11px}.hero-visual{height:425px;margin-top:20px}.story-card{width:255px;left:10px;top:15px}.landscape{height:174px}.chat-float{top:250px;width:225px;right:0}.floating-note{right:0;top:0}.illustration-label{left:15px}.intro{display:block;padding-top:30px}h2{font-size:25px}.intro>p{font-size:12px}.feature-grid{grid-template-columns:1fr}.feature{min-height:280px}.join{padding:28px;margin-top:30px;display:block}.join h2{font-size:30px}.join .button{margin-top:15px}footer{flex-wrap:wrap;padding:22px 20px}footer>span{display:none}.release-note{text-align:left;font-size:9px}}
@media(prefers-reduced-motion:reduce){.feature{transition:none}}