body{background:linear-gradient(155deg,#f4f9ff 0%,#e7f3ff 47%,#f4f9ff 100%)}
.portfolio-hero{min-height:350px;padding-top:44px;padding-bottom:42px;background:radial-gradient(ellipse 55% 92% at 60% 100%,#cfe8ff 0,transparent 73%),linear-gradient(160deg,#f7fbff 0%,#e8f3ff 100%)}
.portfolio-hero h1{max-width:880px;font-size:clamp(48px,5.1vw,78px);letter-spacing:-3.5px}
.portfolio-hero h1 span{display:inline;color:#0759ed}
.portfolio-hero .hero-lead{max-width:650px;margin-top:10px;color:#334b71;font-size:clamp(16px,1.4vw,20px)}
.hero-mascot{left:58%;bottom:-134px;width:355px;opacity:1;filter:drop-shadow(0 17px 20px #0f61ce27)}
.hero-note{right:7%;top:106px;max-width:255px;font-size:clamp(18px,1.7vw,26px);line-height:1.36}
.work-wrap{position:relative;z-index:2;max-width:1560px;padding-top:0;padding-bottom:80px}
.work-heading{margin-bottom:20px}
.work-heading h2{font-size:clamp(21px,2vw,28px)}
.work-heading p{font-size:13px}
.work-grid{gap:18px}
.work-card{border:1px solid #d5e5fb;border-radius:24px;box-shadow:0 17px 38px #1b57951e}
.work-art{height:350px;padding:0;background-size:cover;background-position:center}
.mini .work-art{background-image:url('assets/portfolio-mini.webp');background-position:center 44%}
.business .work-art{background-image:url('assets/portfolio-business.webp');background-position:center 49%}
.pro .work-art{background-image:url('assets/portfolio-pro.webp');background-position:center 43%}
.work-art:after{z-index:1;background:linear-gradient(180deg,#061a430a 0%,transparent 48%,#061a4330 100%)}
.work-art:before{content:"";position:absolute;z-index:2;bottom:-24px;left:-20px;width:153px;height:153px;background:url('assets/mascot-wave.png') center/contain no-repeat;filter:drop-shadow(0 9px 10px #123e7c40);transition:transform .3s}
.business .work-art:before{left:-14px;width:134px;height:134px}
.pro .work-art:before{left:auto;right:-12px;width:148px;height:148px;transform:scaleX(-1)}
.work-card:hover .work-art:before{transform:translateY(-7px) rotate(-4deg)}
.work-card.pro:hover .work-art:before{transform:scaleX(-1) translateY(-7px) rotate(-4deg)}
.work-art .browser,.work-art .phone{display:none}
.plan-pill{top:16px;left:16px;padding:8px 14px;border:1px solid #fff9;background:#ffffffed;color:#075be8;box-shadow:0 7px 17px #092c6430;font-size:12px}
.work-info{min-height:133px;padding:18px 22px}
.work-kind{font-size:11px}
.work-info h3{margin:5px 0 2px;font-size:22px}
.work-info p{font-size:13px}
.open{width:45px;height:45px;background:#e7f0ff;font-size:25px}
.work-note{margin-top:18px;text-align:center;font-size:11px}
@media(max-width:1150px){.hero-mascot{left:69%;bottom:-105px;width:300px}.hero-note{display:none}.work-art{height:300px}}
@media(max-width:850px){.portfolio-hero{min-height:300px}.portfolio-hero h1{max-width:560px}.hero-mascot{left:83%;bottom:-74px;width:240px;opacity:.8}.work-art{height:280px}}
@media(max-width:620px){.portfolio-hero{min-height:280px;padding:34px 20px 50px}.portfolio-hero h1{max-width:350px;font-size:clamp(35px,9vw,51px);letter-spacing:-2px}.portfolio-hero .hero-lead{max-width:285px;font-size:13px}.hero-mascot{left:auto;right:-70px;bottom:-38px;width:205px;transform:none;opacity:.55}.work-wrap{padding:16px 18px 58px}.work-heading{align-items:flex-start;margin-bottom:16px}.work-heading h2{font-size:22px}.work-heading p{font-size:12px}.work-heading>a{font-size:11px;padding:8px 12px}.work-art{height:300px}.work-art:before{width:120px;height:120px;bottom:-20px}.business .work-art:before,.pro .work-art:before{width:116px;height:116px}.work-info{min-height:113px;padding:17px}.work-info h3{font-size:19px}.work-info p{font-size:12px}.work-note{font-size:10px}}
.hero-note{font-family:Sriracha,"Noto Sans Thai",cursive;font-weight:400;line-height:1.25}