:root { --navy:#171c28; --blue:#316ddd; --cyan:#20cee8; --white:#f7faff; --muted:#aeb9ca; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--white); background:var(--navy); font-family:"Manrope","Noto Sans Thai",sans-serif; }
.maintenance { position:relative; isolation:isolate; min-height:100vh; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:3rem 1.5rem 5rem; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; }
.message { width:min(720px,100%); text-align:center; animation:enter .9s ease-out both; }
.company-logo { display:block; width:min(620px,92vw); height:auto; margin:0 auto 2.25rem; object-fit:contain; }
.status { display:inline-flex; align-items:center; gap:.65rem; padding:.55rem .95rem; border:1px solid rgba(49,109,221,.35); border-radius:99px; color:#b9c9ed; background:rgba(49,109,221,.1); font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.status span { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:pulse 1.8s infinite; }
h1 { margin:1.7rem 0 1.2rem; font-size:clamp(2.5rem,6vw,5.5rem); line-height:1.13; letter-spacing:-.055em; font-weight:400; }
h1 strong { color:transparent; background:linear-gradient(100deg,var(--blue),var(--cyan)); background-clip:text; -webkit-background-clip:text; font-weight:600; }
.message > p { margin:0; color:var(--muted); font-size:clamp(1rem,2vw,1.2rem); line-height:1.9; }
.divider { width:44px; height:1px; margin:2rem auto; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.message .company-name { color:#71809a; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.glow { position:absolute; z-index:-1; border-radius:50%; filter:blur(10px); opacity:.2; }.glow-one { width:440px; height:440px; top:-280px; right:-100px; background:var(--blue); }.glow-two { width:360px; height:360px; bottom:-270px; left:-100px; background:var(--cyan); }
footer { position:absolute; bottom:1.5rem; color:#566278; font-size:.68rem; letter-spacing:.08em; }
@keyframes enter { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } @keyframes pulse { 50% { opacity:.35; transform:scale(.8); } }
@media (max-width:600px) { .maintenance { padding-top:2rem; }.company-logo { width:100%; margin:0 auto 1.75rem; }h1 { letter-spacing:-.04em; } }
@media (prefers-reduced-motion:reduce) { .message,.status span { animation:none; } }