*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#030812;--blue:#1499ff;--cyan:#65c8ff;--text:#eef5ff}
html,body{min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden;background:
radial-gradient(circle at 50% 48%,rgba(0,91,180,.18),transparent 32%),
linear-gradient(145deg,#02050b,#06101d 55%,#02050b)}
.maintenance-page{min-height:100vh;max-width:1180px;margin:auto;padding:52px 28px 34px;position:relative;z-index:2}
.brand{text-align:center;animation:fadeDown 1s ease both}
.brand-mark{width:58px;height:58px;margin:auto;border:3px solid var(--blue);border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:800;color:#fff;box-shadow:0 0 28px rgba(20,153,255,.55),inset 0 0 18px rgba(20,153,255,.2)}
.brand-name{font-size:29px;font-weight:800;margin-top:12px;letter-spacing:-1px}.brand-name span{color:var(--cyan)}
.hero{text-align:center;padding-top:42px;animation:fadeUp 1s .15s ease both}
.eyebrow{font-size:18px;letter-spacing:10px;color:#e9eff8;margin-bottom:12px}
h1{font-size:clamp(42px,7vw,78px);line-height:1.05;letter-spacing:2px;font-weight:900}
h1 span{color:var(--cyan);text-shadow:0 0 30px rgba(20,153,255,.4)}
.glow-line{height:2px;width:260px;margin:22px auto;background:linear-gradient(90deg,transparent,var(--blue),transparent);box-shadow:0 0 14px var(--blue)}
.message{font-size:18px;line-height:1.65;color:#c6d0dd}
.work-area{height:310px;max-width:820px;margin:26px auto 0;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0}
.laptop{width:410px;position:relative;z-index:3;filter:drop-shadow(0 20px 35px rgba(0,91,180,.35))}
.screen{height:235px;border:2px solid #6aaee0;border-radius:15px 15px 8px 8px;background:linear-gradient(145deg,#0a1625,#02070d);box-shadow:0 0 30px rgba(20,153,255,.3),inset 0 0 45px rgba(20,153,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.screen:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);animation:shine 3s infinite}
.gear{position:absolute;color:#5fc1ff;text-shadow:0 0 16px #168fff;animation:spin 7s linear infinite}
.gear-large{font-size:75px;top:48px;left:155px}.gear-mid{font-size:52px;top:90px;left:94px;animation-duration:5s;animation-direction:reverse}.gear-small{font-size:44px;top:87px;right:78px;animation-duration:4s}
.progress{width:235px;height:15px;border:1px solid #3978a8;border-radius:20px;overflow:hidden;margin-top:75px;background:#08121e}
.progress span{display:block;width:72%;height:100%;background:linear-gradient(90deg,#116cff,#65d4ff);box-shadow:0 0 15px #168fff;animation:load 2.5s ease-in-out infinite alternate}
.screen strong{font-size:12px;letter-spacing:1px;margin-top:12px;color:#d8edff}
.keyboard{height:22px;width:455px;margin:-1px auto 0;background:linear-gradient(#9ab3c6,#536979);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);border-radius:0 0 8px 8px}
.barrier{position:absolute;left:30px;bottom:18px;width:175px;height:78px;border:6px solid #6e8292;border-top-width:7px;background:repeating-linear-gradient(135deg,#168dff 0 18px,#071522 18px 36px);transform:skewY(-3deg);box-shadow:0 10px 25px #000;z-index:4}
.cone{position:absolute;right:55px;bottom:14px;width:50px;height:92px;background:linear-gradient(90deg,#0874d1,#65caff,#0874d1);clip-path:polygon(50% 0,75% 25%,100% 100%,0 100%,25% 25%);filter:drop-shadow(0 10px 15px #000);z-index:4}
.helmet{position:absolute;right:135px;bottom:20px;width:88px;height:55px;background:linear-gradient(145deg,#58c6ff,#0870cf);border-radius:55px 55px 15px 15px;box-shadow:0 12px 20px #000;z-index:5;color:transparent}
.updates{max-width:920px;margin:0 auto;border:1px solid rgba(65,153,225,.35);border-radius:18px;background:rgba(5,18,31,.72);backdrop-filter:blur(10px);display:grid;grid-template-columns:repeat(4,1fr);padding:24px 18px;animation:fadeUp 1s .4s ease both}
.update{display:flex;align-items:center;justify-content:center;gap:13px;padding:8px 15px;border-right:1px solid rgba(65,153,225,.35)}.update:last-child{border:0}
.icon{font-size:31px;color:#4dbbff;text-shadow:0 0 14px rgba(20,153,255,.5)}.update b{display:block;font-size:12px;color:#43b8ff;letter-spacing:.5px}.update small{display:block;color:#d4dce6;font-size:12px;margin-top:6px}
footer{text-align:center;padding-top:38px}.stay{font-size:14px;letter-spacing:7px;font-weight:700}.footer-line{width:44px;height:2px;background:#3eb8ff;margin:10px auto;box-shadow:0 0 10px #3eb8ff}.thanks{color:#bac5d2}.socials{display:flex;justify-content:center;gap:20px;margin:22px 0}.socials a{width:44px;height:44px;border:1px solid #168fff;border-radius:50%;display:grid;place-items:center;color:#57c5ff;text-decoration:none;font-weight:700;transition:.3s}.socials a:hover{background:#168fff;color:#fff;box-shadow:0 0 22px #168fff;transform:translateY(-4px)}.copyright{font-size:11px;color:#657487;margin-top:18px}
.particles{position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(#3faeff 1px,transparent 1px);background-size:110px 110px;animation:drift 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes shine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}@keyframes load{from{width:35%}to{width:82%}}@keyframes drift{to{background-position:110px 110px}}@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@media(max-width:760px){.maintenance-page{padding:32px 16px}.eyebrow{font-size:12px;letter-spacing:6px}h1{font-size:42px}.message{font-size:15px}.work-area{height:260px}.laptop{width:290px}.screen{height:175px}.gear-large{font-size:55px;left:108px;top:30px}.gear-mid{font-size:38px;left:55px;top:65px}.gear-small{font-size:34px;right:45px;top:63px}.progress{width:170px;margin-top:55px}.keyboard{width:320px}.barrier{left:0;width:105px;height:58px}.cone{right:0;width:38px;height:72px}.helmet{right:65px;width:62px;height:40px}.updates{grid-template-columns:1fr 1fr;gap:8px}.update{border-right:0;border-bottom:1px solid rgba(65,153,225,.25)}.update:nth-child(odd){border-right:1px solid rgba(65,153,225,.25)}.update:nth-last-child(-n+2){border-bottom:0}.update{justify-content:flex-start}.brand-name{font-size:24px}}
