/* ============================================
   RESPONSIVE – Single source of truth
   Breakpoints:
     xs  : < 400px   (small phones)
     sm  : < 576px   (phones)
     md  : < 768px   (large phones / small tablets)
     lg  : < 992px   (tablets / small laptops)
     xl  : < 1200px  (laptops)
     2xl : ≥ 1440px  (large desktops)
   ============================================ */

/* ── 2XL: large desktops ── */
@media (min-width: 1440px) {
  .container { max-width: var(--container-2xl); padding-inline: 40px; }
  .hero-content.container { padding-inline: 64px; }
  .about-hero .container { padding-inline: 64px; }
}

/* ── XL: laptops ── */
@media (max-width: 1200px) {
  :root {
    --text-6xl: 3.25rem;
    --text-5xl: 2.75rem;
  }
  .container { padding-inline: 28px; }
  .hero-content.container { padding-inline: 32px; }
  .about-hero .container { padding-inline: 32px; }

  /* Footer grid's minmax() floors (300px + 4x150px + gaps) don't fit
     this range and overflow horizontally since body clips overflow-x. */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
}

/* ── LG: tablets / small laptops ── */
@media (max-width: 992px) {
  :root {
    --text-6xl: 2.75rem;
    --text-5xl: 2.25rem;
  }

  /* Hero tablet tweaks */
  .hero-img-grid { width: 32%; }
  .hero-code-card { display: none; }
  .hero-stat-card.card-clients { top: 10px; }

  .section     { padding-block: var(--space-16); }
  .section-lg  { padding-block: var(--space-20); }
  .grid-4      { grid-template-columns: repeat(2, 1fr); }
  .grid-3      { grid-template-columns: repeat(2, 1fr); }

  /* Home */
  .showcase-grid  { grid-template-columns: 1fr; }
  .img-stack      { margin-top: var(--space-10); }
  .process-steps  { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
  .tech-panel.active { grid-template-columns: repeat(4, 1fr); }
  .projects-grid  { grid-template-columns: repeat(2, 1fr); }
  .home-blogs-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Services page */
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
  .service-detail { grid-template-columns: 1fr; gap: var(--space-8); }
  .service-detail.reverse .detail-visual { order: 0; }

  /* Service detail page */
  .svc-hero-body  { grid-template-columns: 1fr; }
  .svc-hero-visual { display: none; }
  .svc-features-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-process-grid  { grid-template-columns: repeat(2, 1fr); }
  .svc-process-grid::before { display: none; }

  /* Industry page */
  .ind-features-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-process-grid  { grid-template-columns: repeat(2, 1fr); }
  .ind-process-grid::before { display: none; }

  /* About */
  .about-hero-grid   { grid-template-columns: 1fr; gap: var(--space-12); }
  .about-hero-visual { max-width: 600px; margin-inline: auto; }
  .about-intro       { grid-template-columns: 1fr; gap: var(--space-12); }
  .about-image-stack { height: 380px; max-width: 560px; margin-inline: auto; }
  .about-process-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-process-grid > div > img { display: none; }
  .mission-vision    { grid-template-columns: 1fr; }
  .values-grid       { grid-template-columns: repeat(2, 1fr); }
  .culture-gallery   { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; }
  .culture-gallery > *:first-child { grid-column: span 2; }

  /* Blog */
  .blog-layout { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pricing-card.featured { transform: none; }
}

/* ── MD: large phones / small tablets ── */
@media (max-width: 768px) {
  :root {
    --text-6xl: 2.25rem;
    --text-5xl: 2rem;
  }

  /* Layout */
  .section        { padding-block: var(--space-12); }
  .section-header { margin-bottom: var(--space-10); }
  .hide-mobile    { display: none !important; }
  .container      { padding-inline: 20px; }
  .hero-content.container { padding-inline: 20px; }
  .about-hero .container { padding-inline: 20px; }

  /* Typography */
  .section-title  { font-size: clamp(1.5rem, 5vw, 2rem); }
  .section-subtitle { font-size: var(--text-base); }

  /* Hero */
  .hero           { height: auto; }
  .hero-content   { padding-top: var(--space-8); }
  /* Below the desktop 2-col breakpoint the visual panel is hidden, so the
     viewport-fill min-height from hero.css would leave a huge empty gap —
     go back to sizing the hero to its (now text-only) content. */
  .hero-grid      { grid-template-columns: 1fr; gap: var(--space-6); min-height: auto; }
  .hero-visual    { display: none; }
  .hero-desc      { max-width: 100%; }
  .hero-img-grid  { display: none; }
  .hero-img-label { display: none; }
  .hero-stat-card { display: none; }
  .hero-code-card { display: none; }
  .hero-title     { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .hero-actions   { gap: var(--space-3); }

  /* Home sections */
  .showcase-grid  { grid-template-columns: 1fr; }
  .img-stack      { height: 300px; margin-top: var(--space-8); }
  .img-stack-item { width: 190px; height: 142px; }
  .img-stack-item:nth-child(1) { transform: rotate(-9deg) translate(-115px, 25px); }
  .img-stack-item:nth-child(2) { transform: rotate(0deg) translate(0, -25px) scale(1.08); }
  .img-stack-item:nth-child(3) { transform: rotate(9deg) translate(115px, 25px); }
  .showcase-sticker { display: none; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .tech-panel.active { grid-template-columns: repeat(3, 1fr); }
  .projects-grid  { grid-template-columns: 1fr; }
  .home-blogs-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Blog */
  .blog-grid      { grid-template-columns: 1fr; }
  .blog-featured  { grid-template-columns: 1fr; }
  .blog-featured .blog-thumb { min-height: 200px; }

  /* Service detail page */
  .svc-overview   { grid-template-columns: 1fr; }
  .svc-overview-img { order: -1; }
  /* generated.css declares its md override BEFORE the base rule, so the
     2-col base always wins there; this late override actually collapses it */
  .service-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .svc-why-grid   { grid-template-columns: 1fr; }
  .svc-cta        { padding: var(--space-10) var(--space-6); }
  .svc-hero       { padding-block: var(--space-16); }

  /* Industry page */
  .ind-overview   { grid-template-columns: 1fr; }
  .ind-overview-img { order: -1; }
  .ind-gallery    { grid-template-columns: repeat(2, 1fr); }
  .ind-hero-stats { gap: var(--space-6); }
  .ind-cta        { padding: var(--space-10) var(--space-6); }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; }

  /* Footer */
  .footer-cta-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-5);
  }
  .footer-bottom  { align-items: flex-start; flex-direction: column; }

  /* Back-to-top & WhatsApp */
  .whatsapp-float,
  #back-to-top    { right: var(--space-4); }
}

/* ── SM: phones ── */
@media (max-width: 576px) {
  :root {
    --text-6xl: 2rem;
    --text-5xl: 1.75rem;
    --header-height: 50px;
  }

  /* Layout — 10px page gutter left/right on phones */
  .section        { padding-block: var(--space-10); }
  .hide-sm        { display: none !important; }
  .container      { padding-inline: 10px; }
  .hero-content.container { padding-inline: 10px; }
  .about-hero .container { padding-inline: 10px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Header */
  .site-header    { padding: 0 10px; }
  .header-shell   { gap: 10px; }
  .site-logo      { min-width: 0; gap: 8px; }
  .header-logo    { min-width: 0; }
  .site-logo .logo-img { height: 34px; }
  .hamburger      { width: 36px; height: 36px; }
  .brand-name     { font-size: 1.15rem; white-space: nowrap; }
  .brand-full     { display: none; }
  .brand-short    { display: inline; }
  .brand-tagline  { display: none; }
  .mobile-nav     { width: 100%; border-radius: 0; border-left: none; }
  .mobile-nav .nav-link,
  .mobile-accordion-btn { justify-content: center; text-align: center; }
  .mobile-accordion-btn { gap: 8px; }
  .mobile-accordion-body { margin-left: 0; padding-left: 0; border-left: none; }
  .mobile-accordion-body a { text-align: center; }
  .mobile-nav-head { justify-content: center; gap: 12px; }

  /* Hero */
  .hero-badge     { font-size: 11px; padding: 5px 12px 5px 8px; }
  .hero-title     { font-size: clamp(1.6rem, 7vw, 2rem); }
  .hero-desc      { font-size: var(--text-sm); }
  .hero-actions   { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust     { flex-wrap: wrap; }

  /* Home sections */
  .process-steps  { grid-template-columns: 1fr; }
  .section-divider { max-width: 280px; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .industry-card  { padding: var(--space-4); }
  .industry-icon  { font-size: 1.5rem; }
  .tech-panel.active { grid-template-columns: repeat(2, 1fr); }
  .tech-tabs      { gap: var(--space-2); }
  .tech-tab       { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .projects-grid  { grid-template-columns: 1fr; }
  .home-blogs-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .logos-row      { gap: var(--space-6); }

  /* Cards */
  .card           { padding: var(--space-6); }
  .card-icon      { width: 60px; height: 60px; }

  /* Buttons */
  .btn-lg         { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
  .btn-xl         { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

  /* Services page */
  .services-grid  { grid-template-columns: 1fr; }

  /* Service detail page */
  .svc-features-grid { grid-template-columns: 1fr; }
  .svc-process-grid  { grid-template-columns: 1fr; }
  .svc-hero-actions  { flex-direction: column; }
  .svc-cta-actions   { flex-direction: column; align-items: center; }
  .svc-hero-stats    { gap: var(--space-6); }
  .svc-cta           { padding: var(--space-8) var(--space-5); border-radius: var(--radius-xl); }

  /* Industry page */
  .ind-features-grid { grid-template-columns: 1fr; }
  .ind-process-grid  { grid-template-columns: 1fr; }
  .ind-gallery       { grid-template-columns: 1fr; }
  .ind-hero-body     { padding-block: var(--space-12); }
  .ind-hero-actions  { flex-direction: column; }
  .ind-cta-actions   { flex-direction: column; align-items: center; }
  .ind-cta           { padding: var(--space-8) var(--space-5); border-radius: var(--radius-xl); }

  /* About */
  .values-grid    { grid-template-columns: 1fr; }
  .about-proof-grid { grid-template-columns: repeat(3, 1fr); }
  .culture-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(3, 200px); }
  .culture-gallery > *:first-child { grid-column: span 1; }
  .card-a         { bottom: -12px; left: -8px; }
  .card-b         { top: 12px; right: -8px; }
  .about-image-stack { height: 300px; }
  .stack-small    { bottom: -16px; }
  .about-cta-actions { flex-direction: column; align-items: center; }

  /* Contact */
  .contact-details { grid-template-columns: 1fr; }
  .captcha-row    { flex-direction: column; align-items: flex-start; }
  .captcha-row .form-control { width: 100%; }

  /* Blog */
  .blog-grid      { grid-template-columns: 1fr; }

  /* Forms */
  .form-row       { grid-template-columns: 1fr; }

  /* Footer */
  .footer-cta-inner {
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }
  .footer-kicker  { margin-inline: auto; }
  .footer-cta-actions { width: 100%; justify-content: center; }
  .footer-cta-actions .btn,
  .footer-outline-btn { width: 100%; }
  .footer-grid    { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-brand,
  .footer-newsletter { grid-column: auto; }
  .footer-brand,
  .footer-col,
  .footer-newsletter,
  .footer-bottom  { text-align: center; }
  .footer-brand p { margin-inline: auto; }
  .footer-contact-cards { max-width: none; }
  .footer-contact-cards a,
  .footer-contact-cards div { text-align: center; border-left: 1px solid rgba(255,255,255,.08); }
  .footer-social  { justify-content: center; }
  .footer-col h4  { justify-content: center; }
  .footer-col a:hover { transform: none; }
  .footer-bottom  { align-items: center; padding: var(--space-3) 0 calc(var(--space-3) + 110px) 0; }
  .footer-bottom-links { justify-content: center; }

  /* Centered content on phones */
  .hero-content, .hero-grid > div, .section-header,
  .svc-hero-body, .ind-hero-body, .page-hero .container,
  .card, .service-card, .industry-card, .process-step,
  .stat-item, .value-card, .detail-content,
  .service-hero-grid > div, .detail-copy,
  .svc-overview-text, .ind-overview-text { text-align: center; }
  .detail-list, .showcase-checklist { width: fit-content; margin-inline: auto; text-align: left; }
  .section-subtitle { margin-inline: auto; }
  .hero-badge     { margin-inline: auto; }
  .hero-desc      { margin-inline: auto; }
  .hero-trust     { justify-content: center; }
  .hero-actions   { align-items: center; }
  .svc-hero-actions, .ind-hero-actions { align-items: center; }
  .svc-hero-stats, .ind-hero-stats { justify-content: center; }

  /* Our Work section — center all content on phones only */
  .showcase-grid > div:first-child { text-align: center; }

  /* Pricing */
  .pricing-grid   { grid-template-columns: 1fr; }

  /* FAQ */
  .faq-question   { padding: var(--space-4) var(--space-4); font-size: var(--text-sm); }
  .faq-answer-inner { padding: 0 var(--space-4) var(--space-4); }

  /* Process */
  .process-step h4 { font-size: var(--text-sm); }
}

/* ── XS: very small phones (< 400px) ── */
@media (max-width: 400px) {
  :root { --header-height: 46px; }

  .hamburger      { width: 34px; height: 34px; }
  .site-logo .logo-img { height: 32px; }
  .container      { padding-inline: 10px; }
  .hero-title     { font-size: 1.5rem; }
  .hero-actions .btn { font-size: var(--text-xs); padding: var(--space-3) var(--space-4); }
  .industries-grid { grid-template-columns: 1fr; }
  .tech-panel.active { grid-template-columns: repeat(2, 1fr); }
  .stats-grid     { grid-template-columns: 1fr 1fr; }
  .stat-item .number { font-size: 1.75rem; }
  .section-title  { font-size: 1.4rem; }
  .btn-lg         { padding: var(--space-3) var(--space-5); }
  .mobile-nav     { padding: 8px; }
  .footer-grid    { grid-template-columns: 1fr; }
  .svc-hero h1,
  .ind-hero h1    { font-size: 1.6rem; }
  .pricing-price .amount { font-size: 2.25rem; }
  .about-proof-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .about-proof-grid div { text-align: left; }
}

/* ── Industry / Service page ── */
@media (max-width: 992px) {
  .ind-tech-grid     { gap: var(--space-2); }
  .ind-tech-pill     { font-size: var(--text-xs); padding: var(--space-2) var(--space-4); }
  .ind-step-num      { width: 56px; height: 56px; font-size: var(--text-lg); }
  .ind-testimonial   { padding: var(--space-8); }
  .ind-testimonial blockquote { font-size: var(--text-lg); }
  .ind-faq-list      { max-width: 100%; }
  .ind-check-list li { font-size: var(--text-sm); }
  .ind-hero-badge    { font-size: var(--text-xs); }
  .ind-back-btn      { font-size: 11px; }
}

@media (max-width: 768px) {
  .ind-tech-grid     { gap: var(--space-2); }
  .ind-tech-pill     { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
  .ind-step-num      { width: 48px; height: 48px; font-size: var(--text-base); }
  .ind-testimonial   { padding: var(--space-6) var(--space-5); }
  .ind-testimonial blockquote { font-size: var(--text-base); }
  .ind-testimonial-author { flex-direction: column; gap: var(--space-3); }
  .ind-check-list li { font-size: var(--text-sm); }
  .ind-hero-badge    { font-size: 11px; padding: 5px 12px; }
  .ind-back-btn      { display: none; }
  .ind-faq-list      { max-width: 100%; }
}

@media (max-width: 576px) {
  .ind-tech-pill     { font-size: 11px; padding: 6px 12px; }
  .ind-step-num      { width: 44px; height: 44px; font-size: var(--text-sm); }
  .ind-testimonial   { padding: var(--space-5) var(--space-4); border-radius: var(--radius-xl); }
  .ind-testimonial .quote { font-size: 3rem; }
  .ind-testimonial blockquote { font-size: var(--text-sm); }
  .ind-check-list    { gap: var(--space-2); }
  .ind-check-list li { font-size: var(--text-sm); }
  .ind-hero-badge    { font-size: 11px; }
  .ind-tech-grid     { gap: var(--space-2); }
}

/* ── Show/hide helpers ── */
@media (min-width: 769px) {
  .show-mobile { display: none !important; }
}
@media (min-width: 577px) {
  .show-sm { display: none !important; }
}

/* ── Header nav collapse ── */
@media (max-width: 1180px) {
  .primary-nav { gap: 2px; }
  .nav-link    { padding-inline: 11px; font-size: 12px; }
  .header-phone { display: none; }
}
@media (max-width: 1040px) {
  .primary-nav { display: none; }
  .hamburger   { display: flex; }
  .mobile-nav  { display: block; }
  .btn-header-cta.hide-mobile { display: none; }
}