/* =========================================================
   LVU DIGITAL MEDIA
   CENTRALE STYLESHEET

   Inhoud:
   01. Design tokens
   02. Reset
   03. Basisstijlen
   04. Algemene layout
   05. Typografie en helpers
   06. Knoppen
   07. Header en navigatie
   08. Hero
   09. Secties
   10. Cards
   11. Projecten
   12. Formulieren
   13. Meldingen
   14. Call to action
   15. Footer
   16. Design-systempagina
   17. Toegankelijkheid
   18. Responsive
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {
    /* Kleuren */
    --color-background: #07080d;
    --color-background-soft: #0b0d14;

    --color-surface: #11131b;
    --color-surface-light: #171a24;
    --color-surface-hover: #1c202c;

    --color-text: #f8f8fb;
    --color-text-soft: #c9cad3;
    --color-text-muted: #9497a6;
    --color-text-subtle: #686b78;

    --color-primary: #8b5cf6;
    --color-primary-light: #b388ff;
    --color-primary-dark: #7142dc;
    --color-primary-soft: rgba(139, 92, 246, 0.12);
    --color-primary-border: rgba(139, 92, 246, 0.35);

    --color-success: #4ade80;
    --color-success-soft: rgba(74, 222, 128, 0.1);

    --color-warning: #facc15;
    --color-warning-soft: rgba(250, 204, 21, 0.1);

    --color-error: #fb7185;
    --color-error-soft: rgba(251, 113, 133, 0.1);

    --color-info: #60a5fa;
    --color-info-soft: rgba(96, 165, 250, 0.1);

    --color-white: #ffffff;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);

    --border-default: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);
    --border-primary: 1px solid var(--color-primary-border);

    /* Gradients */
    --gradient-background:
        radial-gradient(circle at 15% 0%,
            rgba(139, 92, 246, 0.11),
            transparent 30rem),
        linear-gradient(180deg,
            var(--color-background) 0%,
            var(--color-background-soft) 100%);

    --gradient-primary:
        linear-gradient(135deg,
            var(--color-primary),
            var(--color-primary-light));

    --gradient-surface:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.01));

    /* Typografie */
    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-monospace:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 4rem;
    --font-size-display: clamp(3.2rem, 8vw, 6.5rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1;
    --line-height-heading: 1.1;
    --line-height-body: 1.7;

    --letter-spacing-tight: -0.05em;
    --letter-spacing-heading: -0.035em;
    --letter-spacing-eyebrow: 0.14em;

    /* Afstanden */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Layout */
    --container-width: 75rem;
    --container-narrow: 48rem;
    --container-padding: clamp(1.25rem, 4vw, 2rem);

    --header-height: 5rem;
    --section-spacing: clamp(4.5rem, 10vw, 8rem);
    --section-spacing-small: clamp(3rem, 7vw, 5rem);

    /* Radii */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    /* Schaduwen */
    --shadow-sm:
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.16);

    --shadow-md:
        0 1rem 2.5rem rgba(0, 0, 0, 0.22);

    --shadow-lg:
        0 2rem 5rem rgba(0, 0, 0, 0.35);

    --shadow-primary:
        0 0.75rem 2rem rgba(139, 92, 246, 0.24);

    /* Animatie */
    --duration-fast: 160ms;
    --duration-normal: 260ms;
    --duration-slow: 450ms;

    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

    --transition-fast:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);

    --transition-interactive:
        transform var(--duration-normal) var(--ease-standard),
        box-shadow var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard),
        background-color var(--duration-normal) var(--ease-standard);

    /* Lagen */
    --z-header: 100;
    --z-overlay: 200;
}

/* =========================================================
   LICHT THEMA
========================================================= */

html[data-theme="light"] {
    --color-background: #f6f6f9;
    --color-background-soft: #eceef3;

    --color-surface: #ffffff;
    --color-surface-light: #f2f3f7;
    --color-surface-hover: #e8eaf0;

    --color-text: #15151c;
    --color-text-soft: #3e404c;
    --color-text-muted: #686b78;
    --color-text-subtle: #8a8d98;

    --color-primary: #7646e8;
    --color-primary-light: #8b5cf6;
    --color-primary-dark: #6233cc;
    --color-primary-soft: rgba(118, 70, 232, 0.1);
    --color-primary-border: rgba(118, 70, 232, 0.28);

    --color-border: rgba(21, 21, 28, 0.09);
    --color-border-strong: rgba(21, 21, 28, 0.16);

    --gradient-background:
        radial-gradient(circle at 15% 0%,
            rgba(118, 70, 232, 0.09),
            transparent 30rem),
        linear-gradient(180deg,
            var(--color-background) 0%,
            var(--color-background-soft) 100%);

    --gradient-surface:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.95),
            rgba(245, 246, 250, 0.9));

    --shadow-sm:
        0 0.5rem 1.5rem rgba(30, 32, 45, 0.07);

    --shadow-md:
        0 1rem 2.5rem rgba(30, 32, 45, 0.1);

    --shadow-lg:
        0 2rem 5rem rgba(30, 32, 45, 0.14);
}

/* =========================================================
   02. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    cursor: not-allowed;
}

textarea {
    resize: vertical;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   03. BASISSTIJLEN
========================================================= */

body {
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--gradient-background);
    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    min-height: 60vh;
}

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);

    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);

    text-wrap: balance;
}

h1 {
    font-size: clamp(2.75rem, 7vw, var(--font-size-5xl));
}

h2 {
    font-size: clamp(2.1rem, 5vw, var(--font-size-4xl));
}

h3 {
    font-size: clamp(1.4rem, 3vw, var(--font-size-2xl));
}

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

p {
    max-width: 70ch;

    color: var(--color-text-soft);
}

p+p {
    margin-top: var(--space-md);
}

a {
    color: inherit;
    text-decoration: none;

    transition: var(--transition-fast);
}

a:hover {
    color: var(--color-primary-light);
}

img {
    width: 100%;
    height: auto;
}

strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

code {
    color: var(--color-primary-light);

    font-family: var(--font-monospace);
}

blockquote {
    padding-left: var(--space-lg);

    border-left: 0.25rem solid var(--color-primary);

    color: var(--color-text-soft);

    font-style: italic;
}

hr {
    margin-block: var(--space-2xl);

    border: 0;
    border-top: var(--border-default);
}


/* =========================================================
   04. ALGEMENE LAYOUT
========================================================= */

.container {
    width: min(calc(100% - (2 * var(--container-padding))),
            var(--container-width));

    margin-inline: auto;
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    position: relative;

    padding-block: var(--section-spacing);
}

.section--small {
    padding-block: var(--section-spacing-small);
}

.section--surface {
    background: rgba(255, 255, 255, 0.018);
}

.section--bordered {
    border-block: var(--border-default);
}

.section-heading {
    max-width: 48rem;

    margin-bottom: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

.section-heading--center {
    margin-inline: auto;

    text-align: center;
}

.section-heading--center p {
    margin-inline: auto;
}

.section-heading h2 {
    margin-bottom: var(--space-lg);
}

.section-heading p {
    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
}

.grid {
    display: grid;

    gap: var(--space-xl);
}

.grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--auto {
    grid-template-columns:
        repeat(auto-fit,
            minmax(min(100%, 17rem), 1fr));
}

.split-layout {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;

    gap: clamp(var(--space-2xl), 7vw, var(--space-5xl));
}

.split-layout--contact {
    align-items: start;
}

.contact-details,
.contact-form-card {
    align-self: start;
}

.contact-info-card {
    margin-top: var(--space-lg);
}

.stack {
    display: flex;

    flex-direction: column;

    gap: var(--space-md);
}

.cluster {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-md);
}


/* =========================================================
   05. TYPOGRAFIE EN HELPERS
========================================================= */

.eyebrow {
    display: inline-block;

    margin-bottom: var(--space-md);

    color: var(--color-primary-light);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--letter-spacing-eyebrow);

    text-transform: uppercase;
}

.display-title {
    font-size: var(--font-size-display);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.text-gradient {
    background: var(--gradient-primary);

    color: transparent;

    background-clip: text;
    -webkit-background-clip: text;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--font-size-sm);
}

.surface {
    border: var(--border-default);
    border-radius: var(--radius-xl);

    background:
        var(--gradient-surface),
        var(--color-surface);
}


/* =========================================================
   06. KNOPPEN
========================================================= */

.button {
    display: inline-flex;

    min-height: 3.25rem;

    align-items: center;
    justify-content: center;

    gap: var(--space-sm);

    padding-inline: 1.4rem;

    border: var(--border-default);
    border-radius: var(--radius-md);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    line-height: 1;

    white-space: nowrap;

    transition: var(--transition-interactive);
}

.button:hover {
    transform: translateY(-0.125rem);
}

.button:active {
    transform: translateY(0);
}

.button--primary {
    border-color: transparent;

    background: var(--gradient-primary);
    color: var(--color-white);

    box-shadow: var(--shadow-primary);
}

.button--primary:hover {
    color: var(--color-white);

    box-shadow:
        0 1rem 2.5rem rgba(139, 92, 246, 0.34);
}

.button--secondary {
    border: var(--border-primary);

    background: var(--color-primary-soft);
    color: var(--color-primary-light);
}

.button--secondary:hover {
    background: rgba(139, 92, 246, 0.18);
    color: var(--color-white);
}

.button--outline {
    background: transparent;
    color: var(--color-text);
}

.button--outline:hover {
    border-color: var(--color-border-strong);

    background: rgba(255, 255, 255, 0.04);
    color: var(--color-white);
}

.button--ghost {
    min-height: auto;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--color-primary-light);
}

.button--ghost:hover {
    transform: none;

    color: var(--color-white);
}

.button:disabled {
    opacity: 0.45;

    transform: none;

    pointer-events: none;
}


/* =========================================================
   07. HEADER EN NAVIGATIE
========================================================= */

.site-header {
    position: sticky;

    top: 0;

    z-index: var(--z-header);

    border-bottom: var(--border-default);

    background: rgba(7, 8, 13, 0.82);

    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
}

.site-header__inner {
    display: flex;

    min-height: var(--header-height);

    align-items: center;
    justify-content: space-between;

    gap: var(--space-xl);
}

.site-brand {
    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    gap: var(--space-md);
}

.site-brand__logo {
    width: auto;
    height: 3.2rem;

    object-fit: contain;
}

.site-navigation__list {
    display: flex;

    align-items: center;

    gap: var(--space-xl);

    list-style: none;
}

.site-navigation__item {
    margin: 0;
}

.site-navigation__link {
    position: relative;

    display: inline-flex;

    min-height: 2.75rem;

    align-items: center;

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.site-navigation__link::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0.2rem;
    left: 0;

    height: 0.125rem;

    border-radius: var(--radius-pill);

    background: var(--gradient-primary);

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform var(--duration-normal) var(--ease-standard);
}

.site-navigation__link:hover,
.site-navigation__link[aria-current="page"] {
    color: var(--color-text);
}

.site-navigation__link:hover::after,
.site-navigation__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-header__actions {
    display: flex;

    align-items: center;

    gap: var(--space-sm);
}

.menu-button {
    display: none;

    width: 3rem;
    height: 3rem;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: var(--border-default);
    border-radius: var(--radius-md);

    background: var(--color-surface);
    color: var(--color-text);
}

.mobile-navigation {
    position: fixed;

    top: var(--header-height);
    right: 0;
    left: 0;

    z-index: calc(var(--z-header) - 1);

    padding-block: var(--space-lg);

    border-bottom: var(--border-default);

    background: rgba(7, 8, 13, 0.98);

    backdrop-filter: blur(1.25rem);
    -webkit-backdrop-filter: blur(1.25rem);
}

.mobile-navigation__list {
    display: flex;

    flex-direction: column;

    gap: var(--space-xs);

    list-style: none;
}

.mobile-navigation__list li {
    margin: 0;
}

.mobile-navigation__list a {
    display: block;

    padding: var(--space-md);

    border-radius: var(--radius-md);

    color: var(--color-text-soft);

    font-weight: var(--font-weight-medium);
}

.mobile-navigation__list a:hover {
    background: var(--color-primary-soft);
    color: var(--color-white);
}

/* =========================================================
   TAAL- EN THEMAKEUZE
========================================================= */

.preference-controls {
    display: flex;

    flex-shrink: 0;

    align-items: center;

    gap: var(--space-xs);
}

.preference-button {
    display: inline-flex;

    width: 2.75rem;
    height: 2.75rem;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: var(--border-default);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.025);
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    transition: var(--transition-interactive);
}

.preference-button:hover {
    transform: translateY(-0.125rem);

    border-color: var(--color-primary-border);

    background: var(--color-primary-soft);
    color: var(--color-primary-light);
}

.preference-button:active {
    transform: translateY(0);
}

html[data-language-mode="nl-only"] .language-toggle {
    display: none;
}

.theme-toggle__light {
    display: none;
}

html[data-theme="light"] .theme-toggle__dark {
    display: none;
}

html[data-theme="light"] .theme-toggle__light {
    display: inline;
}

html[data-theme="light"] .site-header {
    background: rgba(246, 246, 249, 0.85);
}

html[data-theme="light"] .mobile-navigation {
    background: rgba(246, 246, 249, 0.98);
}

html[data-theme="light"] .site-footer {
    background: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   08. HERO
========================================================= */

.hero {
    position: relative;

    display: flex;

    min-height: calc(100vh - var(--header-height));

    align-items: center;

    overflow: hidden;

    padding-block: var(--section-spacing-small);
}

.hero::before {
    content: "";

    position: absolute;

    top: 5%;
    right: -12rem;

    width: 34rem;
    height: 34rem;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.13);

    filter: blur(6rem);

    pointer-events: none;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 8rem);
}

.hero__content {
    max-width: 52rem;
}

.hero__title {
    margin-bottom: var(--space-xl);
}

.hero__intro {
    max-width: 43rem;

    color: var(--color-text-muted);

    font-size: clamp(var(--font-size-lg),
            2vw,
            var(--font-size-xl));

    line-height: 1.75;
}

.hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-md);

    margin-top: var(--space-xl);
}

.hero__visual {
    position: relative;

    display: grid;

    min-height: 28rem;

    place-items: center;
}

.hero-card {
    position: relative;

    width: min(100%, 27rem);

    aspect-ratio: 1;

    overflow: hidden;

    border: var(--border-default);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.01)),
        var(--color-surface);

    box-shadow:
        var(--shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-card::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 13rem;
    height: 13rem;

    border-radius: 50%;

    background: rgba(139, 92, 246, 0.25);

    filter: blur(4rem);

    transform: translate(-50%, -50%);
}

.hero-card__content {
    position: relative;

    z-index: 1;

    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;

    padding: var(--space-3xl);
}

.hero-card__content img {
    width: min(80%, 17rem);
}

/* ========================================
   HERO PLAQUE
======================================== */

.hero-plaque {
    position: relative;

    width: min(100%, 520px);
    min-height: 650px;

    display: grid;
    place-items: center;

    justify-self: center;

    isolation: isolate;
}


/* Zachte paarse gloed achter de plaque */

.hero-plaque__glow {
    position: absolute;
    z-index: -2;

    width: 88%;
    height: 78%;

    border-radius: 50%;

    background:
        radial-gradient(ellipse at center,
            rgba(145, 91, 255, 0.3) 0%,
            rgba(111, 65, 215, 0.14) 38%,
            rgba(83, 46, 167, 0.05) 62%,
            transparent 76%);

    filter: blur(54px);

    animation: plaque-glow 8s ease-in-out infinite;
}


/* Verticale productplaat */

.hero-plaque__object {
    position: relative;

    width: min(100%, 430px);
    min-height: 590px;

    padding:
        clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem) 2.25rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 34px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.018) 40%,
            rgba(132, 77, 235, 0.035) 100%),
        rgba(16, 16, 23, 0.84);

    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.48),
        0 0 85px rgba(133, 78, 238, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}


/* Subtiele glans aan de bovenzijde */

.hero-plaque__highlight {
    position: absolute;
    top: -18%;
    left: -34%;

    width: 105%;
    height: 46%;

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.015) 50%,
            transparent 72%);

    transform: rotate(-16deg);

    pointer-events: none;
}


/* Logozone */

.hero-plaque__logo-wrap {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 310px;

    display: grid;
    place-items: center;
}

.hero-plaque__logo {
    display: block;

    width: min(88%, 340px);
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 20px 36px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 22px rgba(151, 93, 255, 0.13));
}


/* Dunne scheidingslijn */

.hero-plaque__divider {
    width: 76%;
    height: 1px;

    margin: 0 auto 2rem;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(176, 125, 255, 0.32),
            rgba(255, 255, 255, 0.12),
            transparent);
}


/* Tekst onder het logo */

.hero-plaque__details {
    position: relative;
    z-index: 2;

    width: 100%;

    text-align: center;
}

.hero-plaque__details {
    position: relative;
    z-index: 2;

    width: 78%;
}

.hero-plaque__services-list {
    margin: 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
}

.hero-plaque__services-list li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: center;
    gap: 0.9rem;

    padding: 0.85rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

    color: var(--color-text-secondary);

    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.hero-plaque__services-list li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-plaque__service-index {
    color: var(--color-primary);

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Diagonale lichtstrook over de plaque */

.hero-plaque__shine {
    position: absolute;
    z-index: 1;

    top: -45%;
    left: -85%;

    width: 38%;
    height: 190%;

    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(155, 92, 255, 0.03) 18%,
            rgba(190, 142, 255, 0.18) 42%,
            rgba(255, 255, 255, 0.48) 50%,
            rgba(190, 142, 255, 0.18) 58%,
            rgba(155, 92, 255, 0.03) 82%,
            transparent 100%);

    filter: blur(4px);

    transform: rotate(-32deg);

    pointer-events: none;

    animation: plaque-shine 7s ease-in-out infinite;
}

/* ========================================
   HERO PLAQUE — LIGHT THEME
======================================== */

html[data-theme="light"] .hero-plaque__glow {
    background:
        radial-gradient(ellipse at center,
            rgba(140, 82, 255, 0.2) 0%,
            rgba(140, 82, 255, 0.1) 38%,
            rgba(140, 82, 255, 0.035) 62%,
            transparent 76%);

    filter: blur(58px);
}

html[data-theme="light"] .hero-plaque__object {
    border: 1px solid rgba(91, 63, 138, 0.16);

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.92),
            rgba(247, 244, 255, 0.82) 42%,
            rgba(235, 228, 250, 0.72) 100%);

    box-shadow:
        0 35px 80px rgba(55, 38, 82, 0.16),
        0 0 75px rgba(135, 82, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(92, 62, 138, 0.08);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

html[data-theme="light"] .hero-plaque__highlight {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.28) 45%,
            transparent 72%);

    opacity: 0.72;
}

html[data-theme="light"] .hero-plaque__shine {
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(145, 86, 255, 0.025) 18%,
            rgba(164, 108, 255, 0.12) 40%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(164, 108, 255, 0.12) 60%,
            rgba(145, 86, 255, 0.025) 82%,
            transparent 100%);

    filter: blur(5px);
}

html[data-theme="light"] .hero-plaque__divider {
    background:
        linear-gradient(90deg,
            transparent,
            rgba(126, 77, 210, 0.22),
            rgba(70, 55, 95, 0.14),
            transparent);
}

html[data-theme="light"] .hero-plaque__services-list li {
    border-bottom-color: rgba(61, 47, 82, 0.1);
    color: var(--color-text-secondary);
}

html[data-theme="light"] .hero-plaque__services-list li:first-child {
    border-top-color: rgba(61, 47, 82, 0.1);
}

html[data-theme="light"] .hero-plaque__service-index {
    color: var(--color-primary);
}

.hero-plaque__logo--light {
    display: none;
}

html[data-theme="light"] .hero-plaque__logo--dark {
    display: none;
}

html[data-theme="light"] .hero-plaque__logo--light {
    display: block;
}


/* Animaties */

@keyframes plaque-glow {

    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }

}

@keyframes plaque-shine {

    0%,
    18% {
        left: -85%;
        opacity: 0;
    }

    25% {
        opacity: 0.85;
    }

    48% {
        left: 145%;
        opacity: 0.85;
    }

    56%,
    100% {
        left: 145%;
        opacity: 0;
    }

}

/* =========================================================
   09. SECTIES
========================================================= */

.services,
.projects,
.about,
.process,
.contact-section {
    position: relative;
}

.services-grid,
.projects-grid,
.process-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(min(100%, 17rem), 1fr));

    gap: var(--space-xl);
}

.about__content h2 {
    margin-bottom: var(--space-lg);
}

.about__actions {
    margin-top: var(--space-xl);
}

.about-intro {
    margin: var(--space-lg) auto 0;
}

.about-actions {
    display: flex;

    justify-content: center;

    margin-top: var(--space-xl);
}

.process-step {
    position: relative;

    padding-top: var(--space-lg);
}

.process-step__number {
    display: inline-flex;

    width: 2.5rem;
    height: 2.5rem;

    align-items: center;
    justify-content: center;

    margin-bottom: var(--space-lg);

    border: var(--border-primary);
    border-radius: 50%;

    background: var(--color-primary-soft);
    color: var(--color-primary-light);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.process-step h3 {
    margin-bottom: var(--space-sm);
}

.process-step p {
    color: var(--color-text-muted);
}


/* =========================================================
   10. CARDS
========================================================= */

.card,
.service-card,
.project-card {
    border: var(--border-default);
    border-radius: var(--radius-xl);

    background:
        var(--gradient-surface),
        var(--color-surface);

    box-shadow: var(--shadow-sm);

    transition: var(--transition-interactive);
}

.card {
    padding: var(--space-xl);
}

.card--interactive:hover,
.service-card:hover,
.project-card:hover {
    transform: translateY(-0.4rem);

    border-color: var(--color-primary-border);

    box-shadow: var(--shadow-md);
}

.service-card {
    display: flex;

    min-height: 100%;

    flex-direction: column;

    padding: var(--space-xl);
}

.service-card__icon,
.icon-box {
    display: inline-flex;

    width: 3.5rem;
    height: 3.5rem;

    flex-shrink: 0;

    align-items: center;
    justify-content: center;

    margin-bottom: var(--space-lg);

    border: var(--border-primary);
    border-radius: var(--radius-lg);

    background: var(--color-primary-soft);
    color: var(--color-primary-light);
}

.service-card h3 {
    margin-bottom: var(--space-sm);
}

.service-card p {
    margin-bottom: var(--space-lg);

    color: var(--color-text-muted);
}

.service-card .button,
.service-card>a {
    margin-top: auto;
}

.badge {
    display: inline-flex;

    min-height: 1.9rem;

    align-items: center;

    padding-inline: 0.8rem;

    border: var(--border-default);
    border-radius: var(--radius-pill);

    background: var(--color-surface-light);
    color: var(--color-text-soft);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.badge--accent {
    border-color: var(--color-primary-border);

    background: var(--color-primary-soft);
    color: var(--color-primary-light);
}

.badge--success {
    border-color: rgba(74, 222, 128, 0.24);

    background: var(--color-success-soft);
    color: var(--color-success);
}

/* =========================================================
   WEBSITEONTWIKKELING
========================================================= */

.website-development-card {
    display: flex;
    flex-direction: column;

    align-self: center;

    padding: clamp(var(--space-xl),
            4vw,
            var(--space-2xl));

    border: var(--border-default);
    border-radius: var(--radius-xl);

    background: var(--gradient-surface);
    box-shadow: var(--shadow-sm);
}

.website-development-card h3 {
    margin-top: var(--space-sm);
}

.website-development-card>p {
    margin-top: var(--space-md);

    color: var(--color-text-muted);
}

.website-development-card__list {
    display: grid;

    gap: var(--space-md);

    margin-top: var(--space-xl);
    padding: 0;

    list-style: none;
}

.website-development-card__list li {
    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);

    color: var(--color-text-soft);
}

.website-development-card__icon {
    display: inline-flex;

    flex: 0 0 auto;

    width: 1.6rem;
    height: 1.6rem;

    align-items: center;
    justify-content: center;

    margin-top: 0.05rem;

    border: 1px solid var(--color-primary-border);
    border-radius: 50%;

    background: var(--color-primary-soft);
    color: var(--color-primary-light);

    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
}

/* =========================================================
   11. PROJECTEN
========================================================= */

.project-card {
    overflow: hidden;
}

.project-card__visual {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    border-bottom: var(--border-default);

    background: var(--color-background-soft);
}

.project-card__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--duration-slow) var(--ease-standard);
}

.project-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: inherit;
}

.project-card:hover .project-card__visual img {
    transform: scale(1.035);
}

.project-card__placeholder {
    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;

    color: var(--color-text-subtle);

    background:
        radial-gradient(circle at center,
            rgba(139, 92, 246, 0.1),
            transparent 60%);
}

.project-card__content {
    padding: var(--space-xl);
}

.project-card__badges {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-xs);

    margin-bottom: var(--space-lg);
}

.project-card h3 {
    margin-bottom: var(--space-sm);
}

.project-card p {
    margin-bottom: var(--space-lg);

    color: var(--color-text-muted);
}


/* =========================================================
   12. FORMULIEREN
========================================================= */

.form {
    width: 100%;
}

.form-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-lg);
}

.form-field {
    display: flex;

    flex-direction: column;

    gap: var(--space-xs);
}

.form-field--full {
    grid-column: 1 / -1;
}

label {
    color: var(--color-text);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

input,
textarea,
select {
    width: 100%;

    padding: 0.95rem 1rem;

    border: var(--border-default);
    border-radius: var(--radius-md);

    outline: none;

    background: var(--color-surface);
    color: var(--color-text);

    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

textarea {
    min-height: 10rem;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-subtle);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--color-border-strong);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);

    background: var(--color-surface-light);

    box-shadow:
        0 0 0 0.25rem rgba(139, 92, 246, 0.14);
}

.form-help {
    color: var(--color-text-subtle);

    font-size: var(--font-size-xs);
}

.form-actions {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-md);

    margin-top: var(--space-xl);
}

.checkbox {
    display: flex;

    align-items: flex-start;

    gap: var(--space-sm);
}

.checkbox input {
    width: auto;

    margin-top: 0.3rem;
}


/* =========================================================
   13. MELDINGEN
========================================================= */

.alert {
    padding: var(--space-lg);

    border: var(--border-default);
    border-radius: var(--radius-lg);
}

.alert strong {
    display: block;

    margin-bottom: var(--space-xs);
}

.alert--success {
    border-color: rgba(74, 222, 128, 0.25);

    background: var(--color-success-soft);
}

.alert--warning {
    border-color: rgba(250, 204, 21, 0.25);

    background: var(--color-warning-soft);
}

.alert--error {
    border-color: rgba(251, 113, 133, 0.25);

    background: var(--color-error-soft);
}

.alert--info {
    border-color: rgba(96, 165, 250, 0.25);

    background: var(--color-info-soft);
}


/* =========================================================
   14. CALL TO ACTION
========================================================= */

.cta {
    position: relative;

    overflow: hidden;

    padding:
        clamp(var(--space-xl),
            6vw,
            var(--space-4xl));

    border: var(--border-primary);
    border-radius: var(--radius-xl);

    background:
        radial-gradient(circle at top right,
            rgba(139, 92, 246, 0.2),
            transparent 25rem),
        var(--color-surface);

    box-shadow: var(--shadow-lg);
}

.cta::before {
    content: "";

    position: absolute;

    top: -10rem;
    right: -10rem;

    width: 22rem;
    height: 22rem;

    border: 1px solid rgba(179, 136, 255, 0.12);
    border-radius: 50%;
}

.cta__inner {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-2xl);
}

.cta__content {
    max-width: 45rem;
}

.cta h2 {
    margin-bottom: var(--space-md);
}

.cta p {
    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
}

.cta__actions {
    display: flex;

    flex-shrink: 0;

    flex-wrap: wrap;

    gap: var(--space-md);
}


/* =========================================================
   15. FOOTER
========================================================= */

.site-footer {
    padding-block: var(--space-3xl);

    border-top: var(--border-default);

    background: rgba(0, 0, 0, 0.1);
}

.site-footer__top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr) repeat(2, minmax(10rem, 1fr));

    gap: var(--space-3xl);

    padding-bottom: var(--space-2xl);
}

.site-footer__brand {
    max-width: 25rem;
}

.site-footer__logo {
    width: auto;
    height: 2.5rem;

    margin-bottom: var(--space-lg);
}

.site-footer__brand p {
    color: var(--color-text-muted);
}

.site-footer__heading {
    margin-bottom: var(--space-md);

    font-size: var(--font-size-base);
    letter-spacing: 0;
}

.site-footer__list {
    display: flex;

    flex-direction: column;

    gap: var(--space-sm);

    list-style: none;
}

.site-footer__list li {
    margin: 0;
}

.site-footer__list a {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.site-footer__list a:hover {
    color: var(--color-text);
}

.site-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding-top: var(--space-xl);

    border-top: var(--border-default);
}

.site-footer__bottom p,
.site-footer__legal a {
    color: var(--color-text-subtle);

    font-size: var(--font-size-sm);
}

.site-footer__legal {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-lg);
}


/* =========================================================
   16. DESIGN-SYSTEMPAGINA
========================================================= */

.design-system-page {
    background: var(--gradient-background);
}

.ds-header {
    border-bottom: var(--border-default);

    background: var(--color-surface);
}

.ds-header__inner {
    display: flex;

    min-height: var(--header-height);

    align-items: center;
    justify-content: space-between;

    gap: var(--space-xl);
}

.ds-navigation__list {
    display: flex;

    flex-wrap: wrap;

    gap: var(--space-lg);

    list-style: none;
}

.ds-navigation__link {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.ds-navigation__link:hover {
    color: var(--color-text);
}

.ds-hero {
    padding-block: var(--section-spacing);
}

.ds-hero__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr) minmax(18rem, 0.9fr);

    align-items: center;

    gap: var(--space-4xl);
}

.ds-hero__title {
    margin-bottom: var(--space-xl);
}

.ds-hero__intro {
    max-width: 42rem;

    color: var(--color-text-muted);

    font-size: var(--font-size-xl);
}

.ds-section {
    padding-block: var(--section-spacing-small);

    border-top: var(--border-default);
}

.ds-section__heading {
    display: grid;

    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);

    gap: var(--space-3xl);

    margin-bottom: var(--space-3xl);
}

.ds-section__number {
    display: block;

    margin-bottom: var(--space-sm);

    color: var(--color-primary-light);

    font-family: var(--font-monospace);
    font-size: var(--font-size-xs);

    letter-spacing: var(--letter-spacing-eyebrow);
}

.ds-section__description {
    align-self: end;

    color: var(--color-text-muted);

    font-size: var(--font-size-lg);
}

.ds-panel {
    overflow: hidden;

    border: var(--border-default);
    border-radius: var(--radius-xl);

    background: var(--color-surface);
}

.ds-panel__header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-lg);

    padding: var(--space-lg) var(--space-xl);

    border-bottom: var(--border-default);
}

.ds-panel__body {
    padding: clamp(var(--space-xl),
            5vw,
            var(--space-3xl));
}

.ds-color-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(min(100%, 14rem), 1fr));

    gap: var(--space-lg);
}

.ds-color-card {
    overflow: hidden;

    border: var(--border-default);
    border-radius: var(--radius-lg);

    background: var(--color-surface-light);
}

.ds-color-card__swatch {
    min-height: 8rem;

    background: var(--swatch-color, var(--color-primary));
}

.ds-color-card__content {
    padding: var(--space-lg);
}

.ds-color-card__name {
    display: block;

    margin-bottom: var(--space-xs);

    font-weight: var(--font-weight-semibold);
}

.ds-color-card__value,
.ds-color-card__variable {
    display: block;

    color: var(--color-text-muted);

    font-family: var(--font-monospace);
    font-size: var(--font-size-xs);
}

.ds-swatch--background {
    --swatch-color: var(--color-background);
}

.ds-swatch--surface {
    --swatch-color: var(--color-surface);
}

.ds-swatch--surface-light {
    --swatch-color: var(--color-surface-light);
}

.ds-swatch--primary {
    --swatch-color: var(--color-primary);
}

.ds-swatch--primary-light {
    --swatch-color: var(--color-primary-light);
}

.ds-swatch--text {
    --swatch-color: var(--color-text);
}

.ds-swatch--text-muted {
    --swatch-color: var(--color-text-muted);
}

.ds-type-stack {
    display: flex;

    flex-direction: column;
}

.ds-type-sample {
    display: grid;

    grid-template-columns: minmax(8rem, 0.25fr) minmax(0, 1fr);

    align-items: baseline;

    gap: var(--space-xl);

    padding-block: var(--space-xl);

    border-bottom: var(--border-default);
}

.ds-type-sample:last-child {
    border-bottom: 0;
}

.ds-type-sample__token {
    color: var(--color-primary-light);

    font-family: var(--font-monospace);
    font-size: var(--font-size-xs);
}

.ds-component-preview {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--space-md);

    padding: var(--space-xl);

    border: var(--border-default);
    border-radius: var(--radius-xl);

    background: var(--color-surface);
}

.ds-spacing-list {
    display: flex;

    flex-direction: column;

    gap: var(--space-md);
}

.ds-spacing-item {
    display: grid;

    grid-template-columns: 6rem minmax(0, 1fr) 5rem;

    align-items: center;

    gap: var(--space-lg);
}

.ds-spacing-item__token,
.ds-spacing-item__value {
    color: var(--color-text-muted);

    font-family: var(--font-monospace);
    font-size: var(--font-size-xs);
}

.ds-spacing-item__bar {
    width: var(--spacing-width, 1rem);
    max-width: 100%;
    height: 1rem;

    border-radius: var(--radius-pill);

    background: var(--gradient-primary);
}

.ds-space-xs {
    --spacing-width: var(--space-xs);
}

.ds-space-sm {
    --spacing-width: var(--space-sm);
}

.ds-space-md {
    --spacing-width: var(--space-md);
}

.ds-space-lg {
    --spacing-width: var(--space-lg);
}

.ds-space-xl {
    --spacing-width: var(--space-xl);
}

.ds-space-2xl {
    --spacing-width: var(--space-2xl);
}

.ds-space-3xl {
    --spacing-width: var(--space-3xl);
}


/* =========================================================
   17. TOEGANKELIJKHEID
========================================================= */

:focus-visible {
    outline: 0.15rem solid var(--color-primary-light);
    outline-offset: 0.25rem;
}

.visually-hidden,
.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    margin: -1px !important;
    padding: 0 !important;

    border: 0 !important;
}

/* ========================================
   COMPACTE CONTACTGEGEVENS
======================================== */

.contact-info-card {
    margin-top: var(--space-xl);

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);

    background: var(--color-surface);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.18);
}

.contact-info-list {
    margin: 0;
}

.contact-info-item {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.5fr);
    gap: var(--space-lg);

    padding: 1rem 1.4rem;

    border-bottom: 1px solid var(--color-border);
}

.contact-info-item:last-child {
    border-bottom: 0;
}

.contact-info-item dt {
    color: var(--color-text-primary);

    font-size: 0.9rem;
    font-weight: 700;
}

.contact-info-item dd {
    margin: 0;

    color: var(--color-text-secondary);

    font-size: 0.92rem;
    line-height: 1.6;
}

.contact-info-item address {
    color: inherit;
    font: inherit;
    font-style: normal;
}

.contact-info-item a {
    color: var(--color-primary);
    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.contact-info-item a:hover {
    opacity: 0.8;
}

/* =========================================================
   CONTACTKAARTEN
========================================================= */

.contact-details__grid {
    display: grid;
    gap: var(--space-lg);
}

.contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.contact-card__icon {
    flex-shrink: 0;
}

.contact-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;

    flex: 1;
}

.contact-card__content h3,
.contact-card__content p {
    margin: 0;
}



/* =========================================================
   CONTACTFORMULIER
========================================================= */

.contact-form {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--space-lg);

    margin-top: var(--space-xl);
}

.form-honeypot {
    position: absolute;
    left: -10000px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: var(--space-xs);
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    color: var(--color-text-soft);
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 0.9rem 1rem;

    border: var(--border-default);
    border-radius: var(--radius-md);

    background: var(--color-surface-light);

    color: var(--color-text);

    font: inherit;

    transition: var(--transition-interactive);
}

.form-group textarea {
    resize: vertical;

    min-height: 10rem;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}

.contact-form__privacy {
    margin: calc(var(--space-sm) * -1) 0 0;

    font-size: var(--font-size-sm);
}

.contact-form__status {
    margin: 0;
    padding: var(--space-md) var(--space-lg);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface-light);
}

.contact-form__status[hidden] {
    display: none;
}

.contact-form__status.is-success {
    border-color: rgba(58, 211, 83, 0.55);
    background: rgba(58, 211, 83, 0.1);
    color: var(--color-text);
}

.contact-form__status.is-error {
    border-color: rgba(255, 92, 92, 0.55);
    background: rgba(255, 92, 92, 0.1);
    color: var(--color-text);
}

.contact-form__submit:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* =========================================================
   FAQ
========================================================= */
.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);

    margin-top: var(--space-2xl);
}

/* =========================================================
   JURIDISCHE PAGINA'S
========================================================= */

.legal-hero {
    padding-bottom: var(--space-2xl);
}

.legal-hero__intro {
    max-width: 46rem;
    margin-inline: auto;
}

.legal-update {
    margin-top: var(--space-lg);

    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.legal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);

    margin-top: var(--space-xl);
}

.legal-actions .legal-update {
    margin-top: 0;
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
}

.legal-navigation {
    position: sticky;
    top: 7rem;
}

.legal-navigation__inner {
    padding: var(--space-lg);
}

.legal-navigation h2 {
    margin-bottom: var(--space-lg);

    font-size: 1rem;
}

.legal-navigation__list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;

    margin: 0;
    padding-left: 1.25rem;
}

.legal-navigation__list li {
    color: var(--color-text-muted);
}

.legal-navigation__list a {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.legal-navigation__list a:hover,
.legal-navigation__list a:focus-visible {
    color: var(--color-primary);
}

.legal-content {
    min-width: 0;
}

.legal-section {
    position: relative;

    padding-block: var(--space-2xl);

    border-bottom: var(--border-default);

    scroll-margin-top: 8rem;
}

.legal-section:first-child {
    padding-top: 0;
}

.legal-section:last-of-type {
    border-bottom: 0;
}

.legal-section__number {
    display: inline-flex;

    margin-bottom: var(--space-sm);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;

    color: var(--color-primary);
}

.legal-section h2 {
    margin-bottom: var(--space-lg);
}

.legal-section h3 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.legal-section p,
.legal-section li {
    max-width: 52rem;

    line-height: 1.8;
    color: var(--color-text-muted);
}

.legal-section p+p {
    margin-top: var(--space-md);
}

.legal-section a {
    color: var(--color-primary);
}

.legal-company-details {
    display: grid;
    gap: 0;
    overflow: hidden;

    margin-top: var(--space-xl);

    border: var(--border-default);
    border-radius: var(--radius-lg);

    background: var(--color-surface);
}

.legal-company-details>div {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
    gap: var(--space-lg);

    padding: var(--space-md) var(--space-lg);

    border-bottom: var(--border-default);
}

.legal-company-details>div:last-child {
    border-bottom: 0;
}

.legal-company-details dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.legal-company-details dd {
    margin: 0;

    color: var(--color-text-muted);
}

.legal-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);

    margin-top: var(--space-3xl);
    padding: var(--space-xl);
}

.legal-contact h2 {
    margin-bottom: var(--space-xs);
}

.legal-contact p {
    margin: 0;
}


/* =========================================================
   RESPONSIVE JURIDISCHE PAGINA'S
========================================================= */

@media (max-width: 900px) {

    .legal-layout {
        grid-template-columns: 1fr;
    }

    .legal-navigation {
        position: static;
    }

    .legal-navigation__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
    }

}

@media (max-width: 640px) {

    .legal-navigation__list {
        grid-template-columns: 1fr;
    }

    .legal-company-details>div {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .legal-contact {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-contact .button {
        width: 100%;
    }

}

/* ========================================
   Legal actions
======================================== */

.legal-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: var(--space-xl);
}

@media (max-width: 640px) {

    .legal-actions {

        justify-content: center;

    }

}
.legal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);

    width: 100%;

    margin-top: var(--space-xl);
    padding-top: var(--space-lg);

    border-top: 1px solid var(--color-border);

    text-align: left;
}

.legal-updated {
    margin: 0;

    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.legal-updated strong {
    color: var(--color-text-primary);
}

/* =========================================================
   18. RESPONSIVE
========================================================= */

@media (max-width: 64rem) {
    .grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero__inner,
    .split-layout,
    .ds-hero__inner,
    .ds-section__heading {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        min-height: auto;
    }

    .site-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta__inner {
        align-items: flex-start;

        flex-direction: column;
    }
}

@media (max-width: 50rem) {

    .site-navigation,
    .site-header__actions {
        display: none;
    }

    .menu-button {
        display: inline-flex;
    }

    .hero {
        min-height: auto;
    }

    .grid--three {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field--full {
        grid-column: auto;
    }

    .site-footer__bottom {
        align-items: flex-start;

        flex-direction: column;
    }

    .ds-header__inner {
        align-items: flex-start;

        flex-direction: column;

        padding-block: var(--space-md);
    }

    .ds-type-sample {
        grid-template-columns: 1fr;

        gap: var(--space-sm);
    }

    .preference-controls {
        margin-left: auto;
    }

    .preference-button {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 40rem) {
    :root {
        --header-height: 4.5rem;
    }

    .section {
        padding-block: var(--section-spacing-small);
    }

    .grid--two,
    .grid--four {
        grid-template-columns: 1fr;
    }

    .hero__actions,
    .form-actions,
    .cta__actions {
        align-items: stretch;

        flex-direction: column;
    }

    .hero__actions .button,
    .form-actions .button,
    .cta__actions .button {
        width: 100%;
    }

    .hero-card {
        border-radius: var(--radius-lg);
    }

    .site-footer__top {
        grid-template-columns: 1fr;
    }

    .ds-panel__header {
        align-items: flex-start;

        flex-direction: column;
    }

    .ds-component-preview {
        align-items: stretch;

        flex-direction: column;
    }

    .ds-component-preview .button {
        width: 100%;
    }

    .ds-spacing-item {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .ds-spacing-item__value {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 1000px) {

    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero-showcase {
        width: min(100%, 560px);
        margin-inline: auto;
        margin-top: var(--space-2xl);
    }

}


@media (max-width: 640px) {

    .hero-showcase {
        width: 100%;
    }

    .hero-showcase__object {
        width: 82%;
        border-radius: 26px;
    }

    .hero-showcase__logo {
        width: 76%;
    }

    .hero-showcase__orbit--outer {
        width: 96%;
        height: 96%;
    }

    .hero-showcase__corner--top-left {
        top: 20px;
        left: 20px;
    }

    .hero-showcase__corner--bottom-right {
        right: 20px;
        bottom: 20px;
    }

    .contact-info-item {
        grid-template-columns: 1fr;
        gap: 0.35rem;

        padding: 1rem 1.1rem;
    }

    .legal-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .legal-meta .button {
        width: 100%;
        justify-content: center;
    }

}



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

    .hero-plaque__shine,
    .hero-plaque__glow {
        animation: none;
    }

    .hero-plaque__shine {
        display: none;
    }

}