* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

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

        body {
            font-family: Arial, Helvetica, sans-serif;
            background:
                radial-gradient(
                    circle at 50% 35%,
                    #3a0825 0%,
                    #180311 35%,
                    #080106 75%
                );
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .page {
            width: 100%;
            max-width: 650px;
            padding: 30px 20px;
            text-align: center;
        }

        /* ==========================================
           BUNNY
        ========================================== */

        .bunny {
            position: relative;
            width: 130px;
            height: 130px;
            margin: 0 auto 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bunny::before,
        .bunny::after {
            content: "";
            position: absolute;
            width: 38px;
            height: 92px;
            border-radius: 50% 50% 45% 45%;

            background: linear-gradient(
                160deg,
                #ffffff 0%,
                #ffd9eb 45%,
                #ff4f9a 100%
            );

            top: -48px;

            box-shadow:
                0 0 25px rgba(255, 54, 139, 0.35);
        }

        .bunny::before {
            left: 20px;
            transform: rotate(-13deg);
        }

        .bunny::after {
            right: 20px;
            transform: rotate(13deg);
        }

        .bunny-face {
            position: relative;
            width: 105px;
            height: 95px;

            border-radius:
                48% 48% 45% 45%;

            background:
                linear-gradient(
                    145deg,
                    #ffffff,
                    #ffd9eb
                );

            box-shadow:
                0 0 25px rgba(255, 72, 151, 0.45),
                0 0 70px rgba(255, 36, 125, 0.18);
        }

        .eye {
            position: absolute;
            top: 36px;

            width: 9px;
            height: 13px;

            background: #1b0612;
            border-radius: 50%;
        }

        .eye.left {
            left: 30px;
        }

        .eye.right {
            right: 30px;
        }

        .nose {
            position: absolute;
            left: 50%;
            top: 52px;

            transform:
                translateX(-50%)
                rotate(45deg);

            width: 10px;
            height: 10px;

            background: #ff4f9a;
            border-radius: 3px;
        }

        .mouth {
            position: absolute;
            left: 50%;
            top: 64px;

            width: 20px;
            height: 10px;

            transform: translateX(-50%);

            border-bottom:
                2px solid #8e2458;

            border-radius:
                0 0 50% 50%;
        }

        /* ==========================================
           LOGO
        ========================================== */

        .logo {
            font-size: 48px;
            font-weight: 900;
            letter-spacing: -2.5px;
            margin-bottom: 8px;
        }

        .logo span {
            color: #ff3d91;

            text-shadow:
                0 0 20px rgba(255, 61, 145, 0.6);
        }

        .tagline {
            color: #ff8fbd;

            text-transform: uppercase;

            font-size: 12px;

            letter-spacing: 5px;

            margin-bottom: 28px;
        }

        /* ==========================================
           CDN DESCRIPTION
        ========================================== */

        .description {
            max-width: 500px;

            margin: 0 auto 30px;

            color: #d8c6cf;

            font-size: 15px;

            line-height: 1.7;
        }

        .description strong {
            color: #fff;
        }

        /* ==========================================
           STATUS
        ========================================== */

        .status {
            display: inline-flex;

            align-items: center;

            gap: 9px;

            margin-bottom: 25px;

            padding:
                9px 16px;

            border-radius: 30px;

            background:
                rgba(255, 61, 145, 0.07);

            border:
                1px solid
                rgba(255, 61, 145, 0.18);

            color: #bdaab4;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 1.5px;

            box-shadow:
                0 0 25px
                rgba(255, 61, 145, 0.06);

            backdrop-filter: blur(5px);
        }

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

            border-radius: 50%;

            background: #35e889;

            box-shadow:
                0 0 9px
                rgba(53, 232, 137, .8);

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

        @keyframes statusPulse {

            0%,
            100% {
                opacity: .55;
                transform: scale(.85);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* ==========================================
           LIVE ACTIVITY
        ========================================== */

        .live-activity {
            display: inline-flex;

            align-items: center;

            gap: 8px;

            margin-bottom: 28px;

            padding:
                10px 16px;

            border-radius: 30px;

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

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

            color: #a9959f;

            font-size: 12px;

            letter-spacing: .4px;
        }

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

            flex-shrink: 0;

            border-radius: 50%;

            background: #35e889;

            box-shadow:
                0 0 8px
                rgba(53, 232, 137, .8);

            animation:
                livePulse 1.6s
                ease-in-out infinite;
        }

        .live-count {
            min-width: 48px;

            color: #fff;

            font-weight: 800;

            display: inline-block;

            transition:
                opacity .25s ease,
                transform .25s ease;
        }

        .live-label {
            color: #a9959f;
        }

        @keyframes livePulse {

            0%,
            100% {
                opacity: .55;
                transform: scale(.85);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* ==========================================
           BUTTON
        ========================================== */

        .visit-button {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            min-width: 190px;

            padding:
                13px 24px;

            border-radius: 30px;

            background:
                linear-gradient(
                    135deg,
                    #ff237e,
                    #ff4f9a
                );

            color: #fff;

            text-decoration: none;

            font-size: 13px;

            font-weight: 800;

            letter-spacing: .7px;

            box-shadow:
                0 8px 30px
                rgba(255, 35, 126, .25);

            transition:
                transform .2s ease,
                box-shadow .2s ease,
                filter .2s ease;
        }

        .visit-button:hover {
            transform: translateY(-2px);

            filter: brightness(1.08);

            box-shadow:
                0 12px 35px
                rgba(255, 35, 126, .4);
        }

        .visit-button:active {
            transform: translateY(0);
        }

        .arrow {
            margin-left: 8px;

            font-size: 15px;

            transition:
                transform .2s ease;
        }

        .visit-button:hover .arrow {
            transform: translateX(4px);
        }

        /* ==========================================
           FOOTER
        ========================================== */

        footer {
            margin-top: 28px;

            font-size: 10px;

            color: #806a76;

            letter-spacing: 2px;

            text-transform: uppercase;
        }

        /* ==========================================
           FLOATING HEARTS
        ========================================== */

        .heart {
            position: fixed;

            color: #ff3d91;

            opacity: .12;

            font-size: 25px;

            animation:
                float 8s
                linear infinite;
        }

        .heart:nth-child(1) {
            left: 10%;
            bottom: -30px;
            animation-delay: 0s;
        }

        .heart:nth-child(2) {
            left: 80%;
            bottom: -30px;
            animation-delay: 3s;
            font-size: 18px;
        }

        .heart:nth-child(3) {
            left: 25%;
            bottom: -30px;
            animation-delay: 5s;
            font-size: 15px;
        }

        @keyframes float {

            0% {
                transform:
                    translateY(0)
                    rotate(0);
            }

            100% {
                transform:
                    translateY(-110vh)
                    rotate(180deg);
            }
        }

        /* ==========================================
           MOBILE
        ========================================== */

        @media (max-width: 500px) {

            .page {
                padding: 20px;
            }

            .bunny {
                transform: scale(.8);

                margin-bottom: 10px;
            }

            .logo {
                font-size: 38px;
            }

            .tagline {
                font-size: 10px;
                letter-spacing: 4px;
            }

            .description {
                font-size: 14px;
            }

            .live-activity {
                font-size: 11px;

                padding:
                    9px 13px;
            }
        }