:root{--bg:#0b0f1a;--bg2:#121829;--accent:#9ee8ff;--accent2:#7c9dff;--text:#e6f0ff;--muted:#9aa6b2}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 10% -10%,#24304d55,transparent 60%),radial-gradient(900px 500px at 110% 10%,#2a3e5f44,transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg));color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans Thai",sans-serif}
.backdrop .grid{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0 40%,#0b0f1a 70%),repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 80px);mix-blend-mode:overlay;pointer-events:none}
.vignette{position:absolute;inset:0;box-shadow:inset 0 0 250px 80px #000}
#particles{position:absolute;inset:0;filter:blur(.3px);opacity:.55}
#bgvideo{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-3}
main{position:relative;z-index:2;display:grid;place-items:center;height:100vh;padding:24px}
.center{display:grid;place-items:center;gap:16px;text-align:center}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,#101828,#0b1324);border:1px solid #2a3b5e;box-shadow:0 10px 30px #0008,inset 0 0 30px #56b6ff0f;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:.9}
.badge .dot{width:6px;height:6px;border-radius:50%;background:#7ef9ff;box-shadow:0 0 8px 3px #7ef9ffaa}
.logo{font-weight:800;letter-spacing:.35em;text-indent:.35em;font-size:14px;text-transform:uppercase;opacity:.85;color:var(--muted)}
.logo-img{height:200px;object-fit:contain}
.ring{position:relative;width:min(58vmin,520px);height:min(58vmin,520px);border-radius:50%;display:grid;place-items:center}
.ring:before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0 150deg,rgba(146,204,255,.25) 170deg 190deg,transparent 210deg 360deg);filter:blur(1px);animation:spin 18s linear infinite}
.ring:after{content:"";position:absolute;inset:4%;border-radius:inherit;background:radial-gradient(circle at 50% 45%,#89b4ff22,transparent 60%),radial-gradient(circle at 60% 60%,#86ffe522,transparent 55%),radial-gradient(circle at 40% 70%,#8bb4ff14,transparent 50%);filter:blur(6px)}
h1{font-size:clamp(32px,8vw,86px);margin:10px 0 6px 0;line-height:1;background:linear-gradient(180deg,#ffffff,#bcd9ff 50%,#8db3ff 60%,#74e9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 20px #56b6ff33,0 0 40px #56b6ff22;animation:pulse 3.5s ease-in-out infinite}
.sub{font-size:clamp(12px,2.3vw,18px);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
footer{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:#7f8aa5}
@keyframes pulse{0%,100%{text-shadow:0 0 12px #56b6ff22}50%{text-shadow:0 0 28px #56b6ff55}}
@keyframes spin{to{transform:rotate(1turn)}}
.social-fb{margin-top:20px;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background: linear-gradient(180deg, rgba(16,24,40,.72), rgba(11,19,36,.72)); border:1px solid #2a3b5e; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
.social-fb:hover{ transform: translateY(-1px) scale(1.05); box-shadow: 0 14px 36px rgba(24,119,242,.35), 0 0 0 6px rgba(24,119,242,.18); background: linear-gradient(180deg, rgba(16,24,40,.82), rgba(11,19,36,.82)); }
.social-fb svg{ width:24px; height:24px; fill:#fff; filter: drop-shadow(0 0 8px rgba(24,119,242,.55)); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }