/* ============================================================
   PayYes Fintech — responsive.css
   Mobile-first breakpoints for tablet and desktop.
   ============================================================ */

/* ---------- Large desktops ---------- */
@media (min-width: 1280px) {
    .container { padding: 0 32px; }
}

/* ---------- Tablet and below ---------- */
@media (max-width: 1024px) {
    .section { padding: 56px 0; }
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-art { order: -1; max-width: 460px; margin: 0 auto; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .about-art { max-width: 440px; margin: 0 auto; }
    .contact-grid { grid-template-columns: 1fr; gap: 28px; }
    .service-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .services-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .services-hero-art { order: -1; }
    .cat-detail-grid { grid-template-columns: 1fr; gap: 32px; }
    .cat-detail-art { max-width: 440px; margin: 0 auto; }
    .steps-connected { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
    .steps-connected::before { display: none; }
}

/* ---------- Mobile nav breakpoint ---------- */
@media (max-width: 900px) {
    .nav, .header-cta .btn { display: none; }
    .hamburger { display: block; }
}

/* ---------- Small tablets ---------- */
@media (max-width: 768px) {
    :root { --header-h: 64px; }
    .section { padding: 44px 0; }
    .section-head { margin-bottom: 32px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .mv-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .cta-banner { padding: 32px 22px; }
    .cta-banner .btn-row .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .hero { padding: 40px 0 48px; }
    .hero-actions .btn { width: 100%; }
    .hero-trust { gap: 14px; }
    .breadcrumb ol { font-size: 0.82rem; }
    .service-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cat-mini-list { grid-template-columns: 1fr; }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
    .container { padding: 0 18px; }
    .card, .feature-card, .form-card, .contact-info-card { padding: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.85rem; }
    .hero-lead { font-size: 1rem; }
    .brand { font-size: 1.1rem; }
    .brand img, .brand-mark { height: 32px; width: 100px; }
    .section-title { font-size: 1.5rem; }
    .faq-trigger { padding: 16px 18px; font-size: 0.95rem; }
    .service-grid-4 { grid-template-columns: 1fr; }
    .steps-connected { grid-template-columns: 1fr; gap: 24px; }
    .pay-card, .pay-processing, .pay-success { padding: 22px 18px; }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .hamburger, .mobile-menu, .cta-banner { display: none !important; }
    body { color: #000; }
    .card, .feature-card { box-shadow: none; border: 1px solid #ccc; }
}