* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;

            overflow: hidden;

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

            color: #171722;

            background:
                radial-gradient(
                    circle at 20% 20%,
                    rgba(99, 102, 241, 0.14),
                    transparent 35%
                ),
                radial-gradient(
                    circle at 80% 80%,
                    rgba(14, 165, 233, 0.12),
                    transparent 35%
                ),
                #f7f8fc;
        }

        /*
         * Soft animated background
         */
        body::before {
            content: "";

            position: fixed;
            width: 500px;
            height: 500px;

            top: -250px;
            left: -250px;

            border-radius: 50%;

            background: linear-gradient(
                135deg,
                #6366f1,
                #8b5cf6,
                #06b6d4
            );

            opacity: 0.08;
            filter: blur(80px);

            animation: float 12s ease-in-out infinite alternate;
        }

        body::after {
            content: "";

            position: fixed;
            width: 450px;
            height: 450px;

            right: -220px;
            bottom: -220px;

            border-radius: 50%;

            background: linear-gradient(
                135deg,
                #06b6d4,
                #3b82f6,
                #8b5cf6
            );

            opacity: 0.07;
            filter: blur(80px);

            animation: floatReverse 15s ease-in-out infinite alternate;
        }

        @keyframes float {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(180px, 120px);
            }
        }

        @keyframes floatReverse {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(-150px, -100px);
            }
        }

        /*
         * Main card
         */
        main {
            position: relative;
            z-index: 1;

            width: calc(100% - 40px);
            max-width: 520px;

            padding: 48px 40px;

            text-align: center;

            background: rgba(255, 255, 255, 0.72);

            border: 1px solid rgba(255, 255, 255, 0.9);

            border-radius: 18px;

            box-shadow:
                0 20px 60px rgba(30, 41, 59, 0.08);

            backdrop-filter: blur(14px);

            animation: appear 0.8s ease-out;
        }

        @keyframes appear {
            from {
                opacity: 0;
                transform: translateY(15px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /*
         * Logo
         */
        .logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            width: 52px;
            height: 52px;

            margin-bottom: 22px;

            border-radius: 14px;

            color: white;

            font-size: 20px;
            font-weight: 700;

            background: linear-gradient(
                135deg,
                #6366f1,
                #8b5cf6,
                #06b6d4
            );

            box-shadow:
                0 8px 25px rgba(99, 102, 241, 0.25);

            animation: pulse 4s ease-in-out infinite;
        }

        @keyframes pulse {
            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.04);
            }
        }

        h1 {
            margin: 0 0 10px;

            font-size: 28px;
            font-weight: 650;

            letter-spacing: -0.03em;
        }

        p {
            margin: 0;

            color: #737783;

            font-size: 15px;
            line-height: 1.6;
        }

        /*
         * Status
         */
        .status {
            display: inline-flex;
            align-items: center;
            gap: 8px;

            margin-top: 25px;
            padding: 7px 12px;

            border-radius: 999px;

            background: rgba(34, 197, 94, 0.08);

            color: #16a34a;

            font-size: 12px;
            font-weight: 500;
        }

        .status-dot {
            width: 7px;
            height: 7px;

            border-radius: 50%;

            background: #22c55e;

            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);

            animation: statusPulse 2s ease-in-out infinite;
        }

        @keyframes statusPulse {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.45;
            }
        }

        footer {
            margin-top: 30px;

            color: #a2a5ad;

            font-size: 11px;
        }

        @media (max-width: 500px) {
            main {
                padding: 40px 25px;
            }

            h1 {
                font-size: 25px;
            }
        }