* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #0e1a2b, #132f4c, #204b67);
      color: #fff;
      overflow: hidden;
      flex-direction: column;
      text-align: center;
    }

    .maintenance-container {
      position: relative;
      z-index: 2;
    }

    .maintenance-icon {
      font-size: 90px;
      color: #ffcc00;
      margin-bottom: 20px;
      animation: rotate 3s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
      animation: fadeInDown 1.5s ease-in-out;
    }

    p {
      font-size: 1.1rem;
      margin-bottom: 25px;
      opacity: 0.85;
      animation: fadeInUp 1.8s ease-in-out;
    }

    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .progress-bar {
      width: 250px;
      height: 8px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      overflow: hidden;
      margin: auto;
      animation: fadeIn 2s ease-in-out;
    }

    .progress {
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, #ffcc00, #ffa500);
      border-radius: 5px;
      animation: loading 5s infinite;
    }

    @keyframes loading {
      0% { width: 0%; }
      50% { width: 100%; }
      100% { width: 0%; }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    footer {
      position: absolute;
      bottom: 20px;
      font-size: 0.9rem;
      opacity: 0.8;
      animation: fadeIn 3s ease-in-out;
    }

    /* Floating gear animation */
    .floating-gear {
      position: absolute;
      font-size: 100px;
      opacity: 0.07;
      animation: float 6s ease-in-out infinite;
    }

    .gear1 {
      top: 20%;
      left: 15%;
      animation-delay: 0s;
    }

    .gear2 {
      bottom: 15%;
      right: 10%;
      animation-delay: 2s;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(20deg); }
    }

    @media (max-width: 600px) {
      h1 { font-size: 1.8rem; }
      p { font-size: 0.95rem; }
      .maintenance-icon { font-size: 70px; }
      .progress-bar { width: 200px; }
    }