/* ============================================================
100 OS — Acquisitiewebsite · Home
Tokens 1-op-1 uit colors_and_type.css (Hundred OS app)
============================================================ */
/* Inter wordt via + in de geladen.
Een @import hier zou een extra laadwaterval opleveren: de browser ontdekt het font
pas nadat dit bestand binnen is. */
:root {
--blue: #2E7DD1;
--blue-light: #EAF2FB;
--green: #43907A;
--gray: #F3F5F7;
--dark: #2C3A4A;
--logo-bg: #0F1B2D;
--logo-mark: #0EA5E9;
--surface: #FFFFFF;
--fg: #2C3A4A;
--fg-muted: #5A6B7C;
--border: #DDE2E7;
--orange: #E08A4E;
--destructive: #EF4444;
--cta-bg: var(--dark);
--cta-fg: #FAFAFA;
--r: 16px;
--r-lg: 24px;
--r-btn: 16px;
--r-pill: 9999px;
--shadow-card: 0 1px 2px rgba(44,58,74,.04), 0 1px 1px rgba(44,58,74,.03);
--shadow-glass: 0 8px 32px rgba(44,58,74,.10);
--shadow-liquid: 0 4px 15px rgba(44,58,74,.30);
--shadow-liquid-hover: 0 8px 25px rgba(44,58,74,.40);
--shadow-pop: 0 10px 30px -8px rgba(44,58,74,.18);
--font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--max: 1160px;
}
html[data-cta="blauw"] { --cta-bg: var(--blue); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--gray);
color: var(--fg);
font: 400 16px/1.6 var(--font);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
/* ---------- icons ---------- */
.ic {
width: 16px; height: 16px; flex-shrink: 0;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.ic-20 { width: 20px; height: 20px; }
.ic-14 { width: 14px; height: 14px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: 500 15px/1 var(--font);
border-radius: var(--r-btn);
padding: 14px 24px;
border: none; cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--cta-bg); color: var(--cta-fg);
box-shadow: var(--shadow-liquid);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-liquid-hover); }
.btn-ghost {
background: var(--surface); color: var(--fg);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--blue-light); border-color: rgba(46,125,209,.35); }
.btn-sm { padding: 10px 18px; font-size: 14px; border-radius: 12px; }
.btn-lg { padding: 17px 32px; font-size: 16px; }
/* ---------- topnav ---------- */
.topnav {
position: sticky; top: 0; z-index: 50;
background: rgba(243,245,247,.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(221,226,231,.5);
}
.topnav-in {
height: 68px; display: flex; align-items: center; gap: 32px;
max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.brand { display: flex; align-items: center; gap: 10px; font: 700 17px/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; }
.logo-tile {
width: 34px; height: 34px; border-radius: 9px;
background: var(--logo-bg);
display: flex; align-items: center; justify-content: center;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
font: 500 14px/1 var(--font); color: var(--fg-muted);
padding: 9px 14px; border-radius: 10px;
transition: background .2s, color .2s;
}
.nav-links a:hover { background: rgba(44,58,74,.06); color: var(--fg); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-login { font: 500 14px/1 var(--font); color: var(--fg-muted); padding: 9px 12px; border-radius: 10px; }
.nav-login:hover { color: var(--fg); }
/* ---------- mobiel menu ----------
Het design verbergt .nav-links onder 1060px zonder vervanging: de
navigatie was daar dus onbereikbaar, en de drie knoppen samen (385px)
duwden de pagina breder dan de viewport. Onder die grens verhuizen de
links en de secundaire acties naar een uitklappaneel; de trial-knop
blijft in de balk staan. */
.nav-burger {
display: none; flex-shrink: 0;
width: 40px; height: 40px;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
background: none; border: none; border-radius: 10px; cursor: pointer;
transition: background .2s;
}
.nav-burger:hover { background: rgba(44,58,74,.06); }
.nav-burger span {
display: block; width: 18px; height: 2px; border-radius: 2px;
background: var(--fg);
transition: transform .25s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Buiten de mobiele breedte kan het paneel nooit verschijnen, ook niet als
het open stond toen het venster breder werd. */
.nav-paneel { display: none; }
.nav-paneel a {
font: 500 15px/1 var(--font); color: var(--fg-muted);
padding: 15px 4px; border-radius: 10px;
border-bottom: 1px solid rgba(221,226,231,.7);
}
.nav-paneel a:hover, .nav-paneel a.active { color: var(--fg); }
.nav-paneel .btn { margin-top: 16px; border-bottom: none; justify-content: center; }
/* ---------- hero ---------- */
.hero { padding: 88px 0 0; text-align: center; }
.hero-badge {
display: inline-flex; align-items: center; gap: 7px;
font: 500 13px/1 var(--font); color: var(--fg-muted);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: 8px 16px;
box-shadow: var(--shadow-card);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hero h1 {
font: 800 60px/1.05 var(--font); letter-spacing: -0.03em;
max-width: 820px; margin: 28px auto 0;
text-wrap: balance;
}
.hero .sub {
font: 400 19px/1.55 var(--font); color: var(--fg-muted);
max-width: 620px; margin: 22px auto 0;
text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
.hero-note { font: 400 13px/1.5 var(--font); color: var(--fg-muted); margin-top: 16px; }
html[data-hero="actiegericht"] .hero-v-a { display: none; }
html:not([data-hero="actiegericht"]) .hero-v-b { display: none; }
/* ---------- hero productshot ---------- */
.shot-zone { position: relative; max-width: 1080px; margin: 72px auto 0; padding: 0 32px; }
.shot-clip { position: relative; height: 480px; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.shot {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.shot-fade {
position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
background: linear-gradient(180deg, rgba(243,245,247,0), var(--gray));
pointer-events: none;
}
.shot-top {
height: 52px; display: flex; align-items: center; gap: 12px;
padding: 0 20px; border-bottom: 1px solid rgba(221,226,231,.6);
background: rgba(255,255,255,.85);
}
.shot-top .t { font: 600 13px/1 var(--font); }
.shot-top .pill-row { margin-left: auto; display: flex; gap: 6px; }
.shot-pill {
font: 500 11px/1 var(--font); color: var(--fg-muted);
border: 1px solid var(--border); border-radius: var(--r-pill);
padding: 6px 12px; background: #fff;
}
.shot-pill.on { background: var(--blue-light); color: var(--blue); border-color: rgba(46,125,209,.3); }
.shot-body { display: flex; }
.shot-side {
width: 168px; flex-shrink: 0; padding: 16px 10px;
border-right: 1px solid rgba(221,226,231,.6);
display: flex; flex-direction: column; gap: 2px;
background: rgba(243,245,247,.5);
}
.shot-side a {
display: flex; align-items: center; gap: 8px;
font: 500 12px/1 var(--font); color: var(--fg-muted);
padding: 8px 10px; border-radius: 10px;
}
.shot-side a.on { background: rgba(44,58,74,.08); color: var(--fg); }
.shot-main { flex: 1; padding: 22px 24px; }
.shot-main h4 { font: 700 20px/1.2 var(--font); letter-spacing: -0.01em; }
.shot-main .sub { font: 400 12px/1.4 var(--font); color: var(--fg-muted); margin-top: 2px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.kpi {
background: var(--dark); color: #fff; border-radius: var(--r);
padding: 14px 16px;
}
.kpi .l { font: 500 11px/1.3 var(--font); color: rgba(255,255,255,.65); }
.kpi .v { font: 700 22px/1.1 var(--font); margin-top: 6px; letter-spacing: -0.01em; }
.kpi .d { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--font); margin-top: 7px; color: #7FC5AE; }
.kpi .d.neg { color: #F0A48A; }
.shot-chart {
margin-top: 16px; background: #fff; border: 1px solid rgba(221,226,231,.6);
border-radius: var(--r); padding: 16px;
}
.shot-chart .t { font: 600 13px/1 var(--font); margin-bottom: 12px; }
.shot-chart svg { width: 100%; height: auto; display: block; }
/* floating cards */
.float-card {
position: absolute; z-index: 5;
background: rgba(255,255,255,.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.7);
border-radius: var(--r);
box-shadow: var(--shadow-glass);
padding: 14px 16px;
text-align: left;
}
.f-notif { top: 44px; left: -44px; width: 268px; }
.f-kpi { top: 140px; right: -40px; width: 200px; }
.f-mika { bottom: 56px; right: -20px; width: 292px; z-index: 6; }
/* op smallere desktops: kaarten kleiner en binnen de rand houden */
@media (max-width: 1240px) {
.float-card { transform: scale(.85); }
.f-kpi { right: 0; transform-origin: top right; }
.f-mika { right: 0; transform-origin: bottom right; }
.f-notif { transform-origin: top left; }
}
@media (max-width: 1080px) { .shot-zone .f-kpi, .shot-zone .f-mika { display: none; } }
.float-hd { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font); }
.float-hd .badge-hoog {
margin-left: auto; font: 600 10px/1 var(--font); color: #B4540A;
background: rgba(224,138,78,.14); border-radius: var(--r-pill); padding: 4px 8px;
}
.float-card p { font: 400 12px/1.5 var(--font); color: var(--fg-muted); margin-top: 8px; }
.f-kpi .v { font: 700 26px/1 var(--font); margin-top: 8px; letter-spacing: -0.01em; }
.f-kpi .bar { height: 6px; background: var(--gray); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.f-kpi .bar i { display: block; height: 100%; width: 94%; background: var(--green); border-radius: 3px; }
.f-mika { display: flex; gap: 10px; align-items: flex-start; }
.f-mika img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.f-mika .who { font: 600 12px/1 var(--font); }
.f-mika p { margin-top: 5px; }
/* ---------- sections ---------- */
.section { padding: 84px 0 0; }
.sec-kicker {
font: 600 13px/1 var(--font); color: var(--blue);
text-transform: uppercase; letter-spacing: 0.08em;
}
.sec-title { font: 700 38px/1.15 var(--font); letter-spacing: -0.02em; margin-top: 14px; text-wrap: balance; }
.sec-sub { font: 400 17px/1.6 var(--font); color: var(--fg-muted); margin-top: 14px; max-width: 600px; text-wrap: pretty; }
.sec-head-c { text-align: center; }
.sec-head-c .sec-sub { margin-left: auto; margin-right: auto; }
/* ---------- social proof ---------- */
.proof { padding: 64px 0 0; text-align: center; }
.proof .l { font: 500 13px/1 var(--font); color: var(--fg-muted); }
.proof-logos {
display: flex; justify-content: center; align-items: baseline; gap: 48px;
flex-wrap: wrap; margin-top: 26px;
}
.proof-logos span {
font: 700 17px/1 var(--font); color: #A8B2BC; letter-spacing: -0.01em;
transition: color .2s; cursor: default;
}
.proof-logos span:hover { color: var(--fg); }
.proof-logos span.serifish { font-weight: 400; font-style: italic; }
.proof-logos span.caps { letter-spacing: 0.14em; font-size: 14px; font-weight: 600; }
/* ---------- probleem / belofte ---------- */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.pain {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 28px;
box-shadow: var(--shadow-card);
}
.pain .ic-box {
width: 40px; height: 40px; border-radius: 12px;
background: var(--gray); color: var(--fg-muted);
display: flex; align-items: center; justify-content: center;
}
.pain h3 { font: 600 18px/1.3 var(--font); margin-top: 18px; letter-spacing: -0.01em; }
.pain p { font: 400 14px/1.6 var(--font); color: var(--fg-muted); margin-top: 10px; text-wrap: pretty; }
.promise {
margin-top: 20px; background: var(--blue-light);
border: 1px solid rgba(46,125,209,.2); border-radius: var(--r-lg);
padding: 28px 32px;
display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 32px; align-items: center;
}
.promise .lead { font: 700 18px/1.3 var(--font); color: var(--blue); letter-spacing: -0.01em; max-width: 170px; }
.promise .item { display: flex; gap: 12px; align-items: flex-start; }
.promise .item .ic { color: var(--blue); margin-top: 2px; }
.promise .item b { font: 600 14px/1.4 var(--font); display: block; }
.promise .item span { font: 400 13px/1.5 var(--font); color: var(--fg-muted); }
/* ---------- architectuur ---------- */
.arch { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; gap: 0; align-items: stretch; margin-top: 52px; }
.arch-step {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-card);
display: flex; flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease;
}
.arch-step:hover { transform: scale(1.02); box-shadow: var(--shadow-pop); }
.arch-num {
font: 700 12px/1 var(--font); color: var(--blue);
background: var(--blue-light); border-radius: var(--r-pill);
padding: 6px 12px; align-self: flex-start;
}
.arch-step h3 { font: 700 22px/1.2 var(--font); margin-top: 16px; letter-spacing: -0.01em; }
.arch-step p { font: 400 14px/1.6 var(--font); color: var(--fg-muted); margin-top: 8px; flex: 0 0 auto; text-wrap: pretty; }
.arch-arrow { display: flex; align-items: center; justify-content: center; color: #A8B2BC; }
.arch-viz { margin-top: 20px; }
.src-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
font: 500 12px/1 var(--font); color: var(--fg-muted);
background: var(--gray); border: 1px solid var(--border);
border-radius: var(--r-pill); padding: 6px 12px;
transition: color .2s;
}
.chip:hover { color: var(--fg); }
.chip.more { background: transparent; border-style: dashed; }
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-row {
display: flex; align-items: center; gap: 10px;
font: 500 13px/1.3 var(--font);
background: var(--gray); border-radius: 12px; padding: 10px 14px;
}
.check-row .ic { color: var(--green); }
.steer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.steer {
display: flex; align-items: center; gap: 9px;
font: 500 13px/1.2 var(--font);
background: var(--gray); border-radius: 12px; padding: 12px 14px;
}
.steer .ic { color: var(--blue); }
.arch-caption {
text-align: center; margin-top: 36px;
font: 500 15px/1.5 var(--font); color: var(--fg-muted);
}
.arch-caption b { color: var(--fg); font-weight: 600; }
/* ---------- modules ---------- */
.mod-hd { display: flex; align-items: center; gap: 12px; }
.mod-hd .ic-box {
width: 38px; height: 38px; border-radius: 11px;
background: var(--blue-light); color: var(--blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mod-hd h4 { font: 600 17px/1.2 var(--font); letter-spacing: -0.01em; }
.mod-tag {
margin-left: auto; font: 600 10px/1 var(--font);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--fg-muted); background: var(--gray);
border-radius: var(--r-pill); padding: 5px 9px;
flex-shrink: 0;
}
.mod-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.mod-feature {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-card);
display: flex; flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease;
}
.mod-feature:hover { transform: scale(1.02); box-shadow: var(--shadow-pop); }
.mod-feature > p { font: 400 14px/1.55 var(--font); color: var(--fg-muted); margin-top: 12px; flex: 1; text-wrap: pretty; }
.mod-viz { margin-top: 18px; background: var(--gray); border-radius: 14px; padding: 16px; }
.mod-viz svg { width: 100%; height: auto; display: block; }
.viz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.viz-chips .chip { background: #fff; }
.cohort { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.cohort i { aspect-ratio: 1; border-radius: 4px; background: var(--blue); display: block; }
.pbars { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.pbar { display: flex; align-items: center; gap: 10px; }
.pbar .track { flex: 1; height: 10px; border-radius: 5px; background: #E3E8ED; overflow: hidden; }
.pbar .track i { display: block; height: 100%; border-radius: 5px; background: var(--blue); }
.pbar .n { font: 500 11px/1 var(--font); color: var(--fg-muted); width: 44px; text-align: right; }
.mod-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.mod-tile {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-card);
transition: transform .3s ease, box-shadow .3s ease;
}
.mod-tile:hover { transform: scale(1.02); box-shadow: var(--shadow-pop); }
.mod-tile .mod-hd .ic-box { width: 34px; height: 34px; border-radius: 10px; }
.mod-tile .mod-hd h4 { font-size: 15px; }
.mod-tile p { font: 400 13px/1.5 var(--font); color: var(--fg-muted); margin-top: 10px; }
/* ---------- mika ---------- */
.mika-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; margin-top: 8px; }
.mika-feats { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.mika-feat { display: flex; gap: 12px; align-items: flex-start; }
.mika-feat .ic { color: var(--blue); margin-top: 3px; }
.mika-feat b { font: 600 15px/1.4 var(--font); display: block; }
.mika-feat span { font: 400 14px/1.55 var(--font); color: var(--fg-muted); }
.chat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.chat-hd { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(221,226,231,.6); }
.chat-hd img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chat-hd b { font: 600 14px/1.2 var(--font); display: block; }
.chat-hd span { font: 400 12px/1.2 var(--font); color: var(--fg-muted); }
.msg-user {
align-self: flex-end; max-width: 78%;
background: var(--dark); color: #fff;
border-radius: 18px 18px 4px 18px; padding: 12px 16px;
font: 400 14px/1.5 var(--font);
}
.msg-mika {
align-self: flex-start; max-width: 88%;
background: var(--gray);
border-radius: 18px 18px 18px 4px; padding: 14px 16px;
font: 400 14px/1.6 var(--font);
}
.msg-mika b { font-weight: 600; }
.chat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-chip {
font: 500 12px/1 var(--font); color: var(--blue);
background: rgba(46,125,209,.1); border: none;
border-radius: var(--r-pill); padding: 8px 14px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background .2s;
}
.chat-chip:hover { background: rgba(46,125,209,.2); }
/* ---------- datakwaliteit (dark) ---------- */
.dark-band { margin-top: 84px; background: var(--dark); color: #F7F9FA; }
.dark-band .section { padding: 76px 0; }
.dark-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.dark-band .sec-kicker { color: #8FB9E4; }
.dark-band .sec-sub { color: rgba(247,249,250,.72); }
.dark-points { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.dark-point { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.55 var(--font); color: rgba(247,249,250,.85); }
.dark-point .ic { color: #7FC5AE; margin-top: 4px; }
.dq-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-lg); padding: 22px;
backdrop-filter: blur(20px);
}
.dq-card .hd { display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--font); margin-bottom: 16px; }
.dq-card .hd .ic { color: #8FB9E4; }
.dq-rows { display: flex; flex-direction: column; gap: 8px; }
.dq-row {
display: flex; align-items: center; gap: 12px;
background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px 14px;
font: 500 13px/1.3 var(--font);
}
.dq-row .ic { color: #7FC5AE; }
.dq-row.warn .ic { color: var(--orange); }
.dq-row .val { margin-left: auto; font: 600 12px/1 var(--font); color: rgba(247,249,250,.6); }
/* ---------- onboarding ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: step; }
.step {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-card);
position: relative;
}
.step-num {
width: 36px; height: 36px; border-radius: 50%;
background: var(--dark); color: #fff;
font: 700 15px/36px var(--font); text-align: center;
}
.step h3 { font: 600 18px/1.3 var(--font); margin-top: 18px; letter-spacing: -0.01em; }
.step p { font: 400 14px/1.6 var(--font); color: var(--fg-muted); margin-top: 10px; text-wrap: pretty; }
.steps-badge {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 28px;
font: 600 14px/1 var(--font); color: var(--green);
background: rgba(67,144,122,.1); border-radius: var(--r-pill); padding: 10px 18px;
}
/* ---------- pricing teaser ---------- */
.price-teaser {
margin-top: 108px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-card);
padding: 48px 56px;
display: flex; align-items: center; gap: 48px;
}
.price-teaser .big { font: 800 40px/1.1 var(--font); letter-spacing: -0.02em; }
.price-teaser .big small { font: 500 17px/1 var(--font); color: var(--fg-muted); letter-spacing: 0; }
.price-teaser p { font: 400 15px/1.6 var(--font); color: var(--fg-muted); margin-top: 10px; max-width: 460px; text-wrap: pretty; }
.price-teaser .actions { margin-left: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.price-link { font: 500 14px/1 var(--font); color: var(--blue); text-align: center; padding: 6px; }
.price-link:hover { text-decoration: underline; }
/* ---------- eind-cta ---------- */
.cta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 48px; }
.cta-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-card);
}
.cta-card h3 { font: 700 22px/1.2 var(--font); letter-spacing: -0.01em; }
.cta-card > p { font: 400 14px/1.6 var(--font); color: var(--fg-muted); margin-top: 10px; text-wrap: pretty; }
.trial-form { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.trial-form input {
font: 400 14px/1 var(--font); color: var(--fg);
background: #fff; border: 1px solid var(--border); border-radius: 12px;
padding: 13px 16px; outline: none; width: 100%;
transition: border-color .2s, box-shadow .2s;
}
.trial-form input::placeholder { color: #A8B2BC; }
.trial-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,125,209,.15); }
.form-note { font: 400 12px/1.5 var(--font); color: var(--fg-muted); margin-top: 4px; }
/* honeypot: onzichtbaar voor mensen, wel invulbaar voor bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* terugkoppeling na het versturen van een formulier */
.form-toast {
font: 500 13px/1.5 var(--font); border-radius: 12px;
max-height: 0; opacity: 0; padding: 0 14px; overflow: hidden;
transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.form-toast--visible { max-height: 120px; opacity: 1; padding: 11px 14px; }
.form-toast--success { background: rgba(67,144,122,.12); color: var(--green); }
.form-toast--error { background: rgba(224,138,78,.14); color: #B4540A; }
@media (prefers-reduced-motion: reduce) { .form-toast { transition: none; } }
.btn--loading { opacity: .65; pointer-events: none; }
.demo-card { background: var(--blue-light); border-color: rgba(46,125,209,.2); display: flex; flex-direction: column; }
.demo-points { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; flex: 1; }
.demo-points div { display: flex; gap: 10px; align-items: center; font: 400 14px/1.4 var(--font); color: var(--fg); }
.demo-points .ic { color: var(--blue); }
.demo-card .btn { margin-top: 24px; align-self: flex-start; }
/* ---------- footer ---------- */
footer { margin-top: 120px; border-top: 1px solid var(--border); background: #fff; }
.foot-in {
max-width: var(--max); margin: 0 auto; padding: 48px 32px;
display: flex; align-items: flex-start; gap: 48px;
}
.foot-brand p { font: 400 13px/1.5 var(--font); color: var(--fg-muted); margin-top: 12px; max-width: 240px; }
.foot-links { margin-left: auto; display: flex; gap: 64px; }
.foot-links h5 { font: 600 13px/1 var(--font); margin-bottom: 14px; }
.foot-links a { display: block; font: 400 13px/1 var(--font); color: var(--fg-muted); padding: 5px 0; }
.foot-links a:hover { color: var(--fg); }
.foot-base {
border-top: 1px solid rgba(221,226,231,.6);
font: 400 12px/1 var(--font); color: var(--fg-muted);
}
.foot-base .wrap { display: flex; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
.f-notif { left: 8px; }
.f-kpi { right: 8px; }
.f-mika { right: 16px; }
}
@media (max-width: 1060px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
/* .nav-links viel weg als flex:1-spacer, dus de balk zelf uit elkaar duwen */
.topnav-in { justify-content: space-between; gap: 12px; }
/* Inloggen en 'Plan een demo' verhuizen naar het paneel */
.nav-cta .nav-login, .nav-cta .btn-ghost { display: none; }
.nav-paneel.open {
display: flex; flex-direction: column;
padding: 4px 32px 24px;
border-top: 1px solid rgba(221,226,231,.5);
}
@media (prefers-reduced-motion: no-preference) {
.nav-paneel.open { animation: paneel-in .25s ease; }
}
}
@keyframes paneel-in { from { opacity: 0; transform: translateY(-8px); } }
/* Onder 340px (iPhone SE 1e generatie en ouder) passen merknaam, trial-knop
en hamburger niet meer naast elkaar. De naam wijkt als laatste; het
logoblok blijft staan en linkt nog steeds naar de homepage. */
@media (max-width: 340px) {
.topnav .brand-naam { display: none; }
/* De vier tegels onder 'Sturen' staan 2x2 en kunnen samen niet smaller dan
308px worden. Dat is breder dan de kaart hier is, waardoor de hele pagina
zijwaarts scrolt. Op deze breedte onder elkaar. */
.steer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.hero h1 { font-size: 42px; }
.pains, .steps, .mod-feature-grid, .mod-tile-grid { grid-template-columns: 1fr 1fr; }
.arch { grid-template-columns: 1fr; gap: 14px; }
.arch-arrow { transform: rotate(90deg); height: 28px; }
.mika-grid, .dark-grid, .cta-grid { grid-template-columns: 1fr; gap: 36px; }
.promise { grid-template-columns: 1fr; gap: 20px; }
.float-card { display: none; }
.price-teaser { flex-direction: column; align-items: flex-start; gap: 24px; padding: 36px; }
.price-teaser .actions { margin-left: 0; }
}
@media (max-width: 620px) {
.wrap { padding: 0 20px; }
/* Op telefoonformaat moeten logo, trial-knop en hamburger samen passen.
Alleen in de topnav: de footer gebruikt .brand ook. */
.topnav-in { padding: 0 16px; gap: 8px; }
.topnav .brand { font-size: 16px; gap: 8px; }
.topnav .logo-tile { width: 30px; height: 30px; }
.nav-cta { gap: 8px; }
.nav-cta .btn-sm { padding: 10px 14px; font-size: 13.5px; }
.nav-burger { width: 36px; }
.nav-paneel.open { padding: 4px 16px 24px; }
.hero h1 { font-size: 34px; }
.hero-cta { flex-direction: column; align-items: center; }
.pains, .steps, .mod-feature-grid, .mod-tile-grid { grid-template-columns: 1fr; }
.kpi-row { grid-template-columns: 1fr 1fr; }
.shot-side { display: none; }
.foot-in { flex-direction: column; }
.foot-links { margin-left: 0; gap: 40px; }
}
/* ============================================================
Motion & interactie (effects.js)
============================================================ */
.topnav { transition: box-shadow .3s ease, background .3s ease; }
.topnav.scrolled { background: rgba(243,245,247,.95); box-shadow: 0 4px 24px rgba(44,58,74,.08); }
.hero { position: relative; }
.hero::before {
content: ""; position: absolute; top: -70px; left: 50%; transform: translateX(-50%);
width: min(1200px, 100vw); height: 660px;
background: radial-gradient(55% 55% at 50% 18%, rgba(46,125,209,.12), rgba(46,125,209,0) 70%);
pointer-events: none;
}
.hero > .wrap, .hero > .shot-zone { position: relative; }
.shot-zone::before {
content: ""; position: absolute; inset: -50px -90px;
background: radial-gradient(50% 45% at 50% 42%, rgba(14,165,233,.10), rgba(14,165,233,0) 70%);
pointer-events: none;
}
/* Die -90px laat de gloed naast de shot uitlopen. Dat past alleen zolang er
marge naast de content is: de shot-zone is max 1080px breed, dus vanaf
1260px viewport en smaller steekt de gloed buiten het scherm en scrollt de
pagina zijwaarts. Onder die grens loopt hij gelijk met de shot-zone; het is
een gradient die naar transparant uitloopt, dus dat scheelt visueel niets. */
@media (max-width: 1260px) {
.shot-zone::before { inset: -50px 0; }
}
.shot-clip { z-index: 1; }
/* reveal */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
@media print { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* zwevende kaarten */
@keyframes bob { from { translate: 0 0; } to { translate: 0 -9px; } }
.float-card { will-change: transform; transition: transform .25s ease-out; }
.float-card.bob { animation: bob 3.6s ease-in-out infinite alternate; }
.f-kpi.bob { animation-delay: .9s; }
.f-mika.bob { animation-delay: 1.7s; }
/* notificatie-badges */
.float-hd .badge-hoog, .float-hd .badge-info, .float-hd .badge-ok {
margin-left: auto; font: 600 10px/1 var(--font);
border-radius: var(--r-pill); padding: 4px 8px;
}
.float-hd .badge-info { color: var(--blue); background: rgba(46,125,209,.12); }
.float-hd .badge-ok { color: var(--green); background: rgba(67,144,122,.14); }
.f-notif p, .f-notif .float-hd span { transition: opacity .35s ease; }
/* hero-chart */
.perf-chart polyline { transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1); }
.perf-chart .area-blue { transition: opacity .8s ease .5s; }
button.shot-pill { cursor: pointer; appearance: none; transition: background .2s, color .2s, border-color .2s; }
button.shot-pill:hover { background: var(--gray); }
button.shot-pill.on:hover { background: var(--blue-light); }
/* chat */
.typing {
display: inline-flex; gap: 4px; align-self: flex-start;
padding: 16px; background: var(--gray); border-radius: 18px 18px 18px 4px;
}
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #A8B2BC; animation: tblink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes tblink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.pop { animation: msgin .4s cubic-bezier(.22,.61,.36,1); }
@keyframes msgin { from { opacity: 0; transform: translateY(10px); } }
/* logo-marquee */
.marquee {
overflow: hidden; margin-top: 26px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marq-track { display: flex; width: max-content; animation: marq 34s linear infinite; }
.marq-track .proof-logos { margin-top: 0; flex-wrap: nowrap; padding-right: 48px; }
.marquee:hover .marq-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-1 * var(--marq-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
.float-card.bob { animation: none; }
.marq-track { animation: none; }
}
/* knoppen micro-interactie */
.btn:active { transform: translateY(0) scale(.98); }