* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #0f172a, #1e293b, #111827);
            overflow: hidden;
        }

        /* Background Glow */

        body::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            background: #3b82f6;
            filter: blur(180px);
            opacity: .4;
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            50% {
                transform: translateY(-40px) translateX(30px);
            }
        }

        /* Animated Border */

        .border {
            position: relative;
            padding: 20px;
            animation: borderShape 6s linear infinite;
            background: linear-gradient(45deg,
                    #00d4ff,
                    #6d5dfc,
                    #ff0080,
                    #00d4ff);
            background-size: 300%;
        }

        @keyframes borderShape {

            0% {
                border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
                background-position: 0%;
            }

            25% {
                border-radius: 65% 35% 30% 70% / 60% 30% 70% 40%;
                background-position: 100%;
            }

            50% {
                border-radius: 30% 70% 60% 40% / 50% 70% 30% 50%;
                background-position: 0%;
            }

            75% {
                border-radius: 55% 45% 70% 30% / 30% 60% 40% 70%;
                background-position: 100%;
            }

            100% {
                border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
                background-position: 0%;
            }

        }

        /* Card */

        .card {
            width: 500px;
            padding: 50px;
            margin: 25px;
            background: #0f172a08;
            color: #fff;
            text-align: center;
            animation: borderShape 6s linear infinite;

        }

        .card h2 {
            font-size: 30px;
            margin-bottom: 10px;
        }

        .card p {
            color: #94a3b8;
            font-size: 15px;
            margin-bottom: 35px;
        }

        .otp {

            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 35px;

        }

        .otp input {

            width: 58px;
            height: 65px;
            background: #1e293b;
            border: 2px solid rgba(255, 255, 255, .08);
            outline: none;
            color: white;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            border-radius: 16px;
            transition: .35s;

        }

        .otp input:focus {

            border-color: #00d4ff;
            transform: translateY(-6px) scale(1.08);
            box-shadow:
                0 0 20px #00d4ff55,
                0 0 40px #00d4ff33;

        }

        button {

            width: 100%;
            padding: 16px;
            border: none;
            cursor: pointer;
            font-size: 17px;
            font-weight: 600;
            border-radius: 15px;
            color: white;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            transition: .4s;

        }

        button:hover {

            transform: translateY(-4px);
            box-shadow: 0 18px 35px rgba(59, 130, 246, .45);

        }

        .resend {

            margin-top: 22px;
            color: #94a3b8;
            font-size: 14px;

        }

        .resend a {

            color: #38bdf8;
            text-decoration: none;

        }