/* ==========================================================================
   Lxndy.be — style.css
   Business redesign. Visual identity preserved: dark background, purple
   palette, Roboto, rounded cards, gradient text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
        font-family: Roboto;
        src: url("/static/font/Roboto/Regular.woff2") format("woff2"), url("/static/font/Roboto/Regular.woff") format("woff");
        font-weight: 400;
        font-display: swap;
        ascent-override: 90%;
        descent-override: 10%;
        line-gap-override: 0%;
}

@font-face {
        font-family: Roboto;
        src: url("/static/font/Roboto/Bold.woff2") format("woff2"), url("/static/font/Roboto/Bold.woff") format("woff");
        font-weight: 700;
        font-display: swap;
        ascent-override: 90%;
        descent-override: 10%;
        line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Design tokens (identity — unchanged from the original site)
   -------------------------------------------------------------------------- */

:root {
        --text: #E7DFF3;
        --background: #08060B;
        --primary: #9C70D2;
        --secondary: #4B0082;
        --accent: #7D3EDC;
        --background-container: color-mix(in srgb, var(--background) 95%, white 5%);
        --text-50: #0c0712;
        --text-100: #170e25;
        --text-200: #2e1c4a;
        --text-300: #462a6f;
        --text-400: #5d3894;
        --text-500: #7446b9;
        --text-600: #906bc7;
        --text-700: #ac90d5;
        --text-800: #c7b5e3;
        --text-900: #e3daf1;
        --text-950: #f1edf8;
        --background-50: #0c0910;
        --background-100: #181221;
        --background-200: #302442;
        --background-300: #483663;
        --background-400: #604884;
        --background-500: #785ba4;
        --background-600: #937bb7;
        --background-700: #ae9cc9;
        --background-800: #c9bddb;
        --background-900: #e4deed;
        --background-950: #f2eff6;
        --primary-50: #0c0613;
        --primary-100: #180c27;
        --primary-200: #30184e;
        --primary-300: #492574;
        --primary-400: #61319b;
        --primary-500: #793dc2;
        --primary-600: #9464ce;
        --primary-700: #af8bda;
        --primary-800: #c9b1e7;
        --primary-900: #e4d8f3;
        --primary-950: #f2ecf9;
        --secondary-50: #0f001a;
        --secondary-100: #1e0033;
        --secondary-200: #3b0066;
        --secondary-300: #590099;
        --secondary-400: #7700cc;
        --secondary-500: #9500ff;
        --secondary-600: #aa33ff;
        --secondary-700: #bf66ff;
        --secondary-800: #d499ff;
        --secondary-900: #eaccff;
        --secondary-950: #f4e5ff;
        --accent-50: #0b0416;
        --accent-100: #16082b;
        --accent-200: #2c1056;
        --accent-300: #421881;
        --accent-400: #5820ac;
        --accent-500: #6e28d7;
        --accent-600: #8b53df;
        --accent-700: #a87ee7;
        --accent-800: #c5a9ef;
        --accent-900: #e2d4f7;
        --accent-950: #f0e9fb;
        --static: rgba(0, 0, 0, 0.5);
        --static2: rgb(240, 240, 240);
        --static3: rgb(22, 22, 22);
        --static4: rgba(225, 225, 225, 0.2);
        --static5: rgb(24, 172, 122);
        --static6: rgba(255, 255, 255, 0.15);
        --static7: rgba(255, 255, 255, 0.1);
        --static8: rgba(255, 255, 255, 0.05);
        --static9: rgba(255, 255, 255, 0.3);
        --static10: rgb(40, 40, 40);
        --static11: rgba(255, 255, 255, 0.03);
        --static12: rgba(0, 0, 0, 0.8);
        --static13: rgb(40, 40, 40);
        --static14: rgba(255, 255, 255, 0.2);
        --static15: rgba(0, 0, 0, 0.5);
        --text5: hsl(264, 45%, 91%, 5%);
        --text10: hsl(264, 45%, 91%, 10%);
        --text15: hsl(264, 45%, 91%, 15%);
        --text20: hsl(264, 45%, 91%, 20%);
        --text25: hsl(264, 45%, 91%, 25%);
        --text30: hsl(264, 45%, 91%, 30%);
        --text35: hsl(264, 45%, 91%, 35%);
        --text40: hsl(264, 45%, 91%, 40%);
        --text45: hsl(264, 45%, 91%, 45%);
        --text50: hsl(264, 45%, 91%, 50%);
        --text55: hsl(264, 45%, 91%, 55%);
        --text60: hsl(264, 45%, 91%, 60%);
        --text65: hsl(264, 45%, 91%, 65%);
        --text70: hsl(264, 45%, 91%, 70%);
        --text75: hsl(264, 45%, 91%, 75%);
        --text80: hsl(264, 45%, 91%, 80%);
        --text85: hsl(264, 45%, 91%, 85%);
        --text90: hsl(264, 45%, 91%, 90%);
        --text95: hsl(264, 45%, 91%, 95%);
        --primary5: hsl(267, 52%, 63%, 5%);
        --primary10: hsl(267, 52%, 63%, 10%);
        --primary15: hsl(267, 52%, 63%, 15%);
        --primary20: hsl(267, 52%, 63%, 20%);
        --primary25: hsl(267, 52%, 63%, 25%);
        --primary30: hsl(267, 52%, 63%, 30%);
        --primary35: hsl(267, 52%, 63%, 35%);
        --primary40: hsl(267, 52%, 63%, 40%);
        --primary45: hsl(267, 52%, 63%, 45%);
        --primary50: hsl(267, 52%, 63%, 50%);
        --primary55: hsl(267, 52%, 63%, 55%);
        --primary60: hsl(267, 52%, 63%, 60%);
        --primary65: hsl(267, 52%, 63%, 65%);
        --primary70: hsl(267, 52%, 63%, 70%);
        --primary75: hsl(267, 52%, 63%, 75%);
        --primary80: hsl(267, 52%, 63%, 80%);
        --primary85: hsl(267, 52%, 63%, 85%);
        --primary90: hsl(267, 52%, 63%, 90%);
        --primary95: hsl(267, 52%, 63%, 95%);
        --secondary5: hsl(275, 100%, 25%, 5%);
        --secondary10: hsl(275, 100%, 25%, 10%);
        --secondary15: hsl(275, 100%, 25%, 15%);
        --secondary20: hsl(275, 100%, 25%, 20%);
        --secondary25: hsl(275, 100%, 25%, 25%);
        --secondary30: hsl(275, 100%, 25%, 30%);
        --secondary35: hsl(275, 100%, 25%, 35%);
        --secondary40: hsl(275, 100%, 25%, 40%);
        --secondary45: hsl(275, 100%, 25%, 45%);
        --secondary50: hsl(275, 100%, 25%, 50%);
        --secondary55: hsl(275, 100%, 25%, 55%);
        --secondary60: hsl(275, 100%, 25%, 60%);
        --secondary65: hsl(275, 100%, 25%, 65%);
        --secondary70: hsl(275, 100%, 25%, 70%);
        --secondary75: hsl(275, 100%, 25%, 75%);
        --secondary80: hsl(275, 100%, 25%, 80%);
        --secondary85: hsl(275, 100%, 25%, 85%);
        --secondary90: hsl(275, 100%, 25%, 90%);
        --secondary95: hsl(275, 100%, 25%, 95%);
        --accent5: hsl(264, 69%, 55%, 5%);
        --accent10: hsl(264, 69%, 55%, 10%);
        --accent15: hsl(264, 69%, 55%, 15%);
        --accent20: hsl(264, 69%, 55%, 20%);
        --accent25: hsl(264, 69%, 55%, 25%);
        --accent30: hsl(264, 69%, 55%, 30%);
        --accent35: hsl(264, 69%, 55%, 35%);
        --accent40: hsl(264, 69%, 55%, 40%);
        --accent45: hsl(264, 69%, 55%, 45%);
        --accent50: hsl(264, 69%, 55%, 50%);
        --accent55: hsl(264, 69%, 55%, 55%);
        --accent60: hsl(264, 69%, 55%, 60%);
        --accent65: hsl(264, 69%, 55%, 65%);
        --accent70: hsl(264, 69%, 55%, 70%);
        --accent75: hsl(264, 69%, 55%, 75%);
        --accent80: hsl(264, 69%, 55%, 80%);
        --accent85: hsl(264, 69%, 55%, 85%);
        --accent90: hsl(264, 69%, 55%, 90%);
        --accent95: hsl(264, 69%, 55%, 95%);
        --font-scale: 1.333;
        --p: 1rem;
        --h5: calc(var(--p) * var(--font-scale));
        --h4: calc(var(--h5) * var(--font-scale));
        --h3: calc(var(--h4) * var(--font-scale));
        --h2: calc(var(--h3) * var(--font-scale));
        --h1: calc(var(--h2) * var(--font-scale));
        --small: calc(var(--p) / var(--font-scale));
        --margin-lg: 0 12%;
        --margin-md: 0 6%;
        --border1: 1rem;
        --border05: 0.5rem;
        --content-max: 1200px;
        --mono-font: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   3. Base & reset
   -------------------------------------------------------------------------- */

*,
:root {
        font-family: Roboto
}

* {
        box-sizing: border-box;
        scroll-padding-top: 6em
}

html {
        font-size: 100%
}

body,
html {
        scroll-behavior: smooth
}

body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 100vh;
        margin: 0;
        width: auto !important;
        overflow-x: hidden;
        line-height: 1.75;
        position: relative;
        background-color: var(--background);
        color: var(--text)
}

main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8em;
        margin: 5rem 0;
        padding: var(--margin-lg);
        width: 100%;
        position: relative
}

h1,
h2,
h3,
h4,
h5 {
        line-height: 1.5;
        margin: 0
}

h1,
h2,
h3,
h4,
.title {
        font-weight: 700
}

h1 {
        font-size: var(--h1)
}

h2 {
        font-size: var(--h2)
}

h3 {
        font-size: var(--h3)
}

h4 {
        font-size: var(--h4)
}

h5 {
        font-size: var(--h5);
        font-weight: 400
}

a,
li,
p,
small,
table {
        line-height: 2.25;
        margin: 0
}

a {
        font-size: inherit;
        text-decoration: none;
        color: inherit
}

p {
        font-size: var(--p);
        letter-spacing: normal;
        text-align: left
}

ul {
        padding-left: 1.4em
}

small {
        font-size: var(--small)
}

li,
pre,
button {
        font-size: var(--p)
}

li {
        margin-top: .2rem
}

img {
        max-width: 100%
}

::selection {
        background-color: var(--static9)
}

::-webkit-scrollbar {
        width: 6px
}

::-webkit-scrollbar-track {
        background: 0 0
}

::-webkit-scrollbar-thumb {
        background: var(--static14);
        border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
        background: var(--static9)
}

:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 3px;
        border-radius: 4px
}

/* --------------------------------------------------------------------------
   4. Skip link & accessibility helpers
   -------------------------------------------------------------------------- */

.skip-link {
        position: absolute;
        top: -100%;
        left: 1rem;
        z-index: 2000;
        padding: .75em 1.25em;
        background-color: var(--primary);
        color: var(--background);
        border-radius: var(--border05);
        font-weight: 700;
        transition: top .2s ease-in-out
}

.skip-link:focus {
        top: 1rem
}

.visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100vw;
        padding: .5rem 12%;
        align-items: center;
        position: fixed;
        z-index: 999;
        border-bottom: 1px solid var(--static7);
        background-color: rgba(8, 6, 11, 0.88);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px)
}

.logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em
}

.logo-image {
        width: 30px;
        transition: transform .2s
}

.title {
        color: var(--accent);
        font-size: 1.4em;
        cursor: pointer
}

.title:hover {
        scale: 110%
}

.menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2.5em;
        justify-content: flex-end
}

.menu.hidden {
        display: flex
}

.menu-item {
        background-color: transparent;
        white-space: nowrap;
        font-size: var(--p);
        width: 100%;
        padding: 0 1rem;
        border-radius: var(--border05);
        transition: opacity .3s;
        position: relative
}

.menu-item::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: .35em;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease-in-out
}

.menu-item:hover {
        opacity: 1
}

.menu-item:hover::after,
.menu-item[aria-current="page"]::after {
        transform: scaleX(1)
}

.menu-item[aria-current="page"] {
        color: var(--primary)
}

.nav-cta {
        padding: .5em 1.4em
}

.hamburger-menu {
        display: none
}

#hamburger {
        display: inline-block;
        cursor: pointer;
        border: none;
        background-color: transparent;
        width: 20px;
        height: 10px;
        position: relative
}

#hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--text);
        transition: transform .3s
}

#hamburger span:first-child {
        top: 0
}

#hamburger span:last-child {
        bottom: 0
}

#hamburger[data-active] span:first-child {
        transform: translateY(4px) rotate(45deg)
}

#hamburger[data-active] span:last-child {
        transform: translateY(-4px) rotate(-45deg)
}

/* --------------------------------------------------------------------------
   6. Shared components: links, color effect, buttons
   -------------------------------------------------------------------------- */

.link {
        background-image: linear-gradient(180deg, transparent 50%, var(--accent) 50%) !important;
        padding: 3px 0;
        background-position-y: 0;
        transition: .1s;
        background-size: auto 190%
}

.link:hover {
        background-position-y: 5%;
        transition: .1s
}

.color-effect {
        background: linear-gradient(0deg, var(--primary), var(--accent));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
}

.button-primary,
.button-secondary {
        padding: .5em 2em;
        border-radius: var(--border05);
        display: inline-block;
        font-size: var(--p);
        white-space: nowrap;
        cursor: pointer;
        transition: filter .2s ease-in-out, transform .4s
}

.button-primary {
        background-color: var(--primary);
        color: var(--background);
        font-weight: 700
}

@keyframes bounce {

        0%,
        100% {
                transform: scale(1), translateY(0)
        }

        50% {
                transform: scale(102%) translateY(-2px)
        }
}

.button-primary:hover {
        animation: .7s infinite bounce;
        filter: brightness(90%);
        box-shadow: 0 0 50px -15px var(--primary);
        -webkit-box-shadow: 0 0 50px -15px var(--primary);
        -moz-box-shadow: 0 0 50px -15px var(--primary)
}

.button-secondary {
        background-color: var(--secondary);
        color: var(--text);
        z-index: 1
}

.button-secondary:hover {
        background-color: var(--secondary75);
        filter: brightness(110%)
}

.button-small {
        padding: .35em 1.2em;
        font-size: var(--small)
}

/* --------------------------------------------------------------------------
   7. Section scaffolding
   -------------------------------------------------------------------------- */

.section {
        width: 100%;
        max-width: var(--content-max);
        display: flex;
        flex-direction: column;
        gap: 2.5em
}

.section-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .6em
}

.section-head .section-title {
        font-size: var(--h2)
}

.section-sub {
        color: var(--text70);
        font-size: var(--h5);
        max-width: 62ch
}

.eyebrow {
        display: inline-block;
        font-size: var(--small);
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--primary);
        background: var(--primary10);
        border: 1px solid var(--primary30);
        padding: .35em 1em;
        border-radius: 999px
}

/* --------------------------------------------------------------------------
   8. Hero (homepage)
   -------------------------------------------------------------------------- */

.hero-section {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: 4em;
        width: 100%;
        max-width: var(--content-max);
        min-height: 62vh;
        padding-top: 2rem
}

.hero-items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.6em
}

.hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .6em;
        font-size: var(--small);
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--primary);
        background: var(--primary10);
        border: 1px solid var(--primary30);
        padding: .4em 1.1em;
        border-radius: 999px
}

.hero-eyebrow::before {
        content: "";
        width: .5em;
        height: .5em;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 12px 2px var(--accent)
}

.hero-title {
        font-size: clamp(2.1rem, 4.2vw, 3.4rem);
        line-height: 1.25;
        margin: 0
}

.hero-subtitle {
        font-size: var(--h5);
        color: var(--text80);
        max-width: 56ch
}

.hero-buttons {
        display: flex;
        gap: 1em;
        flex-wrap: wrap
}

.hero-trust {
        display: flex;
        flex-wrap: wrap;
        gap: .6em 2em;
        padding-top: .6em;
        border-top: 1px solid var(--static7);
        width: 100%
}

.hero-trust-item {
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-size: var(--small);
        color: var(--text70)
}

.hero-trust-item svg {
        width: 1.15em;
        height: 1.15em;
        fill: var(--primary);
        flex-shrink: 0
}

/* Terminal card */

.hero-terminal {
        display: flex;
        flex-direction: column;
        border-radius: var(--border1);
        border: 1px solid var(--static7);
        background: linear-gradient(160deg, var(--background-100), var(--background-50));
        box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -30px var(--secondary);
        overflow: hidden;
        transform: rotate(.5deg)
}

.terminal-header {
        display: flex;
        align-items: center;
        gap: .6em;
        padding: .8em 1.2em;
        background: var(--static12);
        border-bottom: 1px solid var(--static7)
}

.terminal-dot {
        width: .8em;
        height: .8em;
        border-radius: 50%;
        background: var(--static10)
}

.terminal-dot:first-child {
        background: var(--secondary-400)
}

.terminal-dot:nth-child(2) {
        background: var(--accent)
}

.terminal-dot:nth-child(3) {
        background: var(--primary)
}

.terminal-title {
        margin-left: auto;
        font-family: var(--mono-font);
        font-size: var(--small);
        color: var(--text60)
}

.terminal-body {
        padding: 1.4em 1.5em 1.6em;
        font-family: var(--mono-font);
        font-size: .95rem;
        line-height: 2.1;
        display: flex;
        flex-direction: column;
        gap: .15em
}

.terminal-line {
        display: block;
        opacity: 0;
        transform: translateY(6px);
        animation: terminal-reveal .01s .45s forwards
}

.terminal-line:nth-child(1) {
        animation-delay: .2s
}

.terminal-line:nth-child(2) {
        animation-delay: .9s
}

.terminal-line:nth-child(3) {
        animation-delay: 1.6s
}

.terminal-line:nth-child(4) {
        animation-delay: 2.3s
}

.terminal-line:nth-child(5) {
        animation-delay: 3s
}

.terminal-line:nth-child(6) {
        animation-delay: 3.8s
}

@keyframes terminal-reveal {
        to {
                opacity: 1;
                transform: translateY(0)
        }
}

.terminal-prompt {
        color: var(--primary)
}

.terminal-command {
        color: var(--text)
}

.terminal-tag {
        font-weight: 700
}

.terminal-tag-probleem {
        color: var(--text60)
}

.terminal-tag-analyse,
.terminal-tag-bouw {
        color: var(--primary)
}

.terminal-tag-live {
        color: var(--accent);
        text-shadow: 0 0 14px var(--accent)
}

.terminal-note {
        color: var(--text70)
}

.terminal-cursor {
        display: inline-block;
        width: .55em;
        height: 1.1em;
        vertical-align: text-bottom;
        background: var(--primary);
        animation: blink 1s steps(1) infinite
}

@keyframes blink {
        50% {
                opacity: 0
        }
}

/* --------------------------------------------------------------------------
   9. Problem cards ("Herkenbaar?")
   -------------------------------------------------------------------------- */

.problem-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em
}

.problem-card {
        display: flex;
        flex-direction: column;
        gap: .8em;
        padding: 1.8em 1.6em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        transition: transform .25s ease-in-out, border-color .25s ease-in-out, box-shadow .25s ease-in-out
}

.problem-card:hover {
        transform: translateY(-4px);
        border-color: var(--primary40);
        box-shadow: 0 18px 50px -25px var(--secondary)
}

.problem-label {
        align-self: flex-start;
        font-size: var(--small);
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text60);
        border: 1px solid var(--static7);
        padding: .15em .8em;
        border-radius: 999px
}

.problem-card h3 {
        font-size: var(--h4);
        line-height: 1.4
}

.problem-card p {
        color: var(--text70);
        font-size: var(--p)
}

.problem-link {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-weight: 700;
        color: var(--primary);
        font-size: var(--p)
}

.problem-link svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        transition: transform .2s ease-in-out
}

.problem-link:hover svg {
        transform: translateX(4px)
}

/* --------------------------------------------------------------------------
   10. Services preview (homepage)
   -------------------------------------------------------------------------- */

.service-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em
}

.service-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
        padding: 2em 1.7em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        position: relative;
        transition: transform .25s ease-in-out, border-color .25s ease-in-out, box-shadow .25s ease-in-out
}

.service-card:hover {
        transform: translateY(-4px);
        border-color: var(--primary40);
        box-shadow: 0 18px 50px -25px var(--secondary)
}

.service-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.2em;
        height: 3.2em;
        border-radius: var(--border05);
        background: linear-gradient(150deg, var(--secondary), var(--accent));
        box-shadow: 0 10px 30px -12px var(--secondary)
}

.service-icon svg {
        width: 1.6em;
        height: 1.6em;
        fill: var(--text-950)
}

.service-card h3 {
        font-size: var(--h4);
        line-height: 1.4
}

.service-card p {
        color: var(--text70)
}

.service-link {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-weight: 700;
        color: var(--primary);
        font-size: var(--p)
}

.service-link svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        transition: transform .2s ease-in-out
}

.service-link:hover svg {
        transform: translateX(4px)
}

/* --------------------------------------------------------------------------
   11. Process ("Van probleem naar oplossing")
   -------------------------------------------------------------------------- */

.process-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5em;
        counter-reset: process-step
}

.process-step {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .7em;
        padding: 1.8em 1.6em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1)
}

.process-step::before {
        counter-increment: process-step;
        content: "0" counter(process-step);
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1;
        background: linear-gradient(0deg, var(--primary), var(--accent));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
}

.process-step h3 {
        font-size: var(--h4);
        line-height: 1.4
}

.process-step p {
        color: var(--text70);
        font-size: var(--p)
}

/* --------------------------------------------------------------------------
   12. Value cards ("Waarom bedrijven met mij werken")
   -------------------------------------------------------------------------- */

.value-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em
}

.value-card {
        display: flex;
        flex-direction: column;
        gap: .8em;
        padding: 2em 1.8em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        transition: transform .25s ease-in-out, border-color .25s ease-in-out, box-shadow .25s ease-in-out
}

.value-card:hover {
        transform: translateY(-4px);
        border-color: var(--primary40);
        box-shadow: 0 18px 50px -25px var(--secondary)
}

.value-card h3 {
        font-size: var(--h4);
        line-height: 1.4
}

.value-card h3 .color-effect {
        font-weight: 700
}

.value-card p {
        color: var(--text70)
}

/* --------------------------------------------------------------------------
   13. Evidence ("Technische onderbouwing")
   -------------------------------------------------------------------------- */

.evidence-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5em
}

.evidence-card {
        display: flex;
        flex-direction: column;
        gap: .8em;
        padding: 1.7em 1.5em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        transition: transform .25s ease-in-out, border-color .25s ease-in-out
}

.evidence-card:hover {
        transform: translateY(-4px);
        border-color: var(--primary40)
}

.evidence-card h3 {
        font-size: var(--h5);
        font-weight: 700;
        line-height: 1.4
}

.evidence-card p {
        color: var(--text70);
        font-size: var(--small)
}

.evidence-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .4em;
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-top: auto
}

.evidence-tag {
        display: inline;
        font-size: var(--small) !important;
        padding: .25em .7em;
        background-color: var(--accent15);
        border: .1em solid var(--text40);
        border-radius: .5em;
        color: var(--text80)
}

.evidence-note {
        text-align: center;
        color: var(--text60);
        font-size: var(--small)
}

/* --------------------------------------------------------------------------
   14. Testimonials (kept from the original design)
   -------------------------------------------------------------------------- */

.testimonial-photo {
        width: 6em;
        height: 6em;
        border: 2px solid var(--accent);
        border-radius: 50%
}

.testimonial-author {
        font-weight: 700;
        font-size: 1.5em;
        fill: var(--text);
        display: flex;
        align-items: center;
        cursor: pointer
}

.testimonial-author>svg {
        padding-left: .3em;
        height: var(--h4)
}

.testimonial-star {
        height: 2em;
        width: 2em;
        fill: var(--accent)
}

.testimonial-occupation {
        color: var(--text60)
}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1em;
        width: 100%;
        max-width: var(--content-max);
        padding: 4em 3em;
        border-radius: var(--border1);
        border: 1px solid var(--primary30);
        background:
                radial-gradient(80% 120% at 50% 0%, var(--secondary5), transparent 70%),
                var(--background-container);
        position: relative;
        overflow: hidden
}

.cta-band::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--border1);
        padding: 1px;
        background: linear-gradient(120deg, var(--secondary), var(--accent), var(--primary), var(--secondary));
        background-size: 300% 300%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: cta-border 12s linear infinite;
        pointer-events: none
}

@keyframes cta-border {
        0% {
                background-position: 0% 50%
        }

        100% {
                background-position: 300% 50%
        }
}

.cta-band h2 {
        font-size: var(--h2)
}

.cta-band .cta-sub {
        color: var(--text70);
        font-size: var(--h5);
        max-width: 58ch
}

/* --------------------------------------------------------------------------
   16. Services page
   -------------------------------------------------------------------------- */

.service-detail {
        display: flex;
        flex-direction: column;
        gap: 1.8em;
        padding: 2.5em 2.2em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        scroll-margin-top: 6em
}

.service-detail-head {
        display: flex;
        align-items: center;
        gap: 1.2em;
        flex-wrap: wrap
}

.service-detail-head h2 {
        font-size: var(--h3);
        line-height: 1.35
}

.service-detail-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 2em
}

.service-detail-block h3 {
        font-size: var(--h5);
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--primary);
        margin-bottom: .6em
}

.service-detail-block p {
        color: var(--text80)
}

.service-detail-block ul {
        margin: 0;
        padding-left: 1.2em
}

.service-detail-block li {
        color: var(--text80);
        margin-top: .45em
}

.service-detail-block li::marker {
        color: var(--accent)
}

.service-detail-result {
        margin-top: .8em;
        padding: 1em 1.3em;
        background: var(--primary10);
        border: 1px solid var(--primary30);
        border-radius: var(--border05)
}

.service-detail-result strong {
        color: var(--primary-700)
}

.service-detail-actions {
        display: flex;
        justify-content: flex-end
}

.page-intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .8em;
        max-width: 72ch
}

.page-intro h1 {
        font-size: var(--h1);
        line-height: 1.3
}

.page-intro .page-lead {
        color: var(--text70);
        font-size: var(--h5)
}

/* FAQ */

.faq-list {
        display: flex;
        flex-direction: column;
        gap: 1em;
        max-width: 900px;
        width: 100%;
        margin: 0 auto
}

.faq-item {
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border05);
        overflow: hidden
}

.faq-item summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        padding: 1.1em 1.4em;
        cursor: pointer;
        font-weight: 700;
        font-size: var(--h5);
        line-height: 1.6;
        list-style: none
}

.faq-item summary::-webkit-details-marker {
        display: none
}

.faq-item summary::after {
        content: "+";
        font-size: 1.4em;
        font-weight: 400;
        color: var(--primary);
        transition: transform .25s ease-in-out;
        flex-shrink: 0
}

.faq-item[open] summary::after {
        transform: rotate(45deg)
}

.faq-item[open] summary {
        color: var(--primary)
}

.faq-answer {
        padding: 0 1.4em 1.2em;
        color: var(--text70)
}

/* --------------------------------------------------------------------------
   17. About page
   -------------------------------------------------------------------------- */

.about-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .8em
}

.about-header h1 {
        font-size: var(--h1);
        line-height: 1.3
}

.about-header .page-lead {
        color: var(--text70);
        font-size: var(--h5);
        max-width: 60ch
}

.about-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .6em;
        justify-content: center
}

.about-chip {
        display: inline-flex;
        align-items: center;
        gap: .5em;
        font-size: var(--small);
        font-weight: 700;
        color: var(--text80);
        border: 1px solid var(--static7);
        background: var(--static11);
        padding: .4em 1em;
        border-radius: 999px
}

.about-chip svg {
        width: 1.1em;
        height: 1.1em;
        fill: var(--primary)
}

.page-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: min(100%, 860px);
        gap: 1rem;
        margin: 0 auto
}

.page-content h2 {
        font-size: var(--h2);
        margin-top: 1.2em
}

.page-content p {
        color: var(--text80)
}

.tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: .5em;
        padding: 0;
        list-style: none;
        margin: .5em 0
}

.tech-chip {
        display: inline;
        font-size: var(--small) !important;
        font-weight: 700;
        padding: .3em .9em;
        background-color: var(--accent15);
        border: .1em solid var(--text40);
        border-radius: .5em;
        color: var(--text90)
}

/* --------------------------------------------------------------------------
   18. Contact page
   -------------------------------------------------------------------------- */

.contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2.5em;
        width: 100%;
        max-width: var(--content-max);
        align-items: start
}

.contact-form {
        display: flex;
        flex-direction: column;
        text-align: left;
        border-radius: var(--border1);
        padding: 2.5rem;
        gap: 1em;
        background-color: var(--background-container);
        border: 1px solid var(--static7)
}

.contact-aside {
        display: flex;
        flex-direction: column;
        gap: 1.5em
}

.contact-aside-card {
        display: flex;
        flex-direction: column;
        gap: .8em;
        padding: 1.8em 1.6em;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1)
}

.contact-aside-card h2 {
        font-size: var(--h4)
}

.contact-aside-card p,
.contact-aside-card li {
        color: var(--text70);
        font-size: var(--p)
}

.contact-next-steps {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: next-step;
        display: flex;
        flex-direction: column;
        gap: .9em
}

.contact-next-steps li {
        display: flex;
        gap: .9em;
        align-items: flex-start
}

.contact-next-steps li::before {
        counter-increment: next-step;
        content: counter(next-step);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.7em;
        height: 1.7em;
        border-radius: 50%;
        flex-shrink: 0;
        font-size: .85em;
        font-weight: 700;
        color: var(--background);
        background: linear-gradient(150deg, var(--primary), var(--accent))
}

.contact-aside-card .button-primary {
        text-align: center
}

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */

.contact-form input,
.contact-form textarea,
.contact-form select {
        background-color: var(--background-100);
        color: var(--text);
        border-radius: var(--border05);
        border: 2px solid var(--primary);
        font-family: inherit
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
        outline: 0;
        border: 2px solid var(--text)
}

.contact-form input[type=email],
.contact-form input[type=submit],
.contact-form input[type=text] {
        height: 2em;
        font-size: 16px;
        padding: .5em
}

.contact-form input[type=email] {
        text-transform: lowercase
}

.contact-form input::placeholder {
        text-transform: none
}

.contact-form input[type=submit] {
        padding: 0;
        cursor: pointer;
        font-weight: 700
}

.contact-form select {
        height: 2.9em;
        font-size: 16px;
        padding: .4em 2.4em .4em .6em;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%239C70D2'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right .55em center;
        background-size: 1.2em;
        cursor: pointer
}

.contact-form #message {
        max-width: 100%;
        min-width: 100%;
        height: 10em;
        font-size: 16px;
        padding: .5em;
        resize: vertical
}

.contact-form #message::selection {
        background-color: unset
}

.contact-sender {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between
}

.contact-sender .contact-group,
.contact-sender>input {
        width: calc(50% - .5em)
}

.contact-group {
        margin: .2em 0;
        position: relative
}

.contact-group input {
        width: 100%
}

.contact-group label {
        position: absolute;
        top: 1em;
        left: .5em;
        transform: translateY(-50%);
        color: var(--text70);
        transition: .2s;
        pointer-events: none
}

.contact-group input:focus+label,
.contact-group input:not(:placeholder-shown)+label,
.contact-group textarea:focus+label,
.contact-group textarea:not(:placeholder-shown)+label {
        top: -.7em;
        font-size: 90%
}

.contact-group.contact-group-static label {
        position: static;
        transform: none;
        display: block;
        top: auto;
        left: auto;
        font-size: 90%;
        margin-bottom: .2em;
        pointer-events: auto
}

.contact-form #notice {
        color: var(--text70);
        font-size: var(--small)
}

/* --------------------------------------------------------------------------
   20. Long-form pages (blog / privacy) & error pages
   -------------------------------------------------------------------------- */

.blog-container {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center
}

.blog-spacer {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        background: linear-gradient(-90deg, var(--static6), var(--secondary)), linear-gradient(45deg, var(--accent), var(--primary) 80%);
        margin: 2rem 0
}

.blog-summary {
        font-size: var(--h5)
}

.blog-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 60%;
        gap: 1rem
}

.blog-content img,
.blog-content video {
        width: 100%;
        height: 100%
}

.blog-content h2,
.blog-content h3 {
        hyphens: auto
}

.blog-title,
.error {
        text-align: center
}

.privacy {
        counter-reset: section;
        width: 60%
}

.privacy>h2 {
        counter-increment: section;
        font-size: var(--h3)
}

.privacy>h1,
.privacy>h2 {
        margin-top: 20px;
        margin-bottom: 10px
}

.privacy>p {
        margin-bottom: 15px
}

.privacy>h2::before {
        content: counter(section) ". "
}

.error {
        max-width: 70ch
}

/* Work cards (kept for the archived "mijn werk" templates) */

.work-cards {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 2em;
        row-gap: 4em
}

.work-card {
        display: flex;
        flex-direction: column;
        width: 400px;
        border: 1px solid var(--background-container);
        border-radius: 1em;
        overflow: hidden;
        text-align: left;
        row-gap: .75em;
        background-color: var(--background-container)
}

.work-card-thumbnail {
        width: 100%;
        height: 150px;
        overflow: hidden
}

.work-card-thumbnail img {
        width: 100%;
        height: auto;
        object-fit: cover;
        filter: brightness(70%)
}

.work-card-title {
        margin: 0 .5em
}

.work-card-description {
        margin: 0 1em
}

.work-card-tags {
        list-style-type: none;
        margin: 0 1em;
        padding: 0;
        color: var(--text50)
}

.work-card-tag {
        display: inline;
        font-size: var(--small) !important;
        padding: .3em;
        background-color: var(--accent30);
        border: .1em solid var(--text50);
        border-radius: .5em
}

.work-card-read-button {
        display: block;
        margin: 0 .75em 1em
}

/* --------------------------------------------------------------------------
   21. Card sections with horizontal scrolling (testimonials, archives)
   -------------------------------------------------------------------------- */

.card-section-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2em;
        justify-content: center;
        align-items: center
}

.card-section-title {
        text-align: center
}

.card-section-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 1rem;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        scrollbar-width: none
}

.card-section-cards::-webkit-scrollbar {
        display: none
}

.card-section-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding: 2.5rem;
        background-color: var(--background-container);
        border: 1px solid var(--static7);
        border-radius: var(--border1);
        scroll-snap-align: start
}

.card-section {
        display: flex;
        align-items: center
}

.card-section-arrow-left,
.card-section-arrow-right {
        height: 2.5rem;
        width: 2.5rem;
        margin: 0 10px;
        cursor: pointer;
        transition: transform .1s ease-in-out;
        fill: var(--text)
}

.card-section-arrow-left:hover,
.card-section-arrow-right:hover {
        transform: scale(105%)
}

.card-section-arrow-left:active,
.card-section-arrow-right:active {
        transform: scale(95%)
}

#testimonials .card-section-cards {
        max-width: 100%
}

#testimonials .card-section-card {
        min-width: 400px;
        max-width: 600px
}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */

footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2em;
        border-radius: 10px;
        background-color: var(--background-container);
        padding: 3em 5em;
        margin: var(--margin-lg);
        margin-bottom: 2rem;
        color: var(--text)
}

.footer-columns {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 3em;
        width: 100%
}

.footer-column {
        display: flex;
        flex-direction: column;
        width: 25%
}

.footer-column-title {
        text-transform: uppercase;
        margin-bottom: .8rem;
        opacity: 60%;
        font-weight: 700;
        font-size: var(--small);
        letter-spacing: .08em
}

.footer-column-link {
        transition: opacity .3s;
        font-size: var(--p);
        line-height: 2
}

.footer-column-link:hover {
        opacity: .6;
        text-decoration: underline
}

.footer-column-text {
        color: var(--text70);
        font-size: var(--p);
        line-height: 1.9
}

.footer-cta {
        color: var(--primary);
        font-weight: 700
}

.footer-line {
        width: 100%;
        height: 1px;
        background-color: var(--text);
        opacity: 10%;
        margin-top: 1em
}

.copyright-notice {
        width: 100%;
        text-align: right;
        color: var(--text60)
}

/* --------------------------------------------------------------------------
   23. Reveal-on-scroll animation
   -------------------------------------------------------------------------- */

/* Reveal-on-scroll: enkel actief wanneer JavaScript beschikbaar is (progressive enhancement). */

.js .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s ease-out, transform .6s ease-out
}

.js .reveal.revealed {
        opacity: 1;
        transform: translateY(0)
}

.reveal-delay-1 {
        transition-delay: .08s
}

.reveal-delay-2 {
        transition-delay: .16s
}

.reveal-delay-3 {
        transition-delay: .24s
}

@media (prefers-reduced-motion: reduce) {

        .reveal,
        .terminal-line {
                opacity: 1 !important;
                transform: none !important;
                animation: none !important;
                transition: none !important
        }

        .terminal-cursor,
        .cta-band::before {
                animation: none !important
        }
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */

@media screen and (min-width:2200px) {
        :root {
                --content-max: 1600px
        }
}

@media screen and (max-width:1500px) {

        #testimonials .card-section-card {
                max-width: unset
        }

        #testimonials .card-section-cards {
                flex-direction: column
        }
}

@media screen and (max-width:1200px) {
        :root {
                --p: 0.8rem
        }

        .problem-grid,
        .service-grid {
                grid-template-columns: repeat(2, 1fr)
        }

        .evidence-grid {
                grid-template-columns: repeat(2, 1fr)
        }

        .process-list {
                grid-template-columns: repeat(2, 1fr)
        }

        .hero-section {
                grid-template-columns: 1fr;
                gap: 3em;
                min-height: unset
        }

        .hero-terminal {
                max-width: 640px
        }
}

@media screen and (max-width:1000px) {

        .card-section-card,
        .footer-column,
        .menu,
        main {
                width: 100%
        }

        .menu .button-primary,
        .menu-item-mobile {
                padding: 1.5em !important;
                width: 100%
        }

        body {
                gap: 2em
        }

        main {
                overflow: visible !important;
                margin: 6em 0;
                padding: 0 5%
        }

        nav {
                flex-wrap: wrap;
                padding: 10px 20px;
                top: 0;
                margin: 0 20px;
                gap: 3em
        }

        .menu {
                display: flex;
                flex-direction: column !important;
                align-items: flex-start;
                gap: .5em;
                justify-content: flex-start;
                height: 100vh
        }

        .menu.hidden {
                display: none
        }

        .menu-item {
                padding: 0
        }

        .menu-item::after {
                display: none
        }

        .menu-item-mobile {
                background-color: var(--static10);
                text-align: center
        }

        .hamburger-menu {
                display: flex;
                padding: .9em .5em;
                align-items: center;
                height: 100%
        }

        footer {
                padding: 3em;
                margin: 0 5% 2em
        }

        .footer-columns {
                flex-direction: column
        }

        .footer-column {
                width: 100%
        }

        .blog-content,
        .privacy {
                width: 100% !important
        }

        .card-section-cards {
                flex-direction: column;
                gap: 2em
        }

        #testimonials .card-section-card {
                min-width: unset
        }

        .problem-grid,
        .service-grid,
        .value-grid,
        .evidence-grid,
        .process-list,
        .contact-grid,
        .service-detail-grid {
                grid-template-columns: 1fr
        }

        .hero-section {
                flex-wrap: wrap;
                justify-content: flex-start;
                padding-top: 0
        }

        .hero-items {
                width: 100%;
                gap: 1.5em
        }

        .hero-buttons {
                flex-direction: column;
                width: 100%
        }

        .hero-buttons>* {
                text-align: center
        }

        .hero-terminal {
                width: 100%;
                max-width: unset
        }

        .card-section-arrow-left,
        .card-section-arrow-right {
                display: none
        }

        .cta-band {
                padding: 3em 1.5em
        }

        .service-detail {
                padding: 2em 1.5em
        }

        .service-detail-actions {
                justify-content: flex-start
        }

        .contact-form {
                padding: 1.8em 1.4em
        }
}

@media screen and (max-width:600px) {
        .hero-title {
                font-size: clamp(1.9rem, 8vw, 2.6rem)
        }
}

@media screen and (max-width:500px) {
        .contact-sender {
                flex-direction: column;
                gap: 1em
        }

        .contact-sender .contact-group,
        .contact-sender input {
                width: 100%
        }
}

@media screen and (max-width:450px) {
        .work-card {
                width: 350px
        }
}

@media screen and (max-width:400px) {

        .card-section-title,
        .section-head .section-title {
                font-size: var(--h3)
        }

        .work-card {
                width: 300px
        }
}