/* ===========================================================
   MSoftware — Dark, bold, Linear/Supabase-inspired
   Near-black surfaces, compressed Inter, gradient accents.
   =========================================================== */

@supports not (color: oklch(0 0 0)) {
    :root { color-scheme: dark; }
}

:root {
    color-scheme: dark;

    /* Surfaces */
    --bg:          oklch(0.085 0.008 250);
    --bg-elev:     oklch(0.130 0.010 252);
    --bg-elev-2:   oklch(0.165 0.012 252);
    --bg-tint:     oklch(0.105 0.012 252);

    /* Text */
    --ink:         oklch(0.985 0 0);
    --ink-muted:   oklch(0.700 0.012 250);
    --ink-dim:     oklch(0.520 0.012 250);

    /* Lines */
    --rule:        oklch(0.205 0.012 250);
    --rule-strong: oklch(0.300 0.014 250);

    /* Accents — Linear-style multi-stop */
    --accent:      oklch(0.700 0.220 285);
    --accent-2:    oklch(0.720 0.200 35);
    --accent-3:    oklch(0.780 0.160 200);
    --accent-soft: oklch(0.300 0.080 285);

    /* Sigil gradient (text + borders) */
    --grad: linear-gradient(120deg, oklch(0.700 0.220 285) 0%, oklch(0.720 0.200 35) 60%, oklch(0.780 0.160 200) 100%);

    /* States */
    --success:     oklch(0.760 0.170 165);
    --danger:      oklch(0.660 0.220 25);

    /* Type */
    --font-sans: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-display: 'Clash Display', 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, 'JetBrains Mono', monospace;

    /* Spacing & motion */
    --container: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --nav-height: 64px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================================
   Reset & base
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-muted);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: 'cv11', 'ss03', 'ss01';
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
}

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

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.018em;
}

/* Smaller headings stay on Switzer for legibility at body-adjacent sizes */
.service-card__heading,
.commitments strong,
.process__step h3 {
    font-family: var(--font-sans);
    letter-spacing: -0.015em;
}

p { margin: 0; color: var(--ink-muted); }

::selection { background: var(--accent); color: var(--bg); }

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

h1:focus, h1:focus-visible,
h2:focus, h2:focus-visible { outline: none; }

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ===========================================================
   Container & sections
   =========================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: clamp(5rem, 9vw, 7.5rem);
    position: relative;
}

.section--tight { padding-block: clamp(3rem, 5vw, 4rem); }
.section--bordered { position: relative; }
.section--bordered::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 720px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-strong) 35%, var(--rule-strong) 65%, transparent);
    opacity: 0.6;
    pointer-events: none;
}

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: 1rem;
    text-transform: none;
}
.section__eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    box-shadow: 0 0 12px oklch(0.700 0.220 285 / 0.6);
}

.section__title {
    font-size: clamp(2rem, 3.8vw, 3rem);
    max-width: 24ch;
    margin-bottom: 1.25rem;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.018em;
}

.section__lead {
    font-size: clamp(1.02rem, 1.25vw, 1.15rem);
    color: var(--ink-muted);
    max-width: 60ch;
    line-height: 1.55;
}

.gradient-text,
.ms-grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===========================================================
   Logo — Kerf monogram (mono + gradient via mask-image)
   =========================================================== */
.ms-logo {
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}
.ms-logo--mono { color: var(--ink); }

.ms-logo--gradient {
    position: relative;
}

/* Nav mark: icon-only, fluid, capped so it always fits inside the bar.
   Bigger on desktop now the wordmark is gone; trimmed on mobile to fit the shorter bar. */
.site-nav__logo-mark.ms-logo--gradient {
    width: clamp(40px, 4vw, 52px);
    aspect-ratio: 1;
    height: auto;
}
@media (max-width: 700px) {
    .site-nav__logo-mark.ms-logo--gradient { width: 38px; }
}
.ms-logo--gradient .ms-logo__fill {
    position: absolute;
    inset: 0;
    background: var(--grad);
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='black'%3E%3Crect x='0' y='0' width='22' height='100'/%3E%3Cpolygon points='78,0 78,0 100,22 100,100 78,100'/%3E%3Cpolygon points='22,0 44,0 50,100'/%3E%3Cpolygon points='56,0 78,0 50,100'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='black'%3E%3Crect x='0' y='0' width='22' height='100'/%3E%3Cpolygon points='78,0 78,0 100,22 100,100 78,100'/%3E%3Cpolygon points='22,0 44,0 50,100'/%3E%3Cpolygon points='56,0 78,0 50,100'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.ms-logo--gradient .ms-logo__glow {
    position: absolute;
    inset: -18%;
    background: var(--grad);
    filter: blur(36px);
    opacity: 0.35;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='black'%3E%3Crect x='0' y='0' width='22' height='100'/%3E%3Cpolygon points='78,0 78,0 100,22 100,100 78,100'/%3E%3Cpolygon points='22,0 44,0 50,100'/%3E%3Cpolygon points='56,0 78,0 50,100'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='black'%3E%3Crect x='0' y='0' width='22' height='100'/%3E%3Cpolygon points='78,0 78,0 100,22 100,100 78,100'/%3E%3Cpolygon points='22,0 44,0 50,100'/%3E%3Cpolygon points='56,0 78,0 50,100'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    pointer-events: none;
}

/* ===========================================================
   Wordmark — "MSoftware" with capital M + capital S
   Use .wordmark--gradient to put the brand gradient on the M only.
   =========================================================== */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.038em;
    color: var(--ink);
}
.wordmark__m { font-weight: 600; }
.wordmark__rest {
    font-size: 0.88em;
    font-weight: 500;
    letter-spacing: -0.030em;
}
.wordmark--gradient .wordmark__m {
    background: var(--grad);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.wordmark--muted { color: var(--ink-muted); }

/* ===========================================================
   Logo lockup: monogram + wordmark
   =========================================================== */
.logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    line-height: 1;
}
.logo-lockup:hover .wordmark { color: var(--ink); }

/* Gradient hairline border utility (mask trick) */
.ms-hair { position: relative; }
.ms-hair::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

/* ===========================================================
   Buttons — Linear-style
   =========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.05rem;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.005em;
    line-height: 1;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.btn-primary:hover:not(:disabled) {
    background: oklch(0.92 0 0);
    border-color: oklch(0.92 0 0);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-elev);
    color: var(--ink);
    border-color: var(--rule-strong);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--bg-elev-2);
    border-color: oklch(0.40 0.015 250);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border-color: var(--rule-strong);
}
.btn-ghost:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.btn-link {
    background: transparent;
    padding: 0.65rem 0.1rem;
    color: var(--ink-muted);
    border-radius: 0;
}
.btn-link:hover:not(:disabled) { color: var(--ink); }
.btn-link::after {
    content: '→';
    margin-left: 0.25rem;
    transition: transform 0.2s var(--ease-out);
    display: inline-block;
}
.btn-link:hover::after { transform: translateX(3px); }

.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.84rem; }

/* ===========================================================
   Site navigation
   =========================================================== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-height);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.25s var(--ease-out), backdrop-filter 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.site-nav.is-scrolled {
    background: oklch(0.085 0.008 250 / 0.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--rule);
}

.site-nav__inner {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
}

.site-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
}
.site-nav__brand .mark {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-nav__brand .word { color: var(--ink); }

.site-nav__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__links a {
    color: oklch(0.88 0.010 250);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: color 0.18s var(--ease-out);
}
.site-nav__links a:hover { color: var(--ink); }

.site-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
    margin-left: auto;
}

.site-nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    padding: 0.45rem;
    cursor: pointer;
    color: var(--ink);
}

@media (max-width: 900px) {
    .site-nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .site-nav__links { display: none; }
    .site-nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; }
    .site-nav__cta .btn-primary { display: none; }
}

/* ===========================================================
   Hero — dark, compressed, ambient auras
   =========================================================== */
.hero {
    position: relative;
    margin-top: calc(-1 * var(--nav-height));
    padding-top: calc(var(--nav-height) + clamp(3.5rem, 7vw, 6rem));
    padding-bottom: clamp(4rem, 9vw, 7rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
}

.hero__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

.hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    will-change: transform;
}
.hero__glow--violet {
    width: 55vw; height: 55vw;
    background: oklch(0.55 0.25 290);
    top: -20vw; right: -5vw;
    opacity: 0.35;
    animation: glow1 24s ease-in-out infinite alternate;
}
.hero__glow--coral {
    width: 45vw; height: 45vw;
    background: oklch(0.62 0.22 30);
    top: 5vw; right: 15vw;
    opacity: 0.20;
    animation: glow2 30s ease-in-out infinite alternate;
}
.hero__glow--cyan {
    width: 38vw; height: 38vw;
    background: oklch(0.60 0.18 215);
    bottom: -12vw; right: 30vw;
    opacity: 0.18;
    animation: glow3 28s ease-in-out infinite alternate;
}
@keyframes glow1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4vw, 3vh) scale(1.12); }
}
@keyframes glow2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-3vw, 2vh) scale(1.1); }
}
@keyframes glow3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5vw, -2vh) scale(1.15); }
}

.hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero__content { max-width: 38rem; }

.hero__stat {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.85rem 0.35rem 0.65rem;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 999px;
    opacity: 0;
    animation: heroFade 0.7s var(--ease-out) forwards;
}
.hero__stat-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px oklch(0.700 0.220 285 / 0.7);
    flex-shrink: 0;
}

.hero__title {
    font-size: clamp(2.2rem, 4.4vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    max-width: 16ch;
    color: var(--ink);
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    animation: heroFade 0.85s var(--ease-out) 0.1s forwards;
}
.hero__title-grad,
.hero__title em {
    font-style: normal;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero__sub {
    margin-top: 1.25rem;
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.55;
    color: var(--ink-muted);
    max-width: 50ch;
    opacity: 0;
    transform: translateY(12px);
    animation: heroFade 0.85s var(--ease-out) 0.22s forwards;
}

@keyframes heroFade {
    to { opacity: 1; transform: translateY(0); }
}

.hero__actions {
    margin-top: 1.85rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    opacity: 0;
    animation: heroFade 0.85s var(--ease-out) 0.34s forwards;
}

/* ===========================================================
   Hero showcase — morphing UI carousel (4 screens, 20s cycle)
   =========================================================== */
.hero__showcase {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    animation: heroFade 1s var(--ease-out) 0.4s forwards;
}

.showcase {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 5 / 4;
    background: var(--bg-elev);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 20px 50px -20px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--rule);
}
.showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 12px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.35;
    pointer-events: none;
    z-index: 3;
}

.showcase__chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    background: oklch(0.10 0.010 252);
    border-bottom: 1px solid var(--rule);
    position: relative;
    z-index: 2;
}
.showcase__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.75;
}
.showcase__dot--r { background: oklch(0.55 0.18 25); }
.showcase__dot--y { background: oklch(0.65 0.16 85); }
.showcase__dot--g { background: oklch(0.55 0.14 145); }
.showcase__url {
    margin-left: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-dim);
    letter-spacing: -0.005em;
}

.showcase__stage {
    position: relative;
    flex: 1;
    width: 100%;
    height: calc(100% - 2.5rem); /* chrome height */
}

.showcase__screen {
    position: absolute;
    inset: 0;
    padding: 1.15rem 1.3rem 1.3rem;
    opacity: 0;
    animation: showcase-cycle 20s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-sizing: border-box;
}
.showcase__screen:nth-child(1) { animation-delay: 0s; }
.showcase__screen:nth-child(2) { animation-delay: 5s; }
.showcase__screen:nth-child(3) { animation-delay: 10s; }
.showcase__screen:nth-child(4) { animation-delay: 15s; }

@keyframes showcase-cycle {
    0%   { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(2px); }
    3%   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    22%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    25%  { opacity: 0; transform: translateY(-6px) scale(1.01); filter: blur(2px); }
    100% { opacity: 0; }
}

/* ── Shared screen primitives ─────────────────────────── */
.screen__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}
.screen__eyebrow {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 0.25rem;
}
.screen__title {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.screen__pill {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.screen__pill--live {
    color: oklch(0.85 0.18 165);
    background: oklch(0.20 0.08 165);
    border: 1px solid oklch(0.32 0.10 165 / 0.5);
}
.screen__pill--live::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: oklch(0.78 0.18 165);
}
.screen__pill--filter {
    color: var(--ink-muted);
    background: var(--bg-elev-2);
    border: 1px solid var(--rule);
}

/* ── Screen 1: Dashboard ─────────────────────────────── */
.screen__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.kpi {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 0.55rem 0.6rem;
}
.kpi__value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kpi__label {
    font-size: 0.64rem;
    color: var(--ink-dim);
    margin-top: 0.25rem;
    font-weight: 500;
}
.screen__chart {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 0.65rem 0.65rem 0.5rem;
    flex: 1;
    min-height: 0;
}
.screen__chart svg { width: 100%; height: 100%; display: block; }

/* ── Screen 2: Klantportaal ──────────────────────────── */
.screen__chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.chip {
    font-size: 0.66rem;
    font-weight: 500;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--ink-muted);
}
.chip--on {
    background: var(--accent-soft);
    border-color: oklch(0.40 0.14 285 / 0.5);
    color: oklch(0.92 0.05 285);
}
.screen__table {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    overflow: hidden;
}
.row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 6px;
}
.row__id {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-dim);
}
.row__name {
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row__status {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
}
.row__status--ok {
    background: oklch(0.22 0.08 165);
    color: oklch(0.82 0.16 165);
}
.row__status--warn {
    background: oklch(0.24 0.12 60);
    color: oklch(0.82 0.16 75);
}

/* ── Screen 3: Integratie ────────────────────────────── */
.screen__flow {
    flex: 1;
    min-height: 0;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}
.screen__flow svg { width: 100%; height: 100%; }
.flow__bead { filter: drop-shadow(0 0 6px oklch(0.70 0.22 285 / 0.7)); }
.screen__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    color: var(--ink-dim);
    font-weight: 500;
}
.dotsep {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--rule-strong);
    display: inline-block;
}

/* ── Screen 4: Modernisering ─────────────────────────── */
.screen__split {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.6rem;
    align-items: stretch;
}
.screen__side {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 7px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    overflow: hidden;
}
.screen__side--old { opacity: 0.55; filter: saturate(0.4); }
.screen__side-label {
    position: absolute;
    bottom: 0.4rem;
    left: 0.6rem;
    right: 0.6rem;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--ink-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.codeline {
    height: 5px;
    background: var(--ink-dim);
    border-radius: 2px;
    opacity: 0.55;
}
.codeline.w-95 { width: 95%; } .codeline.w-72 { width: 72%; }
.codeline.w-88 { width: 88%; } .codeline.w-55 { width: 55%; }
.codeline.w-80 { width: 80%; } .codeline.w-66 { width: 66%; }
.codeline.w-90 { width: 90%; }
.screen__split-arrow {
    align-self: center;
    color: oklch(0.75 0.20 285);
    filter: drop-shadow(0 0 8px oklch(0.70 0.22 285 / 0.6));
}
.block {
    border-radius: 4px;
    background: var(--bg-elev-2);
}
.block--bar {
    height: 6px;
    background: var(--rule);
    overflow: hidden;
    position: relative;
}
.block--bar span {
    display: block;
    height: 100%;
    background: var(--grad);
    border-radius: 4px;
}
.block--card { height: 28px; }
.block--row { height: 8px; }
.block--row-sm { width: 60%; }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .hero__showcase {
        order: -1;
        margin-bottom: 0.5rem;
    }
    .showcase {
        max-width: 100%;
        aspect-ratio: 16 / 11;
    }
}
@media (max-width: 540px) {
    .showcase { aspect-ratio: 4 / 3; }
    .screen__title { font-size: 0.95rem; }
    .screen__url { font-size: 0.66rem; }
}

/* ===========================================================
   Services — dark cards with gradient hairline border
   =========================================================== */
.services__grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
/* Bento rhythm: wide / narrow, narrow / wide */
.services__grid > .service-card:nth-child(1) { grid-column: span 4; }
.services__grid > .service-card:nth-child(2) { grid-column: span 2; }
.services__grid > .service-card:nth-child(3) { grid-column: span 2; }
.services__grid > .service-card:nth-child(4) { grid-column: span 4; }
@media (max-width: 800px) {
    .services__grid { grid-template-columns: 1fr; }
    .services__grid > .service-card { grid-column: auto !important; }
}

.service-card {
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: clamp(1.5rem, 2.4vw, 2rem);
    transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s;
    overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .service-card {
        background: oklch(0.130 0.010 252 / 0.55);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.28;
    transition: opacity 0.3s var(--ease-out);
    pointer-events: none;
}
.service-card:hover {
    background: var(--bg-elev-2);
    border-color: var(--rule-strong);
    transform: translateY(-2px);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .service-card:hover { background: oklch(0.165 0.012 252 / 0.65); }
}
.service-card:hover::before { opacity: 0.7; }

.service-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: oklch(0.85 0.15 285);
    display: inline-grid;
    place-items: center;
    margin-bottom: 1.5rem;
    border: 1px solid oklch(0.40 0.14 285 / 0.4);
}
.service-card__icon svg { width: 20px; height: 20px; }

.service-card__heading {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.service-card__body {
    color: var(--ink-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.service-card__fit {
    margin-top: 1rem;
    font-size: 0.83rem;
    color: var(--ink-dim);
    line-height: 1.5;
}
.service-card__fit strong { color: var(--ink); font-weight: 600; }

/* ===========================================================
   Process — dark feature row with gradient numbers
   =========================================================== */
.process__grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.2vw, 2rem);
}
@media (max-width: 900px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process__grid { grid-template-columns: 1fr; } }

.process__step { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.process__step .num {
    display: inline-block;
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 1.1rem;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.process__step h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}
.process__step p {
    color: var(--ink-muted);
    font-size: 0.93rem;
    line-height: 1.55;
}

/* ===========================================================
   About — sticky statement + commitments
   =========================================================== */
.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.about__statement {
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.018em;
    max-width: 22ch;
    color: var(--ink);
}

@media (min-width: 900px) {
    .about__statement { position: sticky; top: calc(var(--nav-height) + 3rem); }
}

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

.commitments li {
    padding-block: 1.25rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.commitments li + li { border-top: 1px solid var(--rule); }

.commitments li::before {
    content: '';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 0.2rem;
    flex-shrink: 0;
    border: 1px solid oklch(0.40 0.14 285 / 0.4);
}

.commitments strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 0.3rem;
}

.commitments span {
    color: var(--ink-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .about__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ===========================================================
   Tech pills — dark
   =========================================================== */
.techstack__pills {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}
.techstack__pills li {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--bg-elev);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.techstack__pills li:hover {
    border-color: oklch(0.40 0.14 285 / 0.6);
    color: var(--ink);
    background: var(--bg-elev-2);
}

/* ===========================================================
   Contact — dark form
   =========================================================== */
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.contact__statement {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 14ch;
    margin-bottom: 1.25rem;
    color: var(--ink);
}
.contact__statement em {
    font-style: normal;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact__intro {
    color: var(--ink-muted);
    max-width: 40ch;
    margin-bottom: 2.25rem;
    font-size: 0.98rem;
}

.contact__info dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--ink-dim);
    margin-top: 1.3rem;
    margin-bottom: 0.3rem;
    font-weight: 500;
}
.contact__info dt:first-of-type { margin-top: 0; }
.contact__info dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.contact__info dd a {
    color: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 1px;
}
.contact__info dd a:hover {
    color: oklch(0.85 0.15 285);
    border-bottom-color: var(--accent);
}

.contact__tape {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    text-transform: uppercase;
    line-height: 1.7;
}

.contact__form {
    display: flex;
    flex-direction: column;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .contact__form {
        background: oklch(0.130 0.010 252 / 0.55);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}

.field { margin-bottom: 1.1rem; position: relative; }

.field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 540px) { .field--row { grid-template-columns: 1fr; gap: 1rem; } }

.field label,
.field .label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.95rem;
    font-family: inherit;
    border-radius: 7px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

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

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px oklch(0.700 0.220 285 / 0.20);
}

.field select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
        linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}
.field select option { background: var(--bg-elev); color: var(--ink); }

.field .validation-message {
    color: oklch(0.78 0.20 25);
    font-size: 0.8rem;
    margin-top: 0.35rem;
    display: block;
}

.field--honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.form-result {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    border-radius: 8px;
    background: oklch(0.18 0.10 285);
    border: 1px solid oklch(0.30 0.14 285 / 0.5);
    color: var(--ink);
}
.form-result--success { color: var(--ink); }
.form-result--error {
    background: oklch(0.22 0.10 25);
    border-color: oklch(0.40 0.16 25 / 0.5);
}

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid oklch(1 0 0 / 0.25);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .contact__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
    border-top: 1px solid var(--rule);
    padding-block: 2rem;
    font-size: 0.85rem;
    color: var(--ink-dim);
    background: var(--bg);
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.site-footer__brand {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.site-footer__brand .mark {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-footer__brand .word { color: var(--ink); }
.site-footer__meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.site-footer a:hover { color: var(--ink); }

[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }

/* ===========================================================
   Scroll reveal
   =========================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 50ms);
}
[data-reveal].is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================
   Blazor framework overrides
   =========================================================== */
#blazor-error-ui {
    background: var(--bg-elev);
    color: var(--ink);
    border-top: 1px solid oklch(0.55 0.22 25);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.85rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
}
#blazor-error-ui .reload { color: var(--accent); margin-left: 0.5rem; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--ink-dim);
}

.blazor-error-boundary {
    background: oklch(0.18 0.10 25);
    padding: 1rem 1.25rem;
    color: var(--ink);
    border-radius: 8px;
}
.blazor-error-boundary::after { content: "Er ging iets mis bij het laden van dit onderdeel."; }

/* ===========================================================
   Mobile fine-tuning
   =========================================================== */

/* Nav permanent solid op mobile (geen glow-leak door de balk).
   Desktop blur-effect blijft >900px intact. */
@media (max-width: 900px) {
    .site-nav,
    .site-nav.is-scrolled {
        background: var(--bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid var(--rule);
    }

    /* Hero begint NA de nav (geen negatieve margin meer) — voorkomt overlap met menu. */
    .hero {
        margin-top: 0;
    }
}

/* Futureproof: ook desktop nav forceren solid wanneer mobiel menu open is. */
.site-nav:has(.site-nav__toggle-state:checked) {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
}

@media (max-width: 700px) {
    :root { --nav-height: 56px; }

    .section { padding-block: clamp(3.5rem, 8vw, 4.5rem); }
    .section--tight { padding-block: clamp(2.25rem, 5vw, 2.75rem); }

    .hero { padding-top: clamp(2.5rem, 6vw, 3.5rem); padding-bottom: clamp(3.5rem, 8vw, 5rem); }
    .hero__title { font-size: clamp(1.95rem, 9vw, 2.5rem); max-width: 100%; }
    .hero__sub { margin-top: 1rem; font-size: 0.98rem; }
    .hero__actions { margin-top: 1.5rem; }
    .hero__actions .btn-primary { width: 100%; justify-content: center; }
    .hero__actions .btn-secondary { width: 100%; justify-content: center; }
    .btn { min-height: 44px; }

    .section__title { font-size: clamp(1.6rem, 6vw, 2.1rem); }
    .section__lead { font-size: 0.98rem; }

    .about__statement { font-size: clamp(1.45rem, 6vw, 1.8rem); max-width: 24ch; }
    .commitments li { padding-block: 1.1rem; }
    .commitments strong { font-size: 0.98rem; }

    .contact__statement { font-size: clamp(1.75rem, 7.5vw, 2.3rem); }
    .contact__info dt { margin-top: 1.15rem; }
    .contact__grid { gap: 2.5rem; }

    .site-nav__brand { font-size: 0.95rem; }
}

@media (max-width: 380px) {
    .hero__title { font-size: clamp(1.75rem, 10vw, 2.3rem); }
    .section__title { font-size: clamp(1.45rem, 6.5vw, 1.9rem); }
    .contact__statement { font-size: clamp(1.6rem, 8vw, 2rem); }
}

/* ===========================================================
   Film-grain texture overlay (premium surface)
   =========================================================== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===========================================================
   GSAP motion system
   When .gsap-active is on <html>, JS owns hero entrance + reveals.
   Hand off the CSS keyframe entrances so GSAP's from() drives them.
   =========================================================== */
.gsap-active .hero__title,
.gsap-active .hero__sub,
.gsap-active .hero__actions,
.gsap-active .hero__stat {
    opacity: 1;
    transform: none;
    animation: none;
}
.gsap-active [data-reveal] {
    /* GSAP sets the start state; avoid double-applying the CSS transition. */
    transition: none;
}

/* ── Top scroll-progress bar ─────────────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 60;
    pointer-events: none;
    background: transparent;
}
.scroll-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad);
    box-shadow: 0 0 12px oklch(0.700 0.220 285 / 0.5);
}

/* ── Cursor-follow ambient glow (fine pointers only) ─────── */
.cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 420px; height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: radial-gradient(circle, oklch(0.700 0.220 285 / 0.10) 0%, transparent 60%);
    transition: opacity 0.4s var(--ease-out);
    will-change: transform;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* ── Card spotlight (pointer-driven radial via --mx/--my) ── */
[data-spotlight] { position: relative; }
[data-spotlight]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                oklch(0.700 0.220 285 / 0.14), transparent 65%);
}
@media (hover: hover) and (pointer: fine) {
    [data-spotlight]:hover::before { opacity: 1; }
}

/* ── Magnetic buttons ─────────────────────────────────────── */
[data-magnetic] { will-change: transform; }

/* ── Process: animated progress line ─────────────────────── */
.process__grid { position: relative; }
.process__progress {
    position: absolute;
    top: 12px;
    left: 0; right: 0;
    height: 2px;
    background: var(--rule);
    overflow: hidden;
    z-index: 0;
}
.process__progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad);
}
.process__step { position: relative; z-index: 1; }
@media (max-width: 760px) { .process__progress { display: none; } }

/* ── Tech-stack marquee ──────────────────────────────────── */
.marquee {
    margin-top: 1.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .techstack__pills {
    margin-top: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding-right: 0.5rem;
}
/* Slides by exactly one of the 5 copies (-100%/5) so the loop is seamless and gap-free. */
@keyframes marquee { to { transform: translateX(-20%); } }

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee__track { animation: none !important; transform: none !important; }
    .marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .marquee .techstack__pills:not(:first-child) { display: none; }
    .cursor-glow { display: none !important; }
    .scroll-progress { display: none; }
    .process__progress-fill { transform: scaleX(1) !important; }
    .hero__title, .hero__stat, .hero__sub, .hero__actions, .hero__visual {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .hero__glow, .hero__card--accent { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}