/* ========================================
   MOBILE RESPONSIVE OPTIMIZATIONS - ADD TO END OF style.css
   ======================================== */

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    :root {
        --section-padding: 5rem 0;
    }

    .hero-content h1 {
        font-size: 3rem;
    }
}

/* Mobile Breakpoint */
@media (max-width: 768px) {

    /* Typography Adjustments */
    .hero-content h1 {
        font-size: 2.25rem !important;
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1.05rem !important;
        line-height: 1.6;
    }

    .section-title {
        font-size: 2rem !important;
    }

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

    /* Navbar Mobile */
    .navbar {
        padding: 1rem 0;
    }

    .logo-text {
        font-size: 1.5rem;
    }

    .btn-login {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Hero Section Mobile */
    .hero {
        padding: 6rem 0 3rem;
    }

    .btn-hero {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .stat-card {
        padding: 1.25rem;
    }

    .stat-value {
        font-size: 2rem;
    }

    /* Service Cards Mobile */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    .card-icon {
        font-size: 2.5rem;
        width: 70px;
        height: 70px;
    }

    .card-title {
        font-size: 1.5rem;
    }

    .card-description {
        font-size: 0.95rem;
    }

    /* Pricing Cards Mobile */
    .pricing .glass-panel {
        padding: 2rem 1.5rem !important;
    }

    #price-monthly,
    #price-yearly {
        font-size: 2.5rem !important;
    }

    .pricing ul li {
        padding: 0.6rem 0 !important;
        font-size: 0.95rem !important;
    }

    .payment-btn {
        padding: 0.875rem 1.5rem !important;
    }

    /* Footer Mobile */
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* Blobs - Smaller on Mobile */
    .blob-1,
    .blob-2,
    .blob-3 {
        width: 300px !important;
        height: 300px !important;
    }

    /* Sections */
    .hero,
    .services,
    .pricing,
    .testimonials {
        padding: 3rem 0;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.875rem !important;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    #price-monthly,
    #price-yearly {
        font-size: 2.25rem !important;
    }
}