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

body{
  font-family:'Poppins', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  color:white;

  background:linear-gradient(
    135deg,
    #ffb6d9,
    #d9b3ff,
    #b8d8ff
  );
}

/* Fundo suave */
.background{
  position:fixed;
  inset:0;
  backdrop-filter:blur(80px);
}

/* Container principal */
.container{
  position:relative;
  z-index:2;

  width:100%;

  padding:40px 20px;

  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Título */
.title-box{
  text-align:center;
  margin-bottom:50px;
}

.title-box h1{
  font-size:3rem;
  font-weight:700;

  margin-bottom:10px;

  text-shadow:0 4px 15px rgba(0,0,0,0.15);
}

.title-box p{
  font-size:1.1rem;
  opacity:0.9;
}

/* Grid dos objetivos */
.goals{
  width:100%;
  max-width:1100px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:25px;
}

/* Cards */
.card{
  background:rgba(255,255,255,0.18);

  border:1px solid rgba(255,255,255,0.25);

  backdrop-filter:blur(15px);

  border-radius:30px;

  padding:30px 25px;

  box-shadow:0 8px 30px rgba(0,0,0,0.15);

  transition:0.4s;

  text-align:center;

  overflow:hidden;
}

.card:hover{
  transform:translateY(-10px) scale(1.02);
}

/* Ícones */
.icon{
  font-size:3rem;

  margin-bottom:15px;
}

/* Título do objetivo */
.card h2{
  font-size:1.5rem;

  margin-bottom:15px;

  font-weight:600;
}

/* Texto */
.card p{
  font-size:0.95rem;

  line-height:1.6;

  margin-bottom:25px;

  opacity:0.95;
}

/* Timer */
.timer{
  width:100%;

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;

  margin-top:10px;
}

/* Caixa dos números */
.time-box{
  background:rgba(255,255,255,0.20);

  border-radius:18px;

  padding:15px 10px;

  min-height:85px;

  width:100%;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;
}

/* Número */
.number{
  font-size:1.8rem;

  font-weight:700;

  line-height:1;

  display:block;
}

/* Texto abaixo */
.label{
  margin-top:6px;

  font-size:0.75rem;

  text-transform:uppercase;

  letter-spacing:1px;

  opacity:0.85;
}

/* Responsivo */
@media(max-width:768px){

  .container{
    padding:30px 15px;
  }

  .title-box h1{
    font-size:2.2rem;
  }

  .title-box p{
    font-size:1rem;
  }

  .card{
    padding:25px 20px;
  }

  .card h2{
    font-size:1.3rem;
  }

  .timer{
    grid-template-columns:repeat(2,1fr);
  }

  .number{
    font-size:1.5rem;
  }

}