:root{--ink:#101a25;--muted:#607080;--line:#dce4e9;--paper:#f5f7f8;--card:#fff;--navy:#102a43;--teal:#08a88a;--teal-soft:#dff7f1;--amber:#e69a17;--red:#d94a48}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}main{min-height:100vh}
.site-header{width:min(1180px,calc(100% - 48px));height:88px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.16em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;letter-spacing:-.05em;font-size:15px}
.header-meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:650}.dot{width:9px;height:9px;border-radius:50%;background:#9aa6af;box-shadow:0 0 0 5px #e8ecef}.dot.operational{background:var(--teal);box-shadow:0 0 0 5px var(--teal-soft)}.dot.degraded{background:var(--amber);box-shadow:0 0 0 5px #fff0d5}.dot.outage{background:var(--red);box-shadow:0 0 0 5px #fde5e5}
.hero{width:min(1180px,calc(100% - 48px));min-height:370px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:48px}.eyebrow{margin:0 0 10px;color:var(--teal);font-size:11px;line-height:1;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
h1{margin:0;max-width:780px;font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-size:clamp(46px,7vw,86px);line-height:.96;font-weight:500;letter-spacing:-.045em}.hero-copy{max-width:650px;margin:24px 0 0;color:var(--muted);font-size:clamp(17px,2vw,21px);line-height:1.55}
.status-orb{position:relative;flex:0 0 auto;width:134px;height:134px;border:1px solid #cbd5db;border-radius:50%;display:grid;place-items:center}.status-orb:before,.status-orb:after{content:"";position:absolute;border:1px solid #dce4e9;border-radius:50%}.status-orb:before{inset:-18px}.status-orb:after{inset:-36px;opacity:.6}.status-orb span{width:54px;height:54px;border-radius:50%;background:#9aa6af;box-shadow:0 0 30px #9aa6af66}.status-orb.operational span{background:var(--teal);box-shadow:0 0 36px #08a88a77}.status-orb.degraded span{background:var(--amber);box-shadow:0 0 36px #e69a1766}.status-orb.outage span{background:var(--red);box-shadow:0 0 36px #d94a4866}
.summary-strip{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(3,1fr)}.summary-strip>div{min-height:112px;padding:28px clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid #ffffff1c}.summary-strip span{color:#9fb3c5;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.summary-strip strong{margin-top:8px;font-size:17px;font-weight:650}
.section{width:min(1180px,calc(100% - 48px));margin:0 auto;padding:84px 0 0}.section-heading{margin-bottom:28px;display:flex;align-items:end;justify-content:space-between;gap:20px}.section-heading h2{margin:0;color:var(--navy);font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,4vw,43px);font-weight:500;letter-spacing:-.025em}.section-heading button{border:1px solid var(--line);border-radius:99px;background:#fff;padding:10px 17px;color:var(--navy);cursor:pointer;font-size:12px;font-weight:700}.section-heading button:hover{border-color:var(--teal);color:var(--teal)}.section-heading button:focus-visible,.brand:focus-visible{outline:3px solid #08a88a55;outline-offset:3px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px #102a4308}.metric-card{padding:24px}.metric-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--navy);font-size:13px;font-weight:750}.metric-value{font-size:25px;letter-spacing:-.04em}.healthy{color:var(--teal)}.warning{color:var(--amber)}.critical{color:var(--red)}
.meter{height:5px;margin-top:24px;overflow:hidden;border-radius:99px;background:#e9eef1}.meter span{display:block;height:100%;border-radius:inherit;transition:width .6s ease}.meter .healthy{background:var(--teal)}.meter .warning{background:var(--amber)}.meter .critical{background:var(--red)}.metric-card p{margin:15px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.split-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:16px;padding-bottom:86px}.panel{padding:30px}.section-heading.compact{margin-bottom:20px;align-items:start}.section-heading.compact h2{font-size:30px}.service-list{border-top:1px solid var(--line)}.service-row{min-height:73px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line)}.service-row>div{display:flex;flex-direction:column;gap:4px}.service-row strong{color:var(--navy);font-size:14px}.service-row div span,.empty{color:var(--muted);font-size:12px}.badge{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:750;white-space:nowrap}.badge i{width:7px;height:7px;border-radius:50%;background:#9aa6af}.badge.operational{color:#087f6a}.badge.operational i{background:var(--teal)}.badge.degraded{color:#aa6d00}.badge.degraded i{background:var(--amber)}.badge.outage{color:#b43230}.badge.outage i{background:var(--red)}
.network-panel{display:flex;flex-direction:column}.network-state{flex:1;min-height:180px;display:flex;align-items:center;gap:22px}.network-state>div{display:flex;flex-direction:column;gap:5px}.network-state strong{color:var(--navy);font-size:20px}.network-state div span{color:var(--muted);font-size:12px}.network-icon{width:62px;height:62px;border-radius:50%;background:#edf1f3;display:flex;justify-content:center;align-items:end;gap:4px;padding-bottom:19px}.network-icon i{display:block;width:5px;border-radius:5px;background:#9aa6af}.network-icon i:nth-child(1){height:8px}.network-icon i:nth-child(2){height:14px}.network-icon i:nth-child(3){height:20px}.network-icon.operational{background:var(--teal-soft)}.network-icon.operational i{background:var(--teal)}.network-icon.degraded{background:#fff0d5}.network-icon.degraded i{background:var(--amber)}.network-icon.outage{background:#fde5e5}.network-icon.outage i{background:var(--red)}
.network-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.network-stats div{padding:22px 0 0;display:flex;flex-direction:column;gap:5px}.network-stats div+div{padding-left:20px;border-left:1px solid var(--line)}.network-stats span{color:var(--muted);font-size:10px;letter-spacing:.05em;text-transform:uppercase}.network-stats strong{color:var(--navy);font-size:18px}
footer{min-height:78px;padding:0 max(24px,calc((100% - 1180px)/2));background:#0c2033;color:#9fb3c5;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}footer span:first-child{color:#fff;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,1fr)}.split-grid{grid-template-columns:1fr}.status-orb{width:92px;height:92px}.status-orb:after{display:none}}
@media(max-width:620px){.site-header,.hero,.section{width:min(100% - 30px,1180px)}.site-header{height:72px}.brand>span:last-child{display:none}.hero{min-height:330px}.status-orb{display:none}.summary-strip{grid-template-columns:1fr}.summary-strip>div{min-height:82px;border-right:0;border-bottom:1px solid #ffffff1c}.section{padding-top:62px}.metric-grid{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.panel{padding:22px}.service-row{align-items:flex-start;padding:18px 0}.network-stats{grid-template-columns:1fr}.network-stats div+div{padding-left:0;border-left:0}footer{flex-direction:column;justify-content:center;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}