/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", sans-serif; }
body { background: #0d0d0d; color: #fff; line-height: 1.6; font-size: 16px; overflow-x: hidden; }
h1,h2,h3 { font-weight: bold; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 10%; background: rgba(0,0,0,0.85); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.navbar nav { display: flex; gap: 15px; align-items: center; }
.navbar nav a { color: #fff; text-decoration: none; transition: 0.3s; }
.navbar nav a:hover { color: #ff4081; }
.hamburger { display: none; font-size: 1.8em; cursor: pointer; background: none; border: none; color: #fff; }

/* Overlay */
#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; }
#overlay.show { display: block; }

/* Buttons */
.btn { background: #ff4081; color: #fff; padding: 8px 16px; border-radius: 25px; text-decoration: none; transition: 0.3s; }
.btn:hover { background: #ff1a66; }
.btn.large { padding: 12px 24px; font-size: 1.2em; }

/* Hero */
.hero { height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #1a1a40, #000); padding: 20px; }
.hero h2 { font-size: 3em; margin-bottom: 15px; }
.hero p.highlight { color: #ff4081; margin-bottom: 20px; }

/* Sections */
.container { padding: 60px 10%; }
.container ul { margin-top: 10px; list-style: square inside; }

/* Prizes */
.prize-box { background: #1a1a1a; padding: 20px; border-radius: 10px; text-align: center; margin-top: 20px; }

/* Blog */
.blog-post { background: #1a1a1a; padding: 20px; margin: 15px 0; border-radius: 8px; }
.blog-post a { color: #ff4081; text-decoration: none; font-weight: bold; }
.blog-post a:hover { text-decoration: underline; }

/* Register */
.register { text-align: center; background: #111; border-radius: 10px; }

/* Footer */
footer { text-align: center; padding: 20px; background: #000; margin-top: 30px; font-size: 0.9em; }

/* Countdown */
#timer { font-size: 1.5em; margin-top: 15px; }

/* Stats */
.stats-grid { display: flex; justify-content: space-around; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.stat { text-align: center; font-size: 1.5em; flex: 1 1 200px; }
.counter { font-size: 2em; color: #ff4081; font-weight: bold; }

/* Accordion FAQ */
.accordion-item { margin-bottom: 10px; }
.accordion-header { background: #222; color: #fff; padding: 10px; border: none; width: 100%; text-align: left; font-size: 1.1em; cursor: pointer; }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 10px; background: #1a1a1a; }
.accordion-header.active { background: #ff4081; }

/* Floating Button (Back to Top) */
#backToTop { position: fixed; bottom: 20px; right: 20px; display: none; background: #ff4081; border: none; padding: 10px; border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.2em; z-index: 1002; }

/* ====================
   Responsive Styles
==================== */
@media (max-width: 1024px) {
  .hero h2 { font-size: 2.5em; }
  .container { padding: 50px 8%; }
}
@media (max-width: 768px) {
  .navbar nav { position: absolute; top: 60px; right: 10%; background: #111; flex-direction: column; gap: 10px; padding: 15px; border-radius: 10px; display: none; z-index: 1001; }
  .navbar nav.active { display: flex; }
  .hamburger { display: block; }
  .hero h2 { font-size: 2em; }
  .container { padding: 40px 5%; }
  .stats-grid { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .hero h2 { font-size: 1.6em; }
  .btn.large { font-size: 1em; padding: 10px 18px; }
  #timer { font-size: 1.2em; }
  .counter { font-size: 1.5em; }
}

/* ====================
   Animations
==================== */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.slide-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 1s ease-out, transform 1s ease-out; }
.slide-in-left.visible { opacity: 1; transform: translateX(0); }
.slide-in-right { opacity: 0; transform: translateX(30px); transition: opacity 1s ease-out, transform 1s ease-out; }
.slide-in-right.visible { opacity: 1; transform: translateX(0); }
.zoom-in { opacity: 0; transform: scale(0.9); transition: opacity 1s ease-out, transform 1s ease-out; }
.zoom-in.visible { opacity: 1; transform: scale(1); }

/* Extra animations */
@keyframes pulse { 0%{transform:scale(1);box-shadow:0 0 0 rgba(255,64,129,0.7);}70%{transform:scale(1.05);box-shadow:0 0 20px rgba(255,64,129,0);}100%{transform:scale(1);box-shadow:0 0 0 rgba(255,64,129,0);} }
.pulse { animation: pulse 2s infinite; }

@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
.bounce { animation: bounce 2s infinite; }

@keyframes rotate { 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);} }
.rotate { animation: rotate 4s linear infinite; }

@keyframes shake { 0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);} }
.shake { animation: shake 0.5s infinite; }

@keyframes slide-up { 0%{transform:translateY(20px);opacity:0;}100%{transform:translateY(0);opacity:1;} }
.slide-up { animation: slide-up 1s ease-out forwards; }

@keyframes slide-down { 0%{transform:translateY(-20px);opacity:0;}100%{transform:translateY(0);opacity:1;} }
.slide-down { animation: slide-down 1s ease-out forwards; }

@keyframes fade-in-slow { 0%{opacity:0;}100%{opacity:1;} }
.fade-in-slow { animation: fade-in-slow 2s ease-out forwards; }

@keyframes fade-in-fast { 0%{opacity:0;}100%{opacity:1;} }
.fade-in-fast { animation: fade-in-fast 0.5s ease-out forwards; }

@keyframes zoom-in-slow { 0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;} }
.zoom-in-slow { animation: zoom-in-slow 1.5s ease-out forwards; }

@keyframes zoom-in-fast { 0%{transform:scale(0.8);opacity:0;}100%{transform:scale(1);opacity:1;} }
.zoom-in-fast { animation: zoom-in-fast 0.7s ease-out forwards; }

@keyframes flip { 0%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);} }
.flip { animation: flip 3s linear infinite; }

@keyframes swing { 0%{transform:rotate(0deg);}20%{transform:rotate(15deg);}40%{transform:rotate(-10deg);}60%{transform:rotate(5deg);}80%{transform:rotate(-5deg);}100%{transform:rotate(0deg);} }
.swing { animation: swing 1s ease-in-out infinite; }

@keyframes heartbeat { 0%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.3);}70%{transform:scale(1);} }
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }

@keyframes light-speed-in { 0%{transform:translateX(100%) skewX(-30deg);opacity:0;}60%{transform:translateX(-20%) skewX(20deg);opacity:1;}80%{transform:translateX(0) skewX(-5deg);}100%{transform:translateX(0) skewX(0deg);} }
.light-speed-in { animation: light-speed-in 1s ease-out forwards; }

@keyframes light-speed-out { 0%{transform:translateX(0) skewX(0deg);opacity:1;}100%{transform:translateX(100%) skewX(30deg);opacity:0;} } 
.light-speed-out { animation: light-speed-out 1s ease-in forwards; }

@keyframes roll-in { 0%{transform:translateX(-100%) rotate(-120deg);opacity:0;}100%{transform:translateX(0) rotate(0deg);opacity:1;} }
.roll-in { animation: roll-in 1s ease-out forwards; }

@keyframes roll-out { 0%{transform:translateX(0) rotate(0deg);opacity:1;}100%{transform:translateX(100%) rotate(120deg);opacity:0;} }
.roll-out { animation: roll-out 1s ease-in forwards; }