/* Mantella.nl — Dienst-detail: Maatwerk software */

/* ---- Smalle leeskolom (herbruikt op elke sectie van deze pagina) ---- */
.mws-narrow { width: 864px; max-width: 100%; margin: 0 auto; }

/* ---- Hero ---- */
.mws-hero { position: relative; overflow: hidden; padding: 56px var(--pad-x) 24px; }
.mws-hero__inner { position: relative; display: flex; flex-direction: column; gap: 20px; }
.mws-hero__title { font-weight: 900; font-size: 50px; line-height: 1.08; color: #fff; text-wrap: balance; }
.mws-hero__actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }

/* Eyebrow-badge boven de H1 */
.mws-badge {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  border: 1px solid rgba(243,146,0,0.4); border-radius: var(--r-pill); padding: 7px 18px;
}
.mws-badge .material-symbols-outlined { font-size: 17px; color: var(--c-orange); }
.mws-badge span:last-child { color: #f5b661; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---- Hero-mock: "van rommel naar rust" ---- */
.mws-mock { position: relative; margin: 36px auto 8px; }
.mws-mock__glow {
  position: absolute; inset: -18px; border-radius: 26px; pointer-events: none;
  background: radial-gradient(circle at 25% 20%, rgba(228,0,58,0.16), transparent 60%); filter: blur(28px);
}
.mws-mock__card {
  position: relative; background: rgba(19,19,19,0.92); border: 1px solid #2a2a2a; border-radius: 20px;
  padding: 32px 40px; display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}
.mws-mock__left { display: flex; flex-direction: column; gap: 14px; }
.mws-mock__eyebrow { font-family: 'Roboto Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a8175; }
.mws-mock__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mws-mock__chip {
  font-family: 'Roboto Mono', monospace; font-size: 13px; font-weight: 600; color: #ddd;
  border: 1px solid #333; border-radius: 9px; padding: 9px 14px; background: #171717;
}
.mws-mock__line { width: 22px; height: 1.5px; background: linear-gradient(90deg, #e4003a, #f39200); }
.mws-mock__caption { font-size: 13px; color: #6f6f6f; }
.mws-mock__right { display: flex; flex-direction: column; }
.mws-mock__row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid #1e1e1e; }
.mws-mock__row:first-child { border-top-color: #262626; }
.mws-mock__row .material-symbols-outlined { font-size: 19px; color: var(--c-orange); }
.mws-mock__row-label { font-size: 14.5px; color: #ddd; font-weight: 500; }
.mws-mock__row-val { margin-left: auto; font-family: 'Roboto Mono', monospace; font-size: 13px; color: #7ee0a1; }

/* ---- Genummerde sectiekop (01 / 02 / 03) ---- */
.mws-step-head { display: flex; align-items: baseline; gap: 16px; }
.mws-step-head__num { font-family: 'Roboto Mono', monospace; font-size: 20px; font-weight: 600; color: var(--c-orange); }
.mws-step-head__title { font-weight: 800; font-size: 30px; color: #fff; }
.mws-step-head--light .mws-step-head__num { color: var(--c-red); }
.mws-step-head--light .mws-step-head__title { color: #0d0d0d; }

/* ---- 01 · Komt dit bekend voor? ---- */
.mws-herkenning { padding: 56px var(--pad-x) 8px; }
.mws-herkenning .mws-step-head { margin-bottom: 10px; }
.mws-herkenning__intro { font-size: 18px; line-height: 1.7; color: #a9a9a9; margin: 0 0 22px; text-wrap: pretty; }
.mws-herkenning__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Kaart-basis (achtergrond, rand, rode hover) komt van .card-dark in main.css */
.mws-herkenning__card { padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; }
.mws-herkenning__icon {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: rgba(243,146,0,0.12);
  display: flex; align-items: center; justify-content: center;
}
.mws-herkenning__icon .material-symbols-outlined { font-size: 22px; color: var(--c-orange); }
/* Alleen de tekst-span (direct kind van de kaart), anders kleurt deze regel ook het icoon grijs */
.mws-herkenning__card > span:last-child { font-size: 16px; line-height: 1.65; color: #c9c9c9; }

/* ---- 02 + 03 · lichte sectie ---- */
/* margin-top geeft extra donkere ruimte onder de herkenning-blokjes (zelfde ritme als automatisering) */
.mws-detail-sec { position: relative; overflow: hidden; padding: 72px var(--pad-x); margin-top: 56px; }
.mws-detail { display: flex; flex-direction: column; gap: 64px; }
.mws-aanpak { display: flex; flex-direction: column; gap: 26px; }

/* Vier-stappen-tijdlijn */
.mws-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
/* Lijn loopt exact van het midden van bolletje 1 (18px padding + 22px halve bol) tot het midden van bolletje 4 */
.mws-steps__line { position: absolute; top: 21px; left: 40px; right: calc(25% - 40px); height: 1.5px; background: linear-gradient(90deg, #e4003a, #f39200); }
.mws-step { display: flex; flex-direction: column; gap: 12px; padding: 0 18px; position: relative; }
.mws-step__num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff;
  font-family: 'Roboto Mono', monospace; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(228,0,58,0.3);
}
.mws-step__title { font-weight: 800; font-size: 19px; color: #0d0d0d; }
.mws-step__desc { margin: 0; font-size: 14.5px; line-height: 1.65; color: #6b6157; }

/* Wat maatwerk bij ons kan zijn */
.mws-wat { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid #e8e2d8; padding-top: 56px; }
.mws-wat__intro { font-size: 18px; line-height: 1.8; color: #4a453e; margin: 0; text-wrap: pretty; }
.mws-wat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 4px; }
.mws-wat__row { display: flex; gap: 12px; align-items: flex-start; }
.mws-wat__row .material-symbols-outlined { font-size: 20px; color: #2e7d4f; margin-top: 1px; }
.mws-wat__row span:last-child { font-size: 16px; line-height: 1.6; color: #3a332c; }
.mws-wat__row a { color: var(--c-red); font-weight: 600; text-decoration: none; }
.mws-wat__row a:hover { color: var(--c-orange); }

/* ---- Footer: pagina-specifieke kicker ---- */

/* ---- Caseblok ---- */
.mws-case-sec { position: relative; overflow: hidden; padding: 64px var(--pad-x); }
.mws-case { display: flex; flex-direction: column; gap: 16px; }
.mws-case__card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 36px;
  background: rgba(19,19,19,0.85); border: 1px solid var(--c-border-dark); border-radius: var(--r-card-lg);
  padding: 34px 40px; text-decoration: none; color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.mws-case__card:hover { border-color: var(--c-red); transform: translateY(-3px); }
.mws-case__mark {
  position: absolute; top: -70px; right: 60px; font-size: 260px; line-height: 1;
  color: rgba(255,255,255,0.03); pointer-events: none;
}
.mws-case__icon {
  width: 96px; height: 96px; flex: 0 0 auto; border-radius: 22px; background: rgba(243,146,0,0.1);
  display: flex; align-items: center; justify-content: center;
}
.mws-case__icon .material-symbols-outlined {
  font-size: 46px; background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mws-case__body { position: relative; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mws-case__kicker { font-family: 'Roboto Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8a8175; }
.mws-case__title { font-weight: 800; font-size: 23px; color: #fff; line-height: 1.2; text-wrap: balance; }
.mws-case__desc { margin: 0; font-size: 14.5px; color: #a9a9a9; line-height: 1.55; }
.mws-case__cta {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pill); padding: 12px 24px;
  font-size: 14.5px; font-weight: 700; color: #fff; white-space: nowrap; flex: 0 0 auto;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.mws-case__cta .material-symbols-outlined { font-size: 18px; color: var(--c-orange); }
/* Hover op het hele blok geeft de knop ook zijn hover-stijl (oranje rand, zoals btn--outline) */
.mws-case__card:hover .mws-case__cta { background: rgba(255,255,255,0.08); border-color: rgba(243,146,0,0.8); }
.mws-case__note { font-size: 14.5px; color: #8a8175; text-align: center; margin: 0; }
.mws-case__note a { color: var(--c-orange); font-weight: 600; text-decoration: none; }
.mws-case__note a:hover { color: #ffb547; }

/* =================== Tablet (1080) =================== */
@media (max-width: 1080px) {
  .mws-hero { padding: 44px var(--pad-x) 20px; }
  .mws-hero__title { font-size: 38px; }
  .mws-mock__card { padding: 26px 28px; gap: 28px; }

  .mws-herkenning { padding: 44px var(--pad-x) 8px; }
  .mws-herkenning__grid { gap: 14px; }

  .mws-detail-sec { padding: 56px var(--pad-x); }
  .mws-detail { gap: 44px; }
  .mws-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .mws-steps__line { display: none; }
  .mws-wat__grid { grid-template-columns: 1fr; }

  .mws-case-sec { padding: 52px var(--pad-x); }
  .mws-case__card { padding: 28px 30px; gap: 24px; }
}

/* =================== Mobiel (700) =================== */
@media (max-width: 700px) {
  .mws-hero { padding: 36px var(--pad-x) 16px; }
  .mws-hero__title { font-size: 30px; }
  .mws-hero__actions { flex-direction: column; align-items: stretch; }
  .mws-badge { padding: 7px 14px; gap: 8px; }
  .mws-badge span:last-child { font-size: 12px; }

  .mws-mock { margin: 24px auto 8px; }
  .mws-mock__card { grid-template-columns: 1fr; gap: 22px; padding: 24px 22px; }
  .mws-mock__chips { flex-wrap: wrap; }

  .mws-herkenning { padding: 32px var(--pad-x) 8px; }
  .mws-herkenning__intro { font-size: 16.5px; margin-bottom: 18px; }
  .mws-herkenning__grid { grid-template-columns: 1fr; gap: 14px; }
  .mws-herkenning__card { padding: 20px 22px; }

  .mws-detail-sec { padding: 44px var(--pad-x); }
  .mws-detail { gap: 32px; }
  .mws-steps { grid-template-columns: 1fr; gap: 22px; }
  .mws-wat { padding-top: 32px; }
  .mws-wat__intro { font-size: 16.5px; }
  .mws-wat__grid { gap: 12px; }

  .mws-case-sec { padding: 44px var(--pad-x); }
  .mws-case__card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; }
  .mws-case__icon { width: 64px; height: 64px; border-radius: 16px; }
  .mws-case__icon .material-symbols-outlined { font-size: 32px; }
  .mws-case__cta { width: 100%; justify-content: center; }
  .mws-case__mark { font-size: 160px; top: -40px; right: -20px; }
}