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

html,body{
  width:100%;
  height:100%;
  font-family:'Poppins',sans-serif;
  user-select:none; /* prevent text selection */
}

/* ===== VIDEO BACKGROUND ===== */
#bgVideo{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

/* ===== LAYOUT ===== */
.wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* ===== GLASS CARD (TEXT AREA) ===== */
.card{
  width:100%;
  max-width:580px;
  padding:46px 40px;
  border-radius:22px;
  background:rgba(0,0,0,0.28);
  backdrop-filter:blur(10px);
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,0.45);

  /* entrance animation */
  animation:cardIn 1.1s ease forwards;
}
@keyframes cardIn{
  from{
    opacity:0;
    transform:translateY(30px) scale(0.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ===== TITLE ===== */
h1{
  font-size:clamp(2.1rem,7vw,4.8rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#ffffff;
  line-height:1.1;
  position:relative;
  text-shadow:0 8px 22px rgba(0,0,0,0.9);
}

/* glowing underline */
h1::after{
  content:"";
  display:block;
  width:70px;
  height:4px;
  margin:16px auto 0;
  border-radius:10px;
  background:linear-gradient(90deg,#ff9800,#ffc107);
  animation:glowLine 2.5s ease-in-out infinite;
}
@keyframes glowLine{
  0%,100%{opacity:.4;transform:scaleX(.85)}
  50%{opacity:1;transform:scaleX(1)}
}

/* ===== SUBTITLE ===== */
p{
  margin-top:20px;
  font-size:clamp(1rem,3.5vw,1.3rem);
  color:#f5f5f5;
  letter-spacing:1.6px;
  text-shadow:0 4px 12px rgba(0,0,0,0.85);
}

/* floating words */
p span{
  display:inline-block;
  animation:floatText 3s ease-in-out infinite;
}
p span:nth-child(2){animation-delay:.4s}
p span:nth-child(3){animation-delay:.8s}

@keyframes floatText{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* ===== BUTTON ===== */
.btn{
  margin-top:36px;
  padding:14px 46px;
  border-radius:50px;
  border:none;
  background:#ff9800;
  color:#000;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:2px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 14px 32px rgba(0,0,0,0.6);

  animation:pulse 3s ease-in-out infinite;
  user-select:none; /* prevent button text copy */
}
@keyframes pulse{
  0%,100%{box-shadow:0 14px 32px rgba(0,0,0,0.6)}
  50%{box-shadow:0 18px 45px rgba(0,0,0,0.8)}
}
.btn:hover{
  transform:translateY(-3px) scale(1.06);
}

/* ===== SMALL DEVICES ===== */
@media(max-width:360px){
  .card{padding:34px 24px}
  .btn{padding:12px 36px;font-size:.95rem}
}

/* ===== SHORT SCREENS ===== */
@media(max-height:500px){
  .wrapper{align-items:flex-start;padding-top:40px}
}