:root{--navy:#0c2447;--blue:#2878f0;--cyan:#12b8d4;--muted:#71849a;--line:#d5e4f1;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans Thai","Segoe UI",Tahoma,sans-serif}
body{color:var(--navy);background:#eef6fc;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
.welcome-page{overflow:hidden}
.welcome-shell{position:relative;display:grid;min-height:100vh;place-items:center;overflow:hidden;padding:36px 22px;background:radial-gradient(circle at 14% 14%,rgba(18,184,212,.13),transparent 28rem),radial-gradient(circle at 88% 80%,rgba(40,120,240,.15),transparent 30rem),linear-gradient(145deg,#fafdff,#eaf4fb)}
.welcome-grid{position:absolute;inset:0;opacity:.34;background-image:linear-gradient(rgba(40,120,240,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(40,120,240,.075) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.welcome-orb{position:absolute;border:1px solid rgba(40,120,240,.16);border-radius:50%;pointer-events:none;animation:orb-float 7s ease-in-out infinite}
.orb-one{top:-130px;right:-90px;width:380px;height:380px;box-shadow:0 0 0 35px rgba(40,120,240,.025),0 0 0 75px rgba(18,184,212,.018)}
.orb-two{bottom:-170px;left:-100px;width:330px;height:330px;animation-delay:-3s}
.welcome-intro,.welcome-choices{position:relative;z-index:2;width:min(880px,100%);text-align:center;transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s}
.welcome-logo{width:86px;height:86px;margin-bottom:17px;filter:drop-shadow(0 15px 22px rgba(25,81,153,.17));animation:logo-arrive .7s var(--ease) both}
.welcome-kicker{margin:0;color:var(--blue);font-size:.7rem;font-weight:850;letter-spacing:.22em}
.welcome-intro h1{margin:8px 0 0;font-size:clamp(2.6rem,7vw,5.8rem);line-height:1.08;letter-spacing:-.055em}
.welcome-intro>p:not(.welcome-kicker){margin:13px 0 30px;color:#587089;font-size:clamp(.95rem,2vw,1.15rem)}
.welcome-enter{display:inline-flex;align-items:center;gap:18px;min-height:52px;border:1px solid #c8dced;border-radius:99px;background:rgba(255,255,255,.82);color:#183c69;padding:8px 10px 8px 23px;font-weight:750;cursor:pointer;box-shadow:0 13px 35px rgba(24,73,127,.1);backdrop-filter:blur(12px);transition:.25s var(--ease)}
.welcome-enter i{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-style:normal;transition:.25s var(--ease)}
.welcome-enter:hover{border-color:#9fc4e7;transform:translateY(-3px);box-shadow:0 18px 38px rgba(24,73,127,.16)}
.welcome-enter:hover i{transform:translateX(2px)}
.welcome-enter:focus-visible,.portal-card:focus-visible,.welcome-back:focus-visible{outline:3px solid rgba(40,120,240,.28);outline-offset:4px}
.welcome-intro>small{display:block;margin-top:14px;color:#8a9bae;font-size:.7rem}
.welcome-choices{position:absolute;visibility:hidden;opacity:0;transform:translateY(25px) scale(.985);pointer-events:none}
.choice-heading h2{margin:7px 0 0;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.04em}
.choice-heading>p:last-child{margin:5px 0 25px;color:var(--muted)}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;text-align:left}
.portal-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:17px;min-height:145px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.92);color:var(--navy);padding:23px;text-decoration:none;box-shadow:0 13px 40px rgba(25,70,119,.1);transition:.28s var(--ease)}
.portal-card:hover{border-color:#a9c9e7;transform:translateY(-5px);box-shadow:0 22px 48px rgba(25,70,119,.16)}
.portal-icon{display:grid;width:51px;height:51px;place-items:center;border-radius:14px;background:#edf5ff;color:var(--blue);font-size:1.65rem;font-weight:400}
.portal-card>span:nth-child(2){display:grid}
.portal-card small{color:var(--blue);font-size:.67rem;font-weight:800}
.portal-card strong{margin:2px 0;color:#102e53;font-size:1.07rem}
.portal-card em{color:#71849a;font-size:.74rem;font-style:normal;line-height:1.5}
.portal-card>i{color:#7b91aa;font-style:normal;font-size:1.2rem;transition:.22s}
.portal-card:hover>i{color:var(--blue);transform:translateX(3px)}
.portal-staff .portal-icon{background:#eafaff;color:#0e99b3}
.welcome-back{margin-top:22px;border:0;background:transparent;color:#71849a;font-size:.78rem;cursor:pointer}
.welcome-back:hover{color:var(--blue)}
.welcome-shell.is-choosing .welcome-intro{visibility:hidden;opacity:0;transform:translateY(-22px) scale(.98);pointer-events:none}
.welcome-shell.is-choosing .welcome-choices{visibility:visible;opacity:1;transform:none;pointer-events:auto}
.welcome-shell footer{position:absolute;z-index:2;bottom:20px;color:#8a9bad;font-size:.67rem}
@keyframes logo-arrive{from{opacity:0;transform:translateY(15px) scale(.88)}to{opacity:1;transform:none}}
@keyframes orb-float{50%{transform:translate3d(0,14px,0) scale(1.025)}}
@media(max-width:680px){.welcome-shell{padding:28px 16px 54px}.choice-grid{grid-template-columns:1fr}.portal-card{min-height:118px;padding:18px}.welcome-intro h1{font-size:3rem}.welcome-logo{width:72px;height:72px}.welcome-shell footer{bottom:14px}}
@media(max-height:600px){.welcome-logo{width:62px;height:62px;margin-bottom:8px}.welcome-intro>p:not(.welcome-kicker){margin:8px 0 18px}.portal-card{min-height:105px}.choice-heading>p:last-child{margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}