body,
     html {
         margin: 0;
         padding: 0;
         width: 100%;
         height: 100%;
     }

     body {
         margin: 0;
         font-family: Arial, sans-serif;
     }

     main {
         width: 100%;
         min-height: 100vh;
         margin: 0 auto;
         position: relative;
         background: url("../images/bg.png") no-repeat center center, #000;
         background-size: cover;
         background-attachment: fixed;
         /* keeps background pinned */
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .overlay {
         background: rgba(0, 0, 0, 0.7);
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1;
     }

     .gift-area {
         position: relative;
         z-index: 2;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .top {
         width: 309px;
         margin-bottom: 30px;
     }

     .gift-wrap {
         position: relative;
         display: inline-block;
     }

     .light-effect {
         position: absolute;
         top: 58%;
         /* move down (50% → 58%) */
         left: 50%;
         width: 220px;
         height: 220px;
         transform: translate(-50%, -50%);
         transform-origin: center center;
         pointer-events: none;
         z-index: -1;
         display: none;
     }



     .rotate {
         animation: spin 3s linear infinite;
         /* faster rotation */
     }

     @keyframes spin {
         from {
             transform: translate(-50%, -50%) rotate(0deg);
         }

         to {
             transform: translate(-50%, -50%) rotate(360deg);
         }
     }



     .imgs {
         display: flex;
         gap: 80px;
         justify-content: center;
         align-items: center;
         margin-top: 40px;
     }

     .imgs img {
         width: 110px;
         cursor: pointer;
     }

     /* Hand pointer */
     .hand {
         position: absolute;
         animation: moveHand 6s infinite;
         pointer-events: none;
     }

     .hand img {
         width: 80px;
     }

     @keyframes moveHand {
         0% {
             top: 88%;
             left: 20%;
         }

         25% {
             top: 88%;
             left: 70%;
         }

         50% {
             top: 48%;
             left: 20%;
         }

         75% {
             top: 48%;
             left: 70%;
         }

         100% {
             top: 88%;
             left: 20%;
         }
     }

     /* Popup Styles */
     .popup {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.9);
         justify-content: center;
         align-items: center;
         z-index: 999;
         text-align: center;
         color: white;
     }

     .popup-content {
         background: transparent;
         padding: 20px;
         border-radius: 12px;
     }

     .popup h2 {
         font-size: 30px;
         font-weight: bold;
         color: #FFD700;
         margin: 10px 0;
     }

     .popup p {
         font-size: 18px;
         margin-bottom: 20px;
     }

     .download-btn {
         display: inline-block;
         background: #f5c720;
         color: white;
         padding: 14px 30px;
         font-size: 18px;
         font-weight: bold;
         border-radius: 8px;
         text-decoration: none;
         margin-bottom: 20px;
     }

     .back-btn {
         display: block;
         margin-top: 10px;
         font-size: 16px;
         color: white;
         cursor: pointer;
         text-decoration: none;
     }