/* Aanvullingen op Tailwind: lettertypes, logo, mockups, formulier, toasts. */
@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url(/fonts/open-sans-400.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-display: swap; src: url(/fonts/open-sans-600.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 700 800; font-display: swap; src: url(/fonts/open-sans-700.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 400 500; font-display: swap; src: url(/fonts/roboto-500.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-weight: 600 900; font-display: swap; src: url(/fonts/roboto-700.woff2) format("woff2"); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: #fff; color: #0f172a; font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
[hidden] { display: none !important; }

/* Logo: woordmerk "Site" + indigo "Corp" (zie SiteCOrp/logo/) */
.logo { font-family: Roboto, Arial, sans-serif; font-weight: 700; letter-spacing: -.017em; line-height: 1; color: #0f172a; }
.logo span { color: #4f46e5; }
.logo.on-dark { color: #fff; }
.logo.on-dark span { color: #818cf8; }

/* Hero-achtergrond */
.hero-glow {
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(129,140,248,.14), transparent 60%),
    #fff;
}
.grid-lines {
  background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 75%);
}

/* Browser- en telefoonframes rond screenshots */
.browser { border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgba(30,27,75,.22); overflow: hidden; border: 1px solid #e2e5ef; }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f1f3f9; border-bottom: 1px solid #e2e5ef; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d8e5; }
.browser-bar i:nth-child(1) { background: #f87171; } .browser-bar i:nth-child(2) { background: #fbbf24; } .browser-bar i:nth-child(3) { background: #34d399; }
.browser-bar span { margin-left: 10px; flex: 1; max-width: 260px; height: 16px; border-radius: 8px; background: #fff; font-size: 10px; line-height: 16px; padding: 0 8px; color: #64748b; overflow: hidden; white-space: nowrap; }
.browser img, .phone img { display: block; width: 100%; height: auto; }
.phone { border-radius: 30px; background: #0f172a; padding: 8px; box-shadow: 0 30px 70px rgba(15,23,42,.35); }
.phone img { border-radius: 23px; }


.input { display: block; width: 100%; box-sizing: border-box; border: 1px solid #e2e5ef; border-radius: 12px; background: #fff; padding: .75rem .9rem; font: inherit; font-size: 1rem; color: inherit; }
.input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.15); }
.field-invalid { border-color: #dc2626 !important; }

.spinner { display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -0.15em; }
@keyframes spin { to { transform: rotate(360deg); } }

#toasts { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { padding: 12px 16px; border-radius: 14px; background: #0f172a; color: #fff; font-size: .94rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: toast-in .25s ease-out; }
.toast.error { background: #b91c1c; }
/* Contactbalk onderaan op mobiel: ruimte vrijhouden en meldingen erboven tonen */
@media (max-width: 639px) {
  body:has(#contact-bar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body:has(#contact-bar) #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
#contact-bar.bar-hidden { transform: translateY(110%); }
/* Drie knoppen naast elkaar: korte labels */
#contact-bar:has(> a:nth-of-type(3)) .bar-long { display: none; }
#contact-bar:has(> a:nth-of-type(3)) > a { font-size: 14px; gap: .3rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }

/* Filterknoppen in het beheer */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid #e2e5ef; background: #fff; font: inherit; font-weight: 600; font-size: .9rem; color: #475569; white-space: nowrap; cursor: pointer; }
.pill[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.pill .count { font-size: .78rem; padding: 0 .45rem; border-radius: 999px; background: #eceef7; color: #0f172a; }
.pill[aria-pressed="true"] .count { background: rgba(255,255,255,.2); color: #fff; }

/* Tabbladen en grafiek in het beheer */
.tabbtn { padding: .55rem 1.1rem; border-radius: 12px; font-weight: 700; color: #475569; border: 1px solid transparent; }
.tabbtn:hover { color: #0f172a; }
.tabbtn[aria-selected="true"] { background: #fff; color: #0f172a; border-color: #e2e5ef; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.chart-tip { position: fixed; z-index: 60; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: #0f172a; color: #fff; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.bar { transition: opacity .15s; }

/* Privacyverklaring en voorwaarden */
.legal .lead { margin-top: 1.75rem; font-size: 1.2rem; line-height: 1.7; color: #475569; }
.legal h2 { margin-top: 2.75rem; font-family: Roboto, "Open Sans", Arial, sans-serif; font-weight: 700; font-size: 1.55rem; letter-spacing: -.01em; }
.legal h3 { margin-top: 1.5rem; font-weight: 700; font-size: 1.1rem; }
.legal p, .legal li { line-height: 1.75; color: #334155; }
.legal p { margin-top: .75rem; }
.legal ul { margin-top: .75rem; padding-left: 1.25rem; list-style: disc; }
.legal li { margin-top: .35rem; }
.legal a { color: #4f46e5; text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

/* Rustig infaden tijdens het scrollen (alleen met JavaScript, anders direct zichtbaar) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}