*{box-sizing:border-box}html{color-scheme:dark;background:#032219}body{margin:0;font-family:Noto Sans Thai,sans-serif;color:#f6fff8}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #96ffb2;outline-offset:6px}.skip{position:fixed;top:-80px;z-index:10;background:#fff;color:#032219;padding:12px}.skip:focus{top:8px}header{height:104px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;gap:24px;position:absolute;inset:0 0 auto;z-index:3;border-bottom:1px solid #dcf9c021;background:linear-gradient(#00251ce6,#00251c50)}.brand-logo{width:225px;height:auto;display:block}nav{display:flex;gap:40px;font-size:15px}nav a[aria-current]{color:#b0ffc0}nav a:hover{color:#eddaa2}.header-cta{padding:11px 22px;border:1px solid #dbd79780;border-radius:30px;font-size:14px}.hero{position:relative;isolation:isolate;min-height:780px;height:100svh;max-height:1100px;display:flex;align-items:center;overflow:hidden}.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#002c2299,transparent 70%),linear-gradient(0deg,#032219 0%,transparent 18%)}.hero-copy{padding:135px 0 100px 6%;width:57%;position:relative}.intro{color:#c8dfb2;font-size:14px;letter-spacing:1px}h1{font-size:clamp(58px,6.8vw,104px);font-weight:800;line-height:1.18;letter-spacing:-3px;margin:26px 0 0;color:#ffe9a5;background:linear-gradient(#fff7d8 15%,#f7dd8c 60%,#c7a14b);background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 12px #002214)}.gold-line{height:2px;width:70%;margin:22px 0 26px;background:linear-gradient(90deg,transparent,#e5dc8b,#b4ff5e,transparent);box-shadow:0 3px 18px #95f83d66}.hero-copy p{font-size:clamp(18px,2vw,28px);border-left:4px solid #9dfb64;padding-left:18px;margin:0 0 35px;text-shadow:0 2px 15px #002719}.actions{display:flex;gap:17px}.cta{min-width:210px;padding:15px 24px;border:2px solid #eee3a3;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:26px;color:#fff;font-weight:700;font-size:23px;transform:skew(-5deg)}.cta span{font-size:38px;line-height:1}.primary{background:linear-gradient(160deg,#ff31b5,#dc0085 48%,#78053a);box-shadow:0 0 20px #ff46ab40,inset 0 1px 10px #ffffff50}.secondary{background:linear-gradient(140deg,#06472acc,#003b25e6);box-shadow:inset 0 0 20px #4cff5522}.cta:hover{filter:brightness(1.12)}.demo-link{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:#d7e8d1;margin-top:30px}.play{border:1px solid #b5ceaa70;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:10px}.hero-bottom{position:absolute;bottom:30px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:12px;color:#a6c9b7}.discover{padding:55px 6% 65px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:#032219}.eyebrow{font-size:12px;color:#9feaa7}h2{font-size:32px;font-weight:600;margin:10px 0}.discover p{font-size:14px;color:#a3beae;margin:0}.discover>a{padding:15px 25px;border:1px solid #83bd9166;border-radius:7px}footer{padding:28px 6%;border-top:1px solid #ffffff16;display:flex;align-items:center;gap:30px;font-size:11px;color:#8aaa97}footer .brand-logo{width:135px}footer span:last-child{margin-left:auto}@media(max-width:1000px){.brand-logo{width:180px}.hero-copy{width:65%}.hero-background{object-position:58% center}.cta{min-width:170px;font-size:19px}.shade{background:linear-gradient(90deg,#002c22ce,transparent 95%),linear-gradient(0deg,#032219,transparent 20%)}}@media(max-width:640px){.brand-logo{width:200px}.hero{min-height:0;height:auto;max-height:none;display:block}.hero-background{height:clamp(340px,100vw,480px);object-position:100% top;mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%)}.shade{background:linear-gradient(0deg,#032219 0%,#032219 25%,transparent 68%)}.hero-copy{width:100%;padding:clamp(300px,86vw,400px) 6% 30px;background:linear-gradient(0deg,#032219 0%,#032219 18%,transparent 58%)}.intro{font-size:13px;letter-spacing:0}h1{font-size:clamp(46px,12.7vw,68px);letter-spacing:-2px;margin-top:14px;line-height:1.2}.gold-line{width:85%;margin:18px 0 22px}.hero-copy p{font-size:18px;margin-bottom:26px;padding-left:13px}.actions{gap:12px}.cta{min-width:0;min-height:56px;flex:1;padding:12px 15px;font-size:17px;border-radius:15px;gap:8px;transform:none}.cta span{font-size:28px}.demo-link{display:flex;width:fit-content;min-height:48px;font-size:12px;gap:9px;margin-top:19px}.hero-bottom{position:static;padding:0 6% 22px;gap:12px;align-items:center;font-size:11px}.hero-bottom a{display:flex;align-items:center;min-height:44px}.discover{padding:32px 6% 42px;align-items:stretch;flex-direction:column;gap:22px}h2{font-size:27px}.discover>a{font-size:14px;text-align:center;min-height:48px}footer{flex-wrap:wrap;gap:18px;padding:25px 6% max(25px,env(safe-area-inset-bottom))}footer .brand-logo{width:165px}footer span:last-child{margin-left:0;width:100%}}@media(max-width:360px){.actions{flex-direction:column}.cta{width:100%}.hero-bottom{flex-wrap:wrap}.hero-copy p{font-size:16px}}@media(max-width:950px)and (min-width:641px){.hero-copy{width:78%}.actions{flex-wrap:wrap}.cta{min-height:56px}}@media(max-height:500px)and (orientation:landscape){.hero{height:auto;min-height:580px}.hero-copy{padding-top:130px}.hero-background{height:100%}}.hero-logo{position:absolute;top:28px;left:6%;z-index:3;display:block}@media(max-width:640px){.hero-logo{top:max(22px,env(safe-area-inset-top));left:6%}}
