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

        html, body {
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
            font-size: 14px;
            color: #333;
        }

        .wrapper {
            display: flex;
            min-height: 100vh;
        }

        .left-panel {
            width: 30%;
            background: #dcdcdc;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .logo-container { text-align: center; }

        .logo-container img {
            width: 140px;
            height: 140px;
            margin-bottom: 1rem;
        }

        .logo-container h2 {
            font-size: 1.7rem;
            font-weight: 600;
            color: #333;
        }

        .right-panel {
            width: 70%;
            background: #fff;
            display: flex;
            flex-direction: column;
            background-image: linear-gradient(to bottom, #d5e8f0 0px, #ffffff 50px);
        }

        .right-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 3.5rem;
            padding-right: 3.5rem;
        }

        h1 {
            font-size: 1.75rem;
            font-weight: normal;
            color: #333;
            margin-bottom: 1.25rem;
        }

        p {
            font-size: 14px;
            line-height: 1.6;
            color: #444;
            margin-bottom: 0.6rem;
        }

        a { color: #2467af; text-decoration: none; }
        a:hover { text-decoration: underline; }

        .info-box {
            background: #f4f8fb;
            border-left: 3px solid #2467af;
            padding: 0.85rem 1rem;
            margin-top: 0.6rem;
            margin-bottom: 1.25rem;
            max-width: 360px;
        }

        .info-box p {
            font-size: 13px;
            line-height: 1.55;
            color: #555;
            margin-bottom: 0;
        }

        .btn {
            display: inline-block;
            background-color: #2467af;
            color: #fff !important;
            padding: 7px 20px;
            border-radius: 4px;
            font-size: 13px;
            text-decoration: none !important;
        }

        .btn:hover { background-color: #1d5590; }

        .footer {
            padding: 1rem 3.5rem;
            font-size: 13px;
            color: #999;
        }

        .footer a { color: #2467af; }
        .footer .sep { margin: 0 0.35rem; color: #ccc; }

        @media (max-width: 768px) {
            .wrapper { flex-direction: column; }
            .left-panel { width: 100%; padding: 2rem; }
            .right-panel { width: 100%; background-image: none; }
            .right-content { padding: 2rem 1.5rem; }
            .footer { padding: 1rem 1.5rem; }
        }