body{
  font-family: system-ui;
  background:#0f172a;
  color:#e5e7eb;
}

.hero{
  position:relative;
  background:
    linear-gradient(135deg, rgba(11,58,111,.9), rgba(2,6,23,.95)),
    url("assets/img/world-bg.jpg") center/cover no-repeat;
  color:white;
  padding:7rem 1rem;
  margin-top:3rem;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}


.card-box{
  background:#111;
  color:white;
  padding:2rem 1.5rem;   /* un poco menos */
  border-radius:14px;
  margin:10px;          /* menos margen */
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:transform .3s ease, box-shadow .3s ease;
  min-height: 260px;    /* uniformes */
}


.card-box:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}

.card-box i{
  font-size:3rem;
  margin-bottom:1rem;
  color:white;
  text-shadow:
    0 0 8px rgba(30,136,229,.9),
    0 0 16px rgba(30,136,229,.7),
    0 0 32px rgba(30,136,229,.4);
}