/*
 * EWF Guru - huisstijl.
 *
 * Overgenomen uit het cf2026-template van easyworkflows.nl, zodat guru en de
 * hoofdsite als een familie lezen: dezelfde vijf swoosh-kleuren, dezelfde drie
 * wordmark-blauwen, Ubuntu voor koppen en Switzer voor lopende tekst.
 */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
    font-family: 'Ubuntu';
    src: url("../fonts/ubuntu-400-latin.6e27639876db.woff2") format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url("../fonts/ubuntu-500-latin.4bc57d2a6cd2.woff2") format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url("../fonts/ubuntu-700-latin.1459703cdb29.woff2") format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url("../fonts/switzer-400.e23161fd661d.woff2") format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url("../fonts/switzer-500.a7cfda8e3222.woff2") format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url("../fonts/switzer-600.eb58db2b5a33.woff2") format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Switzer';
    src: url("../fonts/switzer-700.8463cdb9a06b.woff2") format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    /* De vijf banen uit de logo-swoosh. */
    --teal: #0E8FA8;
    --lime: #8FAE1B;
    --orange: #E87A12;
    --crimson: #DE2E44;
    --magenta: #E0187F;

    /* Verdiepte varianten, alleen voor vlakken met witte tekst erop. */
    --teal-deep: #0E8096;
    --lime-deep: #667E1B;
    --orange-deep: #AE6014;
    --crimson-deep: #DC2E44;
    --magenta-deep: #DE187E;

    --teal-soft: #E4F3F6;
    --lime-soft: #F0F4DF;
    --orange-soft: #FDEEDC;
    --crimson-soft: #FCE7E9;
    --magenta-soft: #FCE4F0;

    --paper: #FFFFFF;
    --paper-2: #F2F5F6;
    --surface: #FFFFFF;
    --ink: #0F1A1D;
    --ink-2: #4A585D;
    --ink-3: #78868B;
    --line: color-mix(in srgb, var(--ink) 13%, transparent);
    --line-2: color-mix(in srgb, var(--ink) 7%, transparent);

    --accent: var(--teal);
    --accent-deep: var(--teal-deep);
    --accent-soft: var(--teal-soft);

    /* De drie blauwen van het Easy.Work.Flows-wordmark. */
    --ewf-blue-1: #305B9A;
    --ewf-blue-2: #387CAA;
    --ewf-blue-3: #479BD5;

    /* Vlakken die in beide schema's donker moeten blijven. */
    --panel-dark: #1F3047;
    --panel-dark-text: #FFFFFF;
    --panel-dark-muted: rgba(255, 255, 255, .72);
    --panel-dark-line: rgba(255, 255, 255, .16);

    --font-display: 'Ubuntu', 'Trebuchet MS', sans-serif;
    --font-body: 'Switzer', 'Segoe UI', sans-serif;

    --shell: 1240px;
    --pad: 1.25rem;
    --radius: 14px;
    --radius-lg: 22px;
    --step: clamp(2.5rem, 5vw, 4.5rem);
    --head-h: 68px;

    --ease: cubic-bezier(.22, .8, .28, 1);
    --shadow: 0 1px 2px rgba(16, 27, 30, .05), 0 12px 32px -18px rgba(16, 27, 30, .32);
    --shadow-lg: 0 2px 4px rgba(16, 27, 30, .05), 0 34px 70px -32px rgba(16, 27, 30, .42);
}

@media (min-width: 768px) {
    :root { --pad: 2rem; --head-h: 84px; }
}

:root:not([data-theme="light"]) {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #0B1214;
        --paper-2: #121B1E;
        --surface: #141F22;
        --ink: #EEF3F3;
        --ink-2: #A6B4B8;
        --ink-3: #7C8A8E;
        --line: color-mix(in srgb, var(--ink) 18%, transparent);
        --line-2: color-mix(in srgb, var(--ink) 10%, transparent);

        --ewf-blue-1: #7FBCE8;
        --ewf-blue-2: #5FA9DC;
        --ewf-blue-3: #479BD5;

        --teal: #35B6CE;
        --lime: #B7D634;
        --orange: #FF9A3C;
        --crimson: #FF6274;
        --magenta: #FF4FA3;

        --teal-deep: #277F8F;
        --lime-deep: #697D26;
        --orange-deep: #A3672E;
        --crimson-deep: #B94F5F;
        --magenta-deep: #C74183;

        --teal-soft: #10282E;
        --lime-soft: #1F2711;
        --orange-soft: #2E1F0E;
        --crimson-soft: #2E1418;
        --magenta-soft: #2C1020;

        --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -18px rgba(0, 0, 0, .8);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 34px 70px -32px rgba(0, 0, 0, .9);
    }
}

/* --- Basis ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Ankerlinks mogen niet onder de sticky kop landen. */
    scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.012em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1, .display-1 { color: var(--ewf-blue-1); }
h2, .display-2 { color: var(--ewf-blue-2); }

.display-1 {
    font-size: clamp(2.6rem, 8.5vw, 5.2rem);
    letter-spacing: -.01em;
    line-height: .98;
}

.display-2 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -.016em;
    line-height: 1.04;
}

.shell {
    width: min(var(--shell), 100% - var(--pad) * 2);
    margin-inline: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.1rem;
}

.lede {
    font-size: clamp(1.1rem, 1.9vw, 1.3rem);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 62ch;
}

.skip-link {
    position: fixed;
    top: -100px;
    left: 1rem;
    z-index: 999;
    background: var(--ink);
    color: var(--paper);
    padding: .8rem 1.2rem;
    border-radius: 0 0 10px 10px;
    text-decoration: none;
    font-weight: 600;
    transition: top .2s var(--ease);
}

.skip-link:focus { top: 0; }

code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: .88em;
    padding: .1em .35em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: inherit;
}

/* --- Knoppen -------------------------------------------------------------- */

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease),
                background-color .22s var(--ease);
}

/* Glans die bij hover over de knop schuift. */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .26) 46%,
                rgb(255 255 255 / .26) 54%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateX(120%); }

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .9rem 1.6rem -.7rem color-mix(in srgb, var(--btn-bg) 70%, transparent),
                0 .25rem .6rem -.35rem rgb(15 26 29 / .25);
}

.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-primary {
    --btn-bg: var(--accent-deep, color-mix(in srgb, var(--accent) 54%, #0D1416));
    --btn-fg: #fff;
}

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: var(--line);
}

.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
}

.link-arrow::after { content: '\2192'; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* --- Kop ------------------------------------------------------------------ */

.site-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    transition: box-shadow .25s var(--ease);
}

.site-head.is-stuck { box-shadow: 0 1px 0 var(--line-2), var(--shadow); }

.head-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--head-h);
    flex-wrap: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: none;
    text-decoration: none;
    color: inherit;
    margin-right: auto;
}

/* De swoosh als vijf blokjes; hetzelfde kleurritme als het logo. */
.brand-mark {
    display: grid;
    grid-template-columns: repeat(2, 9px);
    gap: 3px;
    flex: none;
}

.brand-mark i {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.brand-mark i:nth-child(1) { background: var(--teal); }
.brand-mark i:nth-child(2) { background: var(--magenta); }
.brand-mark i:nth-child(3) { background: var(--orange); }
.brand-mark i:nth-child(4) { background: var(--lime); }

.brand-text { display: flex; flex-direction: column; line-height: 1; }

.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: -.009em;
    color: var(--ink);
}

.brand-name em { font-style: normal; color: var(--teal); }

.brand-tag {
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: lowercase;
    color: var(--ink-3);
    margin-top: .28rem;
}

.nav { display: none; }

.nav-list {
    display: flex;
    align-items: center;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item[data-accent="teal"] { --accent: var(--teal); }
.nav-item[data-accent="magenta"] { --accent: var(--magenta); }
.nav-item[data-accent="orange"] { --accent: var(--orange); }
.nav-item[data-accent="lime"] { --accent: var(--lime); }
.nav-item[data-accent="crimson"] { --accent: var(--crimson); }

.nav-link {
    display: block;
    padding: .6rem .8rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: .97rem;
    border-radius: 8px;
    white-space: nowrap;
}

.nav-link > span { position: relative; display: block; padding-bottom: 3px; }

.nav-link > span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .26s var(--ease);
}

.nav-link:hover > span::after,
.nav-link:focus-visible > span::after { transform: scaleX(1); }

.head-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.head-cta { display: none; --accent: var(--magenta); --accent-deep: var(--magenta-deep); }

.head-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}

@media (min-width: 992px) {
    .nav { display: block; }
    .head-cta { display: inline-flex; }
    .head-toggle { display: none; }
}

/* --- Mobiele lade --------------------------------------------------------- */

.drawer {
    position: fixed;
    inset: var(--head-h) 0 0;
    z-index: 55;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem var(--pad) 3rem;
}

.drawer[hidden] { display: none; }
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-item { border-bottom: 1px solid var(--line-2); }
.drawer-item[data-accent="teal"] { --accent: var(--teal); }
.drawer-item[data-accent="magenta"] { --accent: var(--magenta); }
.drawer-item[data-accent="orange"] { --accent: var(--orange); }
.drawer-item[data-accent="lime"] { --accent: var(--lime); }
.drawer-item[data-accent="crimson"] { --accent: var(--crimson); }

.drawer-item > a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .95rem 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.008em;
    text-decoration: none;
    color: var(--ink);
}

.drawer-item > a::before {
    content: '';
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
    background: var(--accent);
}

.drawer-foot { margin-top: 2rem; display: grid; gap: .9rem; }
.drawer-foot .btn { --accent: var(--magenta); --accent-deep: var(--magenta-deep); }
.drawer-mail { text-align: center; text-decoration: none; color: var(--ink-2); font-weight: 500; }
.drawer-is-open { overflow: hidden; }

/* --- Banden --------------------------------------------------------------- */

.band { padding-block: var(--step); position: relative; }
.band[data-accent="teal"] { --accent: var(--teal); --accent-deep: var(--teal-deep); --accent-soft: var(--teal-soft); }
.band[data-accent="magenta"] { --accent: var(--magenta); --accent-deep: var(--magenta-deep); --accent-soft: var(--magenta-soft); }
.band[data-accent="orange"] { --accent: var(--orange); --accent-deep: var(--orange-deep); --accent-soft: var(--orange-soft); }
.band[data-accent="lime"] { --accent: var(--lime); --accent-deep: var(--lime-deep); --accent-soft: var(--lime-soft); }
.band[data-accent="crimson"] { --accent: var(--crimson); --accent-deep: var(--crimson-deep); --accent-soft: var(--crimson-soft); }

.band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58% 62% at var(--wash-x, 82%) 18%,
            color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 62%),
        radial-gradient(46% 55% at calc(100% - var(--wash-x, 82%)) 88%,
            color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 66%);
}

.band:nth-of-type(even)::before { --wash-x: 18%; }
.band > .shell { position: relative; z-index: 1; }

.band-tint {
    background: linear-gradient(to bottom, transparent 0, var(--paper-2) clamp(2rem, 6vw, 5rem),
                var(--paper-2) calc(100% - clamp(2rem, 6vw, 5rem)), transparent 100%);
}

.band-dark {
    background: var(--panel-dark);
    color: var(--panel-dark-muted);
    --ink: #EEF3F3;
    --ink-2: #9FAFB3;
    --ink-3: #7C8A8E;
    --line: var(--panel-dark-line);
    --line-2: rgba(255, 255, 255, .1);
    --surface: rgba(255, 255, 255, .05);
}

.band-dark::before {
    background:
        radial-gradient(58% 90% at 10% 0%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 68%),
        radial-gradient(52% 80% at 92% 100%, color-mix(in srgb, var(--magenta) 26%, transparent), transparent 70%);
    opacity: .55;
}

.band-dark h2,
.band-dark h3,
.band-dark .display-2 { color: var(--panel-dark-text); }

.band-dark .lede,
.band-dark p { color: var(--panel-dark-muted); }

.band-dark .eyebrow { color: color-mix(in srgb, var(--lime) 70%, #fff); }

.band-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

/* --- Kaarten -------------------------------------------------------------- */

.grid { display: grid; gap: 1.1rem; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .grid { gap: 1.35rem; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.grid > .card:nth-child(5n+1) { --accent: var(--teal); --accent-soft: var(--teal-soft); }
.grid > .card:nth-child(5n+2) { --accent: var(--magenta); --accent-soft: var(--magenta-soft); }
.grid > .card:nth-child(5n+3) { --accent: var(--orange); --accent-soft: var(--orange-soft); }
.grid > .card:nth-child(5n+4) { --accent: var(--lime); --accent-soft: var(--lime-soft); }
.grid > .card:nth-child(5n+5) { --accent: var(--crimson); --accent-soft: var(--crimson-soft); }

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease),
                border-color .25s var(--ease);
}

/* Streep bovenaan die bij hover over de volle breedte trekt. */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(.22);
    transform-origin: left;
    transition: transform .35s var(--ease);
}

.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line); }
.card:hover::before { transform: scaleX(1); }

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.2rem;
}

.card h3 { font-size: 1.28rem; margin-bottom: .45rem; color: var(--ink); }
.card p { color: var(--ink-2); font-size: .98rem; margin: 0; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem);
    overflow: hidden;
}

.hero-inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }

@media (min-width: 992px) {
    .hero-inner { grid-template-columns: 1.1fr .9fr; }
}

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero-actions .btn-primary { --accent: var(--magenta); --accent-deep: var(--magenta-deep); }

.hero-note {
    font-size: .9rem;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
}

.hero-note b { color: var(--ink-2); font-weight: 600; }

.hero-note b + b::before {
    content: '\00B7';
    margin-right: .9rem;
    color: var(--ink-3);
    font-weight: 400;
}

/* Nagebootst applicatievenster met het statusoverzicht. */
.window {
    border-radius: .85rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: 0 1.6rem 3rem -1.1rem color-mix(in srgb, var(--teal) 55%, transparent),
                0 .5rem 1.4rem -.7rem rgb(15 26 29 / .22);
}

.window-chrome {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem;
    background: #eceff0;
    border-bottom: 1px solid #dae0e1;
}

.window-chrome i { width: .5rem; height: .5rem; border-radius: 50%; background: #c3cbcc; }
.window-chrome i:first-child { background: #f0736a; }
.window-chrome i:nth-child(2) { background: #f3bd4e; }
.window-chrome i:nth-child(3) { background: #61c454; }

.window-chrome b {
    margin-left: .5rem;
    font-weight: 400;
    font-size: .7rem;
    color: #6b7778;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.window-body { padding: .4rem 0; }

.status-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line-2);
}

.status-row:last-child { border-bottom: 0; }
.status-row strong { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); }
.status-row span { display: block; font-size: .78rem; color: var(--ink-3); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 100px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--accent-soft);
    color: var(--accent-deep);
    white-space: nowrap;
}

.pill::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--accent);
}

.pill-ok { --accent: var(--lime); --accent-deep: var(--lime-deep); --accent-soft: var(--lime-soft); }
.pill-warn { --accent: var(--orange); --accent-deep: var(--orange-deep); --accent-soft: var(--orange-soft); }
.pill-late { --accent: var(--crimson); --accent-deep: var(--crimson-deep); --accent-soft: var(--crimson-soft); }

/* Neutraal etiket voor labels die geen status zijn, zoals "Mens". */
.pill-muted {
    --accent: var(--ink-3);
    --accent-deep: var(--ink-2);
    --accent-soft: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* --- Tegels (roadmap, rollen) -------------------------------------------------------------- */

.tiles-head {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line-2);
}

.tiles-head h3 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--ewf-blue-2);
    margin-bottom: .5rem;
}

.tiles-head p { color: var(--ink-2); margin: 0; max-width: 62ch; }

/* Op het donkere paneel is het wordmark-blauw te weinig contrastrijk; daar
   wint wit. Staat hier en niet bij .band-dark omdat die regel eerder komt. */
.band-dark .tiles-head h3 { color: var(--panel-dark-text); }

.tiles {
    display: grid;
    gap: 1.35rem;
    margin-top: clamp(1.8rem, 3.5vw, 2.5rem);
}

@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

.phase {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 1.5rem 1.4rem;
    overflow: hidden;
}

/* Zelfde streep bovenaan als de kaarten, maar vast op volle breedte: een
   roadmap is geen hover-doel. */
.phase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
}

.phase:nth-child(1) { --accent: var(--teal); --accent-deep: var(--teal-deep); --accent-soft: var(--teal-soft); }
.phase:nth-child(2) { --accent: var(--magenta); --accent-deep: var(--magenta-deep); --accent-soft: var(--magenta-soft); }
.phase:nth-child(3) { --accent: var(--orange); --accent-deep: var(--orange-deep); --accent-soft: var(--orange-soft); }
.phase:nth-child(4) { --accent: var(--lime); --accent-deep: var(--lime-deep); --accent-soft: var(--lime-soft); }

.phase > .pill { margin-bottom: .2rem; }

.phase h4 {
    font-size: 1.28rem;
    color: var(--ink);
    margin: .9rem 0 .9rem;
}

.phase-list { list-style: none; margin: 0; padding: 0; }

.phase-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .55rem;
    color: var(--ink-2);
    font-size: .98rem;
    line-height: 1.5;
}

.phase-list li:last-child { margin-bottom: 0; }

.phase-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
}

.tiles-note {
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid var(--line);
    color: var(--ink-2);
    font-size: .95rem;
    max-width: 68ch;
}

/* --- Stappen -------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.step {
    position: relative;
    padding: 0 0 2rem 3.2rem;
    border-left: 2px solid var(--line-2);
    margin-left: 1.1rem;
}

.step:last-child { border-left-color: transparent; padding-bottom: 0; }

.step::before {
    counter-increment: none;
    content: attr(data-step);
    position: absolute;
    left: -1.15rem;
    top: -.2rem;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
}

.step:nth-child(1) { --accent: var(--teal); }
.step:nth-child(2) { --accent: var(--magenta); }
.step:nth-child(3) { --accent: var(--orange); }
.step:nth-child(4) { --accent: var(--lime); }

.step h3 { font-size: 1.22rem; margin-bottom: .35rem; }
.step p { color: var(--ink-2); margin: 0; max-width: 60ch; }

/* --- Kerngetallen --------------------------------------------------------- */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (min-width: 768px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}

.stat { background: var(--surface); padding: 1.6rem 1.3rem; }

.stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.6vw, 3rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--c, var(--teal));
    margin-bottom: .4rem;
}

.stat span { font-size: .92rem; color: var(--ink-2); line-height: 1.35; display: block; }
.stat:nth-child(1) b { --c: var(--teal); }
.stat:nth-child(2) b { --c: var(--magenta); }
.stat:nth-child(3) b { --c: var(--orange); }
.stat:nth-child(4) b { --c: var(--lime); }

/* --- Slotoproep ----------------------------------------------------------- */

.cta-band {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: var(--panel-dark);
    color: var(--panel-dark-muted);
    padding-block: clamp(3rem, 6vw, 5rem);
}

/* De vijf swoosh-kleuren als rand bovenaan. */
.cta-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--teal) 0 20%, var(--lime) 20% 40%,
                var(--orange) 40% 60%, var(--crimson) 60% 80%, var(--magenta) 80% 100%);
}

.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(50% 70% at 12% 100%, color-mix(in srgb, var(--teal) 42%, transparent) 0%, transparent 70%),
        radial-gradient(46% 66% at 88% 0%, color-mix(in srgb, var(--magenta) 34%, transparent) 0%, transparent 68%);
}

.cta-inner { position: relative; z-index: 1; display: grid; gap: 2rem; }

@media (min-width: 992px) {
    .cta-inner { grid-template-columns: 1.4fr .6fr; align-items: center; }
}

.cta-band .eyebrow { color: var(--magenta); }

.cta-title {
    color: var(--panel-dark-text);
    font-size: clamp(1.75rem, 4vw, 2.9rem);
    letter-spacing: -.016em;
    line-height: 1.05;
    margin-bottom: .7rem;
}

.cta-sub { color: var(--panel-dark-muted); max-width: 52ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.cta-actions .btn-primary { --accent: var(--magenta); --accent-deep: var(--magenta-deep); }
.cta-actions .btn-ghost { --btn-fg: var(--panel-dark-text); border-color: rgba(255, 255, 255, .3); }

.cta-actions .btn-ghost:hover {
    border-color: #fff;
    color: var(--panel-dark-text);
    background: rgba(255, 255, 255, .08);
}

/* --- Voet ----------------------------------------------------------------- */

.site-foot { background: var(--paper); }

.foot-grid { display: grid; gap: 2.2rem; padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }

@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; } }

.foot-logo { margin-bottom: 1.3rem; }

.foot-claim {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
    max-width: 26ch;
    line-height: 1.3;
}

.foot-col:nth-of-type(1) { --accent: var(--teal); }
.foot-col:nth-of-type(2) { --accent: var(--magenta); }
.foot-col:nth-of-type(3) { --accent: var(--orange); }
.foot-col:nth-of-type(4) { --accent: var(--lime); }

.foot-head {
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 1rem;
}

.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: .5rem; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

.foot-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding-block: 1.3rem;
    border-top: 1px solid var(--line-2);
    font-size: .86rem;
    color: var(--ink-3);
}

.foot-bottom p { margin: 0; }
.foot-bottom a { color: inherit; }

/* --- Bewegingsvoorkeur ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}