/* ===== MATO MOBILE LAYER — gedeelde verbeteringen voor kleine schermen ===== */

/* Nooit zijwaarts kunnen scrollen */
html,body{overflow-x:hidden;max-width:100%}
img,video{max-width:100%}

/* Mobiel menu: echt onzichtbaar als dicht, sluit netjes */
@media(max-width:900px){
  .nav-links{visibility:hidden;transition:transform .4s,visibility 0s .4s}
  .nav-links.open{visibility:visible;transition:transform .4s,visibility 0s}
  .burger{padding:10px;margin:-10px}          /* groter tikvlak */
  .burger span{transition:transform .3s,opacity .3s}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header{padding:16px 0}
  header.scrolled{padding:10px 0}
  .brand{font-size:26px}
}

@media(max-width:640px){
  .wrap{padding:0 20px}

  /* Minder witruimte tussen secties */
  .sec{padding:64px 0}
  .reviews{padding:64px 0 10px}
  .why{padding:64px 0 24px}
  .closer{padding:16px 0 72px}
  .over-hero,.p-hero,.r-hero{padding-top:120px}
  .w-hero{padding:110px 0 30px}
  .contact{padding:110px 0 64px}
  .cases,.pricing{padding:36px 0 56px}

  /* Hero (home): knoppen even breed onder elkaar */
  .hero{padding-top:20vh;padding-bottom:10vh}
  .hero h1{font-size:2.5rem}
  .hero p.sub{font-size:1.02rem}
  .hero-cta{flex-direction:column;gap:12px}
  .hero-cta .btn{width:100%;justify-content:center}

  /* Logobalk: kleinere logo's, meer tegelijk in beeld */
  .proof-title{font-size:11px;letter-spacing:.12em;padding:0 20px}
  .marquee-track{gap:40px;animation-duration:28s}
  .marquee-track .logo{height:34px}

  /* Reviews: swipe-carrousel */
  .reviews-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 20px 12px;margin:0 -20px}
  .reviews-grid::-webkit-scrollbar{display:none}
  .rev-card{flex:0 0 84%;scroll-snap-align:center;grid-column:auto !important;padding:26px 24px 22px}
  .rev-card.feature{display:block;background:var(--mist)}
  .rev-card.feature .qmark{display:none}
  .rev-card.feature blockquote{font-size:1.02rem;font-weight:500}
  .rev-card blockquote{font-size:1rem;line-height:1.55}
  /* lange quote inklappen met 'Lees meer' */
  .rev-card blockquote.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  .rev-more{display:inline-block;margin-top:8px;font-weight:700;font-size:.9rem;color:var(--purple);background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
  .rev-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .rev-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
  .rev-dots span.on{background:var(--orange);transform:scale(1.3)}
  .rev-hint{text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:10px;letter-spacing:.04em}

  /* Waarom-blok */
  .why-col{padding:28px 22px}
  .why-col li{font-size:1rem;padding:12px 0}

  /* Afsluiter */
  .closer .card{padding:40px 22px}

  /* Over: keuzekaarten + foto's */
  .choice-card{min-height:260px;padding:24px}
  .choice-card .cc-label{font-size:1.5rem}
  .photo-frame.narrow{max-width:100%}
  .prin-card{padding:26px 22px}

  /* Werkwijze: systeem-visual binnen het scherm houden */
  .system{max-width:330px;margin:24px auto 0;padding:24px 0}
  .node.n1{transform:translate(-50%,-50%) translateY(-112px)}
  .node.n2{transform:translate(-50%,-50%) translateX(112px)}
  .node.n3{transform:translate(-50%,-50%) translateY(112px)}
  .node.n4{transform:translate(-50%,-50%) translateX(-112px)}
  .node .node-inner{width:96px}
  .node-dot{width:54px;height:54px;border-radius:15px}
  .node-dot svg{width:26px;height:26px}
  .node-label{font-size:.84rem}
  .system-hub{width:100px;height:100px}
  .system-hub .hub-mato{font-size:1.6rem}
  .step-head{padding:20px 18px;gap:14px}
  .step-body-inner{padding:0 18px 22px 18px;font-size:1rem}

  /* Pakketten */
  .plan{padding:30px 22px}
  .plan-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .plan-price .amt{font-size:1.9rem;white-space:nowrap}
  .badge{top:14px;right:14px}
  .plan.featured .plan-name{padding-right:120px}
  .lead .card{padding:36px 22px}
  .lead .flow .fstep{font-size:.88rem;padding:9px 14px}
  .lead .flow .arr{display:none}

  /* Resultaten: casekaarten en overlay */
  .case-card{min-height:380px;padding:24px}
  .case-metric{font-size:2.6rem}
  .case-metric .u{letter-spacing:0;font-size:.95rem}
  .overlay{padding:0;align-items:flex-end}
  .sheet{border-radius:24px 24px 0 0;max-height:94vh;overflow-y:auto}
  .sheet-hero{padding:40px 22px 28px}
  .sheet-hero h2{font-size:1.45rem}
  .sheet-metrics{gap:18px 24px}
  .sheet-metrics .m .v{font-size:1.6rem}
  .sheet-body{padding:28px 22px 36px}
  .sheet-close{top:14px;right:14px;width:40px;height:40px}
  .ads-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  /* Contact: lange gegevens netjes afbreken */
  .c-left h1{font-size:2.3rem}
  .c-item{padding:14px 16px;gap:12px}
  .c-item .val{font-size:.86rem;overflow-wrap:anywhere;word-break:normal}
  .c-item .ic{width:40px;height:40px}
  .c-form-card{padding:30px 22px}
  .c-photo{margin:22px 0}

  /* Footer */
  .foot{gap:28px}
  .foot-links{gap:36px}
  .foot-col a{overflow-wrap:anywhere}
  .foot-bottom{flex-direction:column;gap:6px}
}

/* Heel smalle telefoons */
@media(max-width:380px){
  .hero h1{font-size:2.2rem}
  .rev-card{flex-basis:88%}
  .node.n1{transform:translate(-50%,-50%) translateY(-100px)}
  .node.n2{transform:translate(-50%,-50%) translateX(100px)}
  .node.n3{transform:translate(-50%,-50%) translateY(100px)}
  .node.n4{transform:translate(-50%,-50%) translateX(-100px)}
}

/* Mobiel: rust bij het openen. Geen blur-animaties en geen 24 video's tegelijk decoderen */
@media(max-width:640px){
  .reveal{filter:none !important;transition-duration:.6s}
  .hero-grid{filter:none}
  .tile video{display:none}          /* posters tonen, rijen schuiven nog wel */
  .hero-sub{flex-direction:column-reverse;align-items:flex-start;gap:18px;margin-top:22px}
  .hero-avatar{width:96px;height:96px}
  .hero p.sub{font-size:1rem;line-height:1.7}
}