:root {
    --ink: #111;
    --muted: #6b6b6b;
    --line: #d5d5d5;
    --paper: #fff;
    --soft: #f5f5f3;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; color: var(--ink); font: 15px/1.5 Arial, Helvetica, sans-serif; }
button, input, textarea { font: inherit; }

/* Openbare website */
.lander { min-height: 100vh; background: var(--paper); }
.lander .page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); }
.lander .site-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px clamp(24px,6vw,84px); border-bottom: 1px solid var(--line); }
.lander .brand-logo { display: block; width: min(100%,340px); height: auto; }
.lander .header-note { max-width: 270px; color: var(--muted); font-size: .68rem; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.lander .content { width: min(1120px,100%); margin: auto; padding: clamp(60px,10vw,130px) clamp(24px,6vw,84px); }
.lander .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lander .eyebrow-question { margin-top: 0; margin-bottom: 30px; font-size: clamp(1.05rem,2vw,1.4rem); letter-spacing: -.02em; text-transform: none; }
.lander .eyebrow-question .target { width: 22px; height: 22px; flex: 0 0 22px; }
.lander .eyebrow-question .target::before { width: 30px; left: -5px; top: 10px; }
.lander .eyebrow-question .target::after { height: 30px; left: 10px; top: -5px; }
.lander .target { position: relative; width: 16px; height: 16px; border: 1px solid var(--ink); border-radius: 50%; }
.lander .target::before, .lander .target::after { content: ""; position: absolute; background: var(--ink); }
.lander .target::before { width: 22px; height: 1px; left: -4px; top: 7px; }
.lander .target::after { width: 1px; height: 22px; left: 7px; top: -4px; }
.lander h1 { margin: 0; line-height: .95; letter-spacing: -.06em; }
.lander .domain-name { max-width: 100%; white-space: nowrap; }
.lander .domain-short { font-size: clamp(3rem,9vw,7.2rem); }
.lander .domain-medium { font-size: clamp(2.6rem,7.5vw,5.8rem); }
.lander .domain-long { font-size: clamp(2.1rem,6vw,4.6rem); }
.lander .domain-extra-long { font-size: clamp(1.7rem,4.8vw,3.55rem); }
.lander .sale-state { display: inline-flex; margin: 24px 0 0; padding: 7px 10px; color: #fff; background: var(--ink); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.lander .intro { max-width: 680px; margin: 28px 0 0; color: #444; font-size: clamp(1.05rem,2vw,1.3rem); line-height: 1.65; }
.lander .purchase { display: flex; align-items: stretch; width: fit-content; max-width: 100%; margin-top: 42px; border: 1px solid var(--ink); }
.lander .offer { min-width: 190px; padding: 18px 24px; border-right: 1px solid var(--ink); }
.lander .price-label { color: var(--muted); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.lander .price { margin-top: 2px; font-size: 1.45rem; font-weight: 700; }
.lander .actions { display: flex; align-items: stretch; }
.lander .button { display: inline-flex; min-height: 70px; align-items: center; justify-content: center; padding: 17px 26px; color: var(--ink); background: var(--paper); border: 0; border-right: 1px solid var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-align: center; text-decoration: none; text-transform: uppercase; }
.lander .button:last-child { border-right: 0; }
.lander .button:hover, .lander .button-primary { color: #fff; background: var(--ink); }
.lander .button-primary:hover { color: var(--ink); background: var(--paper); }
.lander .trust { display: flex; gap: 32px; max-width: 800px; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); }
.lander .trust-item { color: var(--muted); font-size: .74rem; }
.lander .trust-item strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.lander .error-title { font-size: clamp(2.7rem,7vw,5.5rem); }
.lander footer { display: flex; justify-content: space-between; gap: 25px; padding: 19px clamp(24px,6vw,84px); border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.lander footer a { color: var(--ink); text-decoration: none; }

/* Homepage */
.homepage .page { display: block; }
.homepage .home-layout { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding: clamp(28px,5vw,60px); }
.homepage .home-header { display: flex; justify-content: center; padding: 0; }
.homepage .home-logo { display: block; width: min(320px,72vw); height: auto; }
.homepage .home-main { display: grid; place-items: center; padding: clamp(55px,8vw,110px) 0; text-align: center; }
.homepage .home-copy { width: min(680px,100%); }
.homepage .home-label { margin: 0 0 22px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.homepage h1 { margin: 0; font-size: clamp(2.35rem,5vw,4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.homepage .home-strike { display: block; width: fit-content; margin: 27px auto 0; padding: 16px 0 0; color: var(--ink); background: transparent; border-top: 1px solid var(--ink); font-size: clamp(1rem,2vw,1.3rem); font-weight: 700; letter-spacing: .035em; }
.homepage .home-intro { max-width: 520px; margin: 34px auto 0; color: #4b4b4b; font-size: clamp(1rem,1.8vw,1.15rem); line-height: 1.6; }
.homepage .home-contact { display: inline-flex; align-items: center; gap: 30px; margin-top: 30px; padding: 14px 18px; color: #fff; background: var(--ink); border: 1px solid var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.homepage .home-contact span { font-size: 1rem; line-height: 1; }
.homepage .home-contact:hover { color: var(--ink); background: var(--paper); }
.homepage .home-footer { display: flex; justify-content: space-between; padding: 18px clamp(24px,7vw,92px); border-top: 1px solid var(--line); color: var(--muted); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.homepage .home-footer a { color: var(--ink); text-decoration: none; }

/* Beheerdashboard */
.dashboard { min-height: 100vh; padding: 0; background: var(--paper); }
.dashboard .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.dashboard .login-card { width: min(100%,460px); padding: clamp(28px,5vw,48px); background: var(--paper); border: 1px solid var(--line); }
.dashboard .login-logo { display: block; width: min(100%,340px); height: auto; margin-bottom: 34px; }
.dashboard .login-card h1 { margin: 0; font-size: 2rem; letter-spacing: -.045em; }
.dashboard .login-card p { color: var(--muted); }
.dashboard label { display: block; margin: 17px 0 7px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.dashboard input, .dashboard textarea, .dashboard select { width: 100%; min-height: 44px; padding: 11px 13px; color: var(--ink); background: var(--paper); border: 1px solid #9d9d9d; border-radius: 0; outline: none; }
.dashboard input:focus, .dashboard textarea:focus, .dashboard select:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dashboard textarea { min-height: 105px; resize: vertical; }
.dashboard .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.dashboard .button:hover { color: var(--ink); background: var(--paper); }
.dashboard .button.secondary { color: var(--ink); background: var(--paper); }
.dashboard .button.danger { color: #fff; background: #8f1919; border-color: #8f1919; }
.dashboard .button.full { width: 100%; margin-top: 22px; }
.dashboard .alert { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--ink); font-size: .9rem; }
.dashboard .alert.error { background: #f2f2f2; }
.dashboard .alert.success { color: #fff; background: var(--ink); }
.dashboard .shell { min-height: 100vh; background: var(--paper); }
.dashboard .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px,5vw,72px); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.dashboard .dashboard-logo { display: block; width: min(300px,58vw); height: auto; }
.dashboard .logout { padding: 9px 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 0; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.dashboard .logout:hover { color: #fff; background: var(--ink); }
.dashboard .container { width: min(1440px,100%); margin: auto; padding: clamp(38px,6vw,76px) clamp(20px,5vw,72px) 80px; }
.dashboard .heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.dashboard .overline { display: block; margin-bottom: 8px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.dashboard .heading h1 { margin: 0; font-size: clamp(2.35rem,5vw,4.6rem); line-height: .95; letter-spacing: -.065em; }
.dashboard .heading p { margin: 12px 0 0; color: var(--muted); }
.dashboard .metrics { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 18px; border: 1px solid var(--line); }
.dashboard .metric { padding: 21px; background: var(--paper); border-right: 1px solid var(--line); }
.dashboard .metric:last-child { border-right: 0; }
.dashboard .metric span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dashboard .metric strong { display: block; margin-top: 8px; font-size: 2rem; letter-spacing: -.04em; }
.dashboard .metric small { color: var(--muted); }
.dashboard .grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: 14px; margin-top: 14px; }
.dashboard .panel { padding: 24px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.dashboard .panel h2 { margin: 0 0 18px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.dashboard .chart { height: 210px; display: flex; align-items: end; gap: 5px; padding-top: 16px; border-bottom: 1px solid var(--ink); }
.dashboard .bar-wrap { flex: 1; height: 100%; display: flex; align-items: end; }
.dashboard .bar { width: 100%; min-height: 2px; background: var(--ink); }
.dashboard .chart-labels { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font-size: .72rem; }
.dashboard .rank { display: grid; gap: 12px; }
.dashboard .rank-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.dashboard .rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard .rank-count { font-weight: 800; }
.dashboard .track { grid-column: 1/-1; height: 4px; overflow: hidden; background: #e5e5e5; }
.dashboard .track span { display: block; height: 100%; background: var(--ink); }
.dashboard .table-panel { margin-top: 14px; padding: 0; }
.dashboard .table-title { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.dashboard .table-title h2 { margin: 0; }
.dashboard .table-scroll { overflow: auto; }
.dashboard table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.dashboard th, .dashboard td { padding: 15px 16px; text-align: left; border-bottom: 1px solid #e7e7e7; }
.dashboard th { color: var(--ink); background: #f4f4f2; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.dashboard td strong { display: block; }
.dashboard .sub { color: var(--muted); font-size: .78rem; }
.dashboard .badge { display: inline-block; padding: 4px 8px; color: #fff; background: var(--ink); border: 1px solid var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dashboard .badge.off { color: #555; background: var(--paper); border-color: #aaa; }
.dashboard .edit-link { color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-decoration: underline; text-transform: uppercase; }
.dashboard details.panel { margin-top: 14px; }
.dashboard summary { cursor: pointer; font-size: .8rem; font-weight: 800; letter-spacing: .08em; list-style: none; text-transform: uppercase; }
.dashboard summary::-webkit-details-marker { display: none; }
.dashboard .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 16px; }
.dashboard .wide { grid-column: 1/-1; }
.dashboard .check { display: flex; align-items: center; gap: 9px; margin-top: 20px; }
.dashboard .check input { width: auto; }
.dashboard .check label { margin: 0; }
.dashboard .hint { color: var(--muted); font-size: .78rem; }
.dashboard .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.dashboard .recent { margin-top: 14px; }
.dashboard .empty { padding: 25px; color: var(--muted); text-align: center; }
.dashboard .footer-note { margin-top: 18px; color: var(--muted); font-size: .76rem; }
.dashboard .portfolio-highlight { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.8fr); gap: 18px; margin-bottom: 18px; }
.dashboard .commercial-card { padding: clamp(26px,4vw,46px); color: #fff; background: var(--ink); }
.dashboard .commercial-card .overline { color: #bdbdbd; }
.dashboard .commercial-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.dashboard .commercial-heading h2 { margin: 0; overflow-wrap: anywhere; font-size: clamp(2rem,4vw,4rem); line-height: .95; letter-spacing: -.06em; }
.dashboard .commercial-heading > strong { flex: 0 0 auto; font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1; }
.dashboard .commercial-heading small { font-size: .8rem; font-weight: 400; }
.dashboard .commercial-card p { max-width: 650px; margin: 24px 0 0; color: #cfcfcf; }
.dashboard .card-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; }
.dashboard .card-actions a { color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-underline-offset: 4px; text-transform: uppercase; }
.dashboard .portfolio-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.dashboard .portfolio-facts div { min-width: 0; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard .portfolio-facts div:nth-child(2n) { border-right: 0; }
.dashboard .portfolio-facts div:nth-last-child(-n+2) { border-bottom: 0; }
.dashboard .portfolio-facts span { display: block; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dashboard .portfolio-facts strong { display: block; margin-top: 9px; font-size: clamp(1.45rem,3vw,2.25rem); letter-spacing: -.045em; }
.dashboard .domain-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(180px,260px) auto auto; gap: 10px; align-items: end; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.dashboard .domain-toolbar label { margin-top: 0; }
.dashboard .domain-toolbar .button { min-height: 44px; }
.dashboard .row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dashboard .row-actions a { color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dashboard .danger-zone { margin-top: 30px; padding-top: 20px; border-top: 1px solid #cfb2b2; }
.dashboard .danger-zone summary { color: #7e1515; }
.dashboard .danger-zone form { max-width: 620px; margin-top: 18px; }
.dashboard .danger-zone p { color: var(--muted); }

.h0{height:0}.h5{height:5%}.h10{height:10%}.h15{height:15%}.h20{height:20%}.h25{height:25%}.h30{height:30%}.h35{height:35%}.h40{height:40%}.h45{height:45%}.h50{height:50%}.h55{height:55%}.h60{height:60%}.h65{height:65%}.h70{height:70%}.h75{height:75%}.h80{height:80%}.h85{height:85%}.h90{height:90%}.h95{height:95%}.h100{height:100%}
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

@media (max-width: 950px) {
    .dashboard .portfolio-highlight { grid-template-columns: 1fr; }
    .dashboard .metrics { grid-template-columns: repeat(2,1fr); }
    .dashboard .metric:nth-child(2) { border-right: 0; }
    .dashboard .metric:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
    .dashboard .grid { grid-template-columns: 1fr; }
    .dashboard .domain-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .lander { padding: 0; }
    .lander .page { min-height: 100vh; border: 0; }
    .lander .site-header { align-items: flex-start; flex-direction: column; }
    .lander .brand-logo { width: min(100%,300px); }
    .lander .header-note { text-align: left; }
    .lander .purchase { width: 100%; flex-direction: column; }
    .lander .offer { border-right: 0; border-bottom: 1px solid var(--ink); }
    .lander .trust { flex-direction: column; gap: 16px; }
    .lander footer { flex-direction: column; }
    .lander .domain-long, .lander .domain-extra-long { white-space: normal; overflow-wrap: anywhere; }
    .homepage .home-layout { padding: 24px; }
    .homepage .home-header { padding: 0; }
    .homepage .home-main { padding: 55px 0; }
    .homepage .home-footer { gap: 8px; }
}

@media (max-width: 600px) {
    .dashboard { padding: 0; }
    .dashboard .shell { min-height: 100vh; border: 0; }
    .dashboard .metrics { grid-template-columns: 1fr; }
    .dashboard .metric { border-right: 0; border-bottom: 1px solid var(--ink); }
    .dashboard .metric:last-child { border-bottom: 0; }
    .dashboard .heading { align-items: flex-start; flex-direction: column; }
    .dashboard .form-grid { grid-template-columns: 1fr; }
    .dashboard .wide { grid-column: auto; }
    .dashboard .container { padding-top: 22px; }
    .dashboard .topbar { position: static; }
    .dashboard .commercial-heading { align-items: flex-start; flex-direction: column; }
    .dashboard .domain-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .lander .actions { flex-direction: column; }
    .lander .button { border-right: 0; border-bottom: 1px solid var(--ink); }
    .lander .button:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .lander .button { transition: none; }
}