:root{--navy:#030b1d;--blue:#1267ff;--cyan:#4bdcff;--ice:#e9f4ff;--muted:#8fa8c9;--line:rgba(118,174,255,.17);--card:rgba(8,27,65,.7)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ice);font-family:"Noto Sans Thai",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(53,115,230,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(53,115,230,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}a{color:inherit;text-decoration:none}.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden}.ambient span{position:absolute;border-radius:50%;filter:blur(120px);opacity:.16}.ambient span:nth-child(1){width:520px;height:520px;background:#075dff;top:-200px;right:-100px}.ambient span:nth-child(2){width:450px;height:450px;background:#00a8e8;top:45%;left:-250px}.ambient span:nth-child(3){width:300px;height:300px;background:#6246ea;bottom:-100px;right:15%}.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:auto;padding:0 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:"Chakra Petch",sans-serif;letter-spacing:.05em}.brand-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #3985ff;color:var(--cyan);font-weight:700;font-size:23px;transform:rotate(45deg);box-shadow:0 0 18px rgba(23,114,255,.45)}.brand-icon::first-letter{transform:rotate(-45deg)}.brand span:last-child{display:flex;flex-direction:column}.brand b{font-size:16px}.brand small{font-size:8px;color:var(--muted);letter-spacing:.24em}.site-header nav{display:flex;gap:32px;align-items:center;font-size:13px;color:#b8cbe4}.site-header nav a:hover{color:#fff}.nav-cta{border:1px solid #246edb;padding:11px 18px;color:#fff!important}.hero{min-height:690px;max-width:1280px;margin:auto;padding:90px 48px 70px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;position:relative}.course-label,.section-heading>span{font-family:"Chakra Petch",sans-serif;color:#71aaff;font-size:13px;letter-spacing:.18em;font-weight:600}.course-label span{display:inline-block;width:30px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:10px}.hero h1{font-size:clamp(54px,6.6vw,94px);line-height:.98;margin:24px 0 15px;letter-spacing:-.055em;font-weight:700}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #4da1ff;text-shadow:0 0 40px rgba(31,112,255,.28)}.english-title{font-family:"Chakra Petch",sans-serif;font-weight:600;letter-spacing:.2em;font-size:17px;color:#d7e9ff}.english-title span{color:var(--cyan)}.lead{max-width:620px;color:#9fb5d2;line-height:1.8;font-size:17px}.hero-actions{display:flex;gap:14px;margin-top:34px}.button{min-height:50px;padding:0 23px;display:inline-flex;align-items:center;justify-content:center;gap:22px;border:1px solid #285897;font:600 14px "Noto Sans Thai",sans-serif;cursor:pointer}.button.primary{color:white;background:linear-gradient(100deg,#0b5de9,#1489ff);border-color:#338aff;box-shadow:0 12px 35px rgba(0,91,255,.28)}.button.primary:hover{filter:brightness(1.15)}.button.ghost:hover{background:rgba(43,109,211,.12)}.hero-visual{height:480px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(74,148,255,.19);border-radius:50%}.orbit-one{width:430px;height:430px;animation:spin 28s linear infinite}.orbit-two{width:310px;height:310px;border-style:dashed;animation:spin 18s linear infinite reverse}@keyframes spin{to{transform:rotate(360deg)}}.controller{width:330px;height:205px;border-radius:45% 45% 38% 38%;transform:rotate(-8deg);background:linear-gradient(145deg,#123369,#071834);border:2px solid #327deb;box-shadow:inset 0 0 50px rgba(35,116,255,.18),0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(15,101,255,.2);position:relative}.controller:before,.controller:after{content:"";position:absolute;width:105px;height:120px;background:#07162f;bottom:-54px;border:2px solid #2464c4;z-index:-1}.controller:before{left:2px;transform:rotate(22deg);border-radius:10px 15px 45px 55px}.controller:after{right:2px;transform:rotate(-22deg);border-radius:15px 10px 55px 45px}.controller-glow{position:absolute;inset:20px;border:1px solid rgba(79,166,255,.2);border-radius:50%}.pad{position:absolute;left:62px;top:73px}.pad i{position:absolute;background:#75a9df;box-shadow:0 0 8px #1a84ff}.pad i:first-child{width:57px;height:17px;left:-20px;top:0}.pad i:last-child{width:17px;height:57px;top:-20px;left:0}.buttons{position:absolute;right:77px;top:67px;width:63px;height:63px}.buttons i{position:absolute;width:17px;height:17px;border-radius:50%;border:2px solid #5fd4ff;background:#123669}.buttons i:nth-child(1){top:0;left:23px}.buttons i:nth-child(2){top:23px;right:0}.buttons i:nth-child(3){bottom:0;left:23px}.buttons i:nth-child(4){top:23px;left:0}.screen{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);text-align:center;font:9px "Chakra Petch";color:#5d91d3}.screen b{font-size:11px;color:#58d9ff}.pixel-card{position:absolute;padding:14px 18px;border:1px solid #2368c4;background:rgba(7,22,52,.8);backdrop-filter:blur(8px);font:10px "Chakra Petch";letter-spacing:.15em;color:#79a8e5}.pixel-card b{font-size:17px;color:#e9f7ff}.card-one{left:3%;top:12%}.card-two{right:0;bottom:14%}.course-strip{border-block:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.6fr 1.1fr .8fr;max-width:1280px;margin:auto}.course-strip div{padding:23px 30px;border-right:1px solid var(--line)}.course-strip div:last-child{border:0}.course-strip small{display:block;font:10px "Chakra Petch";letter-spacing:.17em;color:#5b7da8;margin-bottom:8px}.course-strip strong{font-size:14px}.section{max-width:1280px;margin:auto;padding:110px 48px;position:relative;border-bottom:1px solid var(--line);display:grid;grid-template-columns:90px .85fr 1.15fr;gap:30px}.section-number{font:600 12px "Chakra Petch";color:#3164a5;padding-top:5px}.section-heading h2{font-size:clamp(34px,4vw,55px);line-height:1.23;letter-spacing:-.04em;margin:18px 0 0}.about-copy{padding-top:35px;max-width:570px}.about-copy p{color:#9eb4d0;line-height:1.95;margin:0 0 20px}.outcomes,.materials{grid-template-columns:90px 1fr}.outcomes .skill-grid,.materials>div:not(.section-number):not(.section-heading){grid-column:2}.skill-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:50px;border:1px solid var(--line)}.skill-grid article{background:#06132d;padding:32px;min-height:270px;position:relative;transition:.25s}.skill-grid article:hover{background:#09204a;transform:translateY(-4px)}.skill-grid article>b{font:11px "Chakra Petch";color:#416793}.skill-icon{display:block;color:var(--cyan);font-size:35px;margin:28px 0 24px}.skill-grid h3{font:600 20px "Chakra Petch";margin:0 0 13px}.skill-grid p{font-size:13px;line-height:1.7;color:#819ab9}.access-panel{margin-top:50px;border:1px solid #1e5195;background:linear-gradient(135deg,rgba(9,37,84,.78),rgba(3,15,39,.9));padding:50px;display:grid;grid-template-columns:210px 1fr;align-items:center;gap:55px;box-shadow:0 20px 90px rgba(0,0,0,.25);position:relative;overflow:hidden}.access-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(56,144,255,.04),transparent);transform:translateX(-100%);animation:scan 5s infinite}@keyframes scan{50%,100%{transform:translateX(100%)}}.lock-art{height:180px;position:relative;z-index:1;display:grid;place-items:center}.lock-shackle{width:93px;height:90px;border:12px solid #2878df;border-bottom:0;border-radius:50px 50px 0 0;position:absolute;top:0}.lock-body{width:140px;height:105px;display:grid;place-items:center;background:linear-gradient(145deg,#0d5ce0,#18a1ff);font-size:60px;line-height:.5;color:#c7efff;position:absolute;bottom:0;box-shadow:0 0 45px rgba(12,112,255,.4)}.access-copy{position:relative;z-index:1}.status{font:600 10px "Chakra Petch";color:#63b7ff;letter-spacing:.18em}.status i{display:inline-block;width:7px;height:7px;background:#31d1ff;border-radius:50%;box-shadow:0 0 10px #31d1ff;margin-right:8px}.access-copy h3{font-size:28px;margin:13px 0 5px}.access-copy>p{color:#8fa8c7;margin:0 0 27px}.access-copy label{display:block;font-size:12px;color:#b9cce4;margin-bottom:8px}.input-row{display:flex;gap:10px}.password-wrap{position:relative;flex:1}.password-wrap input{width:100%;height:52px;background:#030d22;color:#fff;border:1px solid #245a9d;padding:0 48px 0 17px;outline:0;font:15px "Noto Sans Thai"}.password-wrap input:focus{border-color:#44b8ff;box-shadow:0 0 0 3px rgba(38,141,255,.12)}.reveal{position:absolute;right:8px;top:7px;width:38px;height:38px;border:0;background:transparent;color:#5f87b9;cursor:pointer}.reveal.active{color:var(--cyan)}form>small{display:block;margin-top:8px;color:#577395;font-size:10px}.form-error{color:#ff8ba0!important;font-size:13px;margin:10px 0 0!important}.unlocked-head{margin-top:45px;display:flex;justify-content:space-between;color:#73e7c2;font-size:13px}.unlocked-head a{color:#7898bd;border-bottom:1px solid #38577a}.material-list{margin-top:14px}.material-card{display:grid;grid-template-columns:65px 1fr auto auto;gap:24px;align-items:center;padding:25px;border:1px solid var(--line);background:rgba(7,27,63,.7);margin-bottom:12px}.file-icon{width:58px;height:67px;display:grid;place-items:center;background:#0e54b6;color:#fff;font:700 11px "Chakra Petch";clip-path:polygon(0 0,75% 0,100% 22%,100% 100%,0 100%)}.material-card small{font:10px "Chakra Petch";color:#5f86b6}.material-card h3{margin:5px 0;font-size:18px}.material-card p{margin:0;color:#7891b1;font-size:12px}.file-type{font:11px "Chakra Petch";color:#74a7e7;border:1px solid #25558f;padding:6px 9px}.download-button{border:1px solid #2775da;padding:12px 16px;font-size:13px}.download-button:hover{background:#0b63d9}footer{max-width:1280px;margin:auto;padding:35px 48px;display:flex;justify-content:space-between;align-items:center;color:#617da2;font-size:11px}footer div{display:flex;align-items:center;gap:13px;font-family:"Chakra Petch"}footer b{color:#5fcfff;font-size:18px}footer a:hover{color:#fff}
@media(max-width:900px){.site-header nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:70px}.hero-visual{height:380px}.course-strip{grid-template-columns:1fr 1fr}.course-strip div:nth-child(2){border-right:0}.section,.outcomes,.materials{grid-template-columns:45px 1fr}.about-copy{grid-column:2}.skill-grid{grid-template-columns:1fr 1fr}.access-panel{grid-template-columns:140px 1fr;padding:35px;gap:30px}.lock-art{transform:scale(.75)}}
@media(max-width:600px){.site-header{height:72px;padding:0 18px}.nav-cta{padding:9px 11px}.hero{padding:65px 22px 45px;min-height:auto}.hero h1{font-size:49px}.lead{font-size:15px}.hero-actions{flex-direction:column;align-items:stretch}.hero-visual{height:330px;transform:scale(.82);margin-inline:-40px}.course-strip{grid-template-columns:1fr}.course-strip div{border-right:0;border-bottom:1px solid var(--line)}.section,.outcomes,.materials{padding:80px 22px;grid-template-columns:1fr;gap:15px}.section-number{display:none}.section-heading,.about-copy,.outcomes .skill-grid,.materials>div:not(.section-number):not(.section-heading){grid-column:1}.skill-grid{grid-template-columns:1fr;margin-top:30px}.skill-grid article{min-height:auto}.access-panel{grid-template-columns:1fr;padding:28px 20px}.lock-art{height:120px;margin-bottom:5px}.input-row{flex-direction:column}.material-card{grid-template-columns:50px 1fr}.file-type{display:none}.download-button{grid-column:1/-1;text-align:center}.material-card p{display:none}footer{padding:30px 22px;gap:20px;flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.orbit,.access-panel:after{animation:none}}