/* ==========================================================================
   RESPONSIVE — Khosti Group Of Companies
   ========================================================================== */

@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; }
  .chart-panel{ order:-1; }
  .pillars{ grid-template-columns: repeat(2,1fr); }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .two-col{ grid-template-columns: 1fr; gap:36px; }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap:32px; }
}

@media (max-width: 760px){
  .nav-links{
    position: fixed;
    top: 68px; left:0; right:0;
    background: var(--ink);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items:flex-start;
    padding: 20px 28px 26px;
    gap: 18px;
    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: all .25s ease;
  }
  .nav-links.open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-cta{ margin-top:4px; }
  .nav-toggle{ display:flex; }

  .hero{ padding: 60px 0 60px; }
  .hero-stats{ gap:22px; flex-wrap:wrap; }

  .pillars{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }

  section{ padding: 60px 0; }

  .process-step{ grid-template-columns: 1fr; gap:8px; }

  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  .container{ padding: 0 20px; }
}

@media (max-width: 420px){
  .hero h1{ font-size: 32px; }
  .btn{ width:100%; justify-content:center; }
  .hero-actions{ flex-direction:column; }
}