/* ============================================================
   QCV Premium Mobile Experience
   ============================================================ */

/* ===== GLOBAL MOBILE RESETS ===== */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
button, a, input, select, textarea { -webkit-appearance: none; }

/* ===== SAFE AREAS (iPhone notch etc) ===== */
@supports (padding: max(0px)) {
    body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    .navbar, .topbar, .nav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ===== TABLET (max-width: 1024px) ===== */
@media(max-width:1024px) {
    .navbar { padding: 0 24px; }
    .hero { padding: 100px 32px 60px; gap: 40px; }
    .hero-right h1 { font-size: 2.6rem; }
    .section { padding: 60px 24px; }
    .footer { padding: 32px 24px 20px; }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media(max-width:768px) {

    /* --- Navbar --- */
    .navbar { padding: 0 16px; height: 60px; }
    .nav-logo, .nav a.logo { font-size: 1.3rem !important; }
    .nav-center {
        display: none;
        position: fixed; top: 60px; left: 0; right: 0;
        background: var(--card); border-bottom: 1px solid var(--border);
        flex-direction: column; padding: 8px 12px; gap: 2px; z-index: 999;
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
        max-height: calc(100vh - 60px); overflow-y: auto;
        border-radius: 0 0 16px 16px;
    }
    .nav-center.show { display: flex; animation: slideDown 0.25s ease; }
    .nav-center li { width: 100%; }
    .nav-center a {
        display: flex; align-items: center; gap: 10px;
        padding: 14px 16px; border-radius: 12px; font-size: 0.95rem;
        text-align: right; min-height: 48px; font-weight: 600;
    }
    .nav-center a:active { background: var(--bg2); transform: scale(0.98); }
    .nav-center a i { width: 20px; text-align: center; font-size: 0.9rem; }
    .nav-mobile-toggle {
        display: flex !important; width: 44px; height: 44px;
        align-items: center; justify-content: center;
        border-radius: 12px; font-size: 1.2rem;
    }
    .nav-mobile-toggle:active { background: var(--bg2); }
    .nav-right .login, .nav-right .btn-cta { display: none; }

    /* --- Hero --- */
    .hero {
        flex-direction: column-reverse; padding: 80px 16px 32px;
        text-align: center; min-height: auto; gap: 20px;
    }
    .hero-right h1 { font-size: 1.7rem; line-height: 1.35; letter-spacing: -0.3px; }
    .hero-right p { font-size: 0.88rem; max-width: 100%; margin: 0 auto 18px; line-height: 1.6; }
    .hero-btns { justify-content: center; flex-direction: column; align-items: center; gap: 10px; }
    .hero-btns .btn {
        width: 100%; max-width: 320px; justify-content: center;
        min-height: 50px; font-size: 0.95rem; border-radius: 14px;
    }
    .hero-left { width: 100%; }
    .hero-visual { max-width: 100%; padding: 8px; }
    .hero-badge { font-size: 0.72rem; padding: 6px 14px; }
    .hero-highlights {
        grid-template-columns: 1fr 1fr 1fr;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    .hero-highlight { font-size: 0.75rem; padding: 6px 12px; border-radius: 8px; }
    .hero-highlight strong { font-size: 0.92rem; }
    .hero-highlight span { font-size: 0.7rem; }
    .hero-steps { justify-content: center; }

    /* --- Sections --- */
    .section { padding: 40px 16px; }
    .section-header { margin-bottom: 28px; }
    .section-header h2 { font-size: 1.35rem; line-height: 1.3; }
    .section-header p { font-size: 0.85rem; line-height: 1.6; }

    /* --- Features Grid --- */
    .features-grid { grid-template-columns: 1fr; gap: 12px; }
    .feature-card { padding: 20px 16px; text-align: right; border-radius: 14px; }
    .f-icon { margin: 0 0 12px auto; width: 48px; height: 48px; }

    /* --- Pricing --- */
    .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; gap: 12px; }
    .price-card { padding: 24px 20px; border-radius: 16px; }
    .price-card.popular { transform: none; }
    .price-card .price { font-size: 2rem; }

    /* --- Steps --- */
    .steps-grid { grid-template-columns: 1fr; gap: 12px; }
    .step { text-align: center; padding: 16px; border-radius: 14px; }
    .step::after { display: none; }

    .stat-num { font-size: 1.6rem; }
    .stat-label { font-size: 0.72rem; }
    .stat-icon { width: 44px; height: 44px; font-size: 1rem; }

    /* --- Trust Bar --- */
    .trust-bar { flex-direction: column; gap: 8px; padding: 16px; }
    .trust-bar p { font-size: 0.82rem; }

    /* --- FAQ --- */
    .faq-list { padding: 0; }
    .faq-item { padding: 16px; border-radius: 14px; }

    /* --- CTA --- */
    .cta-box { padding: 28px 20px; border-radius: 16px; margin: 0 8px; }
    .cta-box h2 { font-size: 1.25rem; }
    .cta-box p { font-size: 0.85rem; margin-bottom: 18px; }

    /* --- Hero Particles --- */
    .hero-particles span { display: none; }

    /* --- Compare Grid --- */
    #compareGrid { grid-template-columns: 1fr !important; }

    /* --- Footer --- */
    .footer { padding: 24px 16px 16px; }
    .footer-content { flex-direction: column; gap: 20px; text-align: center; }
    .footer-brand { text-align: center; }
    .footer-links { text-align: center; margin-bottom: 8px; }
    .footer-links h4 { margin-bottom: 8px; font-size: 0.9rem; }
    .footer-links a { display: block; padding: 8px 0; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.88rem; }
    .footer-bottom { text-align: center; font-size: 0.72rem; padding-top: 12px; border-top: 1px solid var(--border); }

    /* --- Forms --- */
    .field { margin-bottom: 14px; }
    .field label { font-size: 0.82rem; margin-bottom: 4px; }
    .field input, .field textarea, .field select {
        padding: 14px; font-size: 16px; border-radius: 12px; min-height: 48px;
    }
    .field textarea { min-height: 80px; }
    .form-card { padding: 20px 16px; border-radius: 16px; }

    /* --- Buttons (touch targets) --- */
    .btn { min-height: 48px; padding: 12px 20px; font-size: 0.92rem; border-radius: 12px; font-weight: 700; }
    .btn-sm { min-height: 42px; padding: 10px 16px; font-size: 0.82rem; }
    .btn:active { transform: scale(0.97); }

    /* --- Cards --- */
    .feature-card, .price-card, .test-card, .test-card-new, .faq-item, .login-box, .auth-card {
        border-radius: 14px;
    }

    /* --- Grids --- */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* --- Tables on mobile --- */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-scroll table { min-width: 500px; }

    /* --- Modals --- */
    .modal { width: 94%; max-height: 85vh; border-radius: 16px; margin: 10vh auto; }

    /* --- WhatsApp button --- */
    .whatsapp-btn, .whatsapp-float { width: 52px; height: 52px; bottom: 16px; left: 16px; border-radius: 16px; }
    .whatsapp-btn i, .whatsapp-float i { font-size: 1.4rem; }

    /* --- Back to top --- */
    .back-to-top { width: 44px; height: 44px; bottom: 16px; right: 16px; border-radius: 14px; }

    /* --- Marquee / Partners --- */
    .marquee-section { padding: 20px 0; }
    .marquee-section h3 { font-size: 0.85rem; margin-bottom: 12px; }

    /* --- Portfolio --- */
    .portfolio-header { padding: 80px 16px 28px; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 12px; }
    .portfolio-card { border-radius: 14px; }

    /* --- Testimonials --- */
    .test-grid { grid-template-columns: 1fr; gap: 12px; }

    /* --- Blog --- */
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card { border-radius: 14px; }

    /* --- Login / Auth --- */
    .login-box, .auth-card { padding: 24px 16px; }
    .auth-toggle { min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media(max-width:480px) {
    .hero-right h1 { font-size: 1.45rem; }
    .hero-highlights { grid-template-columns: 1fr; gap: 8px; }
    .hero-btns .btn { font-size: 0.88rem; padding: 12px 18px; }
    .stat-num { font-size: 1.4rem; }
    .section { padding: 32px 12px; }
    .section-header h2 { font-size: 1.2rem; }
    .price-card .price { font-size: 1.7rem; }
    .cta-box { padding: 24px 16px; }
    .cta-box h2 { font-size: 1.1rem; }
    .footer { padding: 20px 12px 12px; }
    .nav-logo, .nav a.logo { font-size: 1.15rem !important; }
    .feature-card { padding: 16px 14px; }
    .hero { padding: 72px 12px 24px; }
    .hero-right h1 { font-size: 1.35rem; }
}

/* ===== VERY SMALL (max-width: 360px) ===== */
@media(max-width:360px) {
    .hero-right h1 { font-size: 1.25rem; }
    .hero-btns .btn { font-size: 0.82rem; padding: 10px 14px; min-height: 46px; }
    .section-header h2 { font-size: 1.1rem; }
    .stat-num { font-size: 1.2rem; }
    .nav-center a { padding: 12px 14px; font-size: 0.9rem; }
    .pricing-grid { padding: 0 4px; }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media(hover:none) and (pointer:coarse) {
    .btn, .nav-center a, .quick-card, .feature-card, .price-card, .faq-item {
        min-height: 44px;
    }
    .nav-center a { padding: 14px; }
    .faq-item { padding: 16px; }

    /* Better tap feedback */
    .plan:active, .method:active, .btn:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }

    /* Scrollable areas get momentum */
    .nav-center, .nav-tabs, .topbar-center {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media(max-width:768px) and (orientation:landscape) {
    .hero { min-height: auto; padding: 72px 20px 32px; }
    .hero-right h1 { font-size: 1.5rem; }
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== MOBILE ANIMATIONS ===== */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== MOBILE BOTTOM SHEET STYLE ===== */
@media(max-width:768px) {
    .nav-center.show {
        animation: slideDown 0.2s ease;
    }

    /* Cards get subtle lift on tap */
    .feature-card, .price-card, .blog-card, .portfolio-card {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .feature-card:active, .price-card:active, .blog-card:active, .portfolio-card:active {
        transform: scale(0.98);
    }
}

/* ===== MOBILE NOTIFICATION BADGE PULSE ===== */
@media(max-width:768px) {
    .notif-badge, .badge-count {
        min-width: 18px; height: 18px; font-size: 0.6rem; padding: 0 5px;
    }
}

/* ===== MOBILE SCROLL SNAP FOR HORIZONTAL LISTS ===== */
@media(max-width:768px) {
    .hero-highlights, .nav-tabs, .topbar-center {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    .hero-highlights > *, .nav-tabs > *, .topbar-center > * {
        scroll-snap-align: start;
    }
}

/* ===== MOBILE DARK MODE OVERRIDES ===== */
@media(max-width:768px) {
    body.dark-mode .nav-center {
        background: rgba(10,14,26,0.98);
        border-color: #1a2040;
        box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    }
    body.dark-mode .nav-center a:active {
        background: rgba(79,95,255,0.1);
    }
    body.dark-mode .whatsapp-btn, body.dark-mode .whatsapp-float {
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    }
}

/* ===== MOBILE FULL-WIDTH CTA BUTTONS ===== */
@media(max-width:480px) {
    .hero-btns .btn {
        max-width: 100%;
        border-radius: 14px;
    }
    .cta-box .btn, .cta-box .btn-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ===== MOBILE PRICING CARD HIGHLIGHT ===== */
@media(max-width:768px) {
    .price-card.popular {
        transform: none;
        order: -1;
    }
}

/* ===== MOBILE INPUT FOCUS STYLES ===== */
@media(max-width:768px) {
    .field input:focus, .field textarea:focus, .field select:focus {
        font-size: 16px; /* prevents iOS zoom */
    }
}

/* ===== MOBILE LOADING SKELETON ===== */
@media(max-width:768px) {
    .skeleton { border-radius: 10px; }
}