/* TutorHive Mobile Fixes (v3) */
@media (max-width: 768px) {
  /* Stack header */
  .nav .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    height: auto !important;
  }
  .menu {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .nav .btn {
    align-self: stretch !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }

  /* Tabbar fixes */
  .tabbar .container {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Typography */
  .h1 { font-size: clamp(26px, 6vw, 34px) !important; line-height:1.2 !important; }
  .h2 { font-size: clamp(20px, 5vw, 26px) !important; }
  .small, p { font-size: clamp(14px, 4vw, 17px) !important; line-height:1.5 !important; }

  /* Grids collapse */
  .grid { display:block !important; }
  .grid > * { width:100% !important; margin-bottom:16px !important; }
}



/* Benefits section polish */
#benefits { margin: 60px auto; padding: 20px 0; }
#benefits .h2 { text-align: center; margin-bottom: 30px; }
#benefits .grid { gap: 20px; }
#benefits .card {
  background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:20px; transition:transform .2s ease, box-shadow .2s ease;
}
#benefits .card:hover { transform: translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,.1); }
/* optional reveal animation if you're using .reveal/.show */
#benefits .card.reveal { opacity: 0; transform: translateY(30px); }
#benefits .card.reveal.show { opacity: 1; transform: none; transition: all .6s ease; }