/* Mobile Responsiveness Improvements */

/* Phones (up to 768px) */
@media screen and (max-width: 768px) {

    /* Typography Sizing */
    .glitch-text {
        font-size: 2.5rem !important;
        /* Reduced from 5rem */
        line-height: 1.1;
    }

    .subtitle {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    /* Navigation */
    nav {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem 1rem !important;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        width: 100%;
    }

    /* Input Form Stacking */
    .input-group {
        flex-direction: column;
        gap: 10px;
    }

    input[type="text"] {
        width: 100%;
    }

    .btn-primary {
        width: 100%;
    }

    .input-card {
        padding: 20px !important;
    }

    /* Trust Bar Stacking */
    .trust-bar {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
        margin-top: 1rem;
    }

    /* Features Grid */
    .features {
        padding: 30px 5% !important;
        grid-template-columns: 1fr !important;
        /* Force single column */
    }

    /* Modal Adjustments */
    .modal-content {
        padding: 1.5rem !important;
        width: 90% !important;
    }

    .boat {
        font-size: 3rem !important;
    }
}

/* Very Small Phones (up to 480px) */
@media screen and (max-width: 480px) {
    .glitch-text {
        font-size: 2rem !important;
    }
}