/* ── responsive.css ── Mobile breakpoints ── */

/* Large screens: add some horizontal breathing room */
@media (min-width: 1200px) {
  .hero {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .navbar { padding: 14px 32px; }
  .hero   { padding: 72px 32px 56px; gap: 32px; }
  .section-pad { padding: 72px 32px; }
  .process-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .why-inner    { gap: 40px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .trust-bar    { padding: 14px 32px; }
}

/* Mobile landscape / small tablet */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 64px 24px 48px;
  }
  .hero-btns   { justify-content: center; }
  .hero-trust  { justify-content: center; }
  .hero-desc   { margin-left: auto; margin-right: auto; }
  .hero-illo   { max-width: 480px; margin: 0 auto; }
  .hero-float--tl { left: 0; }
  .hero-float--br { right: 0; }
}

/* Mobile */
@media (max-width: 768px) {
  /* Nav */
  .navbar { padding: 14px 20px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(7,9,15,.97);
    border-bottom: 0.5px solid var(--border);
    padding: 8px 0;
    backdrop-filter: blur(20px);
  }
  .nav-links.open { display: flex; }
  .nav-links li a {
    display: block;
    padding: 13px 20px;
    font-size: 15px;
  }
  .btn-nav-cta { display: none; }
  .hamburger   { display: flex; }
  .nav-logo-img { height: 28px; }

  /* Hero */
  .hero        { padding: 56px 20px 40px; gap: 36px; }
  .hero-title  { font-size: clamp(32px, 9vw, 48px); letter-spacing: -1.5px; }
  .hero-desc   { font-size: 15px; }
  .hero-btns   { flex-direction: column; align-items: center; }
  .btn-primary,
  .btn-ghost   { width: 100%; max-width: 320px; text-align: center; }
  .browser-cards { grid-template-columns: 1fr; gap: 8px; }
  .hero-float  { display: none; }

  /* Trust bar */
  .trust-bar  { padding: 12px 20px; }
  .tb-clients { gap: 10px; }
  .tb-sep     { display: none; }
  .tb-client  { font-size: 12px; }

  /* Sections */
  .section-pad   { padding: 56px 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .process-steps-grid  { grid-template-columns: 1fr; gap: 14px; }
  .process-promise     { flex-direction: column; gap: 14px; align-items: flex-start; }
  .why-inner     { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid    { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pricing-grid  { grid-template-columns: 1fr; }
  .services-cta  { flex-direction: column; gap: 8px; }

  /* FAQ */
  .faq-question { font-size: 14px; }

  /* CTA form */
  .form-row      { grid-template-columns: 1fr; }

  /* Footer */
  .footer {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-links { flex-wrap: wrap; gap: 14px; }

  /* WhatsApp */
  .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
}

/* Small screens */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .hero-title  { letter-spacing: -1px; }
  .nav-logo-img { height: 26px; }
  .price-card  { padding: 24px 20px; }
  .hero-float  { display: none; }
}