/* ... Keeping your existing styles ... */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:linear-gradient(135deg,#1e1b4b,#4f46e5);color:white;}
.main-header{display:flex;justify-content:space-between;align-items:center;padding:20px 8%;background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);flex-wrap:wrap;}
.logo{font-size:22px;font-weight:700;}
.logo span{background:linear-gradient(90deg,#38bdf8,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav{display:flex;flex-wrap:wrap;justify-content:center;}
.nav a{margin-left:20px;margin-top:5px;text-decoration:none;color:white;font-size:14px;transition:0.3s;}
.nav a:hover{color:#38bdf8;}
.hero{display:flex;align-items:center;justify-content:space-between;padding:60px 8%;min-height:85vh;gap:40px;}
.hero-text{max-width:500px;}
.hero-text h1{font-size:42px;margin-bottom:20px;}
.hero-text p{font-size:16px;opacity:0.85;}
.auth-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(15px);padding:35px;border-radius:18px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.2);}
.auth-card h2{text-align:center;margin-bottom:20px;}
.input-group input{width:100%;padding:12px;border-radius:10px;border:none;margin-bottom:12px;font-size:14px;}
.auth-btn{width:100%;padding:12px;border:none;border-radius:10px;background:#38bdf8;color:#111827;font-weight:700;cursor:pointer;transition:0.3s;}
.auth-btn:hover{background:#0ea5e9;}
.trust{text-align:center;padding:30px 8%;background:#f3f4f6;color:#111827;}

.branding{font-size:11px;opacity:0.7;margin-left:10px;}

/* Alert styles for error messages */
.error-msg {
    color: #ff9999;
    background: rgba(255, 0, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 13px;
}

/* TABLET */
@media (max-width: 992px){

    .hero{
        flex-direction:column;
        text-align:center;
        padding:50px 6%;
    }

    .hero-text h1{
        font-size:36px;
    }

    .auth-card{
        margin-top:20px;
    }

    /* Branding fix */
    .branding{
        display:flex;
        flex-direction:column;
        align-items:center;
        line-height:1.3;
    }
}


/* MOBILE */
@media (max-width: 576px){

    .main-header{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .nav{
        justify-content:center;
        flex-direction:column; /* important */
        align-items:center;
    }

    .nav a{
        margin:5px 0;
    }

    /* Branding text spacing */
    .branding{
        display:flex;
        flex-direction:column;
        align-items:center;
        font-size:13px;
    }

    .branding strong{
        font-size:14px;
        margin-top:2px;
    }

    .hero{
        padding:40px 5%;
    }

    .hero-text h1{
        font-size:28px;
    }

    .hero-text p{
        font-size:14px;
    }

    .auth-card{
        padding:20px;
        max-width:100%;
    }
}