/* Landingspagina (voordeur van de documentatie). */
:root{
    --bg:#eef2f2; --panel:#ffffff; --ink:#1b2a2c; --muted:#63726f; --line:#e1e8e7;
    --teal:#0e8f9e; --teal-strong:#0b7280; --teal-soft:rgba(14,143,158,.10);
    --crop:#3d7433; --crop-soft:#eaf2e3; --vee:#8a6425; --vee-soft:#f4ecdd;
    --hero1:#0b6b74; --hero2:#0f97a2; --field:#f4f7f6;
    --shadow:0 14px 40px rgba(16,48,52,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.display{font-family:"Plus Jakarta Sans",system-ui,sans-serif}
a{color:var(--teal)}
.top{position:sticky;top:0;z-index:20;background:rgba(238,242,242,.86);
    backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.top .in{max-width:1060px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.brand img{width:24px;height:24px;display:block}
.toplogin{display:inline-flex;align-items:center;gap:7px;font-family:"Plus Jakarta Sans",sans-serif;
    font-weight:600;font-size:14px;color:var(--teal-strong);text-decoration:none;
    border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:var(--panel)}
.toplogin:hover{border-color:var(--teal);color:var(--teal)}
.toplogin svg{width:14px;height:14px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.hero{margin:26px auto 0;border-radius:20px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,var(--hero1),var(--hero2));color:#eafcfa;box-shadow:var(--shadow);
    display:grid;grid-template-columns:1.25fr .85fr}
.hero .pad{padding:46px 40px;align-self:center;z-index:2}
.hero .eyebrow{font-family:"Plus Jakarta Sans",sans-serif;text-transform:uppercase;letter-spacing:.16em;
    font-size:12px;font-weight:700;color:#a7ece7}
.hero h1{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:36px;line-height:1.12;
    margin:12px 0 12px;text-wrap:balance;letter-spacing:-.015em}
.hero p{font-size:16.5px;max-width:50ch;color:#d4f2ee;margin:0}
.hero .photo{position:relative;min-height:290px}
.hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hero1),rgba(0,0,0,0) 42%)}
@media(max-width:760px){ .hero{grid-template-columns:1fr} .hero .photo{display:none} .hero h1{font-size:29px} .hero .pad{padding:38px 26px} }
.topics{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0}
@media(max-width:720px){ .topics{grid-template-columns:1fr} }
.topic{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.topic .art{height:180px;overflow:hidden;position:relative;background:var(--line)}
.topic .art img{width:100%;height:100%;object-fit:cover;display:block}
.topic .body{padding:18px 22px 22px}
.topic .kind{font-family:"Plus Jakarta Sans",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700}
.topic.crop .kind{color:var(--crop)} .topic.vee .kind{color:var(--vee)}
.topic h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:20px;margin:6px 0 8px}
.topic p{margin:0;color:var(--muted);font-size:14.5px}
.proc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin-bottom:26px}
.proc h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:18px;margin:0 0 4px}
.proc .lead{color:var(--muted);font-size:14px;margin:0 0 20px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:720px){ .steps{grid-template-columns:1fr 1fr} }
.step .n{width:30px;height:30px;border-radius:50%;background:var(--teal-strong);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif;font-size:14px}
.step h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:14.5px;margin:10px 0 4px}
.step p{margin:0;font-size:13px;color:var(--muted)}
footer{border-top:1px solid var(--line)}
footer .in{max-width:1060px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;
    align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:10px}
footer a{text-decoration:none}