*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
  background:#eaf7f4;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
  background:#86c9d2;
}
.sky{
  position:absolute;inset:0;z-index:-4;
  background:
    radial-gradient(70% 115% at 86% 48%,rgba(188,238,194,.95) 0%,rgba(161,224,197,.70) 38%,transparent 72%),
    radial-gradient(60% 95% at 8% 42%,rgba(139,197,224,.95) 0%,rgba(121,194,211,.72) 47%,transparent 82%),
    linear-gradient(105deg,#8bc5df 0%,#79c4cf 48%,#a7dfc1 100%);
}
.sky::before,.sky::after{
  content:"";
  position:absolute;
  width:120%;
  height:170%;
  border:2px solid rgba(255,255,255,.16);
  border-radius:50%;
  pointer-events:none;
}
.sky::before{
  left:-66%;
  top:-88%;
  transform:rotate(-3deg);
}
.sky::after{
  right:-62%;
  top:-96%;
  transform:rotate(12deg);
  border-color:rgba(255,255,255,.20);
}
#cloud-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.shade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,38,48,.20),rgba(8,45,50,.08) 46%,rgba(13,49,45,.18)),
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.02) 8%,rgba(7,47,52,.18) 120%);
}
.hero-shell{
  width:min(880px,calc(100% - 36px));
  margin:44px auto;
  padding:34px 38px 30px;
  text-align:center;
  color:#fbfffd;
  background:rgba(14,55,62,.34);
  border:1px solid rgba(255,255,255,.28);
  border-radius:22px;
  box-shadow:0 24px 80px rgba(23,77,82,.22);
  backdrop-filter:blur(14px) saturate(112%);
  -webkit-backdrop-filter:blur(14px) saturate(112%);
}
.hero-mark{width:84px;height:84px;margin:0 auto 8px;opacity:.96}
.hero-mark svg{width:100%;height:100%}
.hero-mark g{transform-origin:80px 80px;animation:spin 20s linear infinite}
.hero-mark circle,.hero-mark ellipse,.hero-mark path{
  fill:none;stroke:#f7fffb;stroke-width:1.25
}
.brand{
  margin:0 0 8px;
  font-size:.67rem;
  letter-spacing:.28em;
  font-weight:750;
  color:#effff8;
}
.hero h1{
  margin:0;
  font-size:clamp(2.5rem,6vw,5.3rem);
  line-height:1.04;
  font-weight:350;
  letter-spacing:-.02em;
  text-shadow:0 3px 18px rgba(10,58,63,.34);
}
.sub{
  margin:10px 0 22px;
  color:#eafff6;
  font-weight:600;
  text-shadow:0 2px 10px rgba(7,57,61,.24);
}
.role-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 auto 22px;
  text-align:left;
}
.role{
  padding:18px 18px 16px;
  background:rgba(8,46,52,.38);
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
}
.role-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px
}
.role-head>div{display:flex;align-items:baseline;gap:8px}
.role-index{
  color:#cffff0;
  font-size:.64rem;
  letter-spacing:.10em;
  font-weight:800;
}
.role h2{
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
  color:#fff;
}
.role-head strong{
  color:#d9fff0;
  font-size:.78rem;
  white-space:nowrap;
}
.role p{
  margin:0;
  color:#eefaf7;
  font-size:.86rem;
  line-height:1.55;
}
.role-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:10px;
  color:#d4ece8;
  font-size:.72rem;
}
.cta{
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  background:#f5fff9;
  color:#174448;
  text-decoration:none;
  font-size:.82rem;
  font-weight:800;
  box-shadow:0 6px 22px rgba(13,68,73,.18);
}
.cta:hover{background:#fff}

.apply{
  background:linear-gradient(135deg,#edf8fc 0%,#e9f8ef 100%);
  color:#15383d;
  padding:64px max(16px,calc((100vw - 1180px)/2)) 76px;
  border-top:1px solid rgba(37,112,119,.10);
}
.apply-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px
}
.apply-head p{
  margin:0 0 5px;color:#3e8894;font-size:.65rem;letter-spacing:.18em;font-weight:800
}
.apply-head h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);font-weight:450}
.apply-head a{color:#50757a;text-decoration:none;font-size:.72rem;letter-spacing:.08em}
.apply-head a:hover{color:#173d42}
.form-frame{
  background:#fff;
  border:1px solid rgba(31,104,111,.13);
  overflow:hidden;
  box-shadow:0 18px 48px rgba(35,112,116,.10);
}
.form-frame iframe{display:block;width:100%;min-height:1200px;border:0;background:#fff}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
  .hero{place-items:start center}
  .hero-shell{margin:22px auto;padding:24px 16px 20px;border-radius:18px}
  .hero-mark{width:68px;height:68px}
  .brand{font-size:.58rem}
  .hero h1{font-size:clamp(2.2rem,11vw,4rem)}
  .role-list{grid-template-columns:1fr}
  .role{padding:15px}
  .apply{padding:50px 10px 62px}
  .apply-head{align-items:flex-start;flex-direction:column}
  .form-frame iframe{min-height:1350px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-mark g{animation:none!important}
}