<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <title>网站维护中</title>
    <style>
        :root {
            --brand: #005eb8;
            --brand-dark: #003f7f;
            --accent: #28a7e1;
            --text-main: #1f2a44;
            --text-muted: #667085;
            --border: #d7e3f3;
            --bg-start: #eef6ff;
            --bg-end: #ffffff;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 18px;
            color: var(--text-main);
            font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
            background:
                radial-gradient(circle at top left, rgba(40, 167, 225, 0.18), transparent 34%),
                linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 62%, #f7fbff 100%);
        }

        .maintenance-page {
            width: min(100%, 960px);
        }

        .maintenance-card {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
            gap: 28px;
            padding: 54px;
            border: 1px solid rgba(215, 227, 243, 0.86);
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: 0 24px 70px rgba(31, 42, 68, 0.12);
        }

        .maintenance-card::before {
            position: absolute;
            top: -120px;
            right: -120px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(0, 94, 184, 0.08);
            content: "";
        }

        .eyebrow {
            margin: 0 0 16px;
            color: var(--brand);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        h1 {
            margin: 0;
            color: var(--text-main);
            font-size: clamp(34px, 5vw, 56px);
            line-height: 1.08;
            letter-spacing: -0.04em;
        }

        .summary {
            max-width: 580px;
            margin: 22px 0 0;
            color: var(--text-muted);
            font-size: 18px;
            line-height: 1.8;
        }

        .status-panel {
            position: relative;
            z-index: 1;
            align-self: center;
            padding: 28px;
            border: 1px solid var(--border);
            border-radius: 24px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .illustration {
            display: grid;
            place-items: center;
            min-height: 210px;
            margin-bottom: 24px;
            border-radius: 20px;
            background:
                linear-gradient(135deg, rgba(0, 94, 184, 0.08), rgba(40, 167, 225, 0.14)),
                #f7fbff;
        }

        .illustration svg {
            width: min(80%, 260px);
            height: auto;
        }

        .status-title {
            margin: 0 0 16px;
            font-size: 18px;
            font-weight: 700;
        }

        .status-list {
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.6;
        }

        .status-list li {
            display: flex;
            gap: 10px;
        }

        .status-dot {
            flex: 0 0 auto;
            width: 9px;
            height: 9px;
            margin-top: 7px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 5px rgba(40, 167, 225, 0.12);
        }

        .footer-note {
            margin: 24px 0 0;
            color: #8a94a6;
            font-size: 13px;
            line-height: 1.7;
        }

        @media (max-width: 760px) {
            body {
                align-items: flex-start;
                padding: 18px;
            }

            .maintenance-card {
                grid-template-columns: 1fr;
                padding: 30px 22px;
                border-radius: 22px;
            }

            .summary {
                font-size: 16px;
            }

        }
    </style>
</head>
<body>
<!-- GENSCRIPT-AI-START website maintenance static page -->
<main class="maintenance-page" aria-labelledby="maintenance-title">
    <section class="maintenance-card">
        <div>
            <p class="eyebrow">服务通知</p>
            <h1 id="maintenance-title">我们很快回来</h1>
            <p class="summary">
                很抱歉，当前页面暂时无法访问。我们的团队正在处理异常，并会尽快恢复服务。
                请您稍后再次刷新页面。
            </p>

            <p class="footer-note">
                如需紧急协助，请联系您的客户代表，或稍后再次访问。
            </p>
        </div>

        <aside class="status-panel" aria-label="维护说明">
            <div class="illustration" aria-hidden="true">
                <svg viewBox="0 0 320 240" role="img" focusable="false">
                    <defs>
                        <linearGradient id="screenGradient" x1="42" y1="40" x2="278" y2="190" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#ffffff"/>
                            <stop offset="1" stop-color="#e7f4ff"/>
                        </linearGradient>
                    </defs>
                    <rect x="50" y="44" width="220" height="136" rx="18" fill="url(#screenGradient)" stroke="#b8d7f1" stroke-width="4"/>
                    <rect x="72" y="68" width="112" height="12" rx="6" fill="#b8d7f1"/>
                    <rect x="72" y="94" width="176" height="10" rx="5" fill="#d4e7f8"/>
                    <rect x="72" y="116" width="142" height="10" rx="5" fill="#d4e7f8"/>
                    <circle cx="225" cy="76" r="20" fill="#28a7e1" opacity="0.2"/>
                    <path d="M218 75l7 7 14-17" fill="none" stroke="#005eb8" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M130 180h60l10 32h-80l10-32z" fill="#c9e1f4"/>
                    <rect x="102" y="209" width="116" height="10" rx="5" fill="#9fc5e7"/>
                    <circle cx="91" cy="156" r="9" fill="#28a7e1"/>
                    <circle cx="118" cy="156" r="9" fill="#005eb8"/>
                    <circle cx="145" cy="156" r="9" fill="#9fc5e7"/>
                </svg>
            </div>

            <p class="status-title">我们正在做这些事情</p>
            <ul class="status-list">
                <li><span class="status-dot"></span><span>定位异常原因并恢复受影响的服务。</span></li>
                <li><span class="status-dot"></span><span>保护已提交的数据，降低重复操作带来的风险。</span></li>
                <li><span class="status-dot"></span><span>服务恢复后，您可以继续浏览或重新提交请求。</span></li>
            </ul>
        </aside>
    </section>
</main>
<!-- GENSCRIPT-AI-END -->
</body>
</html>
