:root {
    --landing-bg: #f4f7fc;
    --landing-surface: #ffffff;
    --landing-surface-soft: #eaf2ff;
    --landing-text: #10213b;
    --landing-muted: #68778c;
    --landing-line: #d9e4f2;
    --landing-blue: #2563eb;
    --landing-blue-bright: #3b82f6;
    --landing-blue-dark: #1746b4;
    --landing-blue-deep: #0d2444;
    --landing-blue-soft: #e7f0ff;
    --landing-green: #15966d;
    --landing-shadow: 0 28px 80px rgba(35, 62, 106, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing-body {
    margin: 0;
    color: var(--landing-text);
    background: var(--landing-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { font: inherit; }
img { max-width: 100%; }

.landing-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.landing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(217, 228, 242, .78);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
}
.landing-navigatie { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.landing-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--landing-text); text-decoration: none; font-size: 20px; font-weight: 850; }
.logo-beeldmerk { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #4187ff, #1746b4); box-shadow: 0 10px 25px rgba(37, 99, 235, .3); }
.landing-menu { display: flex; align-items: center; gap: 27px; }
.landing-menu a { color: #536176; text-decoration: none; font-size: 14px; font-weight: 700; }
.landing-menu a:hover { color: var(--landing-blue); }

.landing-header-knop, .landing-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 13px; text-decoration: none; font-weight: 800; transition: .18s ease; }
.landing-header-knop { min-height: 42px; color: #fff; background: var(--landing-blue-deep); }
.landing-header-knop:hover, .landing-knop:hover { transform: translateY(-2px); }
.landing-knop-primair { color: #fff; background: linear-gradient(135deg, #3980f5, #1b52c8); box-shadow: 0 14px 34px rgba(37, 99, 235, .3); }
.landing-knop-secundair { color: var(--landing-text); border: 1px solid var(--landing-line); background: rgba(255, 255, 255, .86); }

.landing-label, .landing-sectie-kop > span, .landing-cta-inhoud > div > span {
    display: inline-flex; align-items: center; width: fit-content; min-height: 31px; padding: 0 12px;
    border: 1px solid #cbdcf8; border-radius: 999px; color: var(--landing-blue); background: rgba(255,255,255,.76);
    font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}

.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 720px;
    padding: 54px 0 48px;
    color: #fff;
    background:
        linear-gradient(
            90deg,
            rgba(3, 11, 25, .99) 0%,
            rgba(3, 11, 25, .95) 35%,
            rgba(3, 11, 25, .58) 57%,
            rgba(3, 11, 25, .08) 100%
        ),
        url("../images/carspi-hero.png") 70% 42% / cover no-repeat;
}
.landing-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 185px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(3, 11, 25, .78));
}
.landing-hero-accent { display: none; }
.landing-hero-gridpatroon { display: none; }

.landing-hero-inhoud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.landing-hero h1 {
    max-width: 690px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(50px, 5.6vw, 74px);
    line-height: .98;
    letter-spacing: -4.2px;
    text-shadow: 0 16px 45px rgba(0, 0, 0, .34);
}
.landing-hero h1 span {
    display: block;
    color: #3b82f6;
}

.landing-hero-intro {
    max-width: 625px;
    margin: 0;
    color: #c6d3e6;
    font-size: 18px;
    line-height: 1.68;
}

.landing-hero-knoppen {
    display: flex;
    gap: 13px;
    margin-top: 27px;
}

.landing-hero-mobielbeeld {
    display: none;
}

.landing-hero .landing-knop-secundair {
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(5, 17, 36, .56);
    backdrop-filter: blur(12px);
}

.landing-vertrouwen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 22px;
    margin-top: 30px;
    color: #c3d0e1;
    font-size: 13px;
    font-weight: 750;
}
.landing-vertrouwen span::before {
    content: "✓";
    margin-right: 7px;
    color: #4adea5;
}

.landing-hero .landing-credo {
    display: block;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.45;
    letter-spacing: -.2px;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .32);
    backdrop-filter: none;
}

.landing-hero-flow {
    width: 100%;
    max-width: 1030px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    margin-top: 38px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 24px;
    background: rgba(4,16,34,.62);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}
.hero-flow-stap {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    color: #fff;
    text-align: left;
    background: rgba(255,255,255,.08);
}
.hero-flow-stap > span {
    margin-bottom: 10px;
    color: #72a7ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
}
.hero-flow-stap strong { font-size: 15px; }
.hero-flow-stap small {
    margin-top: 6px;
    color: #aabbd1;
    font-size: 12px;
}
.hero-flow-stap-actief {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, #3479ef, #1749b8);
    box-shadow: 0 14px 30px rgba(37,99,235,.28);
}
.hero-flow-stap-actief > span,
.hero-flow-stap-actief small {
    color: rgba(255,255,255,.75);
}
.hero-flow-pijl {
    color: #7f96b8;
    font-size: 22px;
}

.landing-trustbar { border-top: 1px solid var(--landing-line); border-bottom: 1px solid var(--landing-line); background: #fff; }
.landing-trustbar-inhoud { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #64748b; font-size: 13px; font-weight: 800; }
.landing-trustbar-inhoud span::before { content: "•"; margin-right: 9px; color: var(--landing-blue-bright); }

.landing-sectie { padding: 110px 0; }
.landing-sectie-licht { background: #fff; }
.landing-sectie-kop { max-width: 790px; margin: 0 auto 54px; text-align: center; }
.landing-sectie-kop-smal { max-width: 700px; }
.landing-sectie-kop > span { margin: 0 auto 18px; }
.landing-sectie-kop h2, .fotobewerking-tekst h2, .landing-cta h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -2.8px; }
.landing-sectie-kop p { max-width: 670px; margin: 19px auto 0; color: var(--landing-muted); font-size: 17px; line-height: 1.72; }

.landing-platform { background: radial-gradient(circle at 50% 0%, rgba(82,145,255,.16), transparent 34%), #f5f8fd; }
.platform-preview { display: grid; grid-template-columns: 220px 1fr; overflow: hidden; min-height: 650px; border: 1px solid #d7e2f0; border-radius: 29px; background: #eef3f9; box-shadow: var(--landing-shadow); }
.platform-sidebar { padding: 28px 22px; color: #dce8fb; background: #11233f; }
.platform-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: #fff; }
.platform-logo > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--landing-blue); font-weight: 900; }
.platform-logo strong, .platform-logo small { display: block; }
.platform-logo small { margin-top: 2px; color: #8fa5c3; font-size: 10px; }
.platform-sidebar nav { display: grid; gap: 7px; }
.platform-sidebar nav a { display: flex; gap: 10px; padding: 12px 13px; border-radius: 10px; color: #aebdd1; text-decoration: none; font-size: 13px; font-weight: 700; }
.platform-sidebar nav a.actief { color: #fff; background: rgba(255,255,255,.09); }
.platform-sidebar-status { display: flex; align-items: center; gap: 8px; margin-top: 42px; color: #8fa5c3; font-size: 11px; }
.platform-sidebar-status span { width: 8px; height: 8px; border-radius: 50%; background: #39d39f; box-shadow: 0 0 0 4px rgba(57,211,159,.12); }
.platform-content { min-width: 0; background: #eef3f9; }
.platform-browserbar { min-height: 55px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid #dce5f0; background: #fff; }
.platform-browser-dots { display: flex; gap: 6px; }
.platform-browser-dots span { width: 9px; height: 9px; border-radius: 50%; background: #cad4e1; }
.platform-browser-url { justify-self: center; padding: 8px 18px; border-radius: 8px; color: #8290a3; background: #f3f6fa; font-size: 11px; }
.platform-browser-user { justify-self: end; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--landing-blue); font-size: 10px; font-weight: 900; }
.platform-werkvlak { padding: 28px; }
.platform-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.platform-eyebrow, .platform-card-label { display: block; margin-bottom: 6px; color: #71849e; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.platform-topbar h3 { margin: 0; font-size: 26px; }
.platform-topbar p { margin: 5px 0 0; color: #7b899c; font-size: 12px; }
.platform-topbar-acties { display: flex; align-items: center; gap: 10px; }
.platform-score { padding: 9px 13px; border-radius: 999px; color: #16724f; background: #e4f6ef; font-size: 11px; font-weight: 900; }
.platform-topbar button, .platform-publicatiekaart button { border: 0; border-radius: 10px; color: #fff; background: var(--landing-blue); font-weight: 800; cursor: pointer; }
.platform-topbar button { min-height: 38px; padding: 0 14px; font-size: 11px; }
.platform-dashboard { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.platform-card { min-width: 0; padding: 20px; border: 1px solid #dce5f1; border-radius: 18px; background: #fff; }
.platform-card h4 { margin: 0; font-size: 17px; }
.platform-card p { margin: 0; color: #6d7c90; font-size: 12px; line-height: 1.6; }
.platform-voertuigkaart { grid-row: span 2; padding: 0; overflow: hidden; }
.platform-voertuigfoto { position: relative; height: 245px; overflow: hidden; }
.platform-voertuigfoto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.platform-fotobadge { position: absolute; right: 14px; bottom: 14px; padding: 7px 10px; border-radius: 999px; color: #fff; background: rgba(13,36,68,.82); font-size: 10px; font-weight: 800; }
.platform-voertuiginfo { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 20px 14px; }
.platform-kenteken { padding: 8px 10px; border-radius: 7px; color: #18243a; background: #f6d64a; font-size: 11px; font-weight: 900; }
.platform-specificaties { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #edf1f6; }
.platform-specificaties span { padding: 15px 12px; text-align: center; }
.platform-specificaties small, .platform-specificaties strong { display: block; }
.platform-specificaties small { margin-bottom: 4px; color: #8391a3; font-size: 9px; }
.platform-specificaties strong { font-size: 12px; }
.platform-card-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.platform-workflowkaart > .platform-card-kop > strong { color: var(--landing-blue); font-size: 20px; }
.platform-progress { height: 7px; overflow: hidden; margin: 17px 0 8px; border-radius: 999px; background: #e9eef5; }
.platform-progress span { display: block; width: 82%; height: 100%; background: linear-gradient(90deg, var(--landing-blue), #69a9ff); }
.workflow-regel { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid #edf1f6; }
.workflow-regel > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #60748f; background: #edf2f8; font-size: 10px; font-weight: 900; }
.workflow-regel.gereed > span { color: #14714f; background: #e4f6ef; }
.workflow-regel.actief > span { color: #fff; background: var(--landing-blue); }
.workflow-regel strong, .workflow-regel small { display: block; }
.workflow-regel strong { font-size: 12px; }
.workflow-regel small { margin-top: 2px; color: #8694a6; font-size: 10px; }
.workflow-regel em { color: #8a98aa; font-size: 9px; font-style: normal; font-weight: 800; }
.platform-ai-status, .platform-conceptstatus { padding: 7px 9px; border-radius: 999px; font-size: 9px; font-weight: 850; }
.platform-ai-status { color: #16724f; background: #e4f6ef; }
.platform-conceptstatus { color: #855d0e; background: #fff2ce; }
.platform-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.platform-tags span, .platform-advertentie-acties span { padding: 7px 9px; border-radius: 999px; color: #51657f; background: #eef3f9; font-size: 10px; font-weight: 750; }
.platform-advertentiekaart { grid-column: 1 / -1; }
.platform-advertentiekaart p { margin-top: 12px; }
.platform-advertentie-acties { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.platform-publicatiekaart { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 20px; color: #fff; border: 0; background: linear-gradient(135deg, #1d59d1, #103b91); }
.platform-publicatiekaart .platform-card-label, .platform-publicatiekaart p { color: rgba(255,255,255,.7); }
.platform-publicatiekaart button { grid-column: 2; grid-row: 1 / 4; min-height: 42px; padding: 0 16px; color: var(--landing-blue-dark); background: #fff; font-size: 11px; }

.landing-functies-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.landing-functie { min-height: 275px; padding: 25px; border: 1px solid var(--landing-line); border-radius: 21px; background: #fff; box-shadow: 0 12px 34px rgba(49,73,108,.06); }
.landing-functie-uitgelicht { color: #fff; border-color: transparent; background: linear-gradient(145deg, #3479ef, #1749b8); box-shadow: 0 22px 45px rgba(37,99,235,.25); }
.landing-functie-icoon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 14px; color: var(--landing-blue); background: var(--landing-blue-soft); font-size: 11px; font-weight: 900; }
.landing-functie-uitgelicht .landing-functie-icoon { color: #fff; background: rgba(255,255,255,.15); }
.landing-functie h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.4px; }
.landing-functie p { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 1.72; }
.landing-functie-uitgelicht p { color: rgba(255,255,255,.76); }

.landing-fotobewerking { color: #fff; background: radial-gradient(circle at 15% 25%, rgba(57,128,245,.32), transparent 30%), linear-gradient(135deg, #102541, #09182d); }
.fotobewerking-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 80px; }
.fotobewerking-visual { position: relative; min-height: 570px; }
.fotobewerking-foto { position: absolute; inset: 34px 35px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; box-shadow: 0 35px 90px rgba(0,0,0,.34); }
.fotobewerking-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,21,43,.54)); }
.fotobewerking-foto img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fotobewerking-badge { position: absolute; z-index: 2; left: 22px; bottom: 21px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(13,36,68,.72); font-size: 11px; font-weight: 800; backdrop-filter: blur(10px); }
.fotobewerking-kaart { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; min-width: 235px; padding: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: var(--landing-text); background: rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.fotobewerking-kaart > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--landing-green); font-weight: 900; }
.fotobewerking-kaart strong, .fotobewerking-kaart small { display: block; }
.fotobewerking-kaart strong { font-size: 12px; }
.fotobewerking-kaart small { margin-top: 3px; color: #748397; font-size: 10px; }
.fotobewerking-kaart-links { left: 0; bottom: 55px; }
.fotobewerking-kaart-rechts { right: 0; top: 55px; }
.landing-label-donker { color: #b9d3ff; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.07); }
.fotobewerking-tekst h2 { margin: 23px 0 22px; }
.fotobewerking-tekst > p { margin: 0; color: #c4d0e0; font-size: 17px; line-height: 1.75; }
.fotobewerking-lijst { margin: 30px 0 0; padding: 0; list-style: none; }
.fotobewerking-lijst li { position: relative; padding: 17px 0 17px 34px; border-top: 1px solid rgba(255,255,255,.1); }
.fotobewerking-lijst li::before { content: "✓"; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #bcd7ff; background: rgba(57,128,245,.18); font-size: 11px; font-weight: 900; }
.fotobewerking-lijst strong, .fotobewerking-lijst span { display: block; }
.fotobewerking-lijst strong { font-size: 15px; }
.fotobewerking-lijst span { margin-top: 4px; color: #9eafc4; font-size: 13px; }

.landing-workflow { background: #f3f7fd; }
.landing-stappen { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 13px; }
.landing-stap { min-height: 230px; padding: 23px; border: 1px solid var(--landing-line); border-radius: 19px; background: rgba(255,255,255,.82); }
.landing-stap-uitgelicht { border-color: #bed3fa; background: linear-gradient(145deg, #eaf2ff, #fff); }
.landing-stap-nummer { margin-bottom: 39px; color: var(--landing-blue); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.landing-stap h3 { margin: 0 0 11px; font-size: 17px; }
.landing-stap p { margin: 0; color: var(--landing-muted); font-size: 13px; line-height: 1.68; }

.landing-voordelen { background: #fff; }
.voordelen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.voordelen-grid article { padding: 34px; border: 1px solid var(--landing-line); border-radius: 22px; background: linear-gradient(145deg, #fff, #f7faff); }
.voordelen-grid strong { display: block; margin-bottom: 11px; font-size: 20px; }
.voordelen-grid p { margin: 0; color: var(--landing-muted); font-size: 14px; line-height: 1.7; }

.landing-cta { padding: 78px 0; color: #fff; background: linear-gradient(135deg, #2f77ef, #1748b5); }
.landing-cta-inhoud { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.landing-cta-inhoud > div { max-width: 780px; }
.landing-cta-inhoud > div > span { margin-bottom: 18px; color: #dce9ff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); }
.landing-knop-wit { flex: 0 0 auto; color: var(--landing-blue-dark); background: #fff; box-shadow: 0 14px 34px rgba(11,40,100,.22); }

.landing-footer { padding: 30px 0; color: #8794a7; background: #0b1728; }
.landing-footer .landing-logo { color: #fff; }
.landing-footer-inhoud { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.landing-footer p { margin: 0; }


@media (max-width: 1100px) {
    .landing-menu { display: none; }
    .landing-functies-grid { grid-template-columns: repeat(3, 1fr); }
    .landing-stappen { grid-template-columns: repeat(3, 1fr); }
    .fotobewerking-grid { gap: 45px; }
    .platform-preview { grid-template-columns: 185px 1fr; }

    .landing-hero {
        background:
            linear-gradient(
                90deg,
                rgba(3, 11, 25, .99) 0%,
                rgba(3, 11, 25, .94) 42%,
                rgba(3, 11, 25, .48) 68%,
                rgba(3, 11, 25, .12) 100%
            ),
            url("../images/carspi-hero.png") 67% 42% / cover no-repeat;
    }
}

@media (max-width: 850px) {
    .landing-hero-flow { grid-template-columns: repeat(2, 1fr); }
    .hero-flow-pijl { display: none; }
    .platform-preview { grid-template-columns: 1fr; }
    .platform-sidebar { display: none; }
    .platform-dashboard { grid-template-columns: 1fr; }
    .platform-voertuigkaart { grid-row: auto; }
    .platform-advertentiekaart,
    .platform-publicatiekaart { grid-column: auto; }
    .fotobewerking-grid { grid-template-columns: 1fr; }
    .fotobewerking-visual { min-height: 540px; }
    .voordelen-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .landing-container { width: min(100% - 28px, 1180px); }
    .landing-header-knop { padding: 0 14px; font-size: 13px; }

    .landing-hero {
        min-height: auto;
        padding: 42px 0 40px;
        background:
            linear-gradient(
                180deg,
                rgba(3, 11, 25, .99) 0%,
                rgba(3, 11, 25, .96) 70%,
                rgba(3, 11, 25, .90) 100%
            );
        background-color: #030b19;
    }

    .landing-hero-inhoud {
        position: relative;
        z-index: 2;
    }

    .landing-hero h1 {
        max-width: 620px;
        margin-bottom: 0;
        font-size: 46px;
        letter-spacing: -2.8px;
    }

    .landing-hero-mobielbeeld {
        display: block;
        width: calc(100% + 28px);
        height: 275px;
        margin: 26px -14px 25px;
        border-radius: 22px;
        background:
            linear-gradient(
                180deg,
                rgba(3, 11, 25, .02) 0%,
                rgba(3, 11, 25, .08) 64%,
                rgba(3, 11, 25, .42) 100%
            ),
            url("../images/carspi-hero.png") 68% 39% / cover no-repeat;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
    }

    .landing-hero-intro {
        font-size: 16px;
        line-height: 1.65;
    }

    .landing-hero-knoppen {
        width: 100%;
        flex-direction: column;
        margin-top: 24px;
    }

    .landing-hero-knoppen .landing-knop { width: 100%; }

    .landing-vertrouwen {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 26px;
    }

    .landing-hero .landing-credo {
        margin-top: 19px;
        font-size: 16px;
    }

    .landing-hero-flow {
        grid-template-columns: 1fr;
        margin-top: 30px;
        padding: 14px;
    }

    .hero-flow-stap { min-height: 96px; }
    .landing-trustbar-inhoud { min-height: auto; padding: 20px 0; flex-wrap: wrap; justify-content: center; }
    .landing-sectie { padding: 76px 0; }
    .landing-sectie-kop h2,
    .fotobewerking-tekst h2,
    .landing-cta h2 { font-size: 37px; letter-spacing: -1.8px; }
    .landing-functies-grid,
    .landing-stappen { grid-template-columns: 1fr; }
    .landing-functie,
    .landing-stap { min-height: auto; }
    .landing-stap-nummer { margin-bottom: 25px; }
    .platform-browser-url { display: none; }
    .platform-browserbar { grid-template-columns: 1fr auto; }
    .platform-werkvlak { padding: 17px; }
    .platform-topbar { align-items: flex-start; flex-direction: column; }
    .platform-publicatiekaart { display: block; }
    .platform-publicatiekaart button { width: 100%; margin-top: 18px; }
    .fotobewerking-visual { min-height: 430px; }
    .fotobewerking-foto { inset: 15px 0 45px; }
    .fotobewerking-kaart { min-width: 210px; }
    .fotobewerking-kaart-links { left: 6px; bottom: 8px; }
    .fotobewerking-kaart-rechts { right: 6px; top: 0; }
    .landing-cta-inhoud,
    .landing-footer-inhoud { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
    .landing-logo { font-size: 18px; }
    .logo-beeldmerk { width: 35px; height: 35px; }
    .landing-hero h1 { font-size: 39px; }

    .landing-hero-mobielbeeld {
        height: 225px;
        background-position: 67% 40%;
    }

    .platform-specificaties { grid-template-columns: 1fr; }
    .platform-specificaties span { border-top: 1px solid #edf1f6; }
    .fotobewerking-visual { min-height: 390px; }
    .fotobewerking-kaart { min-width: 190px; padding: 12px; }
    .fotobewerking-kaart-rechts { display: none; }
}