.cards{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:24px;
  padding-bottom:24px;
}

.card{
  display:block;
  border-radius:20px;
  overflow:hidden;
  border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease;
  background:#0a0a0a;
}

.card:hover,
.card:focus-visible{
  transform:translateY(-2px);
}

.card img{
  width:100%;
  height:auto;
}

.card-gold{ border-color:#c9962c; box-shadow:0 0 24px rgba(201,150,44,.25); }
.card-gold:hover{ box-shadow:0 0 32px rgba(201,150,44,.4); }

.card-purple{ border-color:#9b5de5; box-shadow:0 0 24px rgba(155,93,229,.25); }
.card-purple:hover{ box-shadow:0 0 32px rgba(155,93,229,.4); }

.card-green{ border-color:#2ecc71; box-shadow:0 0 24px rgba(46,204,113,.25); }
.card-green:hover{ box-shadow:0 0 32px rgba(46,204,113,.4); }

.card-red{ border-color:#e5533d; box-shadow:0 0 24px rgba(229,83,61,.25); }
.card-red:hover{ box-shadow:0 0 32px rgba(229,83,61,.4); }

.card-blue{ border-color:#3aa0e8; box-shadow:0 0 24px rgba(58,160,232,.25); }
.card-blue:hover{ box-shadow:0 0 32px rgba(58,160,232,.4); }

.card-bronze{ border-color:#b98a5e; box-shadow:0 0 24px rgba(185,138,94,.25); }
.card-bronze:hover{ box-shadow:0 0 32px rgba(185,138,94,.4); }

.card-neutral{ border-color:#555; box-shadow:0 0 18px rgba(255,255,255,.08); }
.card-neutral:hover{ box-shadow:0 0 26px rgba(255,255,255,.15); }

.footer{
  text-align:center;
  padding:24px 20px 48px;
  max-width:640px;
  margin:0 auto;
}

.footer-logo{
  margin:0 auto 16px;
  width:180px;
  height:auto;
}

.footer-text{
  color:#aaa;
  font-size:.85rem;
  max-width:480px;
  margin:0 auto 12px;
}

.footer-links{
  font-size:.8rem;
  color:#888;
}

.footer-links a{
  color:#888;
  border-bottom:1px solid transparent;
}

.footer-links a:hover{
  color:#ccc;
  border-bottom-color:#ccc;
}

@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
}

@media (max-width: 480px){
  .hero-name{ font-size:1.1rem; }
  .hero-tagline{ font-size:.95rem; }
}