:root {
  --cream: #f7f3ea;
  --cream-light: #fcfaf5;
  --olive: #596044;
  --olive-dark: #3e4432;
  --olive-light: #e5e7d8;
  --rust: #b85f3e;
  --rust-dark: #91472f;
  --rust-light: #efd9cd;
  --ink: #2e3029;
  --muted: #6d6e65;
  --white: #fffdf8;
  --line: rgba(62,68,50,.14);
  --shadow: 0 18px 60px rgba(62,68,50,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--cream-light);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(252,250,245,.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--olive-dark); font-size: 1.08rem; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--olive); color:var(--white); font-family:"Fraunces",serif; }
.nav-links { display:flex; gap:28px; margin-left:auto; font-size:.93rem; color:var(--muted); }
.nav-links a:hover { color: var(--rust); }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rust); color:white; border:0; border-radius:999px;
  padding:13px 22px; font-weight:700; transition:.2s ease;
  box-shadow: 0 8px 24px rgba(184,95,62,.18);
}
.button:hover { background:var(--rust-dark); transform:translateY(-1px); }
.button-small { padding:9px 16px; font-size:.9rem; }
.menu-toggle, .mobile-menu { display:none; }
.menu-toggle {
  margin-left:auto; width:42px; height:42px; padding:0; border:0; background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer;
}
.menu-toggle span { width:24px; height:2px; border-radius:999px; background:var(--olive-dark); transition:.2s ease; }
.hero { position:relative; overflow:hidden; padding:100px 0 108px; background:var(--cream); }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:72px; align-items:center; }
.eyebrow, .kicker {
  color:var(--rust); text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:800;
}
.eyebrow { display:inline-flex; background:var(--rust-light); border-radius:999px; padding:7px 12px; letter-spacing:.04em; text-transform:none; }
h1,h2 { font-family:"Fraunces",serif; color:var(--olive-dark); line-height:1.08; margin:0; }
h1 { font-size:clamp(3.1rem,6vw,5.4rem); letter-spacing:-.045em; margin-top:22px; }
h1 span { color:var(--rust); }
h2 { font-size:clamp(2.25rem,4vw,3.55rem); letter-spacing:-.035em; }
.hero-text { font-size:1.15rem; color:var(--muted); max-width:650px; margin:26px 0 30px; }
.hero-actions { display:flex; align-items:center; gap:22px; }
.text-link { font-weight:700; color:var(--olive-dark); }
.text-link span { color:var(--rust); }
.hero-facts { display:flex; flex-wrap:wrap; gap:18px; margin-top:34px; color:var(--olive); font-size:.9rem; font-weight:600; }
.hero-visual { position:relative; }
.notebook { background:var(--white); padding:26px; border-radius:28px; transform:rotate(2deg); box-shadow:var(--shadow); border:1px solid rgba(62,68,50,.08); }
.notebook-top { display:flex; justify-content:space-between; color:var(--olive); font-weight:700; }
.tiny-formula { color:var(--rust); font-family:"Fraunces",serif; }
.graph { height:260px; margin:22px 0; position:relative; background-image:linear-gradient(rgba(89,96,68,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(89,96,68,.08) 1px,transparent 1px); background-size:24px 24px; border-radius:16px; overflow:hidden; }
.axis { position:absolute; background:rgba(62,68,50,.28); }
.axis-x { left:10%; right:8%; height:1px; top:68%; }
.axis-y { top:8%; bottom:8%; width:1px; left:46%; }
.graph svg { width:100%; height:100%; position:absolute; }
.curve { fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round; }
.graph circle { fill:var(--olive); }
.graph-note { position:absolute; background:var(--olive-light); color:var(--olive-dark); padding:6px 10px; border-radius:10px; font-size:.78rem; font-weight:700; }
.note-one { top:16%; left:8%; transform:rotate(-4deg); }
.note-two { right:5%; bottom:8%; transform:rotate(3deg); background:var(--rust-light); color:var(--rust-dark); }
.scribble { color:var(--muted); font-size:.88rem; text-align:center; }
.scribble strong { color:var(--rust); }
.math-symbol { position:absolute; font-family:"Fraunces",serif; pointer-events:none; user-select:none; opacity:.1; }
.symbol-pi { font-size:13rem; color:var(--olive); left:-20px; top:15px; transform:rotate(-12deg); }
.symbol-root { font-size:7rem; color:var(--rust); right:4%; bottom:-25px; transform:rotate(8deg); }
.symbol-x2 { font-size:4rem; color:var(--olive); right:37%; top:40px; transform:rotate(-7deg); }
.section { padding:100px 0; }
.section-heading { max-width:690px; margin-bottom:48px; }
.section-heading h2 { margin:10px 0 16px; }
.section-heading > p:last-child, .pricing-intro { color:var(--muted); font-size:1.04rem; }
.subjects { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.subject-card { background:var(--white); border:1px solid var(--line); border-radius:22px; padding:28px; transition:.2s ease; }
.subject-card:hover { transform:none; box-shadow:none; }
.subject-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--rust-light); color:var(--rust-dark); font-family:"Fraunces",serif; font-weight:700; font-size:1.2rem; }
.subject-card h3 { color:var(--olive-dark); margin:20px 0 8px; font-size:1.18rem; }
.subject-card p { margin:0; font-size:.93rem; color:inherit; opacity:.82; }
.subject-card .subject-level { margin-bottom:16px; font-size:.84rem; font-weight:500; color:var(--muted); opacity:1; }
.about-section { position:relative; overflow:hidden; background:var(--olive-light); }
.about-grid { display:grid; grid-template-columns:.38fr .62fr; gap:80px; }
.about-copy { max-width:720px; }
.about-copy h2 { margin-bottom:30px; }
.about-copy p { color:#55594b; }
.about-copy strong { color:var(--olive-dark); }
blockquote { margin:28px 0; padding:22px 26px; background:rgba(255,253,248,.62); border-left:4px solid var(--rust); border-radius:0 16px 16px 0; color:var(--olive-dark); font-family:"Fraunces",serif; font-size:1.12rem; line-height:1.6; }
.degree-card { margin-top:20px; background:var(--olive-dark); color:white; border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:5px; transform:rotate(-2deg); box-shadow:var(--shadow); }
.degree-year { color:#e9b49d; font-family:"Fraunces",serif; font-size:2rem; }
.degree-card span:last-child { color:#d8dbc9; font-size:.85rem; }
.about-symbol { color:var(--olive-dark); font-size:17rem; right:-30px; bottom:-100px; }
.pricing-section { background:var(--cream-light); }
.pricing-grid { display:grid; grid-template-columns:1fr .58fr; gap:90px; align-items:center; }
.pricing-grid h2 { margin:10px 0 16px; }
.practical-list { margin-top:35px; display:grid; gap:18px; }
.practical-list > div { display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
.practical-list > div > span { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--olive-light); color:var(--olive-dark); font-weight:700; }
.practical-list p { margin:0; color:var(--muted); }
.practical-list strong { color:var(--ink); }
.price-card { background:var(--rust); color:white; border-radius:30px; padding:42px; box-shadow:0 24px 70px rgba(145,71,47,.2); transform:rotate(1deg); }
.price-label { text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:800; opacity:.8; }
.price { font-family:"Fraunces",serif; font-size:6rem; line-height:1; margin-top:18px; }
.price span { font-size:2.5rem; vertical-align:top; }
.per { font-weight:700; }
.price-rule { height:1px; background:rgba(255,255,255,.28); margin:26px 0; }
.price-card p { color:#fae7dd; }
.button-light { margin-top:12px; background:var(--white); color:var(--rust-dark); box-shadow:none; }
.button-light:hover { background:#f8eee8; }
.puzzle-section { background:var(--olive-dark); color:#eef0e6; }
.puzzle-grid { display:grid; grid-template-columns:.7fr 1fr; gap:90px; align-items:center; }
.kicker.light { color:#e9b49d; }
.puzzle-intro h2 { color:white; margin:10px 0 18px; }
.puzzle-intro p:not(.kicker) { color:#cdd0c1; }
.ghost-button, .link-button { border:0; cursor:pointer; }
.ghost-button { margin-top:18px; padding:10px 0; background:transparent; color:#e9b49d; font-weight:700; }
.puzzle-card { position:relative; background:var(--white); color:var(--ink); border-radius:28px; padding:40px; min-height:340px; box-shadow:0 20px 60px rgba(0,0,0,.14); }
.puzzle-number { position:absolute; top:24px; right:28px; font-family:"Fraunces",serif; color:var(--rust-light); font-size:2.3rem; font-weight:700; }
.puzzle-question { color:var(--olive-dark); font-family:"Fraunces",serif; font-size:1.45rem; line-height:1.45; max-width:88%; margin:20px 0 30px; white-space:pre-line; }
.answer-row { display:flex; gap:10px; }
.answer-row input { min-width:0; flex:1; padding:13px 15px; border:1px solid #d8dacd; border-radius:12px; outline:none; background:#fbfaf6; }
.answer-row input:focus { border-color:var(--olive); box-shadow:0 0 0 3px rgba(89,96,68,.1); }
.answer-row button { border:0; border-radius:12px; padding:0 20px; background:var(--rust); color:white; font-weight:700; cursor:pointer; }
.puzzle-actions { margin-top:13px; }
.link-button { background:transparent; padding:0; color:var(--olive); font-size:.88rem; font-weight:700; }
.feedback, .hint { margin:16px 0 0; padding:12px 14px; border-radius:12px; font-size:.92rem; }
.feedback:empty { display:none; }
.feedback.good { background:#e6eddf; color:#435039; }
.feedback.bad { background:#f6e5dc; color:#8a432f; }
.hint { background:#efeee7; color:#5d5e55; }
.hidden { display:none; }
.contact-section { position:relative; overflow:hidden; text-align:center; background:var(--cream); }
.contact-inner { max-width:700px; }
.contact-inner h2 { margin:10px 0 18px; }
.contact-inner > p:not(.kicker):not(.contact-note) { color:var(--muted); font-size:1.05rem; margin-bottom:28px; }
.contact-note { color:var(--olive); font-size:.88rem; }
.contact-symbol { font-size:16rem; color:var(--rust); left:-20px; bottom:-80px; transform:rotate(-12deg); }
footer { background:#303429; color:#cfd2c4; padding:26px 0; font-size:.85rem; }
.footer-inner { display:flex; justify-content:space-between; }
@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav-contact { display:none; }
  .menu-toggle { display:flex; }
  .mobile-menu {
    position:absolute;
    top:calc(100% + 10px);
    right:20px;
    width:min(230px, calc(100vw - 40px));
    padding:10px;
    background:rgba(255,253,248,.98);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(62,68,50,.16);
    backdrop-filter:blur(16px);
  }
  .mobile-menu.open { display:flex; flex-direction:column; }
  .mobile-menu a {
    padding:11px 14px;
    color:var(--olive-dark);
    font-size:.92rem;
    font-weight:600;
    border-radius:11px;
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus { background:var(--olive-light); }
  .mobile-menu a:last-child {
    margin-top:4px;
    color:var(--rust-dark);
    background:var(--rust-light);
  }
  .hero { padding:75px 0 85px; }
  .hero-grid, .about-grid, .pricing-grid, .puzzle-grid { grid-template-columns:1fr; gap:48px; }
  .hero-visual { max-width:620px; }
  .subjects { grid-template-columns:repeat(2,1fr); }
  .about-label { max-width:330px; }
  .price-card { max-width:480px; }
}

@media (max-width: 600px) {
  html { scroll-padding-top:64px; }
  .container { width:min(100% - 36px,1120px); }
  .nav-inner { height:64px; gap:12px; }
  .brand { font-size:1rem; gap:9px; white-space:nowrap; }
  .brand-mark { width:31px; height:31px; flex:0 0 31px; }
  .menu-toggle { width:38px; height:38px; }
  .menu-toggle span { width:22px; }
  .mobile-menu { right:15px; width:min(230px, calc(100vw - 30px)); }

  .hero { padding:54px 0 68px; }
  .hero-grid { gap:40px; }
  .eyebrow { font-size:.72rem; padding:6px 10px; }
  h1 { font-size:clamp(2.55rem,13vw,3.15rem); line-height:1.02; margin-top:18px; }
  h2 { font-size:2.25rem; }
  .hero-text { font-size:1rem; line-height:1.65; margin:22px 0 26px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:17px; }
  .hero-actions .button { padding:11px 19px; }
  .symbol-pi { font-size:9rem; left:-28px; top:95px; }
  .symbol-x2 { font-size:3.3rem; right:10%; top:120px; }
  .symbol-root { font-size:5rem; right:-8px; bottom:10px; }
  .notebook { padding:18px; border-radius:22px; }
  .graph { height:220px; }
  .section { padding: 36px 0 56px; }
  .subjects { grid-template-columns:1fr; }
  .subject-card { padding:24px; }
  .about-grid { gap:32px; }
  .pricing-grid { gap:45px; }
  .price-card { padding:34px; }
  .price { font-size:5rem; }
  .puzzle-card { padding:30px 22px; min-height:360px; }
  .puzzle-question { max-width:90%; font-size:1.25rem; }
  .answer-row { flex-direction:column; }
  .answer-row button { padding:12px; }
  .footer-inner { flex-direction:column; gap:5px; text-align:center; }
}

@media (max-width: 390px) {
  .container { width:min(100% - 30px,1120px); }
  .brand { font-size:.94rem; }
  .brand-mark { width:29px; height:29px; flex-basis:29px; }
  h1 { font-size:2.5rem; }
  .eyebrow { font-size:.68rem; }
}



/* v2: rustigere informatiehiërarchie */
.compact-heading { margin-bottom: 24px; }
.about-grid-clean { display:block; }
.about-grid-clean .about-copy { max-width: 780px; margin: 0 auto; }
.about-grid-clean .about-copy .kicker { margin-bottom: 10px; }
.pricing-grid > div:first-child > .kicker { margin-bottom: 26px; }
.contact-main {
  color: var(--olive-dark) !important;
  font-family: "Fraunces", serif;
  font-size: clamp(1.45rem, 2.5vw, 2rem) !important;
  line-height: 1.4;
  max-width: 650px;
  margin: 14px auto 30px !important;
}


/* v3: wiskundig correcte hero-grafiek */
.graph-correct {
  background-image:
    linear-gradient(rgba(89,96,68,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,96,68,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.graph-correct svg {
  overflow: visible;
}
.graph-axis {
  stroke: rgba(62,68,50,.42);
  stroke-width: 1.2;
}
.graph-correct .curve {
  fill: none;
  stroke: var(--rust);
  stroke-width: 4;
  stroke-linecap: round;
}
.root-point {
  fill: var(--olive);
}
.vertex-point {
  fill: var(--rust);
}
.axis-label {
  fill: var(--olive-dark);
  font-family: "Fraunces", serif;
  font-size: 13px;
  font-style: italic;
}
.point-label {
  fill: var(--olive-dark);
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
}
.mini-solution {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 16px;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
}
.mini-solution span:not(:last-child)::after {
  content: "→";
  margin-left: 16px;
  color: var(--rust);
}
.mini-solution strong {
  color: var(--olive-dark);
}


/* v4: één duidelijk gemarkeerd punt als mini-opgave */
.guide-line {
  stroke: var(--olive);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: .55;
}
.target-point {
  fill: var(--rust);
  stroke: var(--white);
  stroke-width: 3;
}
.target-label,
.question-label {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 800;
}
.target-label { fill: var(--olive-dark); }
.question-label { fill: var(--rust-dark); }
.mini-question {
  margin: -7px 0 10px;
  text-align: center;
  color: var(--olive-dark);
  font-size: .9rem;
}
.mini-question strong { color: var(--rust-dark); }


/* v5: heldere puntnotatie */
.y-value-label {
  text-anchor: end;
  dominant-baseline: middle;
}
.point-a-label {
  fill: var(--rust-dark);
  font-family: "Fraunces", serif;
  font-size: 11px;
  font-weight: 700;
}


/* v6: parabool bestaat uit exact berekende functiepunten */
.exact-parabola {
  fill: none;
  stroke: var(--rust);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}