:root{
  --bg:#f3f5f7;
  --card:#ffffff;
  --accent:#4d4d4d;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: -webkit-linear-gradient(90deg, #0f596b,#317786,#b5b5b5);
  background: linear-gradient(90deg, #0f596b,#317786,#b5b5b5);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}
.card{
  background:var(--card);
  border-radius:14px;
  padding:2.5rem 3rem;
  max-width:600px;
  width:100%;
  box-shadow:0 8px 32px rgba(49,63,148,0.18);
  text-align:center;
  animation:fadeIn .6s ease both;
}
.headline{font-size:1.6rem;margin:0.4rem 0;color:var(--accent)}
.sub{margin:0.2rem 0 0.6rem;color:var(--muted);font-weight:600}
.meta{color:var(--muted);font-size:0.95rem}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:600px){
  .card{padding:1.2rem;border-radius:10px}
  .headline{font-size:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .card{animation:none}
}