/* ========================================
   WPBot Marketing Website - Responsive
   ======================================== */

/* Tablet (1024px) */
@media (max-width: 1024px) {
    .features-grid,
    .capabilities-grid,
    .related-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .split-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .split-section.reverse {
        direction: ltr;
    }

    .feature-hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

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

    .tech-specs {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        display: block;
        overflow-x: auto;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }

    /* Navbar */
    .navbar-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(3, 7, 18, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 999;
    }

    .navbar-nav.open {
        display: flex;
    }

    .navbar-nav a {
        font-size: 1.25rem;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        min-width: auto;
        grid-template-columns: 1fr;
        background: transparent;
        border: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: grid;
    }

    .mobile-toggle {
        display: block;
        z-index: 1001;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 7rem 0 4rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    /* Grids */
    .features-grid,
    .capabilities-grid,
    .related-features {
        grid-template-columns: 1fr;
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .steps::before {
        display: none;
    }

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

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

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        max-width: 100%;
    }

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

    /* Page header */
    .page-header {
        padding: 6rem 0 3rem;
    }

    .feature-hero-content {
        text-align: left;
    }

    /* Pricing */
    .pricing-card {
        padding: 2rem;
    }

    /* Logos */
    .logos-grid {
        gap: 2rem;
    }

    /* CTA */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Small mobile (480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

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

    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

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

    .feature-card {
        padding: 1.5rem;
    }

    .glass-card {
        padding: 1.5rem;
    }

    .pricing-card .price {
        font-size: 2.5rem;
    }

    .bg-orb {
        display: none;
    }
}