:root{
  --blue-900:#0a3d91;
  --blue-800:#0f4fb3;
  --blue-700:#1b63d1;
  --blue-600:#2a73e8;
  --blue-500:#3b82f6;
  --white:#ffffff;
  --slate-900:#0f172a;
  --slate-600:#475569;
  --slate-200:#e2e8f0;
  --slate-100:#f1f5f9;
}
body{margin:0;font-family:sans-serif;background:var(--slate-100);color:var(--slate-900)}
.navbar{background:linear-gradient(0deg,var(--blue-800),var(--blue-900));color:#fff;position:sticky;top:0;z-index:50}
.navbar .wrap{max-width:1200px;margin:auto;padding:14px;display:flex;align-items:center;gap:16px}
.nav a{color:#fff;text-decoration:none;padding:8px 2px;position:relative;font-weight:600;opacity:.95}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#fff;transform:scaleX(0);transition:transform .25s ease}
.nav a:hover::after{transform:scaleX(1)}
.cta-btn{background:#fff;color:var(--blue-900);border-radius:999px;padding:8px 14px;font-weight:700;text-decoration:none}
#splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--blue-900);color:#fff;z-index:1000}
#splash .inner{display:flex;flex-direction:column;align-items:center;gap:16px}
#splash .inner img{width:120px}
.word{font-size:56px;font-weight:900;line-height:1;height:64px;overflow:hidden}
.word span{display:inline-block;transform:translateY(100%);opacity:0;animation:slideUp 2s forwards}
.word .second{animation-delay:2.1s}
@keyframes slideUp{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
.fade-out{animation:splashFade .6s ease forwards}
@keyframes splashFade{to{opacity:0;visibility:hidden}}
.container{max-width:1200px;margin:auto;padding:32px 16px}
.card{background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:18px}
footer{background:var(--blue-900);color:#dbeafe;margin-top:40px;padding:24px}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.badge{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge.ok{background:#e6ffef;color:#076b38}
.badge.warn{background:#fff7ed;color:#9a3412}
.badge.down{background:#fee2e2;color:#991b1b}
.progress{height:10px;border-radius:999px;background:var(--slate-200);overflow:hidden}
.progress > i{display:block;height:100%;width:0%;background:var(--blue-500);animation:grow 1.8s forwards}
@keyframes grow{from{width:0%}to{width:var(--to,85%)}}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}