* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    min-height: 100vh; background: #f5f5f7;
    font-family: 'Montserrat', sans-serif;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
}
.bg-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 20s linear infinite; z-index: 0;
}
@keyframes gridMove { 0%{transform:translate(0,0)} 100%{transform:translate(60px,60px)} }
.glow {
    position: fixed; border-radius: 50%; filter: blur(100px);
    opacity: 0.5; z-index: 0; animation: float 8s ease-in-out infinite;
}
.glow-1 { width:600px;height:600px;background:#d4e4ff;top:-200px;left:-150px;animation-delay:0s; }
.glow-2 { width:500px;height:500px;background:#ffd4e4;bottom:-150px;right:-100px;animation-delay:-4s; }
.glow-3 { width:400px;height:400px;background:#e4ffd4;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-2s; }
@keyframes float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }
.container { position:relative;z-index:10;text-align:center;padding:60px 40px;max-width:720px;width:92%; }
.card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 28px;padding: 65px 55px;
    backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 8px 24px rgba(0,0,0,0.06),
        0 24px 48px rgba(0,0,0,0.04);
    animation:cardAppear 1s cubic-bezier(0.16,1,0.3,1) forwards;
    opacity:0;transform:translateY(30px);
    position:relative;
}
@keyframes cardAppear { to{opacity:1;transform:translateY(0)} }
.corner { position:absolute;width:22px;height:22px;border-color:rgba(0,0,0,0.12);border-style:solid; }
.corner-tl{top:12px;left:12px;border-width:2px 0 0 2px;border-radius:6px 0 0 0}
.corner-tr{top:12px;right:12px;border-width:2px 2px 0 0;border-radius:0 6px 0 0}
.corner-bl{bottom:12px;left:12px;border-width:0 0 2px 2px;border-radius:0 0 0 6px}
.corner-br{bottom:12px;right:12px;border-width:0 2px 2px 0;border-radius:0 0 6px 0}
.logo-wrapper {
    display:inline-block;margin-bottom:45px;padding:18px 28px;
    background:#fff;border-radius:14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    animation:logoPulse 3s ease-in-out infinite;animation-delay:1s;
}
@keyframes logoPulse {
    0%,100%{box-shadow:0 4px 20px rgba(0,0,0,0.06),0 0 0 0 rgba(59,130,246,0)}
    50%{box-shadow:0 8px 32px rgba(0,0,0,0.08),0 0 0 10px rgba(59,130,246,0.05)}
}
.logo-wrapper img { display:block;height:70px;width:auto; }
.divider {
    width:70px;height:2px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,0.2),transparent);
    margin:0 auto 35px;animation:dividerGrow 1.2s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;transform:scaleX(0);
}
@keyframes dividerGrow { to{transform:scaleX(1)} }
.title {
    font-family:Roboto,serif;font-size:clamp(28px,5vw,42px);font-weight:700;
    color:#1a1a1a;letter-spacing:-0.5px;line-height:1.2;margin-bottom:20px;
    animation:textAppear 1s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;opacity:0;transform:translateY(20px);
}
.subtitle {
    font-size:clamp(14px,2.5vw,17px);font-weight:400;color:rgba(0,0,0,0.55);
    line-height:1.7;margin-bottom:45px;
    animation:textAppear 1s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;opacity:0;transform:translateY(20px);
}
@keyframes textAppear { to{opacity:1;transform:translateY(0)} }
.progress-section {
    margin-bottom:40px;
    animation:textAppear 1s cubic-bezier(0.16,1,0.3,1) 0.7s forwards;opacity:0;transform:translateY(20px);
}
.progress-label { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px; }
.progress-label span { font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,0.45); }
.progress-label .percent { color:rgba(0,0,0,0.7);font-size:13px; }
.progress-bar { width:100%;height:4px;background:rgba(0,0,0,0.06);border-radius:10px;overflow:hidden; }
.progress-fill {
    height:100%;width:0%;
    background:linear-gradient(90deg,#6366f1,#8b5cf6);
    border-radius:10px;animation:progressAnim 2.5s cubic-bezier(0.16,1,0.3,1) 1s forwards;
}
@keyframes progressAnim { to{width:95%} }
.status {
    display:inline-flex;align-items:center;gap:10px;padding:10px 22px;
    background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:50px;
    animation:textAppear 1s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;opacity:0;transform:translateY(20px);
}
.status-dot {
    width:8px;height:8px;background:#22c55e;border-radius:50%;
    animation:blink 1.5s ease-in-out infinite;box-shadow:0 0 8px rgba(34,197,94,0.5);
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.85)} }
.status-text { font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#15803d; }
.footer { margin-top:35px;animation:textAppear 1s cubic-bezier(0.16,1,0.3,1) 1.1s forwards;opacity:0;transform:translateY(20px); }
.footer p { font-size:12px;color:rgba(0,0,0,0.35);letter-spacing:1px; }
.particles { position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none; }
.particle {
    position:absolute;width:3px;height:3px;background:rgba(99,102,241,0.3);
    border-radius:50%;animation:particleFloat linear infinite;
}
@keyframes particleFloat {
    0%{transform:translateY(100vh) rotate(0deg);opacity:0}
    10%{opacity:1} 90%{opacity:1}
    100%{transform:translateY(-100px) rotate(720deg);opacity:0}
}


@media (max-width: 518px) {

    .container {
        padding: 30px 10px;
    }
    .card {
        padding: 44px 20px;
    }
    .logo-wrapper {
        padding: 9px 14px;
    }
    .logo-wrapper img {
        display: block;
        height: auto;
        width: 100%;
    }
}