:root {
    --bg: #071620;
    --bg-soft: #0c2232;
    --panel: rgba(10, 27, 41, 0.88);
    --panel-strong: #0d2436;
    --panel-light: rgba(255, 255, 255, 0.06);
    --text: #e5f2f6;
    --muted: #a9c1cb;
    --heading: #ffffff;
    --accent: #14d9d0;
    --accent-2: #7a67ff;
    --accent-3: #ff6ea8;
    --success: #8df5cb;
    --border: rgba(255,255,255,0.10);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    --radius: 24px;
    --radius-sm: 16px;
    --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(20, 217, 208, 0.16), transparent 24%),
        radial-gradient(circle at top right, rgba(122, 103, 255, 0.18), transparent 20%),
        linear-gradient(180deg, #071620 0%, #0a1d2d 55%, #071620 100%);
    color: var(--text);
    line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding-left: 1.1rem; }
section { padding: 4.5rem 0; }
main { display: block; }

.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.card,
.surface,
.plan,
.service-card,
.audience-card,
.quote-box,
.process-step,
.review,
.contact-box,
.faq-item,
.form-shell,
.flip-card {
    background: linear-gradient(180deg, rgba(14, 34, 49, 0.94), rgba(7, 22, 32, 0.95));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

h1, h2, h3, h4 { color: var(--heading); line-height: 1.15; margin: 0 0 0.8rem; }
h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
h3 { font-size: 1.2rem; }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 760px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--success); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem;
    padding: .45rem .9rem; border-radius: 999px; background: rgba(141, 245, 203, 0.08); border: 1px solid rgba(141, 245, 203, 0.2);
}

.button,
button.button,
input[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .95rem 1.35rem; border-radius: 999px; font-weight: 700; cursor: pointer;
    border: 1px solid transparent; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover,
button.button:hover,
input[type="submit"]:hover { transform: translateY(-2px); }
.button-primary,
input[type="submit"] { background: linear-gradient(135deg, var(--accent), #31a7ff); color: #031118; box-shadow: 0 10px 30px rgba(20, 217, 208, 0.25); }
.button-secondary { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--heading); }
.button-ghost { background: transparent; border-color: rgba(20, 217, 208, 0.28); color: var(--accent); }
.button-nav { padding: .75rem 1rem; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: #fff; color: #000; padding: .7rem 1rem; border-radius: 0 0 12px 12px; z-index: 9999;
}
.skip-link:focus { left: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(7, 22, 32, 0.74); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0; }
.brand { display: inline-flex; align-items: center; gap: .85rem; min-width: 0; }
.brand img { width: 62px; height: 62px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.03); padding: .25rem; }
.brand strong { display: block; font-size: 1.1rem; }
.brand span { display: block; color: var(--muted); font-size: .9rem; }
.site-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.site-nav a { padding: .7rem .95rem; border-radius: 999px; color: var(--text); font-weight: 600; }
.site-nav a:hover, .site-nav a.is-active { background: rgba(255,255,255,0.07); color: #fff; }
.menu-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; width: 50px; height: 50px; padding: 0; position: relative; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: white; margin: 5px auto; border-radius: 3px; }

.hero {
    padding: 5rem 0 4rem;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
.hero-copy { max-width: 680px; }
.hero p.lead { margin-bottom: 1.8rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.8rem; }
.metric { padding: 1rem 1.1rem; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.metric strong { display: block; font-size: 1.5rem; color: #fff; }
.metric span { color: var(--muted); font-size: .92rem; }
.hero-visual { padding: .85rem; position: relative; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; border-radius: calc(var(--radius) - 6px); }
.hero-badge {
    position: absolute; right: 1.4rem; bottom: 1.4rem; padding: .95rem 1.1rem; max-width: 290px;
    border-radius: 20px; background: rgba(9, 25, 36, 0.82); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
}
.hero-badge strong { display: block; margin-bottom: .2rem; }

.section-head { margin-bottom: 1.6rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head p { max-width: 760px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.service-card { overflow: hidden; height: 100%; }
.service-card img { width: 100%; height: 210px; object-fit: cover; }
.card-body { padding: 1.35rem; }
.service-card .icon,
.audience-card .icon,
.plan .icon,
.process-step .icon,
.contact-box .icon,
.faq-item .icon {
    width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 15px; margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(20, 217, 208, 0.2), rgba(122, 103, 255, 0.2)); font-size: 1.35rem;
}
.inline-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.inline-list li { position: relative; padding-left: 1.2rem; color: var(--muted); }
.inline-list li::before { content: '•'; color: var(--accent); position: absolute; left: 0; }
.card-link { margin-top: 1rem; display: inline-flex; gap: .4rem; color: var(--accent); font-weight: 700; }

.audience-card,
.plan,
.quote-box,
.process-step,
.review,
.contact-box,
.faq-item { padding: 1.45rem; }
.audience-card p, .plan p, .process-step p, .review p, .contact-box p, .faq-item p { color: var(--muted); }
.plan { position: relative; overflow: hidden; }
.plan.featured { border-color: rgba(20, 217, 208, .35); transform: translateY(-6px); }
.plan .pill {
    display: inline-flex; margin-bottom: .8rem; border-radius: 999px; padding: .35rem .8rem; background: rgba(20, 217, 208, 0.12); color: var(--accent); font-size: .84rem; font-weight: 700;
}
.plan ul { margin: 1rem 0 1.2rem; }
.plan li { margin-bottom: .4rem; color: var(--muted); }
.plan .price-note { margin-top: .8rem; font-weight: 700; color: #fff; }

.showcase {
    display: grid; grid-template-columns: .95fr 1.05fr; gap: 1.6rem; align-items: center;
}
.showcase .visual-stack { display: grid; gap: 1rem; }
.showcase .visual-stack img { border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow); object-fit: cover; }
.showcase .visual-stack .visual-large { min-height: 320px; }
.showcase .visual-stack .visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.showcase .visual-stack .visual-grid img { height: 170px; }

.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.process-step strong { display: block; font-size: 1.2rem; margin-bottom: .25rem; }
.process-step small { color: var(--accent); display: block; margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .04em; }

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.review strong { display: block; margin-top: 1rem; }
.review span { color: var(--muted); font-size: .92rem; }

.cta-band { padding: 2rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }

.page-hero {
    padding: 4rem 0 3rem;
    position: relative;
}
.page-hero .hero-box {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.5rem; align-items: center;
    overflow: hidden; padding: 1rem;
}
.page-hero .hero-box img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; border-radius: calc(var(--radius) - 6px); }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4rem; }
.service-detail { overflow: hidden; display: flex; flex-direction: column; }
.service-detail img { height: 240px; object-fit: cover; }
.service-detail .content { padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.note-list { display: grid; gap: .5rem; padding-left: 0; list-style: none; }
.note-list li { padding-left: 1.4rem; position: relative; color: var(--muted); }
.note-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.sub-cta { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.form-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.6rem; align-items: start; }
.flip-card { perspective: 1400px; min-height: 420px; }
.flip-inner {
    position: relative; width: 100%; min-height: 420px; transform-style: preserve-3d; transition: transform .8s ease;
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0; padding: 1.7rem; backface-visibility: hidden; border-radius: var(--radius);
}
.flip-front { display: flex; flex-direction: column; justify-content: space-between; }
.flip-back { transform: rotateY(180deg); }
.flip-front ul, .flip-back ul { margin-top: 1rem; }
.quote-highlight { padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.form-shell { padding: 1.4rem; }
form { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
label { font-weight: 700; display: block; margin-bottom: .4rem; color: var(--heading); }
input, select, textarea {
    width: 100%; padding: .92rem 1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04); color: #fff; outline: none;
}
input::placeholder, textarea::placeholder { color: #9fb2bb; }
textarea { min-height: 135px; resize: vertical; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.check-item {
    display: flex; gap: .7rem; align-items: start; padding: .85rem .9rem; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.check-item input { width: auto; margin-top: .2rem; }
.form-help { color: var(--muted); font-size: .95rem; }
.summary-box { margin-top: .9rem; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.summary-box strong { display: block; margin-bottom: .35rem; }

.faq-grid,
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.contact-box ul { margin-top: .8rem; }
.contact-box li { margin-bottom: .45rem; color: var(--muted); }

.legal-card { padding: 1.7rem; }
.legal-card h2 { font-size: 1.45rem; margin-top: 2rem; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card ul li { margin-bottom: .55rem; color: var(--muted); }

.site-footer { margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.06); background: rgba(4, 14, 21, 0.82); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1.5rem; padding: 3rem 0 2rem; }
.footer-grid h3 { font-size: 1rem; margin-bottom: .85rem; }
.footer-grid ul { list-style: none; padding: 0; }
.footer-grid li { margin-bottom: .55rem; color: var(--muted); }
.footer-grid a:hover { color: #fff; }
.footer-brand { margin-bottom: .75rem; }
.footer-bottom { padding: 1rem 0 1.7rem; color: var(--muted); border-top: 1px solid rgba(255,255,255,.06); }

@media (max-width: 1080px) {
    .hero-grid,
    .showcase,
    .page-hero .hero-box,
    .form-layout,
    .footer-grid,
    .grid-4,
    .process-grid,
    .reviews { grid-template-columns: 1fr 1fr; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .menu-toggle { display: inline-block; }
    .site-nav {
        position: absolute; inset: calc(100% + 1px) 1rem auto 1rem; display: none; flex-direction: column; align-items: stretch;
        padding: 1rem; border-radius: 22px; background: rgba(8, 25, 38, 0.96); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
    }
    .site-header.menu-open .site-nav { display: flex; }
    .site-nav a { width: 100%; }
    .hero-grid,
    .grid-3,
    .grid-2,
    .showcase,
    .page-hero .hero-box,
    .service-grid,
    .form-layout,
    .faq-grid,
    .contact-grid,
    .process-grid,
    .reviews,
    .hero-metrics,
    .footer-grid { grid-template-columns: 1fr; }
    .checkbox-grid,
    .form-row { grid-template-columns: 1fr; }
    .hero-visual img, .page-hero .hero-box img { min-height: 280px; }
    .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .container { width: min(var(--container), calc(100% - 1.2rem)); }
    section, .hero, .page-hero { padding: 3.5rem 0; }
    .hero-copy, .lead { max-width: 100%; }
    .service-card img, .service-detail img { height: 200px; }
    .brand img { width: 54px; height: 54px; }
}


/* === Correcties versie 3: offertekaart volledig zichtbaar === */
select,
select option,
input,
textarea {
    color: #ffffff;
}

select option,
select optgroup {
    background: #0c2232;
    color: #ffffff;
}

select:invalid,
select option[value=""] {
    color: #b9cbd3;
}

/* De draaikaart krijgt aan beide kanten exact dezelfde bruikbare hoogte.
   Hierdoor wordt de volledige voorkant zichtbaar, inclusief de knoppen onderaan. */
.flip-card {
    min-height: 720px;
    overflow: visible;
}

.flip-inner {
    min-height: 720px;
}

.flip-face {
    min-height: 720px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.15rem;
}

.flip-card h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.12;
}

.flip-card p,
.flip-card li {
    font-size: clamp(1rem, 2vw, 1.12rem);
}

.flip-front .button-row,
.flip-back .button-row {
    margin-top: 1.2rem;
}

.quote-highlight {
    max-width: 100%;
}

/* Tablets en kleinere schermen: extra hoogte zodat niets afsnijdt. */
@media (max-width: 860px) {
    .flip-card,
    .flip-inner,
    .flip-face {
        min-height: 790px;
    }

    .flip-face {
        padding: 1.45rem;
    }
}

/* Mobiel: kaart ruimer tonen en knoppen netjes onder elkaar indien nodig. */
@media (max-width: 540px) {
    .flip-card,
    .flip-inner,
    .flip-face {
        min-height: 850px;
    }

    .flip-card .button-row {
        flex-direction: column;
        align-items: stretch;
    }

    .flip-card .button {
        width: 100%;
    }
}