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

 html,
 body {
     height: 100%;
     width: 100%;
     background: linear-gradient(to bottom right, #0f0f0f, #1c1c1c);
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .coming-soon-container {
     text-align: center;
     padding: 30px;
 }

 .coming-soon-container h1 {
     font-size: 64px;
     font-weight: 700;
     margin-bottom: 20px;
     color: #f5f5f5;
 }

 .coming-soon-container p {
     font-size: 20px;
     color: #bbb;
     margin-bottom: 40px;
 }

 .logo {
     max-width: 180px;
     margin-bottom: 40px;
 }

 .countdown {
     display: flex;
     gap: 20px;
     justify-content: center;
     font-size: 24px;
     color: #ccc;
 }

 .countdown span {
     background: #222;
     padding: 15px 20px;
     border-radius: 8px;
     min-width: 80px;
 }

.dots::after {
    content: '';
    display: inline-block;
    animation: dots 6s steps(6, end) infinite;
    width: 1em;
    text-align: left;
}

@keyframes dots {
    0%   { content: '';     }   /* 0s */
    16.66%  { content: '.';    }  /* 1s */
    33.33%  { content: '..';   }  /* 2s */
    50%  { content: '...';  }     /* 3s */
    66.66%  { content: '..';   }  /* 4s */
    83.33% { content: '.';    }  /* 5s */
    100% { content: '';    }     /* 6s */
}


 @media (max-width: 600px) {
     .coming-soon-container h1 {
         font-size: 36px;
     }

     .countdown {
         flex-direction: column;
         gap: 10px;
     }
 }