/* ============================================================
   Hundred OS website — gedeelde styles voor subpagina's
   (laden ná home.css)
   ============================================================ */

.nav-links a.active { background: rgba(44,58,74,.06); color: var(--fg); }

/* ---------- page hero ---------- */
.page-hero { padding: 76px 0 0; text-align: center; }
.page-hero h1 {
  font: 800 48px/1.1 var(--font); letter-spacing: -0.025em;
  max-width: 780px; margin: 18px auto 0; text-wrap: balance;
}
.page-hero .sub {
  font: 400 18px/1.55 var(--font); color: var(--fg-muted);
  max-width: 620px; margin: 20px auto 0; text-wrap: pretty;
}
.anchor-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.anchor-chips a {
  font: 500 13px/1 var(--font); color: var(--fg-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 9px 18px;
  transition: color .2s, border-color .2s;
}
.anchor-chips a:hover { color: var(--blue); border-color: rgba(46,125,209,.4); }

/* ---------- CTA-band ---------- */
.cta-band { margin-top: 116px; }
.cta-band-in {
  background: var(--dark); color: #F7F9FA;
  border-radius: var(--r-lg); padding: 60px 56px; text-align: center;
}
.cta-band-in h2 { font: 700 32px/1.15 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.cta-band-in p { font: 400 16px/1.6 var(--font); color: rgba(247,249,250,.7); margin: 12px auto 0; max-width: 520px; }
.cta-band .hero-cta { margin-top: 28px; }
.btn-invert { background: #fff; color: var(--dark); box-shadow: 0 4px 15px rgba(0,0,0,.25); }
.btn-invert:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.35); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); }

/* ---------- logowall ---------- */
.logowall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 44px; }
.logowall span {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 10px; text-align: center;
  font: 600 13px/1 var(--font); color: #A8B2BC;
  transition: color .2s; cursor: default;
}
.logowall span:hover { color: var(--fg); }
.logowall-note { text-align: center; font: 400 14px/1.5 var(--font); color: var(--fg-muted); margin-top: 22px; }

/* ---------- warehouse strip (Platform) ---------- */
.wh-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.wh-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 18px; display: flex; gap: 12px; align-items: flex-start;
  box-shadow: var(--shadow-card);
}
.wh-item .ic { color: var(--blue); margin-top: 2px; }
.wh-item b { font: 600 14px/1.4 var(--font); display: block; }
.wh-item span { font: 400 13px/1.5 var(--font); color: var(--fg-muted); }

/* ---------- twee-koloms feature blok ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.rev > :first-child { order: 2; }

/* ---------- module-detailrijen (Modules) ---------- */
.mod-sec { margin-top: 64px; background: var(--card, #fff); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px 56px 56px; box-sizing: border-box; }
.mod-sec h2 { font: 700 28px/1.2 var(--font); letter-spacing: -0.015em; }
.mod-sec .g-sub { font: 400 15px/1.6 var(--font); color: var(--fg-muted); margin-top: 8px; max-width: 640px; text-wrap: pretty; }
.mod-sec-head { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.mod-sec-num { font: 700 13px/1 var(--font); color: var(--blue); background: rgba(46,125,209,.10); border-radius: var(--r-pill); padding: 8px 12px; letter-spacing: .06em; margin-top: 4px; flex-shrink: 0; }
.mod-sec .mod-row:first-of-type { margin-top: 8px; }
.mod-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 40px 0; border-bottom: 1px solid rgba(221,226,231,.7);
}
.mod-row:last-child { border-bottom: none; }
.mod-row.rev .mod-copy { order: 2; }
.mod-copy h3 { display: flex; align-items: center; gap: 12px; font: 700 24px/1.2 var(--font); letter-spacing: -0.015em; }
.mod-copy .lead { font: 400 16px/1.6 var(--font); color: var(--fg-muted); margin-top: 12px; text-wrap: pretty; }
.feat-list { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.feat-list div { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--font); }
.feat-list .ic { color: var(--green); margin-top: 3px; width: 15px; height: 15px; }
.mod-copy .src-chips { margin-top: 20px; }

/* ---------- mock-kaarten ---------- */
.mock-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-card);
}
.mock-title { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--font); margin-bottom: 14px; }
.mock-title .ic { color: var(--blue); width: 15px; height: 15px; }
.mock-card .viz-chips .chip { background: var(--gray); }
.mrows { display: flex; flex-direction: column; gap: 8px; }
.mrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--gray); border-radius: 12px; padding: 11px 14px;
  font: 500 13px/1.3 var(--font);
}
.mrow .ic { color: var(--green); width: 15px; height: 15px; }
.mrow.warn .ic { color: var(--orange); }
.mrow .val { margin-left: auto; font: 600 12px/1 var(--font); color: var(--fg-muted); white-space: nowrap; }
.mrow.total { background: rgba(67,144,122,.12); }
.mrow.total .val { color: var(--green); }
.sevdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sev-h { background: var(--orange); }
.sev-m { background: #D4B254; }
.sev-l { background: var(--blue); }
.bar-mini { flex: 1; height: 8px; border-radius: 4px; background: #E3E8ED; overflow: hidden; min-width: 60px; }
.bar-mini i { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.season { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-bottom: 10px; }
.season i { flex: 1; background: var(--blue-light); border-radius: 3px; }
.season i.hot { background: var(--blue); }
.calc-res {
  margin-top: 12px; background: var(--blue-light); border-radius: 12px;
  padding: 14px; text-align: center;
  font: 700 24px/1 var(--font); color: var(--blue);
}
.calc-res small { display: block; font: 500 11px/1 var(--font); color: var(--fg-muted); margin-bottom: 6px; }
.ic-fill { fill: currentColor; stroke: currentColor; }
.star-gold { color: #D4B254; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; align-items: stretch; max-width: 780px; margin-left: auto; margin-right: auto; }
.tier {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.tier.featured { border: 2px solid var(--blue); box-shadow: var(--shadow-pop); }
.tier-rec {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff;
  font: 600 11px/1 var(--font); padding: 7px 14px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.tier .name { font: 600 16px/1 var(--font); }
.tier .for { font: 400 13px/1.5 var(--font); color: var(--fg-muted); margin-top: 6px; }
.tier .amt { font: 800 38px/1 var(--font); letter-spacing: -0.02em; margin-top: 20px; }
.tier .amt small { font: 500 14px/1 var(--font); color: var(--fg-muted); letter-spacing: 0; }
.tier ul { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.5 var(--font); }
.tier li .ic { color: var(--green); margin-top: 3px; width: 15px; height: 15px; }
.tier .btn { margin-top: 28px; width: 100%; }
.tiers-note { text-align: center; font: 400 14px/1.5 var(--font); color: var(--fg-muted); margin-top: 26px; }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-card);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; font: 600 15px/1.3 var(--font); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--fg-muted); transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 22px 18px; font: 400 14px/1.6 var(--font); color: var(--fg-muted); }

/* ---------- demo / agenda ---------- */
.demo-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; margin-top: 56px; }
.cal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: 24px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; font: 600 15px/1 var(--font); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav span {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--fg-muted);
}
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 18px;
  font: 500 11px/1 var(--font); color: var(--fg-muted); text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.cal-grid span {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: 500 13px/1 var(--font); border-radius: 10px; color: #A8B2BC;
}
.cal-grid .av { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.cal-grid .sel { background: var(--dark); color: #fff; font-weight: 600; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
.slot {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px;
  text-align: center; font: 500 13px/1 var(--font); color: var(--fg-muted);
}
.slot.on { border-color: var(--blue); color: var(--blue); background: var(--blue-light); font-weight: 600; }
.cal-card .btn { width: 100%; margin-top: 16px; }
.cal-note { margin-top: 14px; font: 400 12px/1.5 var(--font); color: var(--fg-muted); text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .page-hero h1 { font-size: 36px; }
  .mod-sec { padding: 28px 20px 32px; }
  .mod-row, .demo-grid, .split { grid-template-columns: 1fr; gap: 32px; }
  .mod-row.rev .mod-copy, .split.rev > :first-child { order: 0; }
  .tiers, .wh-strip { grid-template-columns: 1fr; }
  .logowall { grid-template-columns: repeat(3, 1fr); }
  .cta-band-in { padding: 44px 28px; }
}
@media (max-width: 620px) {
  .logowall { grid-template-columns: repeat(2, 1fr); }
}


/* footer met contactformulier */
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 56px; align-items: start; padding-top: 64px; padding-bottom: 64px; }
.foot-grid .foot-links { margin-left: 0; }
.foot-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.foot-meta a { font: 400 13px/1 var(--font); color: var(--fg-muted); padding: 5px 0; }
.foot-meta a:hover { color: var(--fg); }
.foot-contact h5 { font: 600 13px/1 var(--font); margin-bottom: 8px; }
.foot-contact > p { font: 400 13px/1.5 var(--font); color: var(--fg-muted); }
.foot-form { margin-top: 16px; gap: 10px; }
.foot-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foot-form textarea {
  font: 400 14px/1.5 var(--font); color: var(--fg); font-family: var(--font);
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; resize: vertical; min-height: 76px;
  transition: border-color .2s, box-shadow .2s;
}
.foot-form textarea::placeholder { color: #A8B2BC; }
.foot-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,125,209,.15); }
.foot-form .btn { align-self: flex-start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-contact { grid-column: 1 / -1; max-width: 520px; } }
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr; gap: 40px; } .foot-form-row { grid-template-columns: 1fr; } }