:root{
  --brand-primary:#353945; /* purple */
  --brand-primary:#353945;
  --brand-bg: #353945;
  --text:#1a0f1e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#1a0f1e;
  background: #353945 url('../img/background.png') center/cover no-repeat fixed;
}
.container{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 48px);
}
.card{
  width:min(920px, 100%);
  background: rgba(255,255,255,0.6);
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.85);
  overflow:hidden;
}
.header{
  display:flex;
  gap:20px;
  align-items:center;
  padding:24px;
  color:#fff;
}
.header img.logo{ width:260px; height:auto; opacity:1;}
.content{ padding: clamp(20px, 4vw, 40px); }
h1{ margin:0 0 12px 0; font-size: clamp(26px, 4vw, 36px); color:#0e2513; }
p.lead{ font-size: clamp(16px, 2.4vw, 20px); line-height:1.5; margin:0 0 16px 0; }
.notice{
  padding:14px 16px;
  background: rgba(255,255,255,0.6);
  border:1px solid #d0eed7;
  border-radius:14px;
  margin:18px 0 26px 0;
  color:#0f3d1c;
}
.badges{ display:flex; gap:16px; flex-wrap:wrap; }
.badges a{
  display:inline-block;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  transition: transform .1s ease;
}
.badges a:focus-visible,.badges a:hover{ transform: translateY(-2px); outline: none; }
.badges img{ display:block; height:60px; }
.footer{
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #e6e6e6;
  color:#2a2a2a;
  font-size:14px;
}
.footer a{ color: var(--brand-primary-dark); text-decoration: none; }
.footer a:hover{ text-decoration: underline; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1,1); border:0;
}