:root { color-scheme: dark; --navy: #071a31; --navy-2: #0c2748; --ink: #f7fbff; --muted: #a9bad0; --blue: #4d8dff; --blue-2: #75adff; --mint: #63ddba; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--navy); color: var(--ink); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 82% 8%, rgba(77,141,255,.2), transparent 32%), var(--navy); }
a { color: inherit; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; border-radius: 10px; background: #fff; color: #071a31; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.site-header { width: min(1392px, calc(100% - 48px)); min-height: 84px; margin: 18px auto 0; padding: 12px 14px 12px 20px; display: flex; align-items: center; gap: 30px; border: 1px solid rgba(193,216,242,.14); border-radius: 22px; background: rgba(7,26,49,.78); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 1.06rem; font-weight: 820; letter-spacing: -.03em; text-decoration: none; }
.brand > span:last-child > span { color: var(--blue-2); }
.brand-mark { width: 32px; height: 32px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 9px; background: linear-gradient(145deg, #377ce9, #69a9ff); box-shadow: 0 8px 20px rgba(50,126,244,.3); }
img.brand-mark { display: block; object-fit: contain; padding: 0; background: transparent; border-radius: 0; box-shadow: none; flex-shrink: 0; }
.brand-mark i { display: block; border-radius: 2px; background: rgba(255,255,255,.92); }
img.brand-mark { display: block; object-fit: contain; padding: 0; background: transparent; border-radius: 0; box-shadow: none; flex-shrink: 0; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-header nav a { color: #b7c7da; font-size: .8rem; font-weight: 760; text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: #fff; outline: none; }
.site-header .login-link { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; border: 1px solid rgba(117,173,255,.42); border-radius: 12px; background: rgba(77,141,255,.1); color: #edf5ff; }
main { display: block; }
.contact-hero { width: min(1392px, calc(100% - 48px)); min-height: 690px; margin: auto; padding: 115px 0 120px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, .75fr); align-items: center; gap: 8vw; }
.eyebrow { margin: 0 0 21px; display: flex; align-items: center; gap: 10px; color: var(--blue-2); font-size: .75rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow > span { width: 26px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 880px; margin-bottom: 28px; font-size: clamp(3.2rem, 6vw, 6.5rem); line-height: .96; letter-spacing: -.07em; }
.intro { max-width: 760px; margin-bottom: 34px; color: #b4c4d8; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; }
.email-button { min-height: 56px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border-radius: 15px; background: linear-gradient(145deg, #3c7dea, #659fff); color: #fff; box-shadow: 0 16px 36px rgba(45,113,224,.3); font-size: .9rem; font-weight: 850; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.email-button:hover, .email-button:focus-visible { outline: none; box-shadow: 0 21px 45px rgba(45,113,224,.43); transform: translateY(-3px); }
.privacy-note { max-width: 660px; margin: 21px 0 0; color: #748ba6; font-size: .76rem; line-height: 1.55; }
.contact-card { padding: 34px; border: 1px solid rgba(175,207,241,.18); border-radius: 28px; background: linear-gradient(145deg, rgba(20,56,94,.92), rgba(10,34,62,.94)); box-shadow: 0 32px 75px rgba(0,7,20,.35); }
.card-label { margin-bottom: 15px; color: var(--mint); font-size: .65rem; font-weight: 900; letter-spacing: .14em; }
.contact-card > a { display: block; overflow-wrap: anywhere; color: #fff; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 850; letter-spacing: -.04em; }
.contact-card dl { margin: 30px 0; padding: 0; display: grid; }
.contact-card dl div { padding: 15px 0; display: grid; grid-template-columns: 105px 1fr; gap: 15px; border-top: 1px solid rgba(176,204,235,.14); }
.contact-card dl div:last-child { border-bottom: 1px solid rgba(176,204,235,.14); }
.contact-card dt { color: #7f98b5; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.contact-card dd { margin: 0; color: #dbe8f6; font-size: .85rem; font-weight: 740; }
.contact-card > p:last-child { margin: 0; color: #9fb3ca; font-size: .86rem; line-height: 1.6; }
.preparation { padding: 120px max(24px, calc((100vw - 1392px)/2)); background: #f3f7fc; color: #10213b; }
.section-heading { max-width: 900px; margin-bottom: 50px; }
h2 { margin-bottom: 22px; font-size: clamp(2.5rem, 4.8vw, 5rem); line-height: .98; letter-spacing: -.06em; }
.section-heading > p:last-child { max-width: 700px; color: #63748a; font-size: 1.05rem; line-height: 1.68; }
.preparation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.preparation-grid article { min-height: 265px; padding: 27px; border: 1px solid #d8e3ef; border-radius: 21px; background: #fff; box-shadow: 0 16px 40px rgba(30,59,93,.06); }
.preparation-grid article > span { display: block; margin-bottom: 34px; color: #3474c7; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.preparation-grid h3 { margin-bottom: 11px; font-size: 1.12rem; letter-spacing: -.03em; }
.preparation-grid p { margin: 0; color: #64758b; font-size: .87rem; line-height: 1.62; }
.expectations { padding: 125px max(24px, calc((100vw - 1392px)/2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; background: #0a203b; }
.eyebrow--light { color: var(--mint); }
.expectations ol { margin: 0; padding: 0; display: grid; list-style: none; }
.expectations li { padding: 27px 0; display: grid; grid-template-columns: 52px 1fr; gap: 18px; border-top: 1px solid rgba(176,204,235,.16); }
.expectations li:last-child { border-bottom: 1px solid rgba(176,204,235,.16); }
.expectations li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: rgba(99,221,186,.12); color: var(--mint); font-size: .72rem; font-weight: 900; }
.expectations strong { font-size: 1.05rem; }
.expectations li p { margin: 7px 0 0; color: #98adc5; line-height: 1.62; }
.contact-closing { padding: 105px max(24px, calc((100vw - 1392px)/2)); display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; background: #fff; color: #10213b; }
.contact-closing > div { max-width: 900px; }
.contact-closing h2 { margin: 0; }
.contact-closing .email-button { flex: 0 0 auto; }
footer { min-height: 185px; padding: 52px max(24px, calc((100vw - 1392px)/2)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; color: #71869f; }
footer p { margin: 0; text-align: center; }
@media (max-width: 1000px) { .contact-hero, .expectations { grid-template-columns: 1fr; }.contact-card { max-width: 680px; }.preparation-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .site-header { width: calc(100% - 20px); margin-top: 10px; padding-left: 13px; }.site-header nav > a:not(.login-link) { display: none; }.contact-hero { width: calc(100% - 28px); padding: 85px 0 80px; }.contact-hero h1 { font-size: clamp(3rem, 14vw, 4.5rem); }.contact-card { padding: 24px; }.preparation, .expectations { padding-block: 80px; }.preparation-grid { grid-template-columns: 1fr; }.contact-closing { padding-block: 80px; align-items: flex-start; flex-direction: column; }.contact-closing .email-button { width: 100%; }.email-button { text-align: center; } footer { grid-template-columns: 1fr; text-align: center; }.brand { margin-inline: auto; } footer small { text-align: center; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; } }
/* Commerciële navigatie blijft ook op kleine schermen bereikbaar. */
@media (max-width: 1100px) { .site-header { flex-wrap: wrap; gap: 16px; }.site-header nav { margin-left: 0; flex-wrap: wrap; gap: 16px; } }
@media (max-width: 720px) { .site-header nav { justify-content: center; width: 100%; }.site-header nav > a:not(.login-link) { display: inline-flex; } }