:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#f97316;
  --muted:#94a3b8;
  --radius:12px
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  background:linear-gradient(180deg,#071027 0%,var(--bg) 100%);
  color:#e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px
}

#intro{
  position:fixed;
  inset:0;
  background:#020617;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.intro-box{
  text-align:center;
  background:rgba(255,255,255,0.03);
  padding:40px;
  border-radius:16px;
  backdrop-filter:blur(10px);
}

.intro-box button{
  margin-top:20px;
  padding:12px 28px;
  border:none;
  border-radius:10px;
  font-size:16px;
  cursor:pointer;
  background:#85d1e4;
  color:white;
  transition:.3s;
}

.intro-box button:hover{
  transform:scale(1.05);
}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border-radius:var(--radius);
  box-shadow:0 8px 30px rgba(2,6,23,0.7);
  max-width:920px;
  width:100%;
  padding:20px
}

.carousel{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#07122a
}

.slides{
  display:flex;
  transition:transform 600ms cubic-bezier(.2,.9,.2,1)
}

.slide{
  min-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px
}

.slide img{
  max-width:100%;
  max-height:70vh;
  border-radius:8px;
  display:block;
  object-fit:cover
}

.controls{
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  display:flex;
  justify-content:space-between;
  transform:translateY(-50%);
  pointer-events:none
}

.btn{
  pointer-events:auto;
  background:rgba(3,7,18,0.6);
  border:1px solid rgba(255,255,255,0.04);
  color:#fff;
  padding:8px 10px;
  border-radius:8px;
  backdrop-filter:blur(6px);
  cursor:pointer
}

.meta{
  text-align:center;
  padding:10px 0
}

h1{
  margin:0 0 6px 0;
  font-size:20px
}

p{
  margin:0;
  color:var(--muted)
}

footer{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:16px
}

.counter{
  margin-top:20px;
  font-size:18px;
  color:#e6eef8;
}

#tempo{
  font-size:22px;
  font-weight:bold;
  color:#85d1e4;
}

@media (max-width: 768px){

  .card{
    padding:15px;
  }

  h1{
    font-size:18px;
  }

  p{
    font-size:14px;
  }

  .slide img{
    max-height:50vh;
  }

  .btn{
    padding:12px;
    font-size:16px;
  }

  #tempo{
    font-size:18px;
  }

}