/* ============================================================
   SIEVORA TECH — responsive.css
   Breakpoints: 991px | 767px | 479px
   ============================================================ */

/* ============================================================
   TABLET — 991px
   ============================================================ */
@media (max-width: 991px) {

  :root { --nav-h: 70px; }

  /* Navbar */
  .nav-links { display: none; }
  .hamburger { display: flex; }
 

  /* Hero */
  .hero { padding: calc(var(--nav-h) + 40px) 0 60px; }
  .hero-badge .badge-text { display: none; }
  .showcase-strip img { height: 160px; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-visual { order: -1; }
  .about-img-wrap { aspect-ratio: 16/9; }
  .about-badge-float { left: 20px; bottom: -20px; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr 1fr; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr 1fr; }

  /* Milestones */
  .milestones-grid { grid-template-columns: 1fr; border-radius: var(--radius); }

  /* Founder */
  .founder-grid { grid-template-columns: 1fr; gap: 48px; }
  .founder-img-wrap { aspect-ratio: 16/9; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-cta-side { text-align: left; }
  .footer-socials { justify-content: flex-start; }
  .footer-big-text { font-size: clamp(2.5rem, 6vw, 5rem); }
}

/* ============================================================
   MOBILE LARGE — 767px
   ============================================================ */
@media (max-width: 767px) {

  /* Section padding */
  .about, .benefits, .process, .pricing, 
  .testimonials, .milestones, .founder, .faq { padding: 80px 0; }

  /* Hero */
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns .btn,
  .hero-btns .media-dropdown { width: 100%; max-width: 320px; }
  .hero-btns .media-dropdown .btn { width: 100%; justify-content: center; }
  .media-menu-panel {
    left: 50%;
    width: min(82vw, 280px);
    transform: translate(-50%, 12px) scale(0.96);
    transform-origin: top center;
  }
  .media-dropdown[open] .media-menu-panel {
    transform: translate(-50%, 0) scale(1);
  }
  .hero-showcase { margin-top: 40px; }
  .showcase-strip img { height: 130px; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr; }

  /* Process */
  .process-item { grid-template-columns: 50px 1fr; }
  .process-arrow { display: none; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Milestones */
  .milestone-num { font-size: 2.4rem; }

  /* Footer */
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-big-text { font-size: clamp(2rem, 8vw, 4rem); }
}

/* ============================================================
   MOBILE SMALL — 479px
   ============================================================ */
@media (max-width: 479px) {

  :root { --nav-h: 64px; }

  /* Nav */
  .nav-book span { display: none; }
  .nav-book { padding: 10px 14px; }

  /* Hero */
  .hero-badge { font-size: 0.72rem; }
  .showcase-strip img { height: 100px; }
  .showcase-strip { gap: 8px; }

  .founder-socials {
    flex-direction: column;
  }

    /* Portfolio */
  .portfolio-grid { grid-template-columns: none;}

    /* Benefits */
  .benefits-grid { grid-template-columns: none; }

   .pricing-grid { grid-template-columns: none; }

  /* About */
  .about-stats { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 2rem; }
  .about-badge-float { position: relative; left: auto; bottom: auto; margin-top: 16px; }

  /* Process */
  .process-item { gap: 16px; }
  .process-num { font-size: 0.8rem; }

  /* Portfolio */
  .portfolio-info { padding: 18px; }

  /* Pricing */
  .pricing-card { padding: 28px; }

  /* FAQ */
  .faq-question { font-size: 0.9rem; }

  /* Footer */
  .footer-big { flex-direction: column; text-align: center; }
  .footer-big-img { display: none; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}