:root{
  --bg1:#eff6ff; /* blue-50 */
  --bg2:#f1f5f9; /* slate-100 */
  --ink:#0f172a; /* slate-900 */
  --muted:#475569; /* slate-600 */
  --brand:#2563eb; /* blue-600 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--ink);
  background: radial-gradient(1200px 800px at 50% -10%, var(--bg1), var(--bg2));
  display:flex; align-items:center; justify-content:center;
}
.container{
  text-align:center;
  padding: clamp(16px, 3vw, 32px);
}
.brandmark{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--brand); color:white; font-weight:800;
  margin-right:8px;
}
.row{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px}
h1{font-size:clamp(32px,5vw,56px); line-height:1.05; margin:10px 0 0 0}
p.subtitle{max-width:38ch; margin:12px auto 0 auto; color:var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #cbd5e1; background:#fff;
  padding:10px 14px; border-radius:999px; margin-top:18px;
  color:#0f172a; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.badge .dot{width:8px; height:8px; border-radius:999px; background:var(--brand)}
.hero{
  width:min(256px, 60vw); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  margin:0 auto 24px auto; display:block;
}
footer{
  position:fixed; bottom:10px; left:0; right:0; text-align:center; color:#94a3b8; font-size:12px;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}