/* =========================================================
   PSE Hub — marketingwebsite
   Design tokens en basisstijlen 1-op-1 overgenomen uit het
   goedgekeurde ontwerpcanvas (Main.dc.html / Pricing.dc.html).
   Responsive gedrag (media queries) is nieuw t.o.v. de mockup:
   het canvas was een vast 1440px-artboard, deze site moet ook
   op telefoon/tablet goed werken.
   ========================================================= */

:root {
  --dark-bg: #14161C;
  --dark-ink: #F0EDE6;
  --dark-body: rgba(240, 237, 230, 0.68);
  --dark-muted: rgba(240, 237, 230, 0.58);
  --dark-gold: #C9A96E;

  --bg: #F7F5F2;
  --card: #FFFFFF;
  --ink: #1E2B2E;
  --body-text: #4C5A5C;
  --muted: #65716F;
  --gold: #B08D52;
  --gold-dark: #8F7040;
  --petrol: #26525C;
  --petrol-dark: #1B3E46;
  --line: #E4DFD6;

  --max: 1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  padding: 16px 28px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  appearance: none;
  background: none;
}
.btn-primary { background: var(--gold); color: #FFFFFF; }
.btn-primary:hover { background: var(--gold-dark); }
.btn-ghost { background: transparent; color: var(--petrol); border: 1px solid var(--petrol); }
.btn-ghost:hover { background: var(--petrol); color: #FFFFFF; }
.btn-dark-primary { background: var(--dark-gold); color: var(--dark-bg); }
.btn-dark-primary:hover { background: #DCC08B; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--gold-dark); display: inline-block; flex-shrink: 0; }
.eyebrow-dark { color: var(--dark-gold); }
.eyebrow-dark::before { background: var(--dark-gold); }

.section { padding: 96px 64px; }
.section-inner { max-width: var(--max); margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; }

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMiIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC40Ii8+PC9zdmc+);
}

/* ---------- Navigatie ---------- */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { height: 26px; width: auto; }
.nav-brand span {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--dark-ink);
}
.nav-links { display: flex; align-items: center; gap: 40px; }
.navlink { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(240, 237, 230, 0.72); }
.navlink:hover, .navlink--active { color: var(--dark-ink); }
.navlink--active { color: var(--dark-gold) !important; }

/* ---------- Hero (homepage) ---------- */
.hero { position: relative; overflow: hidden; background: var(--dark-bg); }
.hero-blob-1 { position: absolute; left: -180px; top: 60px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.20) 0%, rgba(201,169,110,0) 68%); pointer-events: none; }
.hero-blob-2 { position: absolute; right: 120px; bottom: -220px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(46,95,107,0.35) 0%, rgba(46,95,107,0) 70%); pointer-events: none; }
.hero-image { position: absolute; right: -160px; top: -40px; width: 860px; opacity: 0.9; filter: drop-shadow(0 40px 90px rgba(0,0,0,0.55)); }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, #14161C 0%, #14161C 40%, rgba(20,22,28,0.7) 58%, rgba(20,22,28,0.05) 80%); }
.hero-inner { position: relative; padding: 60px 64px 84px; }
.hero-content { max-width: 700px; display: flex; flex-direction: column; gap: 30px; }
.hero-title { font-size: clamp(34px, 5.4vw, 62px); line-height: 0.98; color: var(--dark-ink); }
.hero-desc { font-size: 18px; line-height: 1.6; color: var(--dark-body); max-width: 520px; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 6px; flex-wrap: wrap; }
.hero-link { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(240,237,230,0.4); padding-bottom: 3px; color: var(--dark-ink); }

/* ---------- Zwevend statspaneel ---------- */
.float-panel-wrap { position: relative; margin: -56px 64px 0; }
.float-panel-shadow { position: absolute; inset: 10px -10px -14px 14px; background: var(--petrol-dark); border-radius: 10px; transform: rotate(1.1deg); opacity: 0.9; }
.float-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 44px 80px -28px rgba(20,22,28,0.40), 0 10px 26px -12px rgba(176,141,82,0.22);
  padding: 30px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  transform: rotate(-0.35deg);
}
.float-panel-text { font-size: 15.5px; line-height: 1.6; color: var(--body-text); max-width: 640px; }
.float-stats { display: flex; gap: 36px; flex-shrink: 0; }
.stat { text-align: center; }
.stat-value { font-family: "Anton", sans-serif; font-size: 22px; color: var(--gold-dark); }
.stat-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.stat-divider { width: 1px; background: var(--line); }

/* ---------- Kernfeatures (bento) ---------- */
.features-section { padding-top: 120px; position: relative; overflow: hidden; }
.features-blob { position: absolute; right: -200px; top: 80px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(38,82,92,0.08) 0%, rgba(38,82,92,0) 68%); pointer-events: none; }
.features-ghost-num { position: absolute; left: 56px; top: 24px; font-family: "Anton", sans-serif; font-size: 220px; line-height: 1; color: var(--ink); opacity: 0.035; pointer-events: none; }
.features-head { max-width: 600px; margin-bottom: 48px; position: relative; }
.features-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 14px; color: var(--ink); }

.bento-grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto auto; gap: 24px; position: relative; }
.card-icon { border-radius: 12px; background: linear-gradient(160deg, rgba(176,141,82,0.16), rgba(38,82,92,0.12)); display: flex; align-items: center; justify-content: center; }
.card-icon--lg { width: 54px; height: 54px; }
.card-icon--sm { width: 44px; height: 44px; background: linear-gradient(160deg, rgba(176,141,82,0.16), rgba(38,82,92,0.10)); }

.bento-big {
  grid-column: 1;
  grid-row: 1 / 3;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 36px 70px -30px rgba(20,22,28,0.22);
  border-color: transparent;
}
.bento-big h3 { font-size: 21px; color: var(--ink); }
.bento-big p { font-size: 15.5px; line-height: 1.65; color: var(--body-text); }
.bento-big-stats { display: flex; gap: 32px; }
.bento-big-stat-value { font-family: "Anton", sans-serif; font-size: 20px; color: var(--gold-dark); }
.bento-big-stat-label { font-size: 12px; color: var(--muted); }
.bento-divider { height: 1px; background: var(--line); margin-bottom: 20px; }

.bento-small {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 22px 44px -26px rgba(20,22,28,0.18);
  border-color: transparent;
}
.bento-small h3 { font-size: 17px; color: var(--ink); }
.bento-small p { font-size: 14px; line-height: 1.6; color: var(--body-text); }
.bento-small--top { grid-column: 2; grid-row: 1; }
.bento-small--bottom { grid-column: 2; grid-row: 2; }

.bento-bar {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(90deg, var(--card), #FBF9F6);
  box-shadow: 0 22px 44px -26px rgba(20,22,28,0.18);
  border-color: transparent;
}
.bento-bar-icon { flex-shrink: 0; }
.bento-bar h3 { font-size: 17px; color: var(--ink); }
.bento-bar p { font-size: 14px; line-height: 1.6; color: var(--body-text); margin-top: 4px; }

/* ---------- Schuine lint (waarom anders / FAQ) ---------- */
.ribbon-wrap { position: relative; margin: 8px 0; filter: drop-shadow(0 34px 60px rgba(20,22,28,0.30)); }
.ribbon-wrap--light { filter: drop-shadow(0 30px 54px rgba(30,43,46,0.14)); }
.ribbon {
  position: relative;
  background: radial-gradient(140% 180% at 8% -10%, #2F6572 0%, var(--petrol) 46%, var(--petrol-dark) 100%);
  padding: 96px 64px;
  clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%);
  overflow: hidden;
}
.ribbon--light { background: var(--card); padding: 100px 64px; }
.ribbon-blob { position: absolute; right: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(201,169,110,0.16) 0%, rgba(201,169,110,0) 70%); pointer-events: none; }
.ribbon-grid { position: relative; display: grid; grid-template-columns: 360px 1fr; gap: 64px; }
.ribbon-grid--narrow { grid-template-columns: 340px 1fr; }
.ribbon-head h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 14px; color: var(--dark-ink); line-height: 1.15; }
.ribbon-head--light h2 { color: var(--ink); }
.ribbon-eyebrow { color: var(--dark-gold); }

.ribbon-list { display: flex; flex-direction: column; }
.ribbon-item { display: flex; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(240,237,230,0.14); align-items: baseline; }
.ribbon-item:last-child { border-bottom: none; }
.ribbon-num { font-family: "Anton", sans-serif; font-size: 28px; color: var(--dark-gold); width: 48px; flex-shrink: 0; }
.ribbon-item h3 { font-size: 16.5px; color: var(--dark-ink); margin-bottom: 5px; }
.ribbon-item p { font-size: 14.5px; line-height: 1.6; color: var(--dark-body); }

.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 16.5px; font-family: "Manrope", sans-serif; font-weight: 800; text-transform: none; color: var(--ink); }
.faq-item p { font-size: 14.5px; line-height: 1.6; color: var(--body-text); }

/* ---------- Founder ---------- */
.founder-section { padding-top: 128px; position: relative; overflow: hidden; }
.founder-blob { position: absolute; left: -160px; top: 60px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(176,141,82,0.10) 0%, rgba(176,141,82,0) 68%); pointer-events: none; }
.founder-grid { position: relative; display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: center; }
.founder-photo-wrap { position: relative; transform: rotate(-1.5deg); width: 100%; }
.founder-photo { width: 100%; aspect-ratio: 4/5; border-radius: 10px; background: linear-gradient(160deg, var(--petrol), var(--petrol-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 40px 70px -26px rgba(30,43,46,0.45); position: relative; overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.founder-badge { position: absolute; left: -22px; bottom: -22px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 20px; box-shadow: 0 24px 48px -20px rgba(30,43,46,0.35); transform: rotate(2.2deg); }
.founder-badge-name { font-family: "Anton", sans-serif; font-size: 18px; color: var(--gold-dark); white-space: nowrap; }
.founder-badge-role { font-size: 12px; color: var(--muted); white-space: nowrap; }
.founder-content { display: flex; flex-direction: column; gap: 20px; }
.founder-content blockquote { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.35; color: var(--ink); max-width: 600px; text-transform: none; font-family: "Anton", sans-serif; font-weight: 400; margin: 0; }
.founder-content p { font-size: 16px; line-height: 1.7; color: var(--body-text); max-width: 600px; }

/* ---------- Prijzen-preview (homepage) ---------- */
.pricing-preview { padding-top: 0; padding-bottom: 0; }
.pricing-preview-inner {
  margin: 0 0 8px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(20,22,28,0.20);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.pricing-preview-text { display: flex; flex-direction: column; gap: 12px; max-width: 540px; }
.pricing-preview-text h2 { font-size: 26px; margin-top: 4px; color: var(--ink); }
.pricing-preview-text p { font-size: 15.5px; line-height: 1.6; color: var(--body-text); }

/* ---------- Slot-CTA ---------- */
.cta-section { padding-top: 112px; padding-bottom: 112px; position: relative; overflow: hidden; }
.cta-blob { position: absolute; left: 50%; top: 10%; width: 820px; height: 820px; margin-left: -410px; border-radius: 50%; background: radial-gradient(circle, rgba(176,141,82,0.09) 0%, rgba(176,141,82,0) 65%); pointer-events: none; }
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.cta-inner h2 { font-size: clamp(26px, 3.4vw, 34px); color: var(--ink); max-width: 600px; }
.cta-inner p { font-size: 16px; color: var(--body-text); max-width: 480px; }
.cta-form { display: flex; gap: 12px; margin-top: 12px; background: var(--card); padding: 10px; border-radius: 8px; box-shadow: 0 30px 60px -26px rgba(20,22,28,0.22); flex-wrap: wrap; justify-content: center; }
.cta-form input { width: 280px; max-width: 60vw; padding: 14px 16px; border-radius: 4px; border: 1px solid var(--line); font-family: "Manrope", sans-serif; font-size: 15px; background: #FFFFFF; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 64px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 18px; width: auto; }
.footer-brand span { font-size: 14px; color: var(--muted); }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a { font-size: 14px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

/* ---------- Prijzenpagina-specifiek ---------- */
.price-header-inner { padding: 32px 64px 96px; text-align: center; }
.price-header-content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.price-header-content h1 { font-size: clamp(30px, 4.6vw, 44px); color: var(--dark-ink); max-width: 680px; }
.price-header-content p { font-size: 16px; color: var(--dark-body); max-width: 520px; }
.price-header-content .price-note { font-size: 12.5px; color: var(--dark-muted); }

.tier-section { padding-top: 0; padding-bottom: 40px; }
.tier-wrap { margin-top: -64px; }
.tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.tier-card { padding: 40px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 34px 64px -26px rgba(20,22,28,0.32); transform: rotate(-0.5deg); }
.tier-card--featured {
  border: 1.5px solid var(--gold);
  position: relative;
  background: linear-gradient(180deg, rgba(176,141,82,0.07), rgba(176,141,82,0) 40%), var(--card);
  box-shadow: 0 44px 84px -28px rgba(20,22,28,0.40), 0 12px 30px -14px rgba(176,141,82,0.28);
  transform: rotate(0.6deg) translateY(-6px);
}
.tier-badge { position: absolute; top: -13px; left: 40px; background: var(--gold); color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; padding: 5px 14px; border-radius: 2px; box-shadow: 0 8px 16px -6px rgba(176,141,82,0.5); }
.tier-head h3 { font-size: 22px; font-family: "Manrope", sans-serif; font-weight: 800; text-transform: none; color: var(--ink); }
.tier-head p { font-size: 14.5px; color: var(--body-text); margin-top: 8px; }
.tier-price { display: flex; align-items: baseline; gap: 6px; }
.tier-price-value { font-family: "Anton", sans-serif; font-size: 36px; color: var(--gold-dark); }
.tier-price-unit { font-size: 15px; color: var(--muted); }
.tier-divider { height: 1px; background: var(--line); }
.tier-checks { display: flex; flex-direction: column; gap: 14px; }
.tier-checks span { font-size: 14.5px; color: var(--body-text); }

.trust-strip { display: flex; justify-content: center; gap: 48px; padding-bottom: 64px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-item span { font-size: 14px; color: var(--body-text); }

/* ---------- Contactpagina ---------- */
.contact-section { padding-top: 80px; padding-bottom: 112px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-intro h1 { font-size: clamp(30px, 4vw, 42px); color: var(--ink); margin-top: 14px; }
.contact-intro p { font-size: 16px; line-height: 1.7; color: var(--body-text); margin-top: 18px; max-width: 440px; }
.contact-detail { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.contact-detail a { font-size: 14.5px; color: var(--petrol); font-weight: 700; }

.contact-form { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 36px; box-shadow: 0 30px 60px -30px rgba(20,22,28,0.20); display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); }
.form-field input, .form-field textarea {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 13px 14px;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; padding: 12px 14px; border-radius: 4px; display: none; }
.form-status--ok { background: rgba(38,82,92,0.10); color: var(--petrol); }
.form-status--error { background: rgba(176,60,60,0.10); color: #A33; }
.form-status.is-visible { display: block; }
.contact-form button[type="submit"] { align-self: flex-start; }
.contact-form button[disabled] { opacity: 0.6; cursor: default; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .section { padding: 64px 32px; }
  .nav { padding: 20px 24px; }
  .hero-inner { padding: 48px 24px 64px; }
  .hero-image { display: none; }
  .hero-scrim { background: none; }
  .float-panel-wrap { margin: -40px 24px 0; }
  .float-panel { padding: 26px 28px; }

  .features-section { padding-top: 72px; }
  .features-ghost-num { font-size: 130px; }
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento-big { grid-column: 1; grid-row: auto; }
  .bento-small--top, .bento-small--bottom { grid-column: 1; grid-row: auto; }
  .bento-bar { grid-column: 1; grid-row: auto; }

  .ribbon { padding: 56px 28px; }
  .ribbon--light { padding: 56px 28px; }
  .ribbon-grid, .ribbon-grid--narrow { grid-template-columns: 1fr; gap: 32px; }

  .founder-section { padding-top: 72px; }
  .founder-grid { grid-template-columns: 1fr; gap: 48px; }
  .founder-photo-wrap { max-width: 320px; margin: 0 auto; }

  .pricing-preview-inner { padding: 36px 28px; }

  .tier-grid { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .site-footer { padding: 32px 24px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav .btn { padding: 12px 18px; font-size: 13px; }

  .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }

  .float-stats { width: 100%; justify-content: space-between; }

  .cta-form { flex-direction: column; align-items: stretch; }
  .cta-form input { width: 100%; max-width: none; }

  .price-header-inner { padding: 24px 20px 72px; }

  .contact-form { padding: 26px; }
}

@media (max-width: 480px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav .btn { align-self: stretch; }
}