/* =============================================================
   RESPONSIVE.CSS — Mobile-First Breakpoints
   Breakpoints:  1024px (tablet), 768px (mobile), 480px (small)
   ============================================================= */


/* ── Tablet: ≤ 1024px ────────────────────────────────────── */
@media screen and  (max-width: 1100px) {

  .container { width: 90%; }

  .hero {min-height: max-content;}

  /* Home */
  .features-grid         { grid-template-columns: repeat(2, 1fr); }
  .benefits-layout { grid-template-columns: 1fr 400px; }

  /* About */
  .values-grid           { grid-template-columns: repeat(3, 1fr); }
  .team-grid             { grid-template-columns: repeat(2, 1fr); }

  /* Features */
  .int-grid              { grid-template-columns: repeat(4, 1fr); }

  /* Footer */
  /* .footer-grid           { grid-template-columns: 1fr 1fr; } */


}

/* ── Mobile: ≤ 850px ─────────────────────────────────────── */
@media screen and  (max-width: 850px) {

  .container { width: 85%; }

  /* Nav — hide desktop links, show hamburger */
  .nav-links { display: none; }
  .hamburger { display: none; }
  .mobile-sitemap { display: block; padding: 5px; color: var(--color-cta); }

  /* Hero */
  .hero-content  { grid-template-columns: 1fr; padding: 70px 0 300px; gap: 20px; }
  .hero-stat span { font-size: var(--text-md); padding-right: 2px; }
  .float-pill    { display: none; }
  .hero-visual   { display: none; }

  /* Home sections */
  .features-grid  { grid-template-columns: 1fr; }
  .benefits-layout { grid-template-columns: 1fr 250px; }
  .stats-grid      { grid-template-columns: 1fr 1fr; }
  .roi-grid        { grid-template-columns: 1fr; }

  /* Features page */
  .feature-block          { grid-template-columns: 1fr; }
  .feature-block.reverse  { direction: ltr; }
  .int-grid               { grid-template-columns: repeat(3, 1fr); }

  /* Solutions page */
  .tab-content.active { grid-template-columns: 1fr; }
  .solution-visual    { display: none; }

  /* About page */
  .about-hero-grid   { grid-template-columns: 1fr; }
  .about-hero-visual { display: none; }
  .about-cards-grid  { grid-template-columns: 1fr 1fr; }
  .mv-grid           { grid-template-columns: 1fr; }
  .values-grid       { grid-template-columns: repeat(2, 1fr); }
  .team-grid         { grid-template-columns: 1fr 1fr; }

  /* Timeline */
  .timeline::before  { left: 20px; }
  .timeline-item     { grid-template-columns: 1fr; gap: 10px; }
  .ti-dot            { left: 20px; }
  .timeline-item:nth-child(even) .ti-content,
  .timeline-item:nth-child(even) .ti-year {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
    padding-left: 52px;
  }
  .ti-year,
  .ti-content { padding-left: 52px; text-align: left; }

  /* Contact */
  .contact-grid   { grid-template-columns: 1fr; }
  .demo-grid      { grid-template-columns: 1fr; }
  .form-grid      { grid-template-columns: 1fr; }

  /* Misc */
  /* .security-grid    { grid-template-columns: 1fr; } */
  .footer-grid      { 
    grid-template-columns: 1.5fr 2fr 148px;
    margin-bottom: 3vh;
    gap: 20px;
  }
  .container:has(.footer-grid) {
    width: 95%;
  }

  /* Paperless flow — stack vertically */
  .paperless-flow  { flex-direction: column; align-items: center; }
  .pf-arrow        { transform: rotate(90deg); }
}

/* ── Mobile: ≤ 768px ─────────────────────────────────────── */
@media screen and  (max-width: 768px) {

  /* Hero */
  .hero-content  { padding: 70px 0 30px; }
  .footer-grid      { 
    grid-template-columns: 1fr 2fr 148px;
    margin-bottom: 2.5vh;
    gap: 20px;
  }

}

/* ── Small Mobile: ≤ 640px ───────────────────────────────── */
@media screen and  (max-width: 640px) {

  .container {
      width: 95%;
  }

  /* Hero */
  .hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.2; }
  .hero-content  { grid-template-columns: 1fr; padding: 5vh 0 2vh; gap: 40px; }
  .hero-btns  { flex-direction: column; }
  .hero-stats { flex-direction: column; gap: 10px; margin-top: 30px; }
  .hero-stat  {
    border-left: none;
    border-top: 3px solid var(--color-cta);
    padding: 8px 0 5px;
    line-height: 1;
  }
  .hero-stat strong { font-weight: 700; }

  /* Grids */
  .values-grid      { grid-template-columns: 1fr; }
  .about-cards-grid { grid-template-columns: 1fr 1fr; }
  .int-grid         { grid-template-columns: repeat(2, 1fr); }
  .team-grid        { grid-template-columns: 1fr; }
  .benefits-layout  { grid-template-columns: 1fr; }
  .benefits-layout div:has(img) { display: none; }

  /* Slider */
  .slider-btn { width: 32px; height: 32px; font-size: 0.9rem; }

  /* Tabs */
  .tabs-nav  { flex-direction: column; align-items: center; }
  .tab-btn   { width: 100%; text-align: center; }

  .footer-grid      { 
    grid-template-columns: 1fr;
    margin-bottom: 2.5vh;
    gap: 20px;
  }

}