* { margin:0; padding:0; box-sizing:border-box; font-family:Poppins,sans-serif; }
html, body { width:100%; height:100%; overflow:hidden; background:#05000a; color:white; }

#loader {
  position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:20;
}
#loader .orb { width:80px; height:80px; border-radius:50%; background:linear-gradient(45deg,#8b5cf6,#ec4899); animation:pulse 1.5s infinite; }
#loader span { margin-top:12px; font-size:clamp(1rem,3vw,1.4rem); }

@keyframes pulse { 0%{transform:scale(0.7);opacity:.5} 100%{transform:scale(1.2);opacity:1} }

#bg, #particles { position:fixed; inset:0; }
#bg { background-size:cover; background-position:center; filter:brightness(0.6); z-index:-2; }
#particles { z-index:-1; }

/* Header */
.header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:linear-gradient(90deg, #000000, #106a6d); box-shadow:0 0 15px rgba(0,0,0,0.5); position:sticky; top:0; z-index:1000; }
.logo img { height:60px; transition:transform 0.5s; }
.logo img:hover { transform:rotateY(360deg); }

/* Countdown */
#countdownContainer { background:#000; color:rgb(255,234,0); font-family:monospace; padding:1px 20px; font-size:0.7rem; text-align:center; }
.neon-glow { text-shadow:0 0 5px #a40eb8,0 0 10px #000,0 0 20px #8a1d90; }

/* Nav */
.nav-list { display:flex; list-style:none; }
.nav-list li { margin-left:30px; }
.nav-list li a { text-decoration:none; color:#fff; font-weight:bold; transition:0.3s; }
.nav-list li a:hover { color:#00fff7; text-shadow:0 0 10px #00fff7; transform:rotateY(15deg) scale(1.1); }

/* Mobile Nav */
.menu-toggle { display:none; flex-direction:column; cursor:pointer; }
.bar { height:3px; width:28px; background:#fff; margin:4px 0; transition:0.4s; }
@media screen and (max-width:768px){
  .nav-list { position:absolute; top:70px; right:0; width:220px; flex-direction:column; background:linear-gradient(90deg,#189aab,#000); overflow:hidden; border-radius:12px; height:0; transition:height 0.5s ease,padding 0.5s ease; }
  .nav-list.active { height:auto; padding:10px 0; }
  .menu-toggle { display:flex; }
  .nav-list li { margin:15px 0; text-align:center; }
}

.card {
  max-width:min(92%,520px);
  margin:auto; margin-top:clamp(18vh,25vh,30vh);
  padding:clamp(18px,4vw,32px);
  border-radius:22px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
  animation:fadeUp 1.2s ease;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

#day { font-size:clamp(.75rem,2.5vw,.9rem); letter-spacing:2px; color:#facc15; }
#title { margin-top:10px; font-size:clamp(1.4rem,5vw,2.1rem); }
#quote { margin-top:14px; font-size:clamp(.95rem,3.5vw,1.05rem); line-height:1.6; }

#hologram-container {
  position:fixed; width:clamp(120px,18vw,240px);
  height:calc(clamp(120px,18vw,240px)*1.45);
  right:3vw; bottom:8vh; z-index:6;
  pointer-events:none;
  filter: drop-shadow(0 0 25px rgba(0,255,255,.6));
}

@media(max-width:640px) {
  #hologram-container { right:50%; transform:translateX(50%); bottom:4vh; }
}