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


        /* =========================
           BODY
        ========================= */

        body {

            min-height: 100vh;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            background:

                radial-gradient(
                    circle at 50% 0%,
                    #9578ff 0%,
                    #6549c9 35%,
                    #30246c 65%,
                    #151331 100%
                );

            display: flex;

            align-items: center;

            justify-content: center;

            overflow-x: hidden;

            position: relative;
        }


        /* =========================
           BACKGROUND EFFECT
        ========================= */

        body::before {

            content: "";

            position: fixed;

            width: 350px;
            height: 350px;

            border-radius: 50%;

            background:
                rgba(164, 137, 255, 0.18);

            filter: blur(80px);

            top: -120px;
            left: -100px;

            pointer-events: none;
        }


        body::after {

            content: "";

            position: fixed;

            width: 300px;
            height: 300px;

            border-radius: 50%;

            background:
                rgba(54, 180, 255, 0.12);

            filter: blur(80px);

            right: -100px;
            bottom: -100px;

            pointer-events: none;
        }


        /* =========================
           MAIN
        ========================= */

        .page {

            width: 100%;

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 30px 16px;
        }


        /* =========================
           CARD
        ========================= */

        .container {

            width: 100%;

            max-width: 520px;

            padding: 25px;

            text-align: center;

            border-radius: 30px;

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

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

            box-shadow:
                0 30px 70px
                rgba(0, 0, 0, 0.35);

            backdrop-filter: blur(12px);

            animation:
                containerIn 0.8s ease;
        }


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

        .logo {

            width: 80%;

            max-width: 400px;

            height: auto;

            display: block;

            margin: 0 auto 28px;

            border-radius: 35px;

            box-shadow:
                0 20px 45px
                rgba(0, 0, 0, 0.40);

            animation:
                logoIn 0.8s ease;

            transition:
                transform 0.3s ease;
        }


        .logo:hover {

            transform:
                scale(1.015);
        }


        /* =========================
           BUTTONS
        ========================= */

        .buttons {

            width: 100%;

            display: flex;

            flex-direction: column;

            gap: 17px;
        }


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

        .btn {

            width: 100%;

            min-height: 78px;

            border: none;

            border-radius: 18px;

            color: #ffffff;

            font-size: 23px;

            font-weight: 900;

            letter-spacing: 1px;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;

            overflow: hidden;

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease;
        }


        /* Shine effect */

        .btn::before {

            content: "";

            position: absolute;

            top: 0;

            left: -120%;

            width: 80%;

            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,0.35),
                    transparent
                );

            transform:
                skewX(-20deg);

            transition:
                left 0.6s ease;
        }


        .btn:hover::before {

            left: 130%;
        }


        .btn:hover {

            transform:
                translateY(-4px);
        }


        .btn:active {

            transform:
                scale(0.96);
        }


        /* =========================
           REGISTER
        ========================= */

        .register {

            background:

                linear-gradient(
                    135deg,
                    #ffb000,
                    #ff7200,
                    #ff3b00
                );

            box-shadow:

                0 15px 35px
                rgba(255, 91, 0, 0.40);
        }


        .register:hover {

            box-shadow:

                0 20px 45px
                rgba(255, 91, 0, 0.55);
        }


        /* =========================
           LOGIN
        ========================= */

        .login {

            background:

                linear-gradient(
                    135deg,
                    #23d8f0,
                    #208fe8,
                    #315fe7
                );

            box-shadow:

                0 15px 35px
                rgba(30, 120, 235, 0.38);
        }


        .login:hover {

            box-shadow:

                0 20px 45px
                rgba(30, 120, 235, 0.55);
        }


        /* =========================
           HOTEL INFORMATION
        ========================= */

        .hotel-info {

            margin-top: 45px;

            text-align: left;

            color: #ffffff;

            line-height: 1.65;
        }


        .hotel-card {

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

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

            border-radius: 22px;

            padding: 24px;
        }


        .hotel-card h1 {

            font-size: 26px;

            line-height: 1.3;

            margin-bottom: 12px;
        }


        .hotel-card h2 {

            font-size: 20px;

            margin-top: 28px;

            margin-bottom: 9px;
        }


        .hotel-card p {

            color:
                rgba(255,255,255,0.84);

            font-size: 14px;

            margin-bottom: 7px;
        }


        .hotel-card ul {

            padding-left: 20px;

            color:
                rgba(255,255,255,0.84);

            font-size: 14px;
        }


        .hotel-card li {

            margin-bottom: 5px;
        }


        .hotel-stats {

            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 10px;

            margin-top: 18px;
        }


        .stat {

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

            border-radius: 14px;

            padding: 13px 8px;

            text-align: center;
        }


        .stat strong {

            display: block;

            font-size: 21px;
        }


        .stat span {

            display: block;

            font-size: 11px;

            color:
                rgba(255,255,255,0.65);
        }


        .disclaimer {

            margin-top: 25px;

            padding: 15px;

            border-radius: 14px;

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

            font-size: 12px;

            color:
                rgba(255,255,255,0.70);

            line-height: 1.55;
        }


        .hotel-links {

            margin-top: 18px;

            font-size: 13px;

            text-align: center;
        }


        .hotel-links a {

            color: #ffffff;

            text-decoration: underline;
        }


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

        .footer {

            margin-top: 23px;

            font-size: 11px;

            color:
                rgba(255, 255, 255, 0.55);

            line-height: 1.6;
        }


        /* =========================
           ANIMATIONS
        ========================= */

        @keyframes containerIn {

            from {

                opacity: 0;

                transform:
                    translateY(25px)
                    scale(0.96);
            }

            to {

                opacity: 1;

                transform:
                    translateY(0)
                    scale(1);
            }
        }


        @keyframes logoIn {

            from {

                opacity: 0;

                transform:
                    scale(0.85);
            }

            to {

                opacity: 1;

                transform:
                    scale(1);
            }
        }


        /* =========================
           TABLET
        ========================= */

        @media (max-width: 768px) {

            .container {

                max-width: 500px;

                padding: 22px;
            }

            .logo {

                margin-bottom: 24px;
            }
        }


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

        @media (max-width: 480px) {

            .page {

                padding: 18px 12px;
            }


            .container {

                padding: 17px;

                border-radius: 25px;
            }


            .logo {

                margin-bottom: 20px;

                border-radius: 27px;
            }


            .buttons {

                gap: 14px;
            }


            .btn {

                min-height: 70px;

                border-radius: 15px;

                font-size: 20px;
            }


            .hotel-card {

                padding: 19px;
            }


            .hotel-card h1 {

                font-size: 23px;
            }


            .hotel-stats {

                grid-template-columns: 1fr;

            }


            .footer {

                margin-top: 18px;
            }
        }


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

        @media (max-width: 350px) {

            .container {

                padding: 13px;
            }


            .btn {

                min-height: 62px;

                font-size: 18px;
            }
        }