/* ============================================================
   Site Setu - Responsive Stylesheet
   responsive.css
   ============================================================ */

/* ---- Large Desktop ---- */
@media (max-width: 1280px) {
  .features-grid    { grid-template-columns: repeat(3, 1fr); }
  .modules-grid     { grid-template-columns: repeat(4, 1fr); }
  .team-grid        { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tablet / Medium ---- */
@media (max-width: 1024px) {
  section { padding: 72px 24px; }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 48px;
  }
  .hero-desc { margin: 0 auto 32px; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .hero-float-badge.badge-1 { left: 0; top: -10px; }
  .hero-float-badge.badge-2 { right: 0; bottom: 10px; }

  .features-grid    { grid-template-columns: repeat(2, 1fr); }
  .modules-grid     { grid-template-columns: repeat(2, 1fr); }
  .steps-timeline   { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .steps-timeline::before { display: none; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .team-grid        { grid-template-columns: repeat(2, 1fr); }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); }

  .showcase-inner { grid-template-columns: 1fr; gap: 40px; }
  .showcase-text { text-align: center; }
  .showcase-text .section-desc { margin: 0 auto; }
  .showcase-list { max-width: 480px; margin: 28px auto 0; }
  .showcase-img-badge { bottom: -14px; left: 10px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }

  .cta-box { padding: 50px 36px; }
}

/* ---- Small Tablet / Large Phone ---- */
@media (max-width: 768px) {
  :root { font-size: 15px; }
  section { padding: 60px 20px; }

  .header-inner { padding: 0 20px; height: 64px; }
  nav.main-nav { display: none; }
  .hamburger { display: flex; }
  .header-cta .btn-demo { display: none; }

  .hero { padding: 88px 20px 50px; }
  .hero-title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .hero-dashboard { max-width: 100%; }

  .features-grid { grid-template-columns: 1fr; gap: 18px; }
  .modules-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .steps-timeline { grid-template-columns: 1fr; gap: 28px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .team-grid     { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .stat-number { font-size: 2rem; }
  .stat-card { padding: 28px 16px; }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .cta-box { padding: 40px 24px; }
  .cta-box::before { font-size: 7rem; }
  .cta-actions { flex-direction: column; align-items: center; }

  .section-title { font-size: clamp(1.5rem, 5vw, 2.2rem); }

  .hero-float-badge { display: none; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  :root { font-size: 14px; }
  section { padding: 50px 16px; }

  .hero { padding: 80px 16px 44px; }
  .hero-badge { font-size: 0.72rem; }

  .btn-primary,
  .btn-secondary,
  .btn-demo {
    font-size: 0.88rem;
    padding: 12px 22px;
  }

  .team-grid { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .dash-grid { grid-template-columns: 1fr 1fr; }

  .faq-q { font-size: 0.88rem; padding: 16px 18px; }
  .faq-a { padding: 0 18px; }

  #scroll-top { width: 40px; height: 40px; font-size: 0.85rem; bottom: 20px; right: 20px; }
}

/* ---- Print ---- */
@media print {
  #site-header, #scroll-top, .hero-float-badge,
  .btn-primary, .btn-secondary, .btn-demo,
  .cta-banner, .marquee-strip { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding: 30px 0; page-break-inside: avoid; }
}