@media (max-width: 768px) {
  /* Global section padding */
  .r-section { padding-left: 20px !important; padding-right: 20px !important; }
  .r-section-inner { padding: 100px 20px 60px !important; }

  /* Grid layouts → single column */
  .r-grid-4 { grid-template-columns: 1fr !important; }
  .r-grid-auto { grid-template-columns: 1fr !important; }

  /* Flex rows → stack */
  .r-flex-row { flex-direction: column !important; }
  .r-flex-row-reverse { flex-direction: column !important; }
  .r-flex-row > *, .r-flex-row-reverse > * { flex: 1 1 100% !important; }

  /* Hide on mobile */
  .r-hide-mobile { display: none !important; }

  /* Stats bar */
  .r-stats { gap: 32px !important; margin-top: 48px !important; }

  /* Photos grid */
  .r-photo-grid { flex-direction: column !important; }
  .r-photo-grid > div { height: 220px !important; }

  /* Founder photos */
  .r-founder-photos { flex-direction: column !important; }
  .r-founder-photos > img { width: 100% !important; max-height: 260px !important; }

  /* QuantiX AI top flex */
  .r-quantix-row { flex-direction: column !important; align-items: flex-start !important; }
  .r-quantix-row > div:first-child { margin-bottom: 12px; }

  /* Role personas */
  .r-role-tabs { flex-direction: row !important; overflow-x: auto !important; min-width: 0 !important; gap: 0 !important; }
  .r-role-tabs > button { padding: 12px 16px !important; border-left: none !important; border-bottom: 3px solid transparent !important; white-space: nowrap !important; }
  .r-role-content { padding: 28px 20px !important; }

  /* Buttons don't overflow */
  .r-btn-wrap { flex-wrap: wrap !important; }
  .r-btn-wrap > a { flex: 1 1 100% !important; text-align: center !important; justify-content: center !important; padding-left: 20px !important; padding-right: 20px !important; }

  /* CTA logos */
  .r-cta-logos { gap: 24px !important; }
  .r-cta-logos > img { max-width: 160px !important; }

  /* Screenshot showcase - fix button placement */
  .r-showcase-row { flex-direction: column !important; }
  .r-showcase-row > * { flex: 1 1 100% !important; }
}

@media (max-width: 768px) {
  section { padding-left: 20px !important; padding-right: 20px !important; }
}