/* Brand Colors */
        :root {
            --brand-primary: #0056b3; /* Deep Blue */
            --brand-secondary: #f8f9fa; /* Light Gray */
            --brand-accent: #ffc107; /* Accent Yellow */
        }

        body, html {
            height: 100%;
            margin: 0;
            font-family: "Segoe UI", sans-serif;
            background: linear-gradient(135deg, #004494, #007bff);
            overflow: hidden;
        }

        /* Split screen layout */
        .split-left {
            background: linear-gradient(135deg, #004494, #0066cc);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 3rem;
            position: relative;
        }

            .split-left img {
                max-width: 180px;
                margin-bottom: 1.5rem;
                animation: fadeSlideDown 1s forwards;
            }

            .split-left h1, .split-left h2, .split-left p {
                animation: fadeSlideUp 1s forwards;
            }

            .split-left h1 {
                animation-delay: 0.3s;
            }

            .split-left h2 {
                animation-delay: 0.5s;
            }

            .split-left p {
                animation-delay: 0.7s;
            }

        .split-right {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 3rem;
        }

        /* Glassmorphism Card */
        .card-glass {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(15px);
            border-radius: 1.5rem;
            padding: 2.5rem;
            box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.2);
            width: 100%;
            max-width: 450px;
            animation: fadeSlideRight 1s forwards;
        }

        .form-floating > .form-control {
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
        }

            .form-floating > .form-control:focus {
                background: rgba(255,255,255,0.25);
                color: #fff;
            }

        .form-floating > label {
            color: rgba(255,255,255,0.7);
        }

        .btn-primary {
            background-color: var(--brand-accent);
            border: none;
            color: #000;
            font-weight: bold;
            transition: all 0.3s ease;
        }

            .btn-primary:hover {
                background-color: #e0a800;
                color: #000;
            }

        a {
            color: rgba(255,255,255,0.8);
        }

            a:hover {
                color: #fff;
                text-decoration: underline;
            }

        /* Animations */
        @keyframes fadeSlideUp {
            0%

        {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }

        }

        @keyframes fadeSlideDown {
            0%

        {
            opacity: 0;
            transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }

        }

        @keyframes fadeSlideRight {
            0%

        {
            opacity: 0;
            transform: translateX(30px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }

        }

        /* Floating shapes */
        .shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            animation: float 8s infinite ease-in-out;
        }

            .shape:nth-child(1) {
                width: 100px;
                height: 100px;
                top: 10%;
                left: 15%;
            }

            .shape:nth-child(2) {
                width: 150px;
                height: 150px;
                top: 30%;
                left: 70%;
            }

            .shape:nth-child(3) {
                width: 60px;
                height: 60px;
                top: 70%;
                left: 40%;
            }

            .shape:nth-child(4) {
                width: 80px;
                height: 80px;
                top: 50%;
                left: 20%;
            }

        @keyframes float {
            0%, 100%

        {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-25px);
        }

        }

        footer {
            text-align: center;
            padding: 1rem;
            color: rgba(255,255,255,0.7);
            font-size: 0.85rem;
        }

            footer a {
                color: rgba(255,255,255,0.7);
            }

                footer a:hover {
                    color: #fff;
                }