@media (max-width: 768px) {

    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 !important;
        overflow-x: hidden;
    }


    button, h1, h2, h3 {
        font-family: "Francois One", sans-serif;
    }

    /* Full screen mobile layout */
    .signup-wrapper {
        width: 100vw;
        min-height: 100vh;
        background: black;
        color: white;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Orange header bar */
    .signup-header {
        width: 100%;
        background: #F76902;
        padding: 1rem 0;
        margin-bottom: 2rem;
    }

    .signup-header h2 {
        font-family: "Francois One", sans-serif;
        font-size: 1.75em;
        margin: 0;
    }

    /* Circle image */
    .signup-img {
        width: 70%;
        max-width: 350px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1.5rem;
    }

    /* Title */
    .signup-title {
        font-family: "Francois One", sans-serif;
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    /* Form */
    .signup-form {
        width: 100%;
        max-width: 350px;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    /* Input groups */
    .input-group {
        text-align: left;
    }

    .input-group label {
        font-family: "Figtree", sans-serif;
        font-size: 1rem;
        margin-bottom: 0.3rem;
        display: block;
    }

    .input-group input {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        border: none;
        font-size: 1rem;
    }

    /* Checkbox */
    .checkbox-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: "Figtree", sans-serif;
    }

    /* SIGN UP button */
    .signup-btn {
        background: #F76902;
        color: white;
        border: none;
        padding: 5px 0;
        border-radius: 12px;
        font-size: 1.5rem;
        font-family: "Francois One", sans-serif;
        letter-spacing: 0.5px;
    }

    /* Login link */
    .login-link {
        margin-top: 1rem;
        font-family: "Figtree", sans-serif;
    }

    .login-link a {
        color: #F76902;
        font-weight: bold;
        text-decoration: none;
    }

    .error-box {
        background: rgba(255, 77, 77, 0.15);
        color: #ff4d4d;
        border-left: 4px solid #ff4d4d;
        padding: 10px 12px;
        margin-top: 8px;
        border-radius: 8px;
        font-size: 0.95rem;
        text-align: left;
        width: 100%;
        animation: fadeIn 0.25s ease-out;
    }

    /* Smooth fade-in animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: translateY(0); }
    }


}