:root{
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --text: #0f1720;
    --muted: #55606b;
    --radius: 8px;
  }

  html,body{
    height:100%;
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background: linear-gradient(180deg,var(--bg), #eef2f5);
    color:var(--text);
  }

  .wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
  }

  .card{
    width:100%;
    max-width:520px;
    background:var(--card-bg);
    border-radius:var(--radius);
    box-shadow: 0 6px 22px rgba(16,24,40,0.08);
    padding:40px 28px;
    text-align:center;
  }

  .logo{
    width:256px;
    height:171px;
    display:block;
    margin:0 auto;
    object-fit:contain;
  }

  h1{
    margin:22px 0 8px;
    font-weight:700;
    font-size:clamp(22px,4.8vw,34px);
    line-height:1.05;
  }

  p.lead{
    margin:0;
    color:var(--muted);
    font-size:clamp(14px,2.4vw,18px);
  }

  .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  @media (max-width:420px){
    .card{ padding:28px 18px; border-radius:10px; }
    .logo{ width:220px; height:147px; }
  }