/* Mantella.nl — homepage */

/* ---- Hero ---- */
.hero { padding: 90px var(--pad-x) 230px; }
.hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 72px; align-items: center; }
.hero__col { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.hero__lead { max-width: 620px; }
.hero__actions { display: flex; gap: 16px; margin-top: 4px; }
.hero__fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 240px;
  background: linear-gradient(to top, rgba(228,0,58,0.13), rgba(243,146,0,0.05) 55%, transparent);
}

/* Terminal-kaart */
.term {
  background: rgba(16, 16, 16, 0.82);
  backdrop-filter: blur(6px);
  border: 1px solid #2e2e2e;
  border-radius: 14px;
  box-shadow: 0 50px 120px rgba(228, 0, 58, 0.2), 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.term__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid #262626; background: #171717;
}
.term__dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.term__title { margin-left: 10px; font-family: monospace; font-size: 13px; color: #9e9e9e; }
.term__body {
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px;
  font-family: monospace; font-size: 15px; line-height: 1.5;
}
.term__cmd { color: #ddd; }
.term__cmd .term__prompt { color: var(--c-orange); }
.term__out { color: #6d6d6d; }
.term__live { color: #fff; }
.term__live .term__bullet { color: var(--c-red); }

/* Zilveren statuskaart */
.statuscard {
  position: absolute; bottom: -34px; left: -44px;
  background: linear-gradient(150deg, #ffffff 0%, #eef0f4 30%, #d6dae1 52%, #f1f3f6 74%, #dee1e7 100%);
  border: 1px solid #c4c9d1; border-radius: 12px;
  padding: 18px 24px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.statuscard .material-symbols-outlined { font-size: 30px; color: #1f8a5b; }
.statuscard__num { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--c-black-2); display: block; }
.statuscard__sub { font-size: 13px; color: #777; }

/* ---- Proof (statistieken) ---- */
.proof { padding: 110px var(--pad-x) 90px; }
.proof__head { max-width: 820px; margin-bottom: 56px; }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.statcard { padding: 40px 34px 36px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.statcard__icon { position: absolute; top: 32px; right: 30px; font-size: 40px !important; color: #3a3a3a; }
.statcard__num { font-family: var(--font-head); font-weight: 800; font-size: 46px; }
.statcard h3 { font-weight: 700; font-size: 22px; color: #fff; }
.statcard p { font-size: 16px; line-height: 1.65; color: #999; text-wrap: pretty; }

/* ---- Diensten (doelgroepen) ---- */
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 52px; }
.services__sub { font-size: 17px; color: #777; max-width: 400px; text-wrap: pretty; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.audcard {
  position: relative;
  border-radius: var(--r-card-lg); padding: 44px 38px;
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
  transition: transform 0.25s ease;
}
.audcard:hover { transform: translateY(-6px); }
/* Hele kaart klikbaar via de link, en de link animeert mee op kaart-hover */
.audcard .arrowlink::after { content: ""; position: absolute; inset: 0; }
.audcard:hover .arrowlink { text-decoration: underline; text-underline-offset: 4px; }
.audcard--dark { background: var(--c-black-2); color: #fff; }
.audcard--grad { background: linear-gradient(150deg, #e4003a 15%, #f39200 110%); color: #fff; box-shadow: 0 28px 70px rgba(228, 0, 58, 0.45); }
.audcard__icon {
  width: 58px; height: 58px; border-radius: 14px;
  background: rgba(243, 146, 0, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.audcard__icon .material-symbols-outlined { font-size: 30px; color: var(--c-orange); }
.audcard--grad .audcard__icon { background: rgba(255, 255, 255, 0.2); }
.audcard--grad .audcard__icon .material-symbols-outlined { color: #fff; }
.audcard h3 { font-weight: 800; font-size: 26px; }
.audcard .checks { color: #bbb; }
.audcard--grad .checks { color: #fff; }
.audcard--grad .checks__row .material-symbols-outlined { color: #fff; }
.audcard .arrowlink { margin-top: 6px; }
.audcard--grad .arrowlink { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---- ATS spotlight ---- */
.ats__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.ats__col { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ats__lead { font-size: 19px; line-height: 1.7; color: #a5a5a5; text-wrap: pretty; }
.ats__lead strong { color: #fff; }
.ats__checks { gap: 12px; color: #ccc; }

/* ATS-mock (kanban) */
.atsmock { background: #f4f2ee; border-radius: 14px; box-shadow: 0 50px 120px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); overflow: hidden; }
.atsmock__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #fff; border-bottom: 1px solid #e5e2dc; }
.atsmock__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.atsmock__url { margin-left: 12px; background: #f0ede8; border-radius: 6px; padding: 4px 14px; font-family: monospace; font-size: 12px; color: #63605a; }
.atsmock__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px; }
.atsmock__col { display: flex; flex-direction: column; gap: 10px; }
.atsmock__colhead { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.atsmock__colname { font-size: 13px; font-weight: 700; color: #555; }
.atsmock__count { font-size: 12px; font-weight: 700; color: #fff; border-radius: 999px; padding: 2px 9px; }
.atsmock__card { background: #fff; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.atsmock__line { height: 9px; border-radius: 5px; background: #d8d5cf; display: block; }
.atsmock__line--soft { background: #eae7e1; }
.atsmock__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: #fff; border-top: 1px solid #e5e2dc; }
.atsmock__foot .material-symbols-outlined { font-size: 18px; color: var(--c-red); }
.atsmock__foot span:last-child { font-size: 13px; color: #666; }

/* ---- Cases teaser ---- */
.cases-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 44px; }
.cases-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.casecard { overflow: hidden; display: flex; flex-direction: column; }
.casecard__body { padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.casecard h3 { font-weight: 700; font-size: 21px; color: var(--c-black-2); }
.casecard p { font-size: 16px; line-height: 1.6; color: #555; }
.cases-teaser__all-mobile { display: none; }

/* ---- Mitchell + reviews ---- */
.mitchell { padding: 100px var(--pad-x); }
.mitchell__grid { display: grid; grid-template-columns: 420px 1fr; gap: 80px; align-items: center; }
.mitchell__photo { position: relative; width: 400px; height: 480px; }
.mitchell__photo::before {
  content: ""; position: absolute; inset: 24px -24px -24px 24px;
  border-radius: 16px; background: var(--grad); opacity: 0.9;
}
.mitchell__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.mitchell__quote-col { display: flex; flex-direction: column; gap: 24px; }
.mitchell__qmark { font-family: var(--font-head); font-size: 110px; line-height: 0.5; color: var(--c-orange); margin-top: 30px; }
.mitchell__quote { font-family: var(--font-head); font-weight: 500; font-size: 34px; line-height: 1.4; color: #fff; text-wrap: pretty; }
.mitchell__byline { display: flex; align-items: center; gap: 16px; font-size: 17px; color: #999; }
.mitchell__byline strong { color: #fff; }
.mitchell__dash { width: 44px; height: 2px; background: linear-gradient(90deg, #e4003a, #f39200); display: inline-block; }
.mitchell__bgquote {
  position: absolute; bottom: -60px; right: 10px;
  font-family: var(--font-head); font-size: 420px; line-height: 1;
  color: rgba(255, 255, 255, 0.09); pointer-events: none; user-select: none;
}

.reviews { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; border-top: 1px solid #242424; padding-top: 32px; }
.reviews__head { display: flex; align-items: center; justify-content: space-between; }
.reviews__brand { display: flex; align-items: center; gap: 14px; }
.reviews__tp { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: #fff; }
.reviews__score { font-size: 15px; color: #999; }
.reviews__nav { display: flex; gap: 10px; }
.reviews__track {
  display: flex;
  gap: 32px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track > * { flex: 0 0 calc(50% - 16px); scroll-snap-align: start; }
.quotecard { padding: 34px 36px; display: flex; flex-direction: column; gap: 14px; }
.quotecard:hover { transform: none; border-color: var(--c-border-dark); }
.quotecard p { font-size: 17.5px; line-height: 1.65; color: #ddd; text-wrap: pretty; }
.quotecard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quotecard__src { font-size: 13px; color: #777; }
.quotecard__title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; }
.stars--google .stars__star { background: none; color: #fbbc05; font-size: 17px; width: auto; height: auto; }
.quotecard__by { font-size: 15px; color: #888; margin-top: auto; }
.quotecard__by strong { color: #fff; }

/* =================== Tablet =================== */
@media (max-width: 1080px) {
  .hero { padding: 60px var(--pad-x) 150px; }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__col { gap: 28px; }
  .hero__visual { margin-top: 20px; }
  .statuscard { position: static; align-self: flex-start; margin-top: 18px; }
  .hero__actions .btn { width: auto; }

  .proof { padding: 80px var(--pad-x) 70px; }
  .proof__head { margin-bottom: 40px; }
  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .services__head { margin-bottom: 40px; }

  .ats__grid { grid-template-columns: 1fr; gap: 44px; }

  .cases-teaser__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .mitchell__grid { grid-template-columns: 1fr; gap: 44px; }
  .mitchell__photo { width: 100%; max-width: 480px; }
  .mitchell__quote { font-size: 28px; }
  .mitchell__bgquote { font-size: 280px; }
}

/* =================== Mobiel =================== */
@media (max-width: 700px) {
  .hero { padding: 44px 22px 110px; }
  .hero__grid { gap: 22px; }
  .hero__col { gap: 22px; }
  .hero__lead { font-size: 16.5px; }
  .hero__actions { flex-direction: column; gap: 12px; margin-top: 2px; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__fade { height: 160px; }
  .hero__visual { margin-top: 10px; width: 100%; }

  .term { border-radius: 12px; box-shadow: 0 30px 70px rgba(228,0,58,0.16), 0 14px 40px rgba(0,0,0,0.6); }
  .term__bar { padding: 11px 14px; gap: 7px; }
  .term__dot { width: 9px; height: 9px; }
  .term__title { font-size: 11px; margin-left: 8px; }
  .term__body { padding: 16px 14px; gap: 10px; font-size: 11.5px; }

  .statuscard { border-radius: 10px; padding: 12px 16px; gap: 10px; margin: -8px 0 0 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
  .statuscard .material-symbols-outlined { font-size: 24px; }
  .statuscard__num { font-size: 15px; }
  .statuscard__sub { font-size: 11px; }

  .proof { padding: 64px 22px 48px; }
  .proof__head { margin-bottom: 28px; max-width: 300px; }
  .proof__grid { grid-template-columns: 1fr; gap: 14px; }
  .statcard { padding: 26px 24px; gap: 10px; }
  .statcard__icon { top: 22px; right: 20px; font-size: 30px !important; }
  .statcard__num { font-size: 34px; }
  .statcard h3 { font-size: 18px; }
  .statcard p { font-size: 15px; line-height: 1.6; }

  .services__head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
  .services__sub { font-size: 15.5px; }
  .services__grid { grid-template-columns: 1fr; gap: 16px; }
  .audcard { border-radius: 16px; padding: 30px 26px; gap: 16px; }
  .audcard__icon { width: 48px; height: 48px; border-radius: 12px; }
  .audcard__icon .material-symbols-outlined { font-size: 26px; }
  .audcard h3 { font-size: 21px; }
  .audcard .checks { gap: 11px; font-size: 15.5px; }
  .audcard .arrowlink { display: flex; align-items: center; min-height: 44px; margin-top: 0; font-size: 15.5px; }

  .ats__grid { gap: 20px; }
  .ats__col { gap: 20px; }
  .ats__lead { font-size: 16px; line-height: 1.65; }
  .ats__checks { gap: 10px; font-size: 15.5px; }
  .atsmock { border-radius: 12px; margin-top: 8px; }
  .atsmock__bar { padding: 10px 12px; gap: 6px; }
  .atsmock__dot { width: 8px; height: 8px; }
  .atsmock__url { font-size: 10px; padding: 3px 10px; margin-left: 8px; }
  .atsmock__cols { gap: 8px; padding: 12px; }
  .atsmock__colname { font-size: 10px; }
  .atsmock__count { font-size: 9px; padding: 1px 6px; }
  .atsmock__card { border-radius: 7px; padding: 9px; gap: 6px; }
  .atsmock__line { height: 6px; }
  .atsmock__foot { padding: 10px 14px; gap: 8px; }
  .atsmock__foot .material-symbols-outlined { font-size: 15px; }
  .atsmock__foot span:last-child { font-size: 11px; }

  .cases-teaser__head { margin-bottom: 24px; }
  .cases-teaser__head .arrowlink--grad { display: none; }
  .cases-teaser__grid { grid-template-columns: 1fr; gap: 16px; }
  .casecard__body { padding: 22px 24px; gap: 8px; }
  .casecard h3 { font-size: 18px; }
  .casecard p { font-size: 15px; }
  .casecard .ph { height: 150px !important; padding: 14px; }
  .cases-teaser__all-mobile {
    display: flex; margin-top: 24px; position: relative; z-index: 2;
    height: 50px; font-size: 16px; width: 100%;
  }

  .mitchell { padding: 64px 22px; }
  .mitchell__grid { gap: 28px; }
  .mitchell__photo { width: calc(100% - 20px); height: 400px; }
  .mitchell__photo::before { inset: 16px -16px -16px 16px; border-radius: 14px; }
  .mitchell__photo img { border-radius: 14px; }
  .mitchell__qmark { display: none; }
  .mitchell__quote { font-size: 22px; line-height: 1.45; }
  .mitchell__quote::before { content: "\201C"; }
  .mitchell__quote::after { content: "\201D"; }
  .mitchell__byline { font-size: 15px; gap: 12px; }
  .mitchell__dash { width: 34px; }
  .mitchell__bgquote { display: none; }

  .reviews { gap: 16px; margin-top: 0; padding-top: 24px; }
  .reviews__head { flex-wrap: wrap; gap: 10px; }
  .reviews__tp { font-size: 16px; }
  .reviews__score { font-size: 13px; }
  .reviews__nav { gap: 8px; }
  .reviews__track { gap: 16px; }
  .reviews__track > * { flex: 0 0 100%; }
  .quotecard { padding: 24px; gap: 12px; min-height: 190px; border-radius: 14px; }
  .quotecard p { font-size: 15.5px; }
  .quotecard__by { font-size: 13.5px; }
  .reviews__footrow { display: flex; align-items: center; justify-content: space-between; }
}