:root{
  --ink:#0b0c0a;--ink-2:#131511;--ink-3:#1b1e18;--line:#2a2e25;
  --paper:#f1f0e8;--paper-2:#bdbcb2;--mute:#7c7d73;
  --go:#c6ff3d;--go-deep:#9bd400;--warn:#ffb020;--down:#ff4b3e;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;color:var(--paper);font:16px/1.5 var(--sans);background:
  radial-gradient(1200px 500px at 85% -10%,rgba(198,255,61,.09),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 80px),var(--ink);
  min-height:100vh;overflow-x:hidden}
a{color:var(--go)}a:hover{color:#fff}

/* racing stripes die bij het laden voorbij schieten */
.stripes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stripes span{position:absolute;left:-60%;height:3px;width:55%;background:linear-gradient(90deg,transparent,var(--go));opacity:0;transform:skewX(-30deg);animation:zoom 1.1s cubic-bezier(.2,.7,.1,1) forwards}
.stripes span:nth-child(1){top:18%;animation-delay:.05s}
.stripes span:nth-child(2){top:22%;height:6px;animation-delay:.16s}
.stripes span:nth-child(3){top:27%;height:2px;animation-delay:.28s}
@keyframes zoom{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}

.top,main,.foot{position:relative;z-index:1;width:min(1080px,calc(100% - 40px));margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none;font:900 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.logo svg{width:40px;height:24px;color:var(--go)}
.logo em{font-style:normal;color:var(--go)}
.updated{font:12px var(--mono);color:var(--mute)}

.hero{padding:48px 0 40px}
.kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.25)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--mute);box-shadow:0 0 0 0 currentColor}
.hero[data-state=ok] .dot{background:var(--go);animation:pulse 1.8s infinite}
.hero[data-state=warn] .dot{background:var(--warn)}
.hero[data-state=down] .dot{background:var(--down);animation:pulse 1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(198,255,61,.55)}100%{box-shadow:0 0 0 14px rgba(198,255,61,0)}}
h1{margin:0;font:900 clamp(56px,11vw,132px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
h1 .go{color:var(--go);font-style:italic;display:inline-block;transform:skewX(-8deg);margin-right:.12em}
.sub{max-width:560px;margin:22px 0 0;color:var(--paper-2);font-size:18px}

.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:44px;background:var(--line);border:1px solid var(--line)}
.gauge{background:var(--ink-2);padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px}
.gauge .label{font:500 12px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.1em}
.gauge .value{display:flex;align-items:baseline;gap:6px}
.gauge b{font:900 56px/1 var(--display);color:var(--paper);font-variant-numeric:tabular-nums}
.gauge small{font:600 14px var(--mono);color:var(--mute)}
.bar{height:6px;background:var(--ink-3);overflow:hidden;transform:skewX(-20deg)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--go-deep),var(--go));transition:width 1.2s cubic-bezier(.2,.7,.1,1)}

.block{padding:34px 0;border-top:1px solid var(--line)}
h2{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
h2 span{font:600 12px var(--mono);color:var(--go);letter-spacing:.1em}
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.services li{background:var(--ink-2);padding:18px 20px;display:flex;align-items:center;gap:14px}
.services .nm{font-weight:600}
.services .dt{display:block;font-size:13px;color:var(--mute)}
.pill{margin-left:auto;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;white-space:nowrap;transform:skewX(-10deg)}
.pill.operational{color:var(--go)}.pill.degraded{color:var(--warn)}.pill.outage{color:var(--down)}.pill.maintenance{color:var(--paper-2)}

.history{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));gap:3px;height:52px}
.history i{display:block;background:var(--ink-3);border-radius:1px;transform-origin:bottom;animation:grow .6s cubic-bezier(.2,.7,.1,1) backwards}
.history i.ok{background:var(--go)}.history i.warn{background:var(--warn)}.history i.down{background:var(--down)}
@keyframes grow{from{transform:scaleY(0)}}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;font:12px var(--mono);color:var(--mute)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:var(--ink-3)}
.legend i.ok{background:var(--go)}.legend i.warn{background:var(--warn)}.legend i.down{background:var(--down)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.empty{border:1px dashed var(--line);padding:22px;color:var(--paper-2)}
.empty b{display:block;font:700 22px var(--display);text-transform:uppercase;color:var(--paper);margin-bottom:4px}
.item{border-left:3px solid var(--warn);background:var(--ink-2);padding:14px 16px;margin-bottom:10px}
.item h3{margin:0 0 4px;font-size:16px}.item p{margin:0;color:var(--paper-2);font-size:14px}
.item time{font:12px var(--mono);color:var(--mute)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:30px 0 40px;border-top:1px solid var(--line);font:13px var(--mono);color:var(--mute)}
.nojs{position:relative;z-index:1;text-align:center;color:var(--warn)}

@media (max-width:760px){.gauges{grid-template-columns:1fr}.services{grid-template-columns:1fr}.two{grid-template-columns:1fr;gap:10px}.history{gap:1px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.stripes{display:none}}