:root { color-scheme:dark light; --ink:#07152d; --surface:#0f2851; --line:#315c97; --text:#eef6ff; --muted:#aebfda; --azure:#58a9ff; --coral:#ff9b78; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--text); background:radial-gradient(circle at 76% 16%,#1c5598 0,transparent 29rem),var(--ink); }
main { width:min(1060px,calc(100% - 3rem)); min-height:100svh; margin:auto; display:flex; flex-direction:column; }
.wordmark { margin-top:2rem; color:var(--text); text-decoration:none; letter-spacing:-.07em; font-size:1.25rem; font-weight:850; } .wordmark span { color:var(--azure); }
.hero { padding:clamp(6rem,16vh,12rem) 0 clamp(4rem,10vh,7rem); max-width:850px; }
.eyebrow { margin:0 0 1rem; color:var(--azure); font-size:.75rem; letter-spacing:.16em; font-weight:800; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:1.5rem; font-size:clamp(3.3rem,8vw,7rem); line-height:.92; letter-spacing:-.08em; } h1 span { color:var(--azure); }
.intro { max-width:650px; color:var(--muted); font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.65; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.3rem; }.button { border-radius:999px; padding:.85rem 1.2rem; font-weight:780; text-decoration:none; }.primary { background:var(--azure); color:#07152d; }.secondary { border:1px solid var(--line); color:var(--text); }
.status { display:flex; gap:1rem; align-items:flex-start; padding:1.5rem; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 84%,transparent); }.status-mark { flex:none; width:.8rem; height:.8rem; margin-top:.45rem; border-radius:50%; background:var(--muted); box-shadow:0 0 0 5px color-mix(in srgb,var(--muted) 16%,transparent); }.status-mark.online { background:var(--azure); box-shadow:0 0 0 5px color-mix(in srgb,var(--azure) 18%,transparent); }.status-mark.offline { background:var(--coral); box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 18%,transparent); }.status h2 { margin-bottom:.3rem; font-size:1.25rem; }.status p:last-child { margin-bottom:0; color:var(--muted); }
footer { margin-top:auto; padding:2rem 0; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.88rem; } footer a { color:var(--muted); text-underline-offset:.18em; }
@media (prefers-color-scheme:light) { :root { --ink:#f2f7ff; --surface:#fff; --line:#b4cbed; --text:#102648; --muted:#506b94; --azure:#176fca; --coral:#b94b2b; } body { background:radial-gradient(circle at 76% 16%,#cae5ff 0,transparent 29rem),var(--ink); } }
@media (max-width:620px) { main { width:min(100% - 2rem,1060px); }.hero { padding-top:7rem; }.status { padding:1.2rem; } footer { flex-direction:column; } }