/* === responsive.css — Media Queries (Tablet, Mobile, Small Mobile, Reduced Motion) === */

      /* ============================================================
       RESPONSIVE
       ============================================================ */
      @media (max-width: 1440px) {
        .services-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      @media (max-width: 1023px) {
        .nav-links,
        .nav-cta.desktop-only {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .hero-inner,
        .hero > .container {
          flex-direction: column;
          text-align: center;
        }
        .hero-content {
          max-width: 100%;
        }
        .hero h1 {
          font-size: clamp(1.8rem, 5vw, 2.8rem);
        }
        .hero-description {
          margin-left: auto;
          margin-right: auto;
        }
        .hero-buttons {
          justify-content: center;
        }
        .hero-stats {
          justify-content: center;
          gap: 24px;
        }
        .hero-canvas {
          min-height: 300px;
          width: 100%;
          order: -1;
          margin-bottom: 24px;
        }
        .hero-badge {
          font-size: 0.75rem;
        }
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .ai-features-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .projects-grid,
        .projects-grid.is-loading {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .stats-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        .pricing-grid {
          grid-template-columns: 1fr;
          max-width: 480px;
          margin: 0 auto;
        }
        .pricing-card.highlighted {
          transform: none;
        }
        .pricing-card.highlighted:hover {
          transform: translateY(-4px);
        }
        .team-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .footer-inner {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
        .section-header {
          margin-bottom: 48px;
        }
        .section-title {
          font-size: clamp(1.6rem, 4vw, 2.4rem);
        }
        .project-filters {
          gap: 6px;
          overflow-x: auto;
          justify-content: flex-start;
          padding-bottom: 8px;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .project-filters::-webkit-scrollbar { display: none; }
        .filter-btn {
          padding: 7px 14px;
          font-size: 0.78rem;
          white-space: nowrap;
          flex-shrink: 0;
        }
        /* RTL tablet */
        html[dir="rtl"] .hero-content {
          text-align: center;
        }
        html[dir="rtl"] .hero-buttons {
          justify-content: center;
        }
        html[dir="rtl"] .hero-stats {
          justify-content: center;
        }
      }
      @media (max-width: 767px) {
        .section {
          padding: 64px 0;
        }
        .container {
          padding: 0 16px;
        }
        .services-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .ai-features-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .projects-grid,
        .projects-grid.is-loading {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .stats-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .team-grid {
          grid-template-columns: 1fr;
          max-width: 360px;
          margin: 0 auto;
          gap: 12px;
        }
        .form-row {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .hero {
          padding-top: calc(var(--nav-height) + 16px);
        }
        .hero h1 {
          font-size: clamp(1.6rem, 7vw, 2.2rem);
        }
        .hero-description {
          font-size: 0.95rem;
        }
        .hero-stats {
          flex-direction: row;
          gap: 16px;
          flex-wrap: wrap;
          justify-content: center;
        }
        .hero-stat {
          text-align: center;
        }
        .stat-value {
          font-size: 1.2rem;
        }
        .stat-label {
          font-size: 0.72rem;
        }
        .hero-buttons {
          flex-direction: column;
          align-items: stretch;
        }
        .hero-buttons .btn {
          justify-content: center;
        }
        .hero-canvas {
          min-height: 220px;
        }
        .testimonial-card {
          flex: 0 0 100%;
          min-width: 100%;
          padding: 24px;
        }
        .footer-inner {
          grid-template-columns: 1fr;
          gap: 24px;
          text-align: center;
        }
        .footer-tagline {
          margin: 0 auto;
          text-align: center;
        }
        .footer-sub {
          text-align: center;
        }
        .social-links {
          justify-content: center;
        }
        .footer-bottom {
          flex-direction: column;
          text-align: center;
          gap: 12px;
        }
        .footer-legal {
          justify-content: center;
        }
        .section-header {
          margin-bottom: 36px;
        }
        .section-title {
          font-size: clamp(1.5rem, 6vw, 2rem);
        }
        .section-subtitle {
          font-size: 0.95rem;
        }
        .section-label {
          font-size: 0.72rem;
          padding: 5px 12px;
        }
        .service-card {
          padding: 24px 20px;
        }
        .ai-feature-card {
          padding: 28px 20px;
        }
        .pricing-card {
          padding: 28px 20px;
        }
        .nav {
          height: 60px;
        }
        .nav-logo svg {
          width: 24px;
          height: 24px;
        }
        .logo-text {
          font-size: 1rem;
        }
        .clients-track {
          gap: 20px;
        }
        .client-name {
          font-size: 0.9rem;
        }
        .marquee-item {
          font-size: 0.78rem;
          padding: 6px 14px;
        }
        .project-filters {
          gap: 4px;
          margin-bottom: 24px;
          overflow-x: auto;
          justify-content: flex-start;
          padding-bottom: 6px;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .project-filters::-webkit-scrollbar { display: none; }
        .filter-btn {
          padding: 6px 12px;
          font-size: 0.72rem;
          white-space: nowrap;
          flex-shrink: 0;
        }
        .contact-form .btn {
          width: 100%;
          justify-content: center;
        }
        .service-checklist {
          grid-template-columns: 1fr;
        }
        .check-item {
          font-size: 0.82rem;
          padding: 8px 12px;
        }
        /* RTL mobile */
        html[dir="rtl"] .hero-content {
          text-align: center;
        }
        html[dir="rtl"] .hero-buttons {
          align-items: stretch;
        }
        html[dir="rtl"] .footer-tagline {
          text-align: center;
        }
        html[dir="rtl"] .footer-sub {
          text-align: center;
        }
      }
      @media (max-width: 374px) {
        .hero h1 {
          font-size: 1.5rem;
        }
        .hero-stats {
          flex-direction: column;
          gap: 12px;
        }
        .stats-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ============================================================
       REDUCED MOTION
       ============================================================ */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .marquee-content {
          animation: none !important;
        }
        .floating-orb {
          animation: none !important;
        }
        html {
          scroll-behavior: auto;
        }
      }