@import url('fonts/Megrim-Regular.ttf');
		
        :root {
			font-family: "Megrim", system-ui;
			  font-weight: 400;
			  font-style: normal;
        }

        body {
            margin: 0;
            min-height: 100vh;
            min-height: 100svh;

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

            color: #fff;

            background:
                linear-gradient(
                    120deg,
                    #050012 0%,
                    #1a0033 25%,
                    #3b005c 45%,
                    #003a5c 65%,
                    #020617 100%
                ),
                conic-gradient(
                    from 180deg at 50% 50%,
                    rgba(255, 0, 180, 0.35),
                    rgba(140, 0, 255, 0.35),
                    rgba(0, 180, 255, 0.35),
                    rgba(255, 0, 180, 0.35)
                );

            background-blend-mode: screen;
            background-size: 140% 140%;

            animation: color-flow 3s ease-out forwards;
        }

        main {
            text-align: center;
            max-width: 520px;
            padding: 3rem 2.5rem;

            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            border-radius: 16px;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.12),
                inset 0 0 0 1px rgba(255, 255, 255, 0.10);

            opacity: 0;
            transform: translateY(10px) scale(0.99);

            animation: card-in 700ms ease-out 1.8s forwards;
            will-change: transform, opacity;
        }

        h1 {
            font-size: 2.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 1.2rem;

            color: #f3edff;

            text-shadow:
                0 0 6px rgba(255, 0, 180, 0.35),
                0 0 18px rgba(140, 0, 255, 0.20);

            animation: title-glow 6s ease-in-out infinite alternate;
        }

        p {
            font-size: 1.1rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        @keyframes color-flow {
            from { background-position: 0% 0%; }
            to   { background-position: 50% 50%; }
        }

        @keyframes card-in {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes title-glow {
            0% {
                text-shadow:
                    0 0 4px rgba(255, 0, 180, 0.25),
                    0 0 14px rgba(140, 0, 255, 0.15);
            }
            100% {
                text-shadow:
                    0 0 8px rgba(255, 0, 200, 0.45),
                    0 0 22px rgba(160, 0, 255, 0.30);
            }
        }

        @media (max-width: 768px) {
            main {
                padding: 2.2rem 1.8rem;
                box-shadow:
                    0 3px 12px rgba(0, 0, 0, 0.10),
                    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
            }

            h1 {
                font-size: 2.1rem;
                letter-spacing: 0.12em;
            }

            p {
                font-size: 1rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body { animation: none; background-position: 50% 50%; }
            main { animation: none; opacity: 1; transform: none; }
            h1 { animation: none; }
        }