/* BeautyHub Responsive */

@media (max-width: 1100px) {
  .split-with-photo { grid-template-columns: 1fr; }
  .brand-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-visual-card { margin: 0 auto; max-width: 360px; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-text { text-align: center; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-checks { align-items: center; }
  .hero-ctas, .hero-stats-row { justify-content: center; }
  .hero-mockup { max-width: 440px; margin: 0 auto; }
  .wallet-frame { transform: none; }
  .mockup-float.f2 { left: 0; }
  .campaign-grid { grid-template-columns: repeat(2, 1fr); }
  .campaign-featured { grid-template-columns: 1fr; }
  .steps-grid, .feature-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(4, 1fr); }
  .cta-box { grid-template-columns: 1fr; }
  .split-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row, .lists-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav-menu, .header-actions .btn-ghost, .header-actions .btn-outline { display: none; }
  .mobile-toggle { display: flex; }
  .header-actions .btn-primary { display: none; }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: flex; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .header-inner { padding: 0 18px; }
  .hero { padding: 40px 0 56px; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
  .mockup-float { display: none; }
  .section { padding: 64px 0; }
  .campaign-grid, .brand-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: 1fr; }
  .app-content { padding: 18px 14px; }
  .app-topbar { padding: 12px 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .sticky-cta { width: calc(100% - 28px); justify-content: space-between; }
  .wallet-hero-stats { flex-wrap: wrap; gap: 18px; }
}