@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

:root{font-family:'Noto Sans Thai',system-ui,sans-serif;color:#171725;background:#fff;font-synthesis:none;scroll-behavior:smooth;--ink:#171725;--muted:#66677c;--orange:#ff692e;--violet:#6650c9;--line:#dcd9f3}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{max-width:100%}code{font:600 .93em ui-monospace,SFMono-Regular,monospace;color:#5d4bb2;background:#f1efff;padding:.1em .3em;border-radius:.25em}
.site-header{height:74px;padding:0 max(5.3vw,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#ffffffed;position:relative;z-index:3;border-bottom:1px solid #eeedf7}.wordmark{font-size:2rem;font-weight:800;letter-spacing:-.07em;color:#ff642b;line-height:1;white-space:nowrap}.wordmark span{font-size:.8em;margin-left:.06em}.site-header nav{display:flex;align-items:center;gap:clamp(20px,3.6vw,58px);font-size:1rem;font-weight:600;white-space:nowrap}.site-header nav a{padding:12px 0;border-bottom:2px solid transparent}.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--violet);border-color:var(--orange)}
.section-shell{padding-left:max(5.3vw,24px);padding-right:max(5.3vw,24px)}
.hero{min-height:680px;position:relative;overflow:hidden;background:#fff url('/assets/hero-landscape.webp') center bottom/cover no-repeat;display:flex;align-items:center;padding:30px max(5.3vw,24px) 78px}.hero:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-34px;height:76px;background:#f8f7ff;transform:rotate(1.2deg);z-index:1}.hero-content{position:relative;z-index:2;width:min(710px,55%)}.hero h1{font-size:clamp(6rem,12vw,11rem);line-height:1;letter-spacing:-.12em;margin:0 0 10px;font-weight:800}.hero-spark{color:var(--orange);font-size:.7em;letter-spacing:0;margin-left:.12em}.hero-headline{font-size:clamp(1.9rem,3.4vw,3.2rem);font-weight:700;line-height:1.35;letter-spacing:-.05em;margin:0 0 22px}.hero-description{font-size:clamp(1rem,1.25vw,1.17rem);line-height:1.95;max-width:580px;color:#505267;margin:0 0 32px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:60px;padding:12px 27px;border-radius:18px;font-size:1.07rem;font-weight:700;border:1.5px solid transparent;transition:transform .2s,background .2s,border-color .2s}.button:hover{transform:translateY(-2px)}.button:focus-visible,.text-link:focus-visible,.site-header a:focus-visible,input:focus-visible,.delete-button:focus-visible{outline:3px solid #7766e9;outline-offset:3px}.button-primary{background:var(--orange);color:white}.button-primary:hover{background:#e95622}.button-outline{background:#ffffffba;border-color:#b7ade8;color:#5541b8}.button-outline:hover{background:white}.hero-art{position:absolute;z-index:1;width:min(50vw,650px);right:4%;top:4%;filter:drop-shadow(0 20px 34px #ef9b7444);transform:rotate(-6deg)}.hero-art img{width:100%;height:auto;display:block}
.access-section{min-height:330px;background:#f8f7ff;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw;padding-top:95px;padding-bottom:85px}.access-section h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.28;letter-spacing:-.05em;margin:0;font-weight:800}.access-section h2 em{font-style:normal;color:var(--violet)}.access-copy{border-left:2px solid #cac2f3;padding-left:55px;max-width:590px}.access-copy p{font-size:1.08rem;line-height:1.9;color:#55576c;margin:0 0 12px}
.story-section{min-height:540px;display:grid;grid-template-columns:42% 1fr;align-items:center;gap:7vw;background:linear-gradient(120deg,#fff 40%,#fff8f3);padding-top:80px;padding-bottom:80px}.story-orb{width:min(390px,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 55%,#fff3df 0,#ffe4c7 53%,#fff7ef 70%);display:flex;align-items:center;justify-content:center;margin:auto}.story-orb img{display:block;width:78%;height:auto;filter:drop-shadow(0 16px 14px #e89b5b55)}.story-section h2,.how-section h2,.profile-section h2,.future-section h2{font-size:clamp(2.2rem,3.8vw,3.7rem);line-height:1.3;letter-spacing:-.05em;margin:0 0 22px}.story-section p,.profile-section p,.future-section p{font-size:1.12rem;line-height:1.95;color:#55576c;max-width:630px}.story-section .story-small{font-size:1rem;color:#7b7d91}
.how-section{padding-top:95px;padding-bottom:100px;background:#fff}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:50px}.section-heading h2{margin:0}.section-heading p{max-width:410px;color:var(--muted);line-height:1.8;margin:0}.steps{list-style:none;padding:0;margin:0 0 42px;display:grid;grid-template-columns:repeat(3,1fr);gap:38px}.steps li{border-top:2px solid #dfdcf4;padding-top:24px;display:flex;gap:20px}.step-number{font-size:1.5rem;color:var(--violet);font-weight:800}.steps h3{font-size:1.3rem;margin:0 0 8px}.steps p{line-height:1.8;color:var(--muted);margin:0}
.profile-section{background:#f6f4ff;min-height:530px;padding-top:95px;padding-bottom:95px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.profile-section .muted{font-size:1rem}.text-link{display:inline-flex;gap:12px;align-items:center;margin-top:15px;font-weight:700;color:var(--violet);border-bottom:2px solid currentColor;padding-bottom:5px}.text-link:hover{color:#4430a3}.profile-visual{min-height:300px;border:1px solid #ddd7fc;border-radius:34px;background:radial-gradient(circle at 74% 27%,#ffeddc 0,transparent 35%),linear-gradient(135deg,#fff,#edebff);display:flex;align-items:center;justify-content:center;gap:28px;color:#6152b7;font-weight:700;font-size:clamp(1.3rem,2.5vw,2.1rem);line-height:1.55}.profile-visual-bolt{font-size:9rem;line-height:1;color:var(--orange);filter:drop-shadow(0 13px 16px #e7837560)}
.future-section{padding-top:100px;padding-bottom:100px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:start}.future-section p{margin:0}.site-footer{min-height:120px;border-top:1px solid #e8e7f2;display:flex;align-items:center;gap:32px;color:#77798a;font-size:.95rem}.site-footer a:last-child{margin-left:auto;color:#5e50b3}
.profile-page{padding-top:60px;padding-bottom:95px;background:linear-gradient(#fff,#fbfaff)}.profile-page-header{display:flex;justify-content:space-between;align-items:center;min-height:180px;gap:30px}.profile-page-header h1,.text-page h1{font-size:clamp(2.8rem,5vw,5rem);line-height:1.2;letter-spacing:-.055em;margin:0 0 14px}.profile-page-header p{font-size:1.16rem;line-height:1.8;color:var(--muted);margin:0;max-width:780px}.profile-page-header img{width:170px;height:170px;object-fit:contain}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:32px}.signin-panel,.form-panel{border:1px solid #e0ddf6;border-radius:18px;background:white;padding:clamp(25px,3vw,45px);box-shadow:0 14px 35px #34315809}.signin-panel{background:linear-gradient(160deg,#fff 68%,#f1efff)}.signin-panel h2,.form-panel h2{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.4;margin:0 0 14px}.signin-panel>p{line-height:1.9;color:var(--muted);margin:0 0 27px}.button-line{width:100%;background:#27b862;color:white}.button-line:hover{background:#1ca35a}.privacy-points{border-top:1px solid #e7e4f7;margin-top:35px;padding-top:20px}.privacy-points p{color:#6b69a0;line-height:1.65;padding-left:28px;position:relative}.privacy-points p:before{content:"✓";position:absolute;left:0;color:var(--violet);font-weight:800}.form-panel-top{display:flex;justify-content:space-between;gap:18px;align-items:start}.form-panel-top span{color:var(--violet);font-size:.91rem;font-weight:700}.form-panel label{display:block;font-size:.94rem;font-weight:700;margin:20px 0 7px}.form-panel input{width:100%;min-height:49px;border:1px solid #cccfe5;border-radius:9px;padding:10px 13px;background:#fff;color:var(--ink)}.form-panel input:disabled{background:#f5f5f9}.optional{font-weight:500;font-size:.88rem;color:#86889c}.form-divider{height:1px;background:#e4e2f2;margin:30px 0 21px}.form-panel h3{font-size:1.15rem;margin:0 0 5px}.field-help{font-size:.9rem;color:#7a7c90;line-height:1.6;margin:0}.birth-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-save{width:100%;margin-top:32px}.delete-button{display:block;margin:22px auto 0;color:#c84940;background:none;border:0;text-decoration:underline}.status-message{min-height:24px;color:#5f50b4;line-height:1.6;font-size:.92rem;margin:16px 0 0}.status-message.error{color:#ba3f35}.form-placeholder{margin:70px auto;text-align:center;color:#86889c}.text-page{max-width:900px;margin:auto;padding-top:78px;padding-bottom:110px}.text-page h1{margin-bottom:30px}.text-page h2{font-size:1.65rem;margin:42px 0 9px}.text-page p{font-size:1.1rem;line-height:1.95;color:#56586d}
@media(max-width:900px){.hero{min-height:610px}.hero-content{width:62%}.hero-art{width:52vw;right:-4%;top:16%}.access-copy{padding-left:28px}.steps{gap:20px}.steps li{gap:12px}.profile-section{gap:35px}}
@media(max-width:680px){.site-header{height:auto;min-height:68px;align-items:flex-start;padding-top:14px;padding-bottom:9px;flex-wrap:wrap;gap:6px}.site-header nav{width:100%;gap:20px;overflow:auto;font-size:.84rem}.site-header nav a{padding:8px 0}.wordmark{font-size:1.75rem}.hero{min-height:750px;align-items:flex-start;padding-top:55px;padding-bottom:285px;background-position:62% bottom;background-size:auto 65%}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(#fff 3%,#ffffffeb 39%,#ffffff00 70%)}.hero-content{width:100%}.hero h1{font-size:6.1rem}.hero-headline{font-size:2rem}.hero-description{font-size:.98rem;line-height:1.75;max-width:520px}.hero-art{width:min(65vw,290px);top:auto;bottom:45px;right:8%}.button{min-height:53px;padding:9px 18px;border-radius:14px;font-size:.94rem;gap:15px}.access-section,.story-section,.profile-section,.future-section{grid-template-columns:1fr;gap:28px}.access-section{padding-top:75px;padding-bottom:70px}.access-copy{border-left:0;border-top:2px solid #cac2f3;padding:20px 0 0}.story-section{padding-top:65px;padding-bottom:65px}.story-orb{width:220px;grid-row:2}.how-section{padding-top:70px;padding-bottom:75px}.section-heading{display:block}.steps{grid-template-columns:1fr;gap:18px}.steps li{padding-top:18px}.profile-section{padding-top:75px;padding-bottom:75px}.profile-visual{min-height:210px}.profile-visual-bolt{font-size:6rem}.future-section{padding-top:75px;padding-bottom:75px}.site-footer{flex-wrap:wrap;justify-content:space-between;padding-top:26px;padding-bottom:26px;gap:12px}.site-footer span{display:none}.site-footer a:last-child{margin-left:0}.profile-page{padding-top:38px}.profile-page-header img{width:96px;height:96px}.profile-page-header h1{font-size:2.7rem}.profile-page-header p{font-size:.97rem}.profile-grid{grid-template-columns:1fr}.signin-panel,.form-panel{padding:26px}.text-page{padding-top:50px}}
@media(max-width:390px){.hero{min-height:790px}.hero-actions{gap:10px}.button{font-size:.86rem;padding:8px 13px}.hero-art{bottom:42px}.birth-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.button{transition:none}}