<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <meta name="theme-color" content="#0b1220">

    <title>Scheduled Maintenance</title>

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #eaf1ff;
            background:
                radial-gradient(circle at 20% 20%, rgba(46, 111, 255, 0.18), transparent 35%),
                radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.12), transparent 35%),
                linear-gradient(135deg, #07101f 0%, #0b1220 50%, #0c1628 100%);
            overflow-x: hidden;
        }

        .background-grid {
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: 0.2;
            background-image:
                linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 760px;
            padding: 55px 50px;
            text-align: center;
            background: rgba(12, 23, 41, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            animation: appear 0.8s ease both;
        }

        .logo {
            width: 72px;
            height: 72px;
            margin: 0 auto 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(58, 123, 255, 0.2), rgba(0, 212, 255, 0.12));
            border: 1px solid rgba(93, 158, 255, 0.25);
            box-shadow: 0 10px 40px rgba(35, 101, 255, 0.12);
        }

        .logo svg {
            width: 36px;
            height: 36px;
        }

        .status {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 9px 15px;
            margin-bottom: 24px;
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.10);
            border: 1px solid rgba(96, 165, 250, 0.18);
            color: #9cc5ff;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #60a5fa;
            box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.55);
            animation: pulse 2s infinite;
        }

        h1 {
            margin-bottom: 18px;
            font-size: clamp(32px, 6vw, 52px);
            line-height: 1.05;
            font-weight: 700;
            letter-spacing: -1.8px;
            color: #ffffff;
        }

        .subtitle {
            max-width: 610px;
            margin: 0 auto;
            color: #aebbd0;
            font-size: 17px;
            line-height: 1.8;
        }

        .progress-wrap {
            margin: 36px auto 30px;
            max-width: 480px;
        }

        .progress {
            position: relative;
            height: 5px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255,255,255,0.07);
        }

        .progress::after {
            content: "";
            position: absolute;
            top: 0;
            left: -45%;
            width: 45%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(
                90deg,
                transparent,
                #448aff,
                #5ad7ff,
                transparent
            );
            animation: loading 2.6s ease-in-out infinite;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 34px;
        }

        .info-item {
            padding: 17px 10px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.055);
        }

        .info-item strong {
            display: block;
            margin-bottom: 5px;
            color: #eef5ff;
            font-size: 14px;
            font-weight: 600;
        }

        .info-item span {
            color: #7f90aa;
            font-size: 12px;
        }

        .footer {
            margin-top: 34px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            color: #708099;
            font-size: 12px;
            line-height: 1.6;
        }

        .footer span {
            color: #98a8bf;
        }

        @keyframes loading {
            0% {
                left: -45%;
            }

            100% {
                left: 110%;
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.5);
            }

            70% {
                box-shadow: 0 0 0 9px rgba(96, 165, 250, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
            }
        }

        @keyframes appear {
            from {
                opacity: 0;
                transform: translateY(15px) scale(0.985);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @media (max-width: 640px) {
            body {
                padding: 20px 15px;
            }

            .container {
                padding: 42px 22px;
                border-radius: 20px;
            }

            .logo {
                width: 62px;
                height: 62px;
                border-radius: 17px;
            }

            .logo svg {
                width: 31px;
                height: 31px;
            }

            .subtitle {
                font-size: 15px;
                line-height: 1.7;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }
    </style>
</head>

<body>

<div class="background-grid"></div>

<main class="container">

    <div class="logo">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
                d="M12 3L5 6.5V11.5C5 16.15 7.95 20.27 12 21.5C16.05 20.27 19 16.15 19 11.5V6.5L12 3Z"
                stroke="#78B4FF"
                stroke-width="1.6"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
            <path
                d="M9 12L11 14L15.5 9.5"
                stroke="#78DFFF"
                stroke-width="1.6"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
    </div>

    <div class="status">
        <span class="status-dot"></span>
        Scheduled Maintenance
    </div>

    <h1>
        We'll be back shortly.
    </h1>

    <p class="subtitle">
        Our website is currently undergoing scheduled maintenance and system
        improvements. Our technical team is completing final checks to ensure
        optimal performance, reliability, and a seamless experience when
        services resume.
    </p>

    <div class="progress-wrap">
        <div class="progress"></div>
    </div>

    <p class="subtitle">
        Thank you for your patience and understanding.
        Service will be restored as soon as maintenance is complete.
    </p>

    <div class="info-grid">

        <div class="info-item">
            <strong>System Status</strong>
            <span>Maintenance in progress</span>
        </div>

        <div class="info-item">
            <strong>Infrastructure</strong>
            <span>Optimization underway</span>
        </div>

        <div class="info-item">
            <strong>Service</strong>
            <span>Returning shortly</span>
        </div>

    </div>

    <div class="footer">
        <span>Service Maintenance Center</span><br>
        This page will automatically reflect availability once service is restored.
    </div>

</main>

</body>
</html>