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

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background-color: #0b0401;
  background-image: url('./asset/Background.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  padding-bottom: 6px;
  flex-shrink: 0;
  animation: fadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.header-logo {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
}

.promo-container {
  flex: 1;
  width: 100%;
  max-width: 980px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 6px 16px 20px;
}

.stage-container {
  position: relative;
  width: 100%;
  max-width: 780px;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
}

.players-group {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.player {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65));
  transition: transform 0.3s ease;
  user-select: none;
}

/* Back Tier */
.player-1 {
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 24%;
  max-width: 200px;
  z-index: 2;
  animation: floatCenter 4.8s ease-in-out infinite;
}

.player-4 {
  top: 13%;
  left: 19%;
  width: 20.5%;
  max-width: 172px;
  z-index: 1;
  animation: floatLeft 5.2s ease-in-out infinite;
}

.player-5 {
  top: 13%;
  right: 19%;
  width: 20%;
  max-width: 168px;
  z-index: 1;
  animation: floatRight 5s ease-in-out infinite;
}

/* Front Tier */
.player-2 {
  top: 27%;
  left: 29%;
  width: 23.5%;
  max-width: 190px;
  z-index: 3;
  animation: floatFront 4.6s ease-in-out infinite;
}

.player-3 {
  top: 27%;
  right: 29%;
  width: 22.5%;
  max-width: 185px;
  z-index: 3;
  animation: floatFront 4.9s ease-in-out infinite 0.2s;
}

/* Floating Soccer Balls */
.floating-ball {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.ball-left {
  left: 21%;
  top: 68%;
  width: 9%;
  max-width: 72px;
  z-index: 4;
  filter: blur(1.5px) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  animation: floatBallLeft 4s ease-in-out infinite;
}

.ball-right {
  right: 14%;
  top: 62%;
  width: 18%;
  max-width: 145px;
  z-index: 7;
  filter: blur(2.5px) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.7));
  animation: floatBallRight 4.5s ease-in-out infinite;
}

/* Promo Text & CTA Button */
.promo-cta-wrapper {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.promo-text-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.85));
}

.btn-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: -24px;
  z-index: 6;
  text-decoration: none;
  animation: pulseZoom 2s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-img {
  height: 80px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
}

.btn-action:hover { transform: scale(1.06); }
.btn-action:active { transform: scale(0.96); }
.footer-info { flex-shrink: 0; padding-bottom: 12px; }

/* Keyframe Animations */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulseZoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

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

@keyframes floatLeft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes floatRight {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes floatFront {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.015); }
}

@keyframes floatBallLeft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(12deg); }
}

@keyframes floatBallRight {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-14deg); }
}

/* Responsive Styles */
@media (max-height: 700px) and (min-width: 768px) {
  .stage-container { max-width: 660px; aspect-ratio: 16 / 11; }
  .btn-img { height: 50px; }
  .btn-action { margin-top: -20px; }
}

@media (max-width: 768px) {
  .header { padding-top: 36px; padding-bottom: 6px; }
  .header-logo { height: 48px; }
  .promo-container { padding: 8px 12px 18px; }
  .stage-container { max-width: 440px; aspect-ratio: 10 / 13; }
  
  .player-1 { top: 4%; width: 33%; max-width: 170px; }
  .player-4 { top: 12%; left: 13%; width: 28%; max-width: 145px; }
  .player-5 { top: 12%; right: 13%; width: 27%; max-width: 140px; }
  .player-2 { top: 25%; left: 24%; width: 32%; max-width: 165px; }
  .player-3 { top: 25%; right: 24%; width: 31%; max-width: 160px; }
  
  .promo-cta-wrapper { top: 46%; width: 95%; }
  .btn-img { height: 64px; max-width: 320px; }
  .btn-action { margin-top: -12px; }
  
  .ball-left { left: 4%; top: 70%; width: 14%; max-width: 60px; }
  .ball-right { right: 2%; top: 64%; width: 28%; max-width: 125px; }
}

@media (max-width: 480px) {
  .header { padding-top: 32px; padding-bottom: 4px; }
  .header-logo { height: 44px; }
  .stage-container { max-width: 100%; aspect-ratio: 10 / 13.5; }
  
  .player-1 { top: 4%; width: 35%; }
  .player-4 { top: 12%; left: 11%; width: 30%; }
  .player-5 { top: 12%; right: 11%; width: 29%; }
  .player-2 { top: 25%; left: 23%; width: 34%; }
  .player-3 { top: 25%; right: 23%; width: 33%; }
  
  .promo-cta-wrapper { top: 45%; width: 98%; }
  .btn-img { height: 58px; max-width: 290px; }
  .btn-action { margin-top: -10px; }
  
  .ball-left { left: 2%; top: 72%; width: 15%; }
  .ball-right { right: 1%; top: 66%; width: 30%; }
}