:root{
  --cat-yellow:#FFCC00;
  --earth-green:#4F6F52;
  --earth-brown:#6B5E48;
  --ink:#0a0a0a;
  --paper:#f7f7f5;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--paper);
  background: radial-gradient(1000px 500px at 10% -10%, #3a3a3a 0%, #1a1a1a 60%, #0a0a0a 100%);
}

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4rem 1.25rem;
  gap:2rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:1.5rem;
  text-align:left;
  max-width:1000px;
  width:100%;
}

.logo{
  width:240px;
  max-width:35vw;
  background:linear-gradient(180deg, rgba(255,204,0,0.1), transparent 60%);
  border:2px solid var(--cat-yellow);
  border-radius:14px;
  padding:0.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo img, .logo svg{width:100%; height:auto; display:block}
.logo img {
  background-color: #f9f9f9;   /* soft light background */
  border-radius: 12px;         /* smooth rounded corners */
  padding: 12px;               /* breathing room */
  display: inline-block;
}

.titles h1{
  font-weight:800;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  margin:0 0 .25rem;
  letter-spacing:0.02em;
}
.titles .tagline{
  color:#d6d6d6;
  margin:0;
  font-weight:600;
}

.card{
  background: rgba(20,20,20,.8);
  border:2px solid var(--cat-yellow);
  border-radius:16px;
  padding:1rem 1.25rem;
  max-width:1000px;
  width:100%;
  line-height:1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.notice a{ color: var(--cat-yellow); text-decoration:none; border-bottom:1px dashed var(--cat-yellow) }
.notice a:hover{ opacity:.85 }

.badges{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  max-width:1000px; width:100%;
}
.badge{
  background: linear-gradient(180deg, var(--earth-brown), var(--earth-green));
  color:#fff;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.02em;
}

.foot{
  opacity:.8;
  border-top: 2px solid var(--cat-yellow);
  padding-top:.75rem;
  margin-top:1rem;
  width:100%;
  text-align:center;
  max-width:1000px;
}

/* Small screens */
@media (max-width:700px){
  .brand{flex-direction:column; text-align:center}
  .logo{width:min(440px,85vw)}
  .badges{justify-content:center}
}