:root {
    --green: #48885a;
    --cream: #fff6e2;
    --black: #000000;
    --text: #07343e;
    --radius: 2rem;
    --shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* reset */
*{margin:0;padding:0;box-sizing:border-box}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--green);
  font-family:"Poppins",sans-serif;
  color:var(--text);
}

.badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
  background:var(--cream);
  border:4px solid var(--black);
  border-radius:var(--radius);
  padding:2.5rem 3rem;
  text-align:center;
  box-shadow:var(--shadow);
  animation:fadeIn .6s ease-out;
}

.badge img{
    margin:0;
    display:block;
    width:224px;
    height:auto;
}

@media(max-width:480px) {
    .badge{row-gap:0.4rem}
}

h1{font-size:2.4rem;font-weight:600}
p{font-size:1.1rem;max-width:24ch;line-height:1.4}

footer{margin-top:.8rem;font-size:.9rem;color:var(--black)}

.btn{
  background:var(--black);
  color:var(--cream);
  border:none;
  padding:.6rem 1.2rem;
  font:600 1rem/1 "Poppins",sans-serif;
  border-radius:.7rem;
  cursor:pointer;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}

/* ───── Modal ───── */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
}

.modal.open{display:flex;}

.modal-content {
    background: var(--black);
    padding: 2rem 1.5rem;
    border-radius: 1rem;
    width: 90%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow);
    animation: fadeModal .25s ease-out;
}

.modal-content h2{margin-bottom:.5rem}
.modal-content label{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  font-size:.9rem;
}
.modal-content input,
.modal-content textarea{
  border:1px solid #cbd5e1;
  border-radius:.5rem;
  padding:.5rem;
  font-family:inherit;
  resize:vertical;
}
.close{
  position:absolute;
  top:.6rem;right:.8rem;
  background:none;
  border:none;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
}

/* ───── Animations ───── */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeModal {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ───── Mobile tweaks ───── */
@media(max-width:480px){
  .badge{padding:2rem 1.3rem}
  h1{font-size:2rem}
  .badge img{width:140px}
}