/* CHASECAST — casual-zakelijk, licht en fris */
:root{
  --bg:#f7f9fc;--bg2:#eef2f7;--panel:#ffffff;--panel2:#f4f7fb;
  --line:#e3e9f1;--line2:#d3dce8;
  --tx:#16233b;--tx-mut:#54647d;--tx-dim:#8494ab;
  --acc:#1f5eff;--acc2:#0ea5c9;--ok:#128a5e;--warn:#c98a0e;--bad:#c93b4e;
  /* aliassen voor gedeelde componenten (admin/console-strook) */
  --r1:#1f5eff;--r2:#128a5e;--r3:#c98a0e;--r4:#d97a1f;--r5:#c93b4e;--r6:#1f5eff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--tx);
 font-family:'Inter','Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo{font-family:'Space Grotesk','Inter',sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--acc)}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(14px,3vw,30px)}

nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:14px;flex-wrap:wrap}
.logo{font-size:19px;font-weight:700;letter-spacing:.1em;color:var(--tx);text-decoration:none}
.logo span{color:var(--acc)}
.navlinks{display:flex;gap:12px;align-items:center}
.btn{display:inline-block;background:var(--panel);border:1px solid var(--line2);color:var(--tx);
 font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;cursor:pointer;text-decoration:none;transition:.15s}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.cta{background:var(--acc);border:1px solid var(--acc);color:#fff;box-shadow:0 2px 10px rgba(31,94,255,.22)}
.btn.cta:hover{background:#1849c9;color:#fff}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-mut)}
.btn.ghost:hover{color:var(--acc)}

.hero{text-align:center;padding:58px 0 46px}
.hero .kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;
 color:var(--acc);background:rgba(31,94,255,.08);border:1px solid rgba(31,94,255,.18);
 border-radius:20px;padding:6px 15px;margin-bottom:22px}
.hero h1{font-size:clamp(30px,5.2vw,50px);font-weight:700;line-height:1.14;max-width:800px;margin:0 auto 16px;letter-spacing:-.01em}
.hero p{font-size:clamp(14.5px,2vw,17px);color:var(--tx-mut);max-width:620px;margin:0 auto 30px;line-height:1.65}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.section{padding:42px 0}
.section h2{font-size:clamp(21px,3vw,27px);margin-bottom:8px;letter-spacing:-.01em}
.section .lead{color:var(--tx-mut);margin-bottom:26px;line-height:1.65;max-width:720px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
 box-shadow:0 1px 3px rgba(22,35,59,.04);transition:.15s}
.card:hover{box-shadow:0 6px 20px rgba(22,35,59,.07);border-color:var(--line2)}
.card .ic{font-size:22px;margin-bottom:10px}
.card h3{font-size:15px;margin-bottom:7px}
.card p{font-size:13px;color:var(--tx-mut);line-height:1.6}

table.cmp{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
 border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(22,35,59,.04)}
table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;text-align:left}
table.cmp th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);background:var(--panel2)}
table.cmp td:not(:first-child),table.cmp th:not(:first-child){text-align:center}
table.cmp .yes{color:var(--ok);font-weight:700}
table.cmp .no{color:var(--tx-dim)}
table.cmp .semi{color:var(--warn)}
table.cmp tr.hl td{background:rgba(31,94,255,.035)}
table.cmp tr:last-child td{border-bottom:none}

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:860px;margin:0 auto}
.price{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center;
 position:relative;box-shadow:0 1px 3px rgba(22,35,59,.04)}
.price.best{border-color:rgba(31,94,255,.45);box-shadow:0 8px 30px rgba(31,94,255,.12)}
.price .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--acc);
 color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:20px}
.price h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mut)}
.price .amt{font-size:40px;font-weight:700;margin:12px 0 2px;letter-spacing:-.02em}
.price .per{font-size:12.5px;color:var(--tx-dim);margin-bottom:18px}
.price ul{list-style:none;text-align:left;margin-bottom:22px}
.price li{font-size:13px;color:var(--tx-mut);padding:5px 0 5px 24px;position:relative;line-height:1.5}
.price li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}

.formbox{max-width:430px;margin:46px auto;background:var(--panel);border:1px solid var(--line);
 border-radius:16px;padding:30px;box-shadow:0 4px 18px rgba(22,35,59,.06)}
.formbox h1{font-size:21px;margin-bottom:6px}
.formbox .sub{font-size:13.5px;color:var(--tx-mut);margin-bottom:20px;line-height:1.6}
label.f{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-dim);margin:14px 0 5px}
input.f,select.f,textarea.f{width:100%;background:#fff;border:1px solid var(--line2);border-radius:10px;color:var(--tx);
 font-family:inherit;font-size:14px;padding:11px 13px;outline:none;transition:border-color .15s}
input.f:focus,textarea.f:focus{border-color:var(--acc)}
.msg{border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.55}
.msg.err{background:#fdf0f2;border:1px solid #f3c7cd;color:#a32e3f}
.msg.ok{background:#eefaf4;border:1px solid #bfe8d4;color:#0e6b49}

footer{border-top:1px solid var(--line);margin-top:54px;padding:26px 0 42px;font-size:12px;color:var(--tx-dim);line-height:1.7}

/* admin */
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.admin-grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px;
 box-shadow:0 1px 3px rgba(22,35,59,.04)}
.panel h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mut);
 padding:13px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.panel .pad{padding:16px}
.toggle{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px}
.toggle input{accent-color:var(--acc);width:17px;height:17px}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{padding:9px 14px;border-bottom:1px solid var(--line);font-size:12.5px;text-align:left;vertical-align:top}
table.list th{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);background:var(--panel2)}
.tag{font-size:10px;padding:2px 9px;border-radius:20px;border:1px solid var(--line2);color:var(--tx-mut)}
.tag.on{color:var(--ok);border-color:#bfe8d4;background:#eefaf4}
.tag.off{color:var(--bad);border-color:#f3c7cd;background:#fdf0f2}
.btn.sm{font-size:11px;padding:5px 10px}
.btn.danger{border-color:#f3c7cd;color:#a32e3f}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}