:root { --navy:#07194b; --blue:#102b8f; --royal:#1713ec; --red:#ef3544; --gold:#ffd91a; --ink:#101b3f; --muted:#617091; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--navy); }
.maintenance-page { position:relative; min-height:100svh; overflow:hidden; display:grid; place-items:center; padding:42px 24px 78px; background:radial-gradient(circle at 12% 18%,rgba(45,75,240,.45),transparent 30%),radial-gradient(circle at 88% 86%,rgba(239,53,68,.25),transparent 32%),linear-gradient(135deg,#06113a 0%,#0b215e 52%,#081744 100%); }
.maintenance-page::before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 90%); }
.ambient { position:absolute; border-radius:999px; filter:blur(3px); opacity:.65; }
.ambient-one { width:320px; height:320px; top:-170px; right:8%; border:1px solid rgba(255,255,255,.22); box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018); }
.ambient-two { width:180px; height:180px; left:-70px; bottom:10%; background:rgba(239,53,68,.1); border:1px solid rgba(255,255,255,.12); }
.maintenance-card { position:relative; z-index:1; width:min(1080px,100%); min-height:610px; display:grid; grid-template-columns:.86fr 1.14fr; overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:34px; background:rgba(255,255,255,.98); box-shadow:0 32px 90px rgba(0,5,30,.5); }
.brand-panel { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:52px 42px; color:white; text-align:center; background:radial-gradient(circle at 50% 35%,rgba(50,53,255,.7),transparent 46%),linear-gradient(155deg,#07194b 0%,#102b8f 100%); }
.brand-panel::after { content:""; position:absolute; inset:auto -70px -105px auto; width:230px; height:230px; border-radius:50%; border:42px solid rgba(239,53,68,.28); }
.status-pill { position:absolute; top:28px; left:28px; display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:rgba(255,255,255,.88); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.08); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(255,217,26,.14); animation:pulse 1.8s ease-in-out infinite; }
.logo-shell { width:238px; height:238px; display:grid; place-items:center; padding:13px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.98); box-shadow:0 20px 50px rgba(0,0,0,.24),0 0 0 11px rgba(255,255,255,.06); overflow:hidden; }
.institution-logo { display:block; width:100%; height:100%; object-fit:contain; }
.institution-name { max-width:320px; margin:34px 0 0; color:rgba(255,255,255,.76); font-size:15px; line-height:1.6; letter-spacing:.04em; text-transform:uppercase; }
.institution-name strong { display:block; margin-top:3px; color:white; font-size:18px; letter-spacing:.02em; }
.content-panel { display:flex; flex-direction:column; justify-content:center; padding:62px 64px; }
.eyebrow { margin:0 0 16px; color:var(--red); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1 { max-width:580px; margin:0; color:var(--ink); font-size:clamp(40px,4.4vw,62px); line-height:1.02; letter-spacing:-.052em; }
.intro { max-width:570px; margin:24px 0 30px; color:var(--muted); font-size:17px; line-height:1.75; }
.redirect-box { padding:20px 22px 18px; border:1px solid #dfe5f3; border-radius:19px; background:#f7f9fe; }
.countdown-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.countdown-label,.destination { display:block; }
.countdown-label { color:#73809d; font-size:13px; }
.destination { margin-top:5px; color:var(--ink); font-size:15px; font-weight:800; }
.countdown-number { display:flex; align-items:baseline; gap:5px; min-width:77px; color:var(--blue); }
.countdown-number strong { font-size:34px; line-height:1; }
.countdown-number span { color:#73809d; font-size:12px; font-weight:700; }
.progress-track { height:7px; margin-top:17px; overflow:hidden; border-radius:999px; background:#dfe5f3; }
.progress-bar { height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--royal),var(--red)); transition:width .9s linear; }
.redirect-button { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; margin-top:16px; padding:17px 22px; border-radius:15px; color:white; font-size:15px; font-weight:800; text-decoration:none; background:linear-gradient(135deg,#142f92,#1511e8); box-shadow:0 13px 28px rgba(23,19,236,.22); transition:transform .2s ease,box-shadow .2s ease; }
.redirect-button:hover { transform:translateY(-2px); box-shadow:0 17px 34px rgba(23,19,236,.29); }
.redirect-button:focus-visible { outline:3px solid rgba(239,53,68,.35); outline-offset:3px; }
.redirect-button span { font-size:21px; }
.note { margin:14px 0 0; color:#8a94aa; font-size:12px; line-height:1.55; text-align:center; }
footer { position:absolute; z-index:1; bottom:24px; color:rgba(255,255,255,.62); font-size:12px; letter-spacing:.03em; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.72);opacity:.72} }
@media (max-width:820px) { .maintenance-page{align-items:start;padding:18px 15px 68px;overflow:auto}.maintenance-card{grid-template-columns:1fr;min-height:auto;border-radius:25px}.brand-panel{min-height:320px;padding:70px 28px 32px}.logo-shell{width:170px;height:170px}.institution-name{margin-top:24px;font-size:12px}.institution-name strong{font-size:15px}.content-panel{padding:38px 28px 34px}h1{font-size:clamp(35px,11vw,48px)}.intro{margin:19px 0 24px;font-size:15px}footer{position:absolute;bottom:20px} }
@media (max-width:430px) { .brand-panel{min-height:286px}.status-pill{top:20px;left:20px}.logo-shell{width:145px;height:145px}.content-panel{padding:34px 22px 30px}.redirect-box{padding:17px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }