/* Productpagina Euro-Office (/euro-office), namespace .eo. Huisstijl van de productpagina's (zie
   pagina-website-php-upgrade.css): navy #152a80, koningsblauw #1d65af / #1062fe, geel #ffd166, oranje #f6a21e,
   groen #3ba862, tekst #17191c, gedimd #5e636e, randen #e9eaec, vlakken #f7f8fa / #f4f7fe, Roboto met Roboto Mono
   voor de kleine kopjes. Screenshots in een browserkader (.eo-scherm). */
@font-face { font-family: 'Roboto VF'; src: url('fonts/roboto-vf-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
.eo { font-family: 'Roboto VF', 'Roboto', system-ui, sans-serif; color: #17191c; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.eo h1, .eo h2, .eo h3, .eo p, .eo ul, .eo ol, .eo figure { margin: 0; }
.eo ul, .eo ol { padding: 0; list-style: none; }
.eo a { color: #1062fe; text-decoration: none; }
.eo img { display: block; max-width: 100%; height: auto; }
.eo-c { max-width: 1288px; margin: 0 auto; padding: 88px 24px; }
.eo-kolom { display: flex; flex-direction: column; gap: 48px; }
.eo-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 64px; align-items: start; }
.eo-midden { align-items: center; }
.eo-kop { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.eo-kop-midden { align-items: center; text-align: center; max-width: none; }
.eo-kop-midden h2, .eo-kop-midden .eo-sub { max-width: 780px; }
.eo h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: #152a80; text-wrap: balance; }
.eo h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #152a80; }
.eo-sub { font-size: 17px; color: #5e636e; line-height: 1.65; text-wrap: pretty; }
.eo-noot { font-size: 13.5px; color: #5e636e; line-height: 1.55; }
.eo-noot-midden { text-align: center; }
.eo-eyebrow { font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: #1062fe; display: inline-flex; align-items: center; gap: 10px; }
.eo-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.eo-sectie { background: #fff; }
.eo-vlak { background: #f7f8fa; border-top: 1px solid #e9eaec; border-bottom: 1px solid #e9eaec; }
.eo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knoppen */
.eo-knoppen { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.eo-knop { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; padding: 15px 22px; border-radius: 8px; transition: transform .25s, background .25s; }
.eo .eo-knop:hover { text-decoration: none; transform: translateY(-2px); }
.eo .eo-knop-wit { background: #fff; color: #152a80; box-shadow: 0 8px 30px rgba(10, 15, 30, .25); }
.eo .eo-knop-glas { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); font-weight: 600; padding: 14px 22px; }
.eo .eo-knop-glas:hover { background: rgba(255, 255, 255, .1); transform: none; }
.eo .eo-knop-blauw { background: #1d65af; color: #fff; }
.eo .eo-knop-blauw:hover { background: #18579a; color: #fff; }
.eo .eo-knop-rand { background: #fff; color: #152a80; border: 1px solid #d5dbe6; font-weight: 600; padding: 14px 22px; }

/* Hero */
.eo-hero { position: relative; overflow: hidden; background: linear-gradient(90deg, #152a80, #1d65af); color: #fff; }
.eo-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 420px at 85% 0%, rgba(16, 98, 254, .55), transparent 65%), radial-gradient(500px 360px at 0% 100%, rgba(255, 209, 102, .10), transparent 60%); }
.eo-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent); mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent); }
.eo-hero-grid { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.eo-hero-tekst { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.eo-tag { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50px; padding: 7px 14px 7px 10px; font-family: 'Roboto Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: #ffd166; }
.eo-puls { width: 8px; height: 8px; border-radius: 50%; background: #3ba862; animation: eoPuls 2s infinite; }
@keyframes eoPuls { 0% { box-shadow: 0 0 0 0 rgba(59, 168, 98, .6); } 70% { box-shadow: 0 0 0 8px rgba(59, 168, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 168, 98, 0); } }
.eo h1 { font-size: clamp(36px, 4.2vw, 56px); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; color: #fff; }
.eo-hero-p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 560px; text-wrap: pretty; }

/* Screenshot in een browserkader */
.eo-scherm { background: #fff; border: 1px solid #e3e7ee; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 6px rgba(23, 25, 28, .05), 0 24px 60px -24px rgba(21, 42, 128, .35); }
.eo-scherm-kop { display: flex; gap: 6px; padding: 11px 14px; background: #f4f6fa; border-bottom: 1px solid #e3e7ee; }
.eo-scherm-kop i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe6; }
.eo-scherm-kop i:first-child { background: #f5786e; }
.eo-scherm-kop i:nth-child(2) { background: #f6c34e; }
.eo-scherm-kop i:nth-child(3) { background: #5cc27a; }
.eo-scherm-hero { border-color: rgba(255, 255, 255, .25); box-shadow: 0 40px 90px -30px rgba(5, 10, 30, .7); transform: perspective(1600px) rotateY(-4deg); }

/* Kernbalk */
.eo-trust { background: #fff; border-bottom: 1px solid #e9eaec; }
.eo-trust-grid { padding-top: 26px; padding-bottom: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.eo-trust-item { display: flex; flex-direction: column; gap: 4px; padding: 4px 20px; }
.eo-trust-item + .eo-trust-item { border-left: 1px solid #e9eaec; }
.eo-trust-num { font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: #152a80; }
.eo-trust-label { font-size: 13px; color: #5e636e; line-height: 1.4; }

/* Drie onderdelen */
.eo-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.eo-app { background: #fff; border: 1px solid #e9eaec; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(23, 25, 28, .04), 0 8px 24px rgba(23, 25, 28, .06); }
.eo-app-beeld { background: #eef2f8; border-bottom: 1px solid #e9eaec; aspect-ratio: 16 / 10; overflow: hidden; }
.eo-app-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.eo-app-tekst { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.eo-app-tekst h3 { display: flex; align-items: center; gap: 10px; }
.eo-app-tekst p { font-size: 15px; color: #5e636e; line-height: 1.6; }
.eo-app-stip { width: 12px; height: 12px; border-radius: 3px; flex: none; background: #1d65af; }
.eo-app-stip-1 { background: #2b6cd8; }
.eo-app-stip-2 { background: #2e9f62; }
.eo-app-stip-3 { background: #d4572f; }

/* Voordelen */
.eo-raster3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.eo-kaart { border: 1px solid #e9eaec; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; background: #f7f8fa; }
.eo-kaart p { font-size: 15px; color: #5e636e; line-height: 1.6; }
.eo-kaart-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid #e3e9f6; display: inline-flex; align-items: center; justify-content: center; }

/* Vergelijking */
.eo-tabel-wrap { background: #fff; border: 1px solid #e9eaec; border-radius: 18px; overflow-x: auto; box-shadow: 0 8px 24px rgba(23, 25, 28, .06); max-width: 980px; width: 100%; margin: 0 auto; }
.eo-tabel { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.eo-tabel th, .eo-tabel td { padding: 14px 18px; border-bottom: 1px solid #eef0f3; text-align: center; vertical-align: middle; }
.eo-tabel thead th { font-size: 14px; font-weight: 800; color: #152a80; background: #f7f8fa; }
.eo-tabel thead th.eo-top { background: #152a80; color: #fff; }
.eo-tabel tbody th { text-align: left; font-weight: 600; color: #17191c; }
.eo-tabel td.eo-top { background: #f4f7fe; }
.eo-tabel td svg { display: inline-block; vertical-align: middle; }
.eo-tabel tbody tr:last-child th, .eo-tabel tbody tr:last-child td { border-bottom: 0; }

/* Zo werk je met Euro-Office */
.eo-stappen { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.eo-stappen li { display: flex; gap: 16px; align-items: flex-start; }
.eo-stappen p { font-size: 15.5px; color: #5e636e; line-height: 1.6; margin-top: 4px; }
.eo-stap-nr { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #152a80; color: #ffd166; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.eo-klant { margin-top: 12px; background: #f4f7fe; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.eo-klant p { font-size: 15.5px; line-height: 1.6; color: #17191c; }

/* FAQ */
.eo-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.eo-faq-lijst { display: flex; flex-direction: column; border-top: 1px solid #e9eaec; min-width: 0; }
.eo-faq { border-bottom: 1px solid #e9eaec; }
.eo-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; cursor: pointer; font-size: 17px; font-weight: 700; color: #17191c; letter-spacing: -.01em; }
.eo-faq summary::-webkit-details-marker { display: none; }
.eo-faq summary i { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #e3e9f6; position: relative; }
.eo-faq summary i::before, .eo-faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #1062fe; transform: translate(-50%, -50%); transition: transform .2s; }
.eo-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.eo-faq[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.eo-faq p { padding: 0 48px 22px 4px; font-size: 15.5px; color: #5e636e; line-height: 1.65; text-wrap: pretty; }

/* Slot */
.eo-slot { background: linear-gradient(90deg, #152a80, #1d65af); position: relative; overflow: hidden; }
.eo-slot::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 400px at 90% 10%, rgba(255, 255, 255, .1), transparent 60%); }
.eo-slot-wrap { position: relative; display: flex; justify-content: center; }
.eo-slot-kaart { background: #fff; color: #17191c; border-radius: 24px; padding: 40px; max-width: 720px; width: 100%; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -24px rgba(10, 15, 30, .5); }

@media (max-width: 900px) {
	.eo-hero-grid { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 64px; }
	.eo-scherm-hero { transform: none; }
	.eo-faq-grid { grid-template-columns: 1fr; gap: 24px; }
	.eo-c { padding-top: 64px; padding-bottom: 64px; }
	.eo-trust-item + .eo-trust-item { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .eo-puls { animation: none; } .eo .eo-knop { transition: none; } }