@media (min-width: 768px) and (max-width: 991px) {
    .container .nav-center {
        left: 15%;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-md);
        max-width: 100%;
    }

    :root {
        --font-size-xs: 0.875rem;
        --font-size-sm: 1rem;
        --font-size-md: 1.125rem;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.5rem;
        --font-size-xxl: 1.75rem;

        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 0.75rem;
        --space-lg: 1rem;
        --space-xl: 1.5rem;
        --space-xxl: 2rem;
    }

    h1 {
        font-size: var(--font-size-xl);
        line-height: 1.2;
        text-align: center;
    }

    h2 {
        font-size: var(--font-size-lg);
        line-height: 1.3;
    }

    section {
        padding: var(--space-xl) 0;
    }

    .nav-flex {
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-md) 0;
    }

    .nav-center {
        position: static;
        transform: none;
        order: 1;
    }

    .nav-links {
        order: 2;
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
        text-align: center;
    }

    .nav-side {
        order: 3;
        width: 100%;
        text-align: center;
    }

    .logo-img {
        height: 48px;
        margin-top: 0;
        max-width: 125px;
    }

    .hero {
        padding: var(--space-xl) 0;
        text-align: center;
    }

    .hero-subtitle {
        font-size: var(--font-size-md);
        margin-bottom: var(--space-md);
    }

    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .btn {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }

    .app-mockup {
        max-width: 100%;
        padding: var(--space-md);
        margin-top: var(--space-lg);
    }

    .chat-bubble {
        padding: var(--space-md);
    }

    .chat-content p {
        font-size: var(--font-size-md);
    }

    .ai-name {
        font-size: var(--font-size-lg);
    }

    .steps {
        flex-direction: column;
        gap: var(--space-lg);
        align-items: center;
    }

    .step-number {
        display: none;
    }

    .step {
        width: 100%;
        max-width: 350px;
        padding: var(--space-lg);
        margin-bottom: var(--space-md);
    }

    .step:hover {
        transform: none;
    }

    .step-number {
        top: -15px;
        width: 30px;
        height: 30px;
        font-size: var(--font-size-sm);
    }

    .step i {
        font-size: 2rem;
    }

    .step h3 {
        font-size: var(--font-size-md);
    }

    .step p {
        font-size: var(--font-size-sm);
    }

    .problem-solution {
        flex-direction: column;
        gap: var(--space-lg);
        align-items: center;
    }

    .card {
        width: 100%;
        max-width: 400px;
        padding: var(--space-lg);
    }

    .card-body li {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    .card-body p {
        font-size: var(--font-size-md);
    }

    .counters {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }

    .counter {
        width: 100%;
        max-width: 300px;
        padding: var(--space-lg);
        margin-bottom: 0;
    }

    .counter:hover {
        transform: none;
    }

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

    .counter i {
        font-size: 1.5rem;
    }

    .counter p {
        font-size: var(--font-size-sm);
    }

    .testimonials {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .testimonial {
        width: 100%;
        min-width: auto;
        padding: var(--space-lg);
    }

    .testimonial::before {
        font-size: 4rem;
        top: 10px;
        right: 15px;
    }

    .testimonial-body p {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    .trust-badges {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    .badge {
        width: 100%;
        max-width: 250px;
        justify-content: center;
        padding: var(--space-md);
    }

    .pricing-toggle {
        width: 100%;
        max-width: 300px;
    }

    .pricing-plans {
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
    }

    .pricing-card {
        width: 100%;
        max-width: 350px;
        min-width: auto;
    }

    .pricing-card.featured {
        transform: none;
        margin: 0;
    }

    .pricing-card:hover,
    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }

    .price {
        font-size: 2rem;
    }

    .original-price {
        font-size: 1.5rem;
    }

    .pricing-card .card-body {
        padding: var(--space-lg);
    }

    .pricing-card .card-body li {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-sm);
        padding-left: var(2rem);
    }

    .finance-benefits {
        flex-direction: column;
        gap: var(--space-md);
    }

    .benefit {
        width: 100%;
        min-width: auto;
        padding: var(--space-md);
    }

    .benefit:hover {
        transform: none;
    }

    .benefit i {
        font-size: 1.5rem;
    }

    .quote-section {
        padding: var(--space-lg);
    }

    .quote-mark {
        font-size: 1.5rem;
        top: 15px;
        left: 15px;
    }

    blockquote {
        font-size: var(--font-size-md);
        margin-left: var(--space-md);
    }

    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .quote-mark i {
        display: none;
    }

    .savings-calculator {
        margin-top: var(--space-lg);
        padding: var(--space-lg);
        max-width: 100%;
    }

    .calculator-form {
        gap: var(--space-md);
    }

    .calculator-result {
        font-size: 1.5rem;
    }

    .savings {
        font-size: 2rem;
    }

    .signup-content {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .signup-form,
    .signup-preview {
        width: 100%;
        min-width: auto;
    }

    .signup-form h2 {
        text-align: center;
        font-size: var(--font-size-lg);
    }

    input,
    select {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }

    .security-icons {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .security-box {
        width: 100%;
        max-width: none;
        min-width: auto;
        padding: var(--space-sm);
    }

    .security-box:hover {
        transform: none;
    }

    .preview-image {
        padding: var(--space-lg);
    }

    .finding {
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-xs);
    }

    .finding-icon {
        font-size: 1.2rem;
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }

    .footer-column {
        width: 100%;
        min-width: auto;
    }

    .footer-column h3 {
        font-size: var(--font-size-md);
    }

    .social-icons {
        justify-content: center;
    }

    .certification-badges {
        align-items: center;
    }

    .badge {
        font-size: var(--font-size-xs);
    }

    .btn-lg {
        padding: var(--space-md) var(--space-xl);
        font-size: var(--font-size-md);
    }

    .btn-link {
        font-size: var(--font-size-sm);
    }

    .mobile-center {
        text-align: center;
    }

    .mobile-full-width {
        width: 100%;
    }

    .mobile-hidden {
        display: none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-sm);
    }

    :root {
        --space-xs: 0.2rem;
        --space-sm: 0.4rem;
        --space-md: 0.6rem;
        --space-lg: 0.8rem;
        --space-xl: 1.2rem;
        --space-xxl: 1.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    .hero {
        padding: var(--space-lg) 0;
    }

    .section {
        padding: var(--space-lg) 0;
    }

    .step {
        padding: var(--space-md);
    }

    .testimonial {
        padding: var(--space-md);
    }

    .card {
        padding: var(--space-md);
    }

    .counter {
        padding: var(--space-md);
    }

    .pricing-card .card-header,
    .pricing-card .card-body,
    .pricing-card .card-footer {
        padding: var(--space-md);
    }

    .quote-section {
        padding: var(--space-md);
    }

    .savings-calculator {
        padding: var(--space-md);
    }

    .preview-image {
        padding: var(--space-md);
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--space-lg) 0;
    }

    section {
        padding: var(--space-lg) 0;
    }

    .steps {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .step {
        flex: 1;
        min-width: 250px;
    }

    .counters {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .counter {
        flex: 1;
        min-width: 200px;
    }
}