/* =========================================================
   M&O MARKETING — CORE V2 CLEAN
   Centrale design system
   ========================================================= */

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

:root {

    /* =========================================
       BACKGROUNDS
    ========================================= */

    --mo-bg: #0B0813;
    --mo-bg-deep: #08060E;
    --mo-bg-surface: #100C1C;
    --mo-bg-surface-2: #151022;


    /* =========================================
       GLASS
    ========================================= */

    --mo-glass: rgba(255,255,255,.025);
    --mo-glass-hover: rgba(255,255,255,.05);
    --mo-glass-strong: rgba(16,12,28,.78);

    --mo-glass-blur: 18px;
    --mo-glass-blur-strong: 28px;
    --mo-glass-saturation: 120%;


    /* =========================================
       BORDERS
    ========================================= */

    --mo-border: rgba(255,255,255,.07);
    --mo-border-soft: rgba(255,255,255,.045);
    --mo-border-purple: rgba(155,108,255,.38);


    /* =========================================
       BRAND
    ========================================= */

    --mo-purple: #9B6CFF;
    --mo-purple-light: #C7A8FF;
    --mo-purple-soft: rgba(155,108,255,.14);
    --mo-purple-glow: rgba(155,108,255,.18);
    --mo-purple-rgb: 155,108,255;


    /* =========================================
       INDIGO
    ========================================= */

    --mo-indigo: #4338CA;
    --mo-indigo-light: #6366F1;


    /* =========================================
       STATUS
    ========================================= */

    --mo-success: #22C55E;
    --mo-warning: #F59E0B;
    --mo-danger: #EF4444;


    /* =========================================
       TEXT
    ========================================= */

    --mo-text: #F3F4F6;
    --mo-text-soft: #D1D5DB;
    --mo-text-muted: #9CA3AF;
    --mo-text-dim: #6B7280;


    /* =========================================
       FONTS
    ========================================= */

    --mo-font-body: "Plus Jakarta Sans", sans-serif;
    --mo-font-heading: "Space Grotesk", sans-serif;
    --mo-font-mono: "JetBrains Mono", monospace;


    /* =========================================
       TYPE
    ========================================= */

    --mo-h1-size: clamp(2.35rem,3.2vw,3.5rem);
    --mo-h2-size: clamp(1.8rem,2.35vw,2.6rem);
    --mo-h3-size: clamp(1.05rem,1.25vw,1.25rem);
    --mo-h4-size: 1.15rem;

    --mo-body-size: .95rem;
    --mo-body-leading: 1.65;

    --mo-eyebrow-size: .66rem;
    --mo-button-size: .86rem;


    /* =========================================
       LAYOUT
    ========================================= */

    --mo-container: 81.25rem;
    --mo-container-wide: 87.5rem;
    --mo-content: 54rem;

    --mo-heading-wide: 60rem;
    --mo-heading-standard: 52rem;
    --mo-copy-wide: 48rem;
    --mo-copy-standard: 42rem;


    /* =========================================
       SPACING SYSTEM
    ========================================= */

    --mo-space-2xs: .25rem;
    --mo-space-xs: .5rem;
    --mo-space-sm: .75rem;
    --mo-space-md: 1rem;
    --mo-space-lg: 1.5rem;
    --mo-space-xl: 2rem;

    --mo-space-card: clamp(1rem,1.5vw,1.5rem);
    --mo-space-grid: clamp(1.5rem,2vw,2rem);
    --mo-space-related: clamp(3rem,4vw,4rem);

    --mo-space-section: clamp(3rem,3.5vw,3.75rem);
    --mo-space-section-mobile: clamp(2rem,3vw,2.5rem);

    --mo-space-heading-eyebrow: .875rem;
    --mo-space-heading-copy: 1.25rem;
    --mo-space-header-content: 2.5rem;

    --mo-container-gutter: 2rem;
    --mo-container-gutter-mobile: 1.25rem;


    /* =========================================
       SECTION ALIASES
    ========================================= */

    --mo-section-space: var(--mo-space-section);
    --mo-section-gap: var(--mo-space-grid);


    /* =========================================
       CARD INTERNAL SPACING
    ========================================= */

    --mo-card-title-gap: var(--mo-space-md);
    --mo-card-actions-gap: var(--mo-space-lg);

    /* =========================================
        MICRO TYPOGRAPHY
    ========================================= */

    --mo-small-text-size: .845rem;
    --mo-small-text-leading: 1.55;

    --mo-meta-size: .845rem;
    --mo-meta-leading: 1.5;

    --mo-point-title-size: .95rem;
    --mo-point-title-leading: 1.4;

    --mo-point-copy-size: .845rem;
    --mo-point-copy-leading: 1.6;

    --mo-card-copy-size: .9rem;
    --mo-card-copy-leading: 1.6;

    --mo-card-link-size: .845rem;

    /* =========================================
       CARDS
    ========================================= */

    --mo-card-sm-min-height: 12.5rem;
    --mo-card-md-min-height: 15.5rem;
    --mo-card-lg-min-height: 18rem;

    --mo-card-padding-sm: var(--mo-space-card);
    --mo-card-padding-md: var(--mo-space-card);
    --mo-card-padding-lg: var(--mo-space-xl);

    --mo-card-gap: var(--mo-space-grid);


    /* =========================================
       BUTTONS
    ========================================= */

    --mo-btn-height: 3rem;

    --mo-btn-padding-x: 1rem;
    --mo-btn-padding-y: .72rem;

    --mo-btn-radius: 1rem;
    --mo-radius-button: 1rem;

    --mo-btn-primary-bg:
        rgba(var(--mo-purple-rgb),.72);

    --mo-btn-primary-hover-bg:
        rgba(var(--mo-purple-rgb),.84);

    --mo-btn-secondary-bg:
        rgba(255,255,255,.025);

    --mo-btn-secondary-hover-bg:
        rgba(255,255,255,.045);

    --mo-btn-shadow:
        0 .5rem 1.5rem rgba(var(--mo-purple-rgb),.10);

    --mo-btn-shadow-hover:
        0 .7rem 1.8rem rgba(var(--mo-purple-rgb),.14);

    --mo-btn-blur: 14px;


    /* =========================================
       HEADER
    ========================================= */

    --mo-header-height: 3.5rem;
    --mo-header-radius: 1rem;

    --mo-header-bg:
        rgba(11,8,19,.38);

    --mo-header-bg-scrolled:
        rgba(8,6,14,.14);

    --mo-header-blur: 18px;
    --mo-header-blur-scrolled: 32px;

    --mo-header-shadow:
        0 .5rem 2rem rgba(0,0,0,.12);

    --mo-header-shadow-scrolled:
        0 .4rem 1.5rem rgba(0,0,0,.05);


    /* =========================================
       RADIUS
    ========================================= */

    --mo-radius-xs: .375rem;
    --mo-radius-sm: .625rem;
    --mo-radius-md: 1rem;
    --mo-radius-lg: 1.5rem;
    --mo-radius-xl: 2rem;
    --mo-radius-pill: 999px;

    --mo-radius-input: .75rem;


    /* =========================================
       CTA
    ========================================= */

    --mo-cta-padding:
        clamp(2.5rem,5vw,5rem);

    --mo-cta-radius:
        var(--mo-radius-xl);

    --mo-cta-actions-gap:
        var(--mo-space-sm);


    /* =========================================
       FAQ
    ========================================= */

    --mo-faq-gap:
        var(--mo-space-sm);

    --mo-faq-padding-x: 1.15rem;
    --mo-faq-padding-y: 1rem;

    --mo-faq-radius:
        var(--mo-radius-md);


    /* =========================================
       FORMS
    ========================================= */

    --mo-form-gap:
        var(--mo-space-md);

    --mo-form-grid-gap:
        var(--mo-space-grid);

    --mo-field-padding-x: .9rem;
    --mo-field-padding-y: .75rem;

    --mo-field-radius:
        var(--mo-radius-input);

    --mo-field-bg:
        rgba(255,255,255,.02);

    --mo-field-bg-focus:
        rgba(255,255,255,.03);


    /* =========================================
       FOOTER
    ========================================= */

    --mo-footer-padding-top: 3.5rem;
    --mo-footer-padding-bottom: 2rem;

    --mo-footer-grid-gap:
        var(--mo-space-xl);

    --mo-footer-bottom-gap:
        var(--mo-space-xl);


    /* =========================================
       LEGAL
    ========================================= */

    --mo-legal-body-size: .9rem;
    --mo-legal-h2-size: 1.55rem;
    --mo-legal-h3-size: 1.15rem;


    /* =========================================
       SHADOWS
    ========================================= */

    --mo-shadow-sm:
        0 .5rem 1.5rem rgba(0,0,0,.18);

    --mo-shadow-md:
        0 1.5rem 4rem rgba(0,0,0,.25);

    --mo-shadow-lg:
        0 2rem 6rem rgba(0,0,0,.35);

    --mo-shadow-purple:
        0 1.5rem 4rem rgba(155,108,255,.12);


    /* =========================================
       MOTION
    ========================================= */

    --mo-ease:
        cubic-bezier(.23,1,.32,1);

    --mo-duration-fast: .2s;
    --mo-duration-base: .3s;
    --mo-duration-slow: .5s;

    --mo-transition:
        .3s var(--mo-ease);

    --mo-transition-fast:
        .2s var(--mo-ease);

    --mo-transition-base:
        .3s var(--mo-ease);

    --mo-transition-slow:
        .5s var(--mo-ease);


    /* =========================================
       LAYERS
    ========================================= */

    --mo-header-z: 1000;
    --mo-overlay-z: 900;
    --mo-content-z: 2;

}

/* =========================================================
   02. RESET + GLOBAL
   ========================================================= */

html {
    background: var(--mo-bg);
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    padding: 0;
    background: var(--mo-bg);
    color: var(--mo-text);
    font-family: var(--mo-font-body);
    font-size: var(--mo-body-size);
    line-height: var(--mo-body-leading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

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

button {
    border: 0;
}

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

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

p {
    margin-top: 0;
    color: var(--mo-text-muted);
}


/* =========================================================
   03. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--mo-text);
    font-family: var(--mo-font-heading);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.1;
}

h1 {
    font-size: var(--mo-h1-size);
    line-height: 1.04;
    letter-spacing: -.045em;
}

h2 {
    font-size: var(--mo-h2-size);
    line-height: 1.05;
    letter-spacing: -.045em;
}

h3 {
    font-size: var(--mo-h3-size);
    line-height: 1.15;
}

h4 {
    font-size: 1.15rem;
}

.mo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--mo-purple-light);
    font-family: var(--mo-font-mono);
    font-size: var(--mo-eyebrow-size);
    font-weight: 600;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.mo-eyebrow::before {
    content: "";
    width: .4rem;
    height: .4rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mo-purple-light);
    box-shadow: 0 0 .75rem var(--mo-purple-light);
}

.mo-gradient-text {
    color: transparent;
    background: linear-gradient(100deg,var(--mo-purple-light),var(--mo-indigo-light));
    -webkit-background-clip: text;
    background-clip: text;
}


/* =========================================================
   04. CONTAINERS + SECTIONS
   ========================================================= */

.mo-container {
    width: min(
        calc(100% - (var(--mo-container-gutter) * 2)),
        var(--mo-container)
    );
    margin-inline: auto;
}

.mo-content {
    width: min(100%, var(--mo-content));
}

.mo-section {
    position: relative;
    width: 100%;
    padding-block: var(--mo-section-space);
}

.mo-section--default {
    background: var(--mo-bg);
}

.mo-section--deep {
    background: var(--mo-bg-deep);
}

.mo-section--surface {
    background: var(--mo-bg-surface);
}

.mo-section--surface-2 {
    background: var(--mo-bg-surface-2);
}

.mo-section-header {
    max-width: var(--mo-heading-standard);
    margin-bottom: var(--mo-space-header-content);
}

.mo-section-header .mo-eyebrow {
    margin-bottom: var(--mo-space-heading-eyebrow);
}

.mo-section-header h2 {
    margin-bottom: var(--mo-space-heading-copy);
}

.mo-section-header p {
    max-width: var(--mo-copy-standard);
    margin-bottom: 0;
}
/* =========================================
   05. BUTTON SYSTEM
========================================= */

.mo-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    min-height: var(--mo-btn-height);

    padding:
        var(--mo-btn-padding-y)
        var(--mo-btn-padding-x);

    border: 1px solid transparent;

    /* ALLE KNOPPEN: 16PX */
    border-radius: var(--mo-btn-radius) !important;

    font-family: var(--mo-font-body);
    font-size: var(--mo-button-size);
    font-weight: 600;
    line-height: 1;

    color: var(--mo-text);

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        transform var(--mo-transition),
        background var(--mo-transition),
        border-color var(--mo-transition),
        box-shadow var(--mo-transition),
        color var(--mo-transition);
}


/* =========================================
   HOVER
========================================= */

.mo-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}


/* =========================================
   PRIMARY
========================================= */

.mo-btn-primary {
    color: var(--mo-text);

    background: var(--mo-btn-primary-bg);

    border-color:
        rgba(var(--mo-purple-rgb), .42);

    box-shadow: var(--mo-btn-shadow);

    border-radius: var(--mo-btn-radius) !important;
}

.mo-btn-primary:hover {
    color: var(--mo-text);

    background: var(--mo-btn-primary-hover-bg);

    border-color:
        rgba(var(--mo-purple-rgb), .58);

    box-shadow: var(--mo-btn-shadow-hover);

    border-radius: var(--mo-btn-radius) !important;
}


/* =========================================
   SECONDARY
========================================= */

.mo-btn-secondary {
    color: var(--mo-text-soft);

    background: var(--mo-btn-secondary-bg);

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

    box-shadow:
        0 .35rem 1rem rgba(0,0,0,.08);

    backdrop-filter:
        blur(var(--mo-btn-blur));

    -webkit-backdrop-filter:
        blur(var(--mo-btn-blur));

    border-radius: var(--mo-btn-radius) !important;
}

.mo-btn-secondary:hover {
    color: var(--mo-text);

    background: var(--mo-btn-secondary-hover-bg);

    border-color: var(--mo-border-purple);

    box-shadow:
        0 .5rem 1.25rem rgba(0,0,0,.12);

    border-radius: var(--mo-btn-radius) !important;
}


/* =========================================
   GHOST
========================================= */

.mo-btn-ghost {
    color: var(--mo-text-soft);

    background: transparent;

    border-color: transparent;

    box-shadow: none;

    border-radius: var(--mo-btn-radius) !important;
}

.mo-btn-ghost:hover {
    color: var(--mo-purple-light);

    background: var(--mo-purple-soft);

    border-radius: var(--mo-btn-radius) !important;
}


/* =========================================
   FOCUS
========================================= */

.mo-btn:focus-visible {
    outline:
        2px solid
        var(--mo-purple-light);

    outline-offset: 3px;

    border-radius: var(--mo-btn-radius) !important;
}


/* =========================================
   INNER ELEMENTS
========================================= */

.mo-btn span,
.mo-btn svg {
    flex: 0 0 auto;
}


/* =========================================
   LINK RESET
========================================= */

a.mo-btn,
a.mo-btn:hover,
a.mo-btn:focus,
a.mo-btn:visited {
    text-decoration: none;
}


/* =========================================
   UNIVERSAL BUTTON RADIUS ENFORCEMENT
========================================= */

button.mo-btn,
a.mo-btn,
input.mo-btn,
.mo-btn {
    border-radius: 1rem !important;
}

/* =========================================================
   06. GLASS
   ========================================================= */

.mo-glass {
    background: var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-md);

    backdrop-filter:
        blur(var(--mo-glass-blur))
        saturate(var(--mo-glass-saturation));

    -webkit-backdrop-filter:
        blur(var(--mo-glass-blur))
        saturate(var(--mo-glass-saturation));

    transition:
        background var(--mo-transition),
        border-color var(--mo-transition),
        box-shadow var(--mo-transition),
        transform var(--mo-transition);
}

.mo-glass:hover {
    background: var(--mo-glass-hover);
    border-color: var(--mo-border-purple);
    box-shadow: var(--mo-shadow-purple);
}

.mo-glass-box {
    position: relative;
    overflow: hidden;

    padding: var(--mo-card-padding-lg);

    background: var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-lg);

    backdrop-filter:
        blur(var(--mo-glass-blur-strong))
        saturate(var(--mo-glass-saturation));

    -webkit-backdrop-filter:
        blur(var(--mo-glass-blur-strong))
        saturate(var(--mo-glass-saturation));
}

.mo-glass-box::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            transparent 35%
        );
}

.mo-glass-box > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   07. GRIDS
   ========================================================= */

.mo-grid {
    display: grid;
    gap: var(--mo-card-gap);
}

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

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

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


/* =========================================================
   08. DECORATIVE BACKGROUNDS
   ========================================================= */

.mo-bg-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size: 4rem 4rem;
    mask-image: radial-gradient(circle at center,black 15%,transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center,black 15%,transparent 75%);
}

.mo-glow {
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5rem);
    background: var(--mo-purple-glow);
}


/* =========================================================
   09. HEADER
   ========================================================= */

.mo-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--mo-header-z);
    width: 100%;
    padding: .65rem 1rem;
    pointer-events: none;
    transition: padding var(--mo-transition);
}

.mo-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: min(100%,var(--mo-container));
    min-height: 3.5rem;
    margin-inline: auto;
    padding: .5rem .8rem .5rem 1rem;
    background: rgba(11,8,19,.38);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--mo-radius-md);
    box-shadow: 0 .5rem 2rem rgba(0,0,0,.12);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    pointer-events: auto;
    transition:
        background .35s var(--mo-ease),
        border-color .35s var(--mo-ease),
        box-shadow .35s var(--mo-ease),
        backdrop-filter .35s var(--mo-ease),
        -webkit-backdrop-filter .35s var(--mo-ease);
}

.mo-header.is-scrolled {
    opacity: .9;
}


.mo-header.is-scrolled .mo-header-inner {
    background: rgba(8, 6, 14, .14);

    border-color: rgba(255,255,255,.04);

    box-shadow:
        0 .25rem 1.25rem rgba(0,0,0,.05);

    backdrop-filter: blur(32px) saturate(120%);
    -webkit-backdrop-filter: blur(32px) saturate(120%);
}

.mo-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    color: var(--mo-text);
    font-family: var(--mo-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.05em;
    transition: color var(--mo-transition);
}

.mo-logo span {
    color: var(--mo-text);
    font-weight: 500;
}

.mo-logo:hover,
.mo-logo:hover span {
    color: var(--mo-purple-light);
}

.mo-nav {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-left: auto;
}

.mo-nav > a,
.mo-nav-dropdown-toggle {
    position: relative;
    padding: .4rem 0;
    color: var(--mo-text-muted);
    background: transparent;
    border: 0;
    font-family: var(--mo-font-body);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--mo-transition);
}

.mo-nav > a:hover,
.mo-nav-dropdown:hover .mo-nav-dropdown-toggle {
    color: var(--mo-text);
}

.mo-nav-dropdown {
    position: relative;
}

.mo-nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.mo-chevron {
    font-size: .8rem;
    transition: transform var(--mo-transition);
}

.mo-nav-dropdown:hover .mo-chevron {
    transform: rotate(180deg);
}

.mo-dropdown {
    position: absolute;
    top: calc(100% + .85rem);
    left: 50%;
    display: grid;
    grid-template-columns: repeat(2,minmax(12rem,1fr));
    gap: .65rem;
    width: 40rem;
    padding: 1rem;
    background: rgba(16,12,28,.78);
    border: 1px solid var(--mo-border);
    border-radius: 1.1rem;
    box-shadow: 0 2rem 5rem rgba(0,0,0,.28);
    backdrop-filter: blur(28px) saturate(125%);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%,-.5rem);
    transition:
        opacity var(--mo-transition),
        visibility var(--mo-transition),
        transform var(--mo-transition);
}

.mo-nav-dropdown:hover .mo-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%,0);
}

.mo-dropdown-group {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .85rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    transition:
        background var(--mo-transition),
        border-color var(--mo-transition);
}

.mo-dropdown-group:hover {
    background: rgba(255,255,255,.025);
    border-color: var(--mo-border);
}

.mo-dropdown-group > span {
    display: block;
    margin-bottom: .4rem;
    color: var(--mo-purple-light);
    font-family: var(--mo-font-heading);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
}

.mo-dropdown-group a {
    display: block;
    padding: .3rem 0;
    color: var(--mo-text-muted);
    font-size: .78rem;
    transition:
        color var(--mo-transition),
        transform var(--mo-transition);
}

.mo-dropdown-group a:hover {
    color: var(--mo-text);
    transform: translateX(3px);
}

.mo-dropdown-all {
    grid-column: 1 / -1;
    margin-top: .2rem;
    padding: .8rem .4rem .2rem;
    border-top: 1px solid var(--mo-border);
    color: var(--mo-purple-light);
    font-size: .8rem;
    font-weight: 600;
}

.mo-header-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.mo-header-scan,
.mo-header-offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: .55rem .8rem;
    border-radius: 1rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--mo-transition);
}

.mo-header-scan {
    color: var(--mo-text-soft);
    background: rgba(255,255,255,.02);
    border: 1px solid var(--mo-border);
}

.mo-header-scan:hover {
    background: rgba(255,255,255,.04);
    border-color: var(--mo-border-purple);
    transform: translateY(-1px);
}

.mo-header-offer {
    color: var(--mo-text);
    background: rgba(var(--mo-purple-rgb),.62);
    border: 1px solid rgba(var(--mo-purple-rgb),.38);
    box-shadow: 0 .45rem 1.25rem rgba(var(--mo-purple-rgb),.08);
}

.mo-header-offer:hover {
    color: var(--mo-text);
    background: rgba(var(--mo-purple-rgb),.76);
    border-color: rgba(var(--mo-purple-rgb),.52);
    transform: translateY(-1px);
}

.mo-mobile-toggle,
.mo-mobile-menu {
    display: none;
}


/* =========================================================
   10. CARDS
   ========================================================= */
/* =========================================================
   10.1 PRICING — PRICE DISPLAY
   ========================================================= */

.mo-pricing-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: .45rem;
    margin-top: var(--mo-space-xl);
}

.mo-pricing-card__price-prefix {
    color: var(--mo-text-muted);
    font-size: .85rem;
    line-height: 1;
    white-space: nowrap;
}

.mo-pricing-card__price strong {
    margin: 0;
    color: var(--mo-text);
    font-family: var(--mo-font-heading);
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    line-height: .95;
    font-weight: 600;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.mo-pricing-card__price-period {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: .35rem .6rem;

    color: var(--mo-text-soft);
    background: var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-sm);

    font-family: var(--mo-font-mono);
    font-size: .62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* Doorlopend / maandelijks */
.mo-pricing-card--featured .mo-pricing-card__price strong {
    color: var(--mo-purple-light);
}

.mo-pricing-card--featured .mo-pricing-card__price-period {
    color: var(--mo-purple-light);
    background: var(--mo-purple-soft);
    border-color: var(--mo-border-purple);
}


/* =========================================================
   10.2 PRICING — SECTION LABEL
   ========================================================= */

.mo-pricing-card__section-title {
    color: var(--mo-text-soft);
    font-family: var(--mo-font-heading);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
}


/* =========================================================
   10.3 PRICING — MOBILE
   ========================================================= */

@media (max-width: 47.9375rem) {

    .mo-pricing-card__price {
        gap: .35rem;
    }

    .mo-pricing-card__price strong {
        font-size: 2.8rem;
    }

    .mo-pricing-card__price-prefix {
        font-size: .75rem;
    }

    .mo-pricing-card__price-period {
        min-height: 1.6rem;
        padding: .3rem .5rem;
        font-size: .58rem;
    }

}
.mo-card,
.mo-service-card,
.mo-feature-card,
.mo-process-card,
.mo-price-card,
.mo-feature-card-v2,
.mo-process-card-v2 {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: var(--mo-card-md-min-height);
    padding: var(--mo-card-padding-md);
    overflow: hidden;
    background: var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-lg);
    box-sizing: border-box;
}

.mo-card--sm {
    min-height: var(--mo-card-sm-min-height);
    padding: var(--mo-card-padding-sm);
}

.mo-card--md {
    min-height: var(--mo-card-md-min-height);
    padding: var(--mo-card-padding-md);
}

.mo-card--lg {
    min-height: var(--mo-card-lg-min-height);
    padding: var(--mo-card-padding-lg);
}

.mo-card__title {
    margin: 0 0 .65rem;
}

.mo-card__text {
    margin: 0;
    max-width: var(--mo-copy-standard);
}

.mo-card__actions {
    margin-top: auto;
    padding-top: 1.25rem;
}

.mo-card--hover,
.mo-card--hover:hover {
    transition:
        transform var(--mo-transition),
        background var(--mo-transition),
        border-color var(--mo-transition),
        box-shadow var(--mo-transition);
}

.mo-card--hover:hover {
    transform: translateY(-3px);
    background: var(--mo-glass-hover);
    border-color: var(--mo-border-purple);
    box-shadow: var(--mo-shadow-purple);
}

.mo-service-card,
.mo-feature-card,
.mo-process-card,
.mo-price-card {
    min-height: var(--mo-card-md-min-height);
    padding: var(--mo-card-padding-md);
}

.mo-price-card__actions,
.mo-feature-card-v2__actions,
.mo-process-card-v2__actions {
    margin-top: auto;
    padding-top: 1.25rem;
}

.mo-card-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: var(--mo-card-gap);
    align-items: stretch;
}

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

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


/* =========================================================
   11. CTA
   ========================================================= */

.mo-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem,6vw,5rem);
    background:
        radial-gradient(circle at 80% 20%,rgba(var(--mo-purple-rgb),.12),transparent 25rem),
        var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-xl);
    box-shadow: var(--mo-shadow-md);
}

.mo-cta-content {
    position: relative;
    z-index: 1;
    max-width: var(--mo-content);
}

.mo-cta h2 {
    margin-bottom: 1rem;
}

.mo-cta p {
    margin-bottom: 0;
}

.mo-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}


/* =========================================================
   12. FAQ
   ========================================================= */

.mo-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--mo-faq-gap);
}

.mo-faq {
    overflow: hidden;

    background: var(--mo-glass);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-faq-radius);
}

.mo-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    width: 100%;

    padding:
        var(--mo-faq-padding-y)
        var(--mo-faq-padding-x);

    color: var(--mo-text);

    background: transparent;

    text-align: left;

    font-family: var(--mo-font-body);
    font-weight: 600;

    cursor: pointer;
}

.mo-faq-icon {
    flex: 0 0 auto;

    transition: transform var(--mo-transition);
}

.mo-faq-answer {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height .35s var(--mo-ease);
}

.mo-faq-answer-inner {
    padding:
        0
        var(--mo-faq-padding-x)
        var(--mo-faq-padding-y);
}

.mo-faq-answer-inner p {
    margin: 0;
}

.mo-faq.is-open .mo-faq-answer {
    max-height: 1000px;
}

.mo-faq.is-open .mo-faq-icon {
    transform: rotate(45deg);
}


/* =========================================================
   13. FORMS
   ========================================================= */

.mo-form {
    display: grid;

    gap: var(--mo-form-gap);
}

.mo-form-grid {
    display: grid;

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

    gap: var(--mo-form-grid-gap);
}

.mo-field {
    min-width: 0;
}

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

.mo-field label {
    display: block;

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

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

    font-size: .78rem;
    font-weight: 600;
}

.mo-field input,
.mo-field textarea,
.mo-field select {
    width: 100%;

    padding:
        var(--mo-field-padding-y)
        var(--mo-field-padding-x);

    color: var(--mo-text);

    background: var(--mo-field-bg);

    border: 1px solid var(--mo-border);
    border-radius: var(--mo-field-radius);

    outline: none;

    transition:
        border-color var(--mo-transition),
        background var(--mo-transition),
        box-shadow var(--mo-transition);
}

.mo-field textarea {
    min-height: 9rem;

    resize: vertical;
}

.mo-field input::placeholder,
.mo-field textarea::placeholder {
    color: var(--mo-text-dim);
}

.mo-field input:focus,
.mo-field textarea:focus,
.mo-field select:focus {
    background: var(--mo-field-bg-focus);

    border-color: var(--mo-border-purple);

    box-shadow:
        0 0 0 .2rem var(--mo-purple-soft);
    
}
        
        
        
        
/* =========================================================
   14. FOOTER
   ========================================================= */

.mo-footer {
    position: relative;

    width: 100%;

    padding-block:
        var(--mo-footer-padding-top)
        var(--mo-footer-padding-bottom);
}

.mo-footer-grid {
    display: grid;

    grid-template-columns:
        1.4fr
        repeat(3,1fr);

    gap: var(--mo-footer-grid-gap);
}

.mo-footer-brand {
    max-width: 22rem;
}

.mo-footer-brand p {
    margin-top: var(--mo-space-sm);
}

.mo-footer-column h3 {
    margin-bottom: var(--mo-space-xs);

    color: var(--mo-text);

    font-size: .8rem;
}

.mo-footer-column a {
    display: block;

    padding: .25rem 0;

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

    font-size: .78rem;

    transition: color var(--mo-transition);
}

.mo-footer-column a:hover {
    color: var(--mo-text);
}

.mo-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    margin-top: var(--mo-footer-bottom-gap);

    padding-top: var(--mo-space-md);

    border-top: 1px solid var(--mo-border-soft);

    color: var(--mo-text-dim);

    font-size: .7rem;
}
/* =========================================================
   15. UTILITIES
   ========================================================= */

.mo-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity .6s var(--mo-ease),
        transform .6s var(--mo-ease);
}

.mo-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.mo-float {
    animation: moFloat 6s ease-in-out infinite;
}

@keyframes moFloat {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-.35rem);
    }
}

.mo-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   16. WIDTH HELPERS
   ========================================================= */

.mo-heading-wide {
    max-width: var(--mo-heading-wide);
}

.mo-heading-standard {
    max-width: var(--mo-heading-standard);
}

.mo-copy-wide {
    max-width: var(--mo-copy-wide);
}

.mo-copy-standard {
    max-width: var(--mo-copy-standard);
}


/* =========================================================
   17. LEGAL / LONG FORM
   ========================================================= */

.mo-legal-page__text {
    max-width: var(--mo-copy-wide);
}

.mo-legal-page__text,
.mo-legal-page__text p,
.mo-legal-page__text li {
    font-size: .9rem;
    line-height: 1.75;
}

.mo-legal-page__text h2 {
    font-size: 1.55rem;
    line-height: 1.2;
}

.mo-legal-page__text h3 {
    font-size: 1.15rem;
    line-height: 1.3;
}


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

@media (max-width:1100px) {

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

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

@media (max-width:900px) {

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

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

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

    .mo-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:767px) {

   .mo-container {
    width: min(
        calc(100% - (var(--mo-container-gutter-mobile) * 2)),
        var(--mo-container)
    );
    }

    .mo-grid-2,
    .mo-grid-3,
    .mo-grid-4,
    .mo-card-grid,
    .mo-card-grid--2,
    .mo-card-grid--4 {
        grid-template-columns: 1fr;
    }

    .mo-card,
    .mo-card--sm,
    .mo-card--md,
    .mo-card--lg,
    .mo-service-card,
    .mo-feature-card,
    .mo-process-card,
    .mo-price-card,
    .mo-feature-card-v2,
    .mo-process-card-v2 {
        min-height: auto;
    }

    .mo-btn {
        min-height: 3rem;
        padding: .72rem 1rem;
    }

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

    .mo-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .mo-header {
        padding-inline: .75rem;
    }

    .mo-header-inner {
        gap: .75rem;
        padding-left: .8rem;
    }

    .mo-nav {
        gap: .8rem;
    }
}

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

    html {
        scroll-behavior: auto;
    }

    .mo-btn,
    .mo-glass,
    .mo-faq-answer,
    .mo-header,
    .mo-header-inner,
    .mo-reveal {
        transition: none !important;
    }

    .mo-float {
        animation: none !important;
    }
}

/* =========================================================
   10A. MICRO TYPOGRAPHY
   ========================================================= */

.mo-s05-point strong,
.mo-s06-point strong,
.mo-s07-step-card h3 {
    font-size: var(--mo-point-title-size) !important;
    line-height: var(--mo-point-title-leading) !important;
    font-weight: 600 !important;
    color: var(--mo-text) !important;
}

.mo-s05-point p,
.mo-s06-point p,
.mo-s07-step-card p {
    font-size: var(--mo-point-copy-size) !important;
    line-height: var(--mo-point-copy-leading) !important;
    font-weight: 400 !important;
    color: var(--mo-text-muted) !important;
}

.mo-s03-card p,
.mo-s04-card-content p {
    font-size: var(--mo-card-copy-size) !important;
    line-height: var(--mo-card-copy-leading) !important;
    color: var(--mo-text-muted) !important;
}

.mo-s04-card-content li {
    font-size: var(--mo-meta-size) !important;
    line-height: var(--mo-meta-leading) !important;
    color: var(--mo-text-muted) !important;
}

.mo-s07-result,
.mo-s07-duration-label,
.mo-s09-price {
    font-size: var(--mo-meta-size) !important;
    line-height: var(--mo-meta-leading) !important;
}

/* =========================================================
   POINT TITLES
========================================================= */

.mo-s05-point strong,
.mo-s06-point strong,
.mo-s07-step-card h3 {
    font-size: var(--mo-point-title-size) !important;
}


/* =========================================================
   POINT DESCRIPTIONS
========================================================= */

.mo-s05-point p,
.mo-s06-point p,
.mo-s07-step-card p {
    font-size: var(--mo-point-copy-size) !important;
    line-height: var(--mo-point-copy-leading) !important;
    color: var(--mo-text-muted) !important;
}


/* =========================================================
   SERVICE CARD COPY
========================================================= */

.mo-s03-card p,
.mo-s04-card-content p {
    font-size: var(--mo-card-copy-size) !important;
    line-height: var(--mo-card-copy-leading) !important;
    color: var(--mo-text-muted) !important;
}


/* =========================================================
   SERVICE CARD BULLETS
========================================================= */

.mo-s04-card-content li {
    font-size: var(--mo-meta-size) !important;
    line-height: var(--mo-meta-leading) !important;
    color: var(--mo-text-muted) !important;
}


/* =========================================================
   SMALL CARD LINKS
========================================================= */

.mo-s04-link {
    font-size: var(--mo-button-size) !important;
}


/* =========================================================
   RESULT / SUPPORTING TEXT
========================================================= */

.mo-s07-result,
.mo-s07-duration-label,
.mo-s09-price {
    font-size: var(--mo-meta-size) !important;
    line-height: var(--mo-meta-leading) !important;
}