/* ===========================
   QUICK MOBILE COMPAT FIX
   Desktop blijft hetzelfde
   =========================== */
@media (max-width: 900px){

  /* container + spacing */
  .container{padding:0 16px}
  .section{padding:56px 0}

  /* hero: van 2 kolommen -> 1 kolom */
  .hero__grid{grid-template-columns:1fr !important; gap:28px}
  .hero{padding:80px 0}
  .hero h1{font-size:38px}
  .hero p{font-size:16px}

  /* alle grids naar 1 kolom */
  .services-grid,
  .pricing,
  .addons,
  .grid-3,
  .grid-2,
  .process-card,
  .metrics,
  .values,
  .steps,
  .team{
    grid-template-columns:1fr !important;
  }

  /* buttons/cta netjes */
  .cta{flex-direction:column; align-items:stretch}
  .cta .btn{width:100%}
  .plan .btn{width:100%}

  /* forms: 2 kolommen -> 1 kolom */
  form .grid{grid-template-columns:1fr !important}
}

@media (max-width: 600px){
  .hero h1{font-size:30px; line-height:1.1}
  .section__title{font-size:26px}
  .btn{padding:12px 18px; letter-spacing:.08em}
}