/* Minimal clean styles for a landing */
:root { --bg1:#0f1226; --bg2:#171b39; --fg:#e8e8ff; --muted:#b9b9d6; --violet:#7c3aed; --violet2:#a78bfa; }
*{box-sizing:border-box} html,body{height:100%} body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  color:var(--fg); background: radial-gradient(1200px 800px at 20% -10%, #1d1f4a 0%, transparent 60%),
                    radial-gradient(1000px 600px at 120% 10%, #2a215a 0%, transparent 55%),
                    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.wrap{max-width:1100px; margin:0 auto; padding:48px 24px}
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:40px 0 28px}
.logo{width:64px; height:64px}
h1{font-size:clamp(28px, 4vw, 44px); margin:8px 0}
.sub{color:var(--muted); margin:0 0 10px}
.cta{display:flex; gap:12px; margin:14px 0 6px}
.btn{display:inline-block; padding:12px 18px; border-radius:10px; background:var(--violet);
     color:white; text-decoration:none; font-weight:600; box-shadow: 0 8px 24px rgba(124,58,237,0.35);}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent; border:1px solid #3b3566; color:var(--fg)}
.status{margin-top:10px; font-size:13px; opacity:.9; padding:6px 10px; border-radius:999px; background:#27284b;}
.status.ok{background:#12391f; color:#9cffc3}
.status.warn{background:#3b3212; color:#ffe28a}
.status.err{background:#3b1212; color:#ff9c9c}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px; margin-top:28px}
.grid article{background:#151633aa; border:1px solid #2a2b53; border-radius:12px; padding:16px}
.grid h3{margin:4px 0 6px; font-size:16px}
.grid p{margin:0; color:var(--muted); font-size:14px}