:root{
    --bg1:#fde8ef;
    --bg2:#fff6fa;
    --wine:#5a1c2a;
    --text:#3b1a22;
    --card:#ffffffcc;
    --shadow: 0 18px 60px rgba(0,0,0,.10);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
      radial-gradient(900px 500px at 10% 10%, var(--bg1), transparent 60%),
      radial-gradient(900px 500px at 90% 90%, var(--bg1), transparent 60%),
      linear-gradient(180deg, var(--bg2), #fff);
  }
  
  .wrap{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  
  .card{
    width:min(820px, 100%);
    background:var(--card);
    border:1px solid rgba(90,28,42,.12);
    border-radius:24px;
    padding:28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
    text-align:center;
  }
  
  .brand{ display:flex; justify-content:center; }
  .logo{
    width:min(620px, 100%);
    height:auto;
    border-radius:18px;
    border:1px solid rgba(90,28,42,.10);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
  }
  
  h1{
    margin:18px 0 8px;
    font-size: clamp(28px, 3.4vw, 44px);
    color:var(--wine);
  }
  
  .sub{
    margin:0 auto 18px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.5;
    opacity:.92;
  }
  
  .badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(90,28,42,.14);
    background:#fff;
    color:var(--wine);
    font-weight:600;
  }
  
  .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--wine);
    box-shadow: 0 0 0 6px rgba(90,28,42,.12);
  }
  
  .foot{
    margin-top:18px;
    opacity:.75;
  }