/* ── 1024px (Tablet) ── */
@media (max-width: 1024px) {
    .hero-title { font-size: 2.8rem; }
    .section-title { font-size: 2.2rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(3, 1fr); }

    .sidebar-layout { grid-template-columns: 1fr; }
    .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .sidebar-newsletter { grid-column: 1 / -1; }
}

/* ── 768px (Mobile) ── */
@media (max-width: 768px) {
 
    .navbar .container {        max-width:90%; padding: 0 var(--spacing-sm); }
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--text-main);
        cursor: pointer;
        border-radius: 12px;
        transition: background var(--transition);
        z-index: +1;
        margin-left: -55px;
        margin-right:-33px;
    }
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
    .mobile-only-separator { height: 1px; background: rgba(128,128,128,0.12); margin: 0.75rem 0; width: 100%; }

    .hero { min-height: 92vh; padding: 100px 0 60px; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .hero-avatar { width: 110px; height: 110px; }
    .hero-skills { gap: 0.5rem; }

    .section { padding: 3rem 0; }
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.95rem; }

    .skills-grid,
    .services-grid,
    .why-grid,
    .testimonials-grid,
    .faq-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }

    .projects-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .blog-grid { grid-template-columns: 1fr; }
    .project-card .thumb-wrap { height: 180px; }
    .service-card img { height: 140px; }

    .process-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .process-step { padding: 1rem; }
    .process-icon { width: 64px; height: 64px; font-size: 1.3rem; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .stat-item .stat-number { font-size: 2rem; }
    .stat-item .stat-label { font-size: 0.7rem; }

    .cta-section h2 { font-size: 1.7rem; }

    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
    .footer-brand p { max-width: 100%; margin: 0 auto; }
    .social-links { justify-content: center; }
    .payment-methods { gap: 0.75rem; font-size: 1.4rem; }

    .glass-card { padding: var(--spacing-md); }
    .grid-2col, .grid-sidebar { grid-template-columns: 1fr; }

    /* ── Sidebar Mobile ── */
    .sidebar { grid-template-columns: 1fr; }
    .sidebar-widget { padding: 1.25rem; }
    .sidebar-search { flex-direction: column; gap: 0.5rem; }
    .sidebar-search .form-control { border-radius: var(--radius-sm); border-right: 1px solid rgba(128,128,128,0.15); }
    .sidebar-search .btn { border-radius: var(--radius-sm); width: 100%; justify-content: center; }
    .sidebar-recent li { gap: 0.6rem; }
    .sidebar-post-img { width: 48px; height: 48px; }
    .sidebar-newsletter p { font-size: 0.8rem; }

    /* ── Blog ── */
    .blog-page { padding-top: 100px !important; }
    .blog-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }

    /* ── Profile Mobile ── */
    .profile-layout { grid-template-columns: 1fr; }
    .profile-sidebar { position: static; }
    .settings-grid { grid-template-columns: 1fr; }
    .order-footer-grid { grid-template-columns: 1fr; }
    .order-header { grid-template-columns: 1fr; }
    .order-reviews { grid-template-columns: 1fr; }
    .conversation-preview { max-width: 150px; }

    /* ── Payment ── */
    .payment-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .payment-methods-wrap { gap: 0.75rem; font-size: 2rem !important; }

    /* ── RTL ── */
    [dir="rtl"] .nav-links { flex-direction: column; right: auto; left: -100%; }
    [dir="rtl"] .nav-links.active { left: 0 !important; right: auto !important; }
    [dir="rtl"] .nav-link { text-align: right; }
}

/* ── 576px (Small Mobile) ── */
@media (max-width: 576px) {
    .hero-title { font-size: 1.8rem; }
    .hero-avatar { width: 90px; height: 90px; }
    .hero-subtitle { font-size: 1rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-skills .skill-tag { font-size: 0.8rem; padding: 0.35rem 0.75rem; }
    .btn { padding: 0.65rem 1.25rem; font-size: 0.85rem; }
    .theme-btn {
        padding: 0.5rem;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: -57px;
    }

    .process-grid { grid-template-columns: 1fr; }
    .process-icon { width: 56px; height: 56px; font-size: 1.1rem; }

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

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item .stat-number { font-size: 1.6rem; }

    .cta-section h2 { font-size: 1.4rem; }
    .cta-section p { font-size: 0.9rem; }

    .project-card .thumb-wrap { height: 160px; }
    .service-card img { height: 120px; }
    .blog-card-img { height: 160px; }

    .sidebar { gap: 1rem; }
    .sidebar-widget { padding: 1rem; }
    .sidebar-recent h4 { font-size: 0.82rem; }
    .sidebar-post-img { width: 40px; height: 40px; }
}

/* ── 320px (Tiny) ── */
@media (max-width: 320px) {
    .hero-title { font-size: 1.5rem; }
    .container { padding: 0 0.75rem; }
    .logo { font-size: 1.1rem; }
    .skill-tag { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
    .tech-pill { font-size: 0.65rem; }
    .blog-card-img { height: 140px; }
    .project-card .thumb-wrap { height: 140px; }
    .project-body { padding: var(--spacing-sm); }
}

/* ── Desktop Up ── */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .mobile-only-separator { display: none !important; }
    .close-menu-btn { display: none !important; }
}

/* ── Print ── */
@media print {
    .navbar, .nav-overlay, .mobile-menu-btn, .footer, .cta-section, .hero-actions { display: none !important; }
    .hero { min-height: auto; padding: 2rem 0; }
    .section { padding: 1rem 0; break-inside: avoid; }
    .glass-card { box-shadow: none; border: 1px solid #ddd; }
    body { color: #000; background: #fff; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .fade-up, .fade-in, .scale-in { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}