/* ==========================================================================
   123webpage.nl — marketing site
   Own visual language (NOT shared with 123webshop): warm "paper & ink"
   editorial look, electric iris + coral accents, grain texture, dotted
   backgrounds, hand-drawn underlines, oversized numerals, light + dark.
   Custom layer on top of Tailwind v4 (browser build). Theme tokens that
   Tailwind can't express live here as CSS custom properties and flip on .dark
   ========================================================================== */

:root {
    --bg:           #f6f4ef;
    --bg-2:         #efebe2;
    --surface:      #ffffff;
    --surface-2:    #faf8f3;
    --text:         #1a1622;
    --text-soft:    #57506a;
    --text-muted:   #8b8499;
    --border:       rgba(26, 22, 34, .10);
    --border-strong:rgba(26, 22, 34, .18);
    --iris:         #334155;
    --iris-soft:    rgba(51, 65, 85, .12);
    --coral:        #ff6a4d;
    --coral-soft:   rgba(255, 106, 77, .14);
    --ink-shadow:   rgba(26, 22, 34, .9);
    --soft-shadow:  0 22px 50px -28px rgba(26, 22, 34, .45);
    --grain:        .045;
    color-scheme: light;
}
.dark {
    --bg:           #0b1120;
    --bg-2:         #111a2e;
    --surface:      #16203a;
    --surface-2:    #1d2942;
    --text:         #f1f5f9;
    --text-soft:    #cbd5e1;
    --text-muted:   #94a3b8;
    --border:       rgba(255, 255, 255, .10);
    --border-strong:rgba(255, 255, 255, .20);
    --iris:         #cbd5e1;
    --iris-soft:    rgba(203, 213, 225, .16);
    --coral:        #ff7d63;
    --coral-soft:   rgba(255, 125, 99, .18);
    --ink-shadow:   rgba(0, 0, 0, .85);
    --soft-shadow:  0 26px 64px -30px rgba(0, 0, 0, .75);
    --grain:        .06;
    color-scheme: dark;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); }

/* Smooth, deliberate theme transition (skipped for reduced-motion) */
body, .surface, .surface-2, .ui-card, .browser, .price-card, .step-card,
.q-item, .pill, .footer-x {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease;
}
[x-collapse] {
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
    transition-duration: 380ms !important;
    will-change: height;
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---- Film grain: one fixed overlay, premium "printed paper" feel ---- */
.grain::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--grain);
    mix-blend-mode: var(--grain-blend, multiply);
    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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .grain::before { --grain-blend: screen; }

/* ---- Surfaces driven by theme tokens ---- */
.surface   { background: var(--surface); }
.surface-2 { background: var(--surface-2); }
.bg-app    { background: var(--bg); }
.bg-app-2  { background: var(--bg-2); }
.t-ink     { color: var(--text); }
.t-soft    { color: var(--text-soft); }
.t-muted   { color: var(--text-muted); }
.bdr       { border-color: var(--border); }
.bdr-strong{ border-color: var(--border-strong); }

/* ---- Soft aura background (signature wash — replaces the old dot grid) ---- */
.aura {
    background:
        radial-gradient(58% 48% at 14% -4%, color-mix(in srgb, var(--coral) 15%, transparent), transparent 70%),
        radial-gradient(52% 46% at 90% 4%, color-mix(in srgb, var(--iris) 16%, transparent), transparent 72%),
        radial-gradient(80% 60% at 50% 120%, color-mix(in srgb, var(--iris) 8%, transparent), transparent 70%);
}

/* ---- Ambient color blobs (soft, behind hero / dark bands) ---- */
.blobs { position: relative; isolation: isolate; overflow: hidden; }
.blob {
    position: absolute; z-index: -1; border-radius: 9999px;
    filter: blur(80px); pointer-events: none; opacity: .55;
}
.dark .blob { opacity: .5; }
.blob-iris  { background: radial-gradient(circle at center, var(--iris), transparent 66%); }
.blob-coral { background: radial-gradient(circle at center, var(--coral), transparent 66%); }

/* ---- Gradient & marker text ---- */
.grad-iris {
    background: linear-gradient(100deg, #475569 0%, #f74e30 76%, #ff6a4d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark .grad-iris {
    background: linear-gradient(100deg, #cbd5e1 0%, #ff8a72 80%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hand-drawn marker underline under a key word (SVG stroke, drawn on reveal) */
.marker { position: relative; white-space: nowrap; }
.marker svg {
    position: absolute; left: -.06em; right: -.06em; bottom: -.12em; width: calc(100% + .12em); height: .42em;
    overflow: visible; pointer-events: none;
}
.marker svg path {
    fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round;
    stroke-dasharray: var(--len, 420); stroke-dashoffset: var(--len, 420);
    transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .25s;
}
.in-view .marker svg path, .marker.in-view svg path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .marker svg path { stroke-dashoffset: 0; } }

/* ---- Logo wordmark ---- */
.logo-num {
    background: linear-gradient(120deg, #334155 0%, #475569 45%, #ff6a4d 125%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark .logo-num {
    background: linear-gradient(120deg, #e2e8f0 0%, #cbd5e1 45%, #ff8a72 125%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Pills / tags ---- */
.pill {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-soft);
}

/* ---- Primary CTA: modern, minimalist solid with a soft accent glow ---- */
.btn-iris {
    position: relative; isolation: isolate;
    background: var(--iris); color: #fff;
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--iris) 65%, transparent);
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, filter .2s ease;
}
.btn-iris:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -10px color-mix(in srgb, var(--iris) 80%, transparent); }
.btn-iris:active { transform: translateY(0); filter: brightness(.97); }
.dark .btn-iris { color: #0b1120; }   /* dark text on the light-slate button used in dark mode */

/* Attention pulse for the key CTAs — an expanding accent ring (opt-in) */
.btn-pulse::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--iris) 55%, transparent);
    animation: cta-pulse 2.6s cubic-bezier(.66, 0, 0, 1) infinite;
}
.btn-pulse:hover::after { animation-play-state: paused; }
@keyframes cta-pulse {
    0%        { box-shadow: 0 0 0 0   color-mix(in srgb, var(--iris) 50%, transparent); }
    70%, 100% { box-shadow: 0 0 0 15px color-mix(in srgb, var(--iris) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .btn-pulse::after { animation: none; } }

/* Ghost / ink button */
.btn-ink {
    background: var(--text); color: var(--bg);
    transition: transform .16s ease, opacity .16s ease;
}
.btn-ink:hover { transform: translateY(-2px); opacity: .92; }

/* ---- Cards ---- */
.ui-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1.5rem;
}
.lift { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: var(--soft-shadow); border-color: var(--border-strong); }

/* ---- Oversized editorial step numeral ---- */
.numeral {
    font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
    font-weight: 800; line-height: .8; letter-spacing: -.04em;
    background: linear-gradient(160deg, var(--iris), var(--coral));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numeral-ghost {
    font-family: var(--font-display, "Bricolage Grotesque"), sans-serif;
    font-weight: 800; line-height: .8; letter-spacing: -.05em;
    color: color-mix(in srgb, var(--coral) 80%, var(--text-muted));
}

/* ==========================================================================
   Browser frame (own chrome — pill tab + dots, distinct from siblings)
   ========================================================================== */
.browser {
    border-radius: 1.1rem; overflow: hidden;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--soft-shadow);
}
.browser-bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .85rem; border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.browser-dots { display: flex; gap: .35rem; }
.browser-dots i { width: .62rem; height: .62rem; border-radius: 9999px; display: block; background: var(--border-strong) !important; }
.browser-dots i:first-child { background: var(--coral) !important; }   /* the markup still carries the old traffic-light colours inline */
.browser-url {
    flex: 1; display: flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono, "JetBrains Mono"), monospace;
    font-size: .72rem; color: var(--text-muted);
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 9999px; padding: .28rem .7rem; min-width: 0;
}
.browser-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   BEFORE / AFTER drag reveal — the "wtf" moment
   Two stacked mini-sites; the top (BEFORE) is clipped to the handle position.
   ========================================================================== */
.ba {
    position: relative; user-select: none; overflow: hidden;
    border-radius: .85rem; isolation: isolate;
    touch-action: pan-y;
}
.ba-pane { position: relative; }
.ba-after { position: relative; z-index: 1; }
.ba-before {
    position: absolute; inset: 0; z-index: 2;
    width: 100%;
    clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
    will-change: clip-path;
}
.ba-tag {
    flex-shrink: 0;
    font-family: var(--font-mono, monospace); font-size: .62rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 9999px; color: #fff;
}
.ba-tag-before { background: #b4282f; }
.ba-tag-after  { background: #16a34a; }
.ba-handle {
    position: absolute; top: 0; bottom: 0; z-index: 4;
    left: var(--pos, 50%); width: 0; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center;
    cursor: ew-resize;
}
.ba-handle::before {
    content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
    background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 22px rgba(0,0,0,.35);
}
.ba-knob {
    position: relative; width: 2.85rem; height: 2.85rem; border-radius: 9999px;
    background: #fff; color: #1a1622; display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(0,0,0,.32); border: 1px solid rgba(0,0,0,.06);
}
.ba-knob i { width: 1.15rem; height: 1.15rem; }
.ba:focus-within .ba-knob { outline: 3px solid var(--iris); outline-offset: 2px; }

/* The two mini fake websites used inside the slider (self-contained styling) */
.mini { height: 100%; min-height: 320px; font-family: Arial, Helvetica, sans-serif; }
/* BEFORE: deliberately dated 2009 look */
.mini-old { background: #e9e6da; color: #222; }
.mini-old .m-top { background: #1d4f8b; background: linear-gradient(#2a66ad, #163e6e); color: #fff; padding: 10px 14px; border-bottom: 3px solid #c9a227; }
.mini-old .m-logo { font-family: "Times New Roman", serif; font-weight: 700; font-size: 18px; text-shadow: 1px 1px 0 #0c2747; }
.mini-old .m-nav { display: flex; gap: 2px; margin-top: 8px; flex-wrap: wrap; }
.mini-old .m-nav b { background: #c9a227; color: #3a2d00; font-size: 10px; padding: 3px 8px; border: 1px solid #fff; }
.mini-old .m-hero { background: #b9d0e8; border: 2px ridge #98b6d6; margin: 10px; padding: 12px; }
.mini-old .m-h1 { font-size: 16px; color: #b4282f; font-weight: 700; }
.mini-old .m-body { padding: 0 12px 12px; font-size: 11px; color: #444; line-height: 1.5; }
.mini-old .m-btn { display: inline-block; margin-top: 8px; background: linear-gradient(#f6d365,#d99e1a); border: 1px solid #9c6f00; color: #3a2d00; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 3px; }
.mini-old .m-blink { color: #b4282f; font-weight: 700; }
/* AFTER / every illustrated "site" on the page (the point-at-it demo, the how-it-works screens,
   the fallback mocks): a WIREFRAME in the vocabulary of the "your site?" card — ink pills for
   headings, grey lines for copy, coral for the action, a peach picture. The words stay in the
   markup (they are what the demos point at) but are not drawn: font-size 0, fixed bar sizes. */
.mini-new { --ink: 26, 22, 34; background: #fff; color: transparent; font-family: "Inter", Arial, sans-serif; font-size: 0; line-height: 0; }
.mini-new .m-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid rgba(var(--ink), .07); }
.mini-new .m-logo { flex: none; width: 68px; height: 13px; border-radius: 99px; background: rgba(var(--ink), .82); }
.mini-new .m-logo span { display: none; }
.mini-new .m-nav { display: flex; gap: 10px; margin-left: auto; }
.mini-new .m-nav span { display: block; width: 32px; height: 7px; border-radius: 99px; background: rgba(var(--ink), .16); }
.mini-new .m-cta { flex: none; width: 64px; height: 24px; border-radius: 99px; background: var(--coral); }
.mini-new .m-hero { position: relative; padding: 22px 46% 18px 18px; background: linear-gradient(180deg, #fbf7f1, #fff); }
.mini-new .m-hero::after, .mini-new .m-pic {
    content: ""; position: absolute; right: 18px; top: 18px; bottom: 14px; width: calc(46% - 42px); border-radius: 14px;
    background: radial-gradient(circle at 72% 30%, #ff8a70 0 9%, transparent 9.6%), linear-gradient(158deg, transparent 60%, #f3b3a1 60.5%), linear-gradient(135deg, #ffe3d8, #f7ead9);
}
.mini-new .m-eyebrow { width: 38%; height: 6px; border-radius: 99px; background: rgba(var(--ink), .2); }
.mini-new .m-h1 { position: relative; width: 96%; height: 14px; margin: 13px 0 35px; border-radius: 99px; background: rgba(var(--ink), .82); }
.mini-new .m-h1::after { content: ""; position: absolute; left: 0; top: 22px; width: 64%; height: 14px; border-radius: 99px; background: rgba(var(--ink), .82); }
.mini-new .m-sub { position: relative; width: 88%; height: 7px; margin: 14px 0 13px; border-radius: 99px; background: rgba(var(--ink), .13); }
.mini-new .m-sub::after { content: ""; position: absolute; left: 0; top: 13px; width: 68%; height: 7px; border-radius: 99px; background: rgba(var(--ink), .13); }
.mini-new .m-row { display: flex; gap: 8px; margin-top: 25px; }
.mini-new .m-chip { display: block; width: 76px; height: 24px; padding: 0; border: 0; border-radius: 99px; background: var(--coral); }
.mini-new .m-chip + .m-chip { width: 60px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(var(--ink), .2); }
.mini-new .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 18px 18px; }
.mini-new .m-card { padding: 12px 12px 14px; border-radius: 12px; background: #faf8f3; border: 1px solid rgba(var(--ink), .09); }
.mini-new .m-card .d { width: 20px; height: 20px; border-radius: 7px; background: linear-gradient(135deg, #334155, var(--coral)); }
.mini-new .m-card p { position: relative; width: 70%; height: 6px; margin: 13px 0 11px; border-radius: 99px; background: rgba(var(--ink), .5); }
.mini-new .m-card p::after { content: ""; position: absolute; left: 0; top: 11px; width: 124%; height: 5px; border-radius: 99px; background: rgba(var(--ink), .13); }
/* fuller site body for the point-at-it (4) + live (6) screens */
.mini-new .m-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 18px 0; }
.mini-new .m-feat { padding: 10px 11px 12px; border-radius: 12px; background: #faf8f3; border: 1px solid rgba(var(--ink), .09); }
.mini-new .m-feat .ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #334155, var(--coral)); }
.mini-new .m-feat .ic svg, .mini-new .m-feat .ic i { width: 12px; height: 12px; }
.mini-new .m-feat .l1 { width: 70%; height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(var(--ink), .5); }
.mini-new .m-feat .l2 { width: 92%; height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(var(--ink), .13); }
.mini-new .m-gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; padding: 10px 18px 16px; }
.mini-new .m-shot { height: 42px; border-radius: 12px; background: linear-gradient(135deg, #c9d3e0, #e6ebf2); }
.mini-new .m-shot:last-child { background: linear-gradient(135deg, #ffe3d8, #f7ead9); }

/* ==========================================================================
   Revision demo — point & click comment pin
   ========================================================================== */
.pin {
    position: absolute; z-index: 5; width: 1.9rem; height: 1.9rem;
    border-radius: 9999px 9999px 9999px 2px; transform: rotate(-2deg);
    background: var(--coral); color: #fff; display: grid; place-items: center;
    box-shadow: 0 8px 20px -6px rgba(255,106,77,.7); font-weight: 800; font-size: .8rem;
    animation: pin-pop .5s cubic-bezier(.18,.9,.32,1.4) both;
}
@keyframes pin-pop { 0% { transform: scale(0) rotate(-2deg); } 100% { transform: scale(1) rotate(-2deg); } }
[data-rev-note] { background: #1a1622 !important; line-height: 1.35; }   /* ink comment bubble (the markup's utility class says slate) */
.cursor-ghost {
    position: absolute; top: 0; left: 0; z-index: 6; pointer-events: none;
    width: 1.25rem; height: 1.25rem; color: var(--text);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* ==========================================================================
   Animations / utilities
   ========================================================================== */
/* Fail-safe reveal: elements only start hidden while JS is running (<html class="js">, set in
   the head and removed again if site.js hasn't booted within 4s) — no-JS/failed-JS shows all. */
[data-animate] {
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--d, 0s);
}
.js [data-animate]:not(.in-view) { opacity: 0; transform: translateY(26px); }
[data-animate].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-animate] { opacity: 1; transform: none; } }

/* SVG flow lines drawn on scroll */
.draw-path {
    stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) var(--d, 0s);
}
.in-view .draw-path, .draw-path.in-view { stroke-dashoffset: 0; }
.flow-dash { stroke-dasharray: 5 9; animation: flow-dash 1.1s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .flow-dash { animation: none; } .draw-path { stroke-dashoffset: 0; transition: none; } }

/* Auto-advancing step spotlight (hoe-het-werkt) */
.step-tile { box-shadow: var(--soft-shadow); }
.step-tile-on {
    background: linear-gradient(150deg, var(--iris), var(--coral));
    transform: scale(1.06);
    box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--iris) 60%, transparent);
}
.step-tile-on svg { animation: step-bob 1.5s ease-in-out infinite; }
@keyframes step-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Horizontal stepper nodes */
.step-node-done { background: var(--iris); }
.step-node-on {
    background: linear-gradient(150deg, var(--iris), var(--coral));
    transform: scale(1.12);
    box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--iris) 55%, transparent);
}
.step-node-on svg { animation: step-bob 1.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .step-tile-on, .step-node-on { transform: none; }
    .step-tile-on svg, .step-node-on svg { animation: none; }
}

/* ==========================================================================
   "Movie" stage — animated scene per step (hoe-het-werkt)
   ========================================================================== */
.movie-screen {
    position: relative; height: 19rem; overflow: hidden;
    background: linear-gradient(180deg, #fbf7f1, #fff);
}
@media (min-width: 640px) { .movie-screen { height: 22rem; } }
.scene { position: absolute; inset: 0; }
.scene .mini { height: 100%; }
.scene-pad { display: grid; place-items: center; padding: 1.25rem; }
.scene-center { width: 100%; max-width: 22rem; }
.scene-label { text-align: center; font-size: .8rem; font-weight: 600; color: var(--text-soft); margin-bottom: .8rem; }

@keyframes fly-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop-in  { from { opacity: 0; transform: scale(.7); }        to { opacity: 1; transform: none; } }
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 1 · address typing */
.addr-field {
    display: flex; align-items: center; gap: .55rem; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: .8rem; padding: .75rem .9rem; box-shadow: var(--soft-shadow);
}
.addr-type {
    font-family: var(--font-mono, "JetBrains Mono"), monospace; font-size: .85rem; color: var(--text);
    white-space: nowrap; overflow: hidden; display: inline-block; max-width: 0;
    animation: addr-type 1.3s steps(14) .4s forwards;
}
@keyframes addr-type { to { max-width: 8.6rem; } }
.addr-caret { width: 2px; height: 1.05rem; background: var(--iris); animation: caret-blink .8s steps(1) infinite; }
.addr-btn {
    margin-top: .9rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--coral); color: #1a1622; font-size: .8rem; font-weight: 800;
    border-radius: .8rem; padding: .75rem 1rem; opacity: 0;
    animation: fly-in .45s 1.9s both, addr-press .4s 2.6s 1;
}
@keyframes addr-press { 0%, 100% { transform: none; } 50% { transform: scale(.95); } }

/* 2 · build: blocks + images fly in, then optimize chips pop */
.scene-build .bx  { opacity: 0; animation: fly-in .55s both;  animation-delay: calc(var(--i, 0) * .16s); }
.scene-build .img { opacity: 0; animation: img-fly .65s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: calc(var(--i, 0) * .16s); }
/* a slightly tighter wireframe here: the status chips sit under the cards, not on them */
.scene-build .mini-new .m-hero { padding-top: 16px; padding-bottom: 12px; }
.scene-build .mini-new .m-cards { padding-top: 10px; }
.scene-build .mini-new .m-card { padding: 10px 12px; }
.scene-build .mini-new .m-card p { margin: 10px 0 9px; }
@keyframes img-fly { from { opacity: 0; transform: translate(26px, -22px) scale(.3) rotate(8deg); } to { opacity: 1; transform: none; } }
.build-status {
    position: absolute; left: 0; right: 0; bottom: .8rem; z-index: 4;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0 .9rem;
}
.bchip {
    display: inline-flex; align-items: center; gap: .28rem; opacity: 0;
    background: var(--surface); border: 1px solid var(--border); border-radius: 9999px;
    padding: .28rem .6rem; font-size: .64rem; font-weight: 700; color: var(--text);
    box-shadow: var(--soft-shadow); animation: pop-in .45s both; animation-delay: calc(var(--i, 0) * .16s);
}

/* 3 · notifications */
.scene-notify { display: flex; flex-direction: column; gap: .75rem; max-width: 20rem; }
.toast {
    display: flex; align-items: center; gap: .7rem; opacity: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 1rem; padding: .8rem .9rem; box-shadow: var(--soft-shadow);
    animation: toast-in .6s var(--t, 0s) both;
}
.toast-ico { display: grid; place-items: center; height: 2.4rem; width: 2.4rem; border-radius: 9999px; flex: none; }
.toast-t { font-size: .82rem; font-weight: 700; color: var(--text); }
.toast-s { font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }

/* 4 · point & click */
.scene-click .mini { position: relative; }
.rev-cursor {
    position: absolute; top: 0; left: 0; width: 1.3rem; height: 1.3rem; color: var(--text); z-index: 6;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); transform: translate(250px, 200px);
    animation: rev-move 1.3s .3s forwards;
}
@keyframes rev-move { to { transform: translate(70px, 100px); } }
.rev-ripple {
    position: absolute; left: 64px; top: 95px; width: 14px; height: 14px; border-radius: 9999px;
    background: var(--coral); opacity: 0; z-index: 5; animation: ripple 1s 1.5s;
}
@keyframes ripple { 0% { opacity: .5; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.4); } }
.rev-bubble {
    position: absolute; left: 92px; top: 126px; z-index: 7; white-space: nowrap; opacity: 0;
    background: #1a1622; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3;
    padding: .45rem .7rem; border-radius: .7rem; box-shadow: var(--soft-shadow);
    transform-origin: left top; animation: bubble-pop .4s 1.7s both;
}
@keyframes bubble-pop { from { opacity: 0; transform: translateY(6px) scale(.8); } to { opacity: 1; transform: none; } }
.click-target { animation: target-flash 1.3s 1.9s; }
@keyframes target-flash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--coral); } }

/* 5 · choose a plan */
.pick-card {
    position: relative; text-align: center; opacity: 0;
    background: var(--surface); border: 2px solid var(--text); border-radius: 1.1rem;
    padding: 1.4rem 1.7rem; box-shadow: var(--soft-shadow); animation: fly-in .5s .2s both;
}
.pick-name { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.pick-price { font-family: var(--font-display, "Bricolage Grotesque"), sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--text); margin-top: .15rem; }
.pick-price span { font-size: .8rem; font-weight: 600; color: var(--text-soft); }
.pick-stamp {
    display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; opacity: 0;
    background: var(--coral); color: #1a1622; font-size: .78rem; font-weight: 800;
    padding: .4rem .85rem; border-radius: 9999px; animation: stamp .5s 1s both;
}
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-10deg); } 60% { opacity: 1; transform: scale(.9) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }

/* 6 · live + confetti */
.scene-live .mini { position: relative; }
.live-badge {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 5; opacity: 0;
    display: inline-flex; align-items: center; gap: .35rem;
    background: #059669; color: #fff; font-size: .64rem; font-weight: 800; letter-spacing: .03em;
    padding: .35rem .7rem; border-radius: 9999px; box-shadow: 0 10px 22px -8px rgba(5,150,105,.6);
    animation: stamp .5s .3s both;
}
.mini-new .live-badge, .mini-new .rev-bubble { line-height: 1.3; }   /* real words inside a wireframe site */
.live-dot { width: .4rem; height: .4rem; border-radius: 9999px; background: #fff; animation: caret-blink 1s infinite; }
.confetti {
    position: absolute; top: -8%; left: var(--x, 50%); width: .5rem; height: .7rem; border-radius: 1px;
    background: var(--cc, var(--iris)); opacity: 0; animation: confetti-fall 1.7s var(--delay, 0s) ease-in forwards;
}
@keyframes confetti-fall {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translateY(380px) rotate(560deg); }
}

/* 7 · grows with you */
.grow-banner {
    display: flex; align-items: center; justify-content: center; gap: .4rem; overflow: hidden;
    background: var(--coral); color: #1a1622; line-height: 1.3;
    font-size: .66rem; font-weight: 800; max-height: 0; opacity: 0;
    animation: banner-grow .5s .4s forwards;
}
@keyframes banner-grow { to { max-height: 2rem; opacity: 1; padding: .4rem; } }
.scene-grow .grow-new { opacity: 0; box-shadow: 0 0 0 2px var(--coral); animation: pop-in .5s 1s both; }

@media (prefers-reduced-motion: reduce) {
    .scene, .scene * { animation: none !important; }
    .addr-type { max-width: 8.6rem !important; }
    .grow-banner { max-height: 2rem !important; opacity: 1 !important; padding: .4rem !important; }
    .addr-btn, .toast, .pick-card, .pick-stamp, .scene-build .bx, .scene-build .img,
    .bchip, .live-badge, .grow-new, .rev-bubble { opacity: 1 !important; }
    .rev-cursor, .rev-ripple, .confetti { display: none !important; }
}

/* Animated progress / score bars */
.bar-fill { width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1) var(--d, .2s); }
.in-view .bar-fill { width: var(--w, 60%); }

/* Floating ornaments */
.float-a { animation: float-y 7s ease-in-out infinite; }
.float-b { animation: float-y 9s ease-in-out 1.1s infinite; }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .float-a,.float-b { animation: none; } }

/* Looping benefit badges around the hero browser.
   Each deck stacks N cards in one spot; they fade in/out one at a time. */
.badge-deck {
    position: absolute; z-index: 5; width: 17rem; height: 4.9rem;
    pointer-events: none; filter: drop-shadow(var(--soft-shadow));
}
.badge-deck--tl { left: -1.5rem;  top: -1.75rem; }
.badge-deck--tr { right: -1.25rem; top: -1.75rem; }
.badge-deck--bl { left: -1.5rem;  bottom: 2.25rem; }
.badge-deck--br { right: -1.25rem; bottom: 2.25rem; }
.badge-card {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: .8rem;
    padding: .9rem 1.05rem;
    /* Dark ink card (both themes) so the badges pop against the light hero */
    background: #211a31; border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.15rem;
    opacity: 0; will-change: opacity, transform;
    /* 4.6s per card → ~37s full loop (8 cards, one at a time): slow, calm rotation */
    animation: badge-cycle calc(var(--n, 8) * 4.6s) ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 4.6s);
}
.badge-ico {
    display: grid; place-items: center; flex: none;
    height: 2.5rem; width: 2.5rem; border-radius: 9999px;
}
.badge-t { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.badge-s { font-size: .72rem; line-height: 1.25; margin-top: .1rem; }
/* Light text + bright accents on the dark card (override the t-ink/t-muted utilities) */
.badge-card .badge-t { color: #ffffff; }
.badge-card .badge-s { color: rgba(255, 255, 255, .64); }
.badge-deck--emerald .badge-ico { background: rgba(52, 211, 153, .16); color: #34d399; }
.badge-deck--coral   .badge-ico { background: rgba(255, 125, 99, .18); color: #ff8a73; }
/* 8 cards share one timeline (--n:8), each owning a 12.5% slot so exactly one badge
   is visible at any moment. Each rests at its own (--ox,--oy) and drifts THROUGH that
   spot: fades in from (+dx,+dy), holds, fades out the opposite way (-dx,-dy). */
@keyframes badge-cycle {
    0%    { opacity: 0; transform: translate(calc(var(--ox, 0px) + var(--dx, 0px)), calc(var(--oy, 0px) + var(--dy, 0px))) scale(.95); }
    2%    { opacity: 1; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(1); }
    10%   { opacity: 1; transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(1); }
    12.5% { opacity: 0; transform: translate(calc(var(--ox, 0px) - var(--dx, 0px)), calc(var(--oy, 0px) - var(--dy, 0px))) scale(.97); }
    100%  { opacity: 0; transform: translate(calc(var(--ox, 0px) - var(--dx, 0px)), calc(var(--oy, 0px) - var(--dy, 0px))) scale(.97); }
}
/* Reduced motion: keep the rotation, but as a plain opacity cross-fade with no
   drift or scale (gentle opacity change is reduced-motion-safe). */
@keyframes badge-fade {
    0%, 12.5%, 100% { opacity: 0; }
    2%, 10%         { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* Inherit duration/delay/stagger from the base rule; only swap the keyframe
       to the no-drift fade and pin each card at its resting offset. */
    .badge-card {
        transform: translate(var(--ox, 0px), var(--oy, 0px));
        animation-name: badge-fade;
    }
}

/* Pulsing status dot */
.pulse-dot { position: relative; }
.pulse-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 9999px;
    border: 2px solid currentColor; opacity: .5;
    animation: pulse-ring 2s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: .6; } 80%,100% { transform: scale(1.4); opacity: 0; } }

@keyframes caret-blink { to { visibility: hidden; } }

/* Confetti */
.confetti-piece { position: absolute; width: 8px; height: 13px; top: -14px; border-radius: 2px; animation: confetti-fall var(--dur, 2.6s) cubic-bezier(.25,.8,.5,1) forwards; pointer-events: none; }
@keyframes confetti-fall { to { transform: translateY(var(--fall, 380px)) rotate(var(--spin, 540deg)); opacity: 0; } }

/* Sticky mobile CTA */
#mobile-cta { transform: translateY(130%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
#mobile-cta.visible { transform: translateY(0); }

/* Theme toggle knob */
.theme-toggle i { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }

[x-cloak] { display: none !important; }

/* Tab underline (segmented control) */
.seg-active { position: relative; }

/* ── Rich "after" mockup (real-site look: nav + image hero + checklist + CTA) ── */
.mini-pro{ background:#fff; color:#1e293b; font-family:"Inter",Arial,sans-serif; display:flex; flex-direction:column; }
.mini-pro .mp-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 28px; border-bottom:1px solid #eef1f4; }
.mini-pro .mp-logo{ display:flex; align-items:center; gap:7px; }
.mini-pro .mp-logo i{ width:15px; height:15px; border-radius:5px; background:linear-gradient(135deg,#334155,#f74e30); display:block; }
.mini-pro .mp-logo b{ width:48px; height:7px; border-radius:4px; background:#cbd5e1; display:block; }
.mini-pro .mp-nav{ display:flex; gap:13px; font-size:9.5px; color:#64748b; font-weight:600; }
.mini-pro .mp-cta{ background:#f74e30; color:#fff; font-size:9.5px; font-weight:700; padding:6px 13px; border-radius:9999px; }
.mini-pro .mp-hero{ display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:20px 28px; align-items:center; align-content:center; flex:1 1 auto; }
.mini-pro .mp-photo{ height:132px; border-radius:12px; background-size:cover; background-position:center; border:1px solid #e2e8f0; }
.mini-pro .mp-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.mini-pro .mp-thumbs div{ height:36px; border-radius:8px; background-size:cover; background-position:center; border:1px solid #e8eaee; }
.mini-pro .mp-eyebrow{ display:inline-block; font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#475569; background:#eef2f6; padding:3px 9px; border-radius:999px; }
.mini-pro .mp-h{ font-family:"Bricolage Grotesque","Inter",sans-serif; font-size:19px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-top:9px; color:#0f172a; }
.mini-pro .mp-h em{ font-style:normal; color:#f74e30; }
.mini-pro .mp-p{ font-size:9.5px; color:#57606e; margin-top:7px; line-height:1.5; }
.mini-pro .mp-check{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.mini-pro .mp-check span{ display:flex; align-items:center; gap:7px; font-size:9px; color:#334155; font-weight:500; }
.mini-pro .mp-check span::before{ content:"✓"; display:grid; place-items:center; width:13px; height:13px; border-radius:4px; background:#e7f3ec; color:#16a34a; font-size:8px; font-weight:800; flex:none; }
.mini-pro .mp-btn{ display:inline-block; margin-top:12px; background:#f74e30; color:#fff; font-size:9.5px; font-weight:700; padding:7px 14px; border-radius:9999px; }
@media (max-width:520px){ .mini-pro .mp-top{ padding:11px 18px } .mini-pro .mp-hero{ grid-template-columns:1fr; padding:16px 18px; } .mini-pro .mp-photo{ height:96px } }
/* Desktop only: center the mockup content as a block (wider equal margins) */
@media (min-width:1024px){ .mini-pro .mp-top{ padding:12px 8% } .mini-pro .mp-hero{ padding:20px 8% } }

/* ============================================================================
   Ad landing pages (/lp/{sector}) — focused, self-contained layout.
   Custom classes (NOT Tailwind-purged) so the lander renders regardless of the
   precompiled utility set.
   ========================================================================== */
.lp-section{ padding-block:3.5rem; }
@media (min-width:768px){ .lp-section{ padding-block:5rem; } }
.lp-wrap{ max-width:72rem; margin-inline:auto; padding-inline:1rem; }
@media (min-width:640px){ .lp-wrap{ padding-inline:1.5rem; } }

/* hero: form-first on mobile, two columns on desktop */
.lp-hero{ display:grid; gap:2.25rem; align-items:center; }
@media (min-width:960px){ .lp-hero{ grid-template-columns:1.05fr .95fr; gap:3rem; } }
.lp-eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--iris-600,#6c47ff); }
.lp-h1{ margin-top:.75rem; font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-weight:800; line-height:1.06; letter-spacing:-.02em; font-size:clamp(1.9rem,4.6vw,3rem); }
.lp-sub{ margin-top:1rem; font-size:1.075rem; line-height:1.6; max-width:34rem; }
.lp-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.lp-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:9999px;
  font-size:.8rem; font-weight:600; }
.lp-chip i{ width:1rem; height:1rem; color:#16a34a; }

/* lead-form card */
.lp-card{ border-radius:1.25rem; padding:1.5rem; }
@media (min-width:640px){ .lp-card{ padding:1.75rem; } }
.lp-card h2{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-weight:800;
  font-size:1.35rem; line-height:1.2; }
.lp-field{ width:100%; border-radius:9999px; padding:.85rem 1.15rem; font-size:.95rem;
  border:1px solid var(--bdr,#e2e8f0); background:var(--surface,#fff); color:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.lp-field:focus{ border-color:var(--iris-400,#9d7bff); box-shadow:0 0 0 4px rgba(108,71,255,.18); }
.lp-field.mono{ font-family:var(--font-mono,'JetBrains Mono',monospace); }
.lp-paynote{ margin-top:.85rem; font-size:.78rem; text-align:center; }

/* hero visual: a browser-framed modern mockup (reuses .browser + .mini-pro) */
.lp-visual{ position:relative; }
.lp-visual .browser{ box-shadow:var(--soft-shadow); }
.lp-visual .lp-cap{ margin-top:.75rem; text-align:center; font-size:.75rem; }

/* responsive auto card grids (benefits / steps / reviews) */
.lp-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:2.25rem; }
@media (min-width:760px){ .lp-grid{ grid-template-columns:repeat(3,1fr); } }
.lp-tile{ border-radius:1rem; padding:1.25rem; height:100%; }
.lp-tile .ic{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem;
  background:rgba(108,71,255,.12); color:var(--iris-600,#6c47ff); margin-bottom:.85rem; }
.lp-tile .ic i{ width:1.25rem; height:1.25rem; }
.lp-tile h3{ font-weight:700; font-size:1rem; }
.lp-tile p{ margin-top:.3rem; font-size:.9rem; line-height:1.55; }
.lp-step-n{ font-family:var(--font-mono,monospace); font-weight:700; font-size:.8rem;
  color:var(--iris-600,#6c47ff); }

/* section heads */
.lp-head{ text-align:center; max-width:40rem; margin-inline:auto; }
.lp-head h2{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem); line-height:1.15; letter-spacing:-.01em; }

/* FAQ (native details/summary) */
.lp-faq{ max-width:44rem; margin:2rem auto 0; }
.lp-faq details{ border:1px solid var(--bdr,#e2e8f0); border-radius:.9rem; padding:.25rem .25rem;
  margin-bottom:.6rem; background:var(--surface,#fff); }
.lp-faq summary{ list-style:none; cursor:pointer; padding:.95rem 1.1rem; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::after{ content:'+'; font-size:1.2rem; color:var(--iris-600,#6c47ff); line-height:1; }
.lp-faq details[open] summary::after{ content:'\2212'; }
.lp-faq .a{ padding:0 1.1rem 1.05rem; font-size:.92rem; line-height:1.6; }

/* final CTA band */
.lp-final{ text-align:center; }
.lp-final h2{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif); font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.25rem); line-height:1.12; }

/* ── Legal pages (privacy / terms / cookies) ──────────────────────────────── */
.legal-prose{ color:var(--text-soft); font-size:.95rem; line-height:1.72; }
.legal-prose h1{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-weight:800; font-size:clamp(1.8rem,4vw,2.5rem); line-height:1.08;
  letter-spacing:-.015em; color:var(--text); }
.legal-prose .legal-meta{ margin-top:.65rem; font-size:.8rem; color:var(--text-muted); }
.legal-prose h2{ font-family:var(--font-display,'Bricolage Grotesque',sans-serif);
  font-weight:700; font-size:1.18rem; color:var(--text); margin-top:2.4rem;
  margin-bottom:.55rem; scroll-margin-top:5rem; }
.legal-prose h3{ font-weight:700; font-size:1rem; color:var(--text); margin-top:1.5rem; margin-bottom:.35rem; }
.legal-prose p{ margin-top:.7rem; }
.legal-prose ul, .legal-prose ol{ margin-top:.7rem; padding-left:1.3rem; }
.legal-prose li{ margin-top:.35rem; }
.legal-prose ul{ list-style:disc; }
.legal-prose ol{ list-style:decimal; }
.legal-prose a{ color:var(--iris); text-decoration:underline; text-underline-offset:2px; }
.legal-prose a:hover{ color:var(--text); }
.legal-prose strong{ color:var(--text); font-weight:600; }
.legal-prose hr{ border:0; border-top:1px solid var(--border); margin:2.5rem 0; }
/* "Dutch version prevails" / courtesy-translation banner */
.legal-note{ margin-top:1.4rem; border:1px solid var(--border); border-left:3px solid var(--iris);
  background:var(--surface-2); border-radius:.65rem; padding:.85rem 1rem; font-size:.85rem;
  line-height:1.6; color:var(--text-soft); }
.legal-note strong{ color:var(--text); }
/* optional in-page table of contents */
.legal-toc{ margin-top:1.6rem; padding:1rem 1.25rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:.8rem; font-size:.9rem; }
.legal-toc p{ margin:0 0 .5rem; font-weight:600; color:var(--text); }
.legal-toc ul{ list-style:none; margin:0; padding-left:0; }
@media (min-width:640px){ .legal-toc ul{ columns:2; column-gap:1.75rem; } }
.legal-toc li{ margin:.25rem 0; break-inside:avoid; }
.legal-toc a{ color:var(--text-soft); text-decoration:none; }
.legal-toc a:hover{ color:var(--text); }


/* ============================================================================
   Homepage hero (inc/hero.php) — warm paper, one joined form card and a stage of
   REAL client sites (inc/hero-stage.php; behaviour: "Hero stage" in site.js).
   Custom classes on purpose: nothing here depends on the precompiled Tailwind set.
   ========================================================================== */
.hx{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border); }
.hx::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(46% 66% at 86% 42%, color-mix(in srgb, var(--coral) 19%, transparent), transparent 72%),
        radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--coral) 7%, transparent), transparent 70%); }
.hx-inner{ max-width:72rem; margin:0 auto; padding:1.5rem 1rem 3.25rem; display:grid; grid-template-columns:minmax(0,1fr); gap:2.75rem; align-items:center; }
@media (min-width:640px){ .hx-inner{ padding:3rem 1.5rem 4.5rem; gap:3.25rem; } }
@media (min-width:1024px){ .hx-inner{ grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:3.5rem; padding:3.25rem 2rem 5.5rem; } }
.hx-copy{ min-width:0; }
.hx-ic{ display:inline-block; flex:none; width:1em; height:1em; }

/* copy */
.hx-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-soft); }
.hx-eyebrow > span{ display:grid; place-items:center; width:1.2rem; height:1.2rem; border-radius:999px; background:var(--coral); color:#1a1622; flex:none; }
.hx-eyebrow .hx-ic{ width:.72rem; height:.72rem; stroke-width:3.4; }
.hx-h1{ margin-top:1rem; font-weight:800; font-size:clamp(1.95rem, 7.8vw, 3rem); line-height:1.13; letter-spacing:-.025em; color:var(--text); }
@media (min-width:1024px){ .hx-h1{ font-size:clamp(2.55rem, 4.1vw, 3.3rem); } }
.hx-accent{ color:#e2442a; }
.hx-lead{ margin-top:1rem; max-width:33rem; font-size:1.05rem; line-height:1.6; color:var(--text-soft); }
@media (min-width:640px){ .hx-h1{ margin-top:1.15rem; } .hx-lead{ margin-top:1.2rem; font-size:1.1rem; } }

/* form: two fields and the button in one card */
.hx-form{ margin-top:1.35rem; max-width:33rem; }
@media (min-width:640px){ .hx-form{ margin-top:1.75rem; } }
.hx-form form{ padding:.5rem; background:var(--surface); border:1px solid var(--border-strong); border-radius:1.4rem;
    box-shadow:0 30px 60px -34px rgba(26,22,34,.5), 0 3px 8px -3px rgba(26,22,34,.08); }
.hx-field{ display:block; padding:.65rem .95rem .6rem; border-radius:.95rem; cursor:text; transition:background-color .2s ease, box-shadow .2s ease; }
.hx-field:last-child{ box-shadow:0 -1px 0 var(--border); }
.hx-field:focus-within{ background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--text); }
.hx-label{ display:block; font-size:.72rem; font-weight:700; line-height:1.3; color:var(--text); }
.hx-control{ display:flex; align-items:center; gap:.55rem; margin-top:.15rem; color:var(--text-muted); }
.hx-control .hx-ic{ width:1rem; height:1rem; }
.hx-input{ flex:1; min-width:0; width:100%; padding:.15rem 0; background:transparent; border:0; outline:0; font-size:1.05rem; line-height:1.5; color:var(--text); }
.hx-input::placeholder{ color:var(--text-muted); opacity:1; }
.hx-input--mono{ font-family:var(--font-mono, "JetBrains Mono"), monospace; font-size:1rem; }
.hx-submit{ margin-top:.5rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.25rem; border:0; border-radius:.95rem; cursor:pointer;
    background:var(--coral); color:#1a1622; font-size:1.05rem; font-weight:800; line-height:1.3;
    box-shadow:0 16px 30px -16px color-mix(in srgb, var(--coral) 90%, transparent), inset 0 -2px 0 rgba(26,22,34,.14), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .2s cubic-bezier(.16,1,.3,1), background-color .2s ease; }
.hx-submit:hover{ transform:translateY(-1px); background:#ff7c62; }
.hx-submit:active{ transform:translateY(1px); }
.hx-submit:disabled{ opacity:.7; cursor:progress; transform:none; }
.hx-submit .hx-ic{ width:1.15rem; height:1.15rem; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.hx-submit:hover .hx-ic{ transform:translateX(4px); }
.hx-submit:focus-visible, .hx-switch:focus-visible, .hx-thumb:focus-visible{ outline:3px solid var(--text); outline-offset:3px; }
.hx-error{ margin:.6rem .5rem .25rem; font-size:.875rem; font-weight:600; color:#c2331b; }
.hx-switch{ margin-top:.8rem; padding:0 .35rem; background:none; border:0; cursor:pointer; text-align:left; font-size:.85rem; font-weight:600; color:var(--text-soft);
    text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:4px; }
.hx-switch:hover{ color:var(--text); text-decoration-color:var(--coral); }
.hx-trust{ margin-top:1.15rem; padding:0 .35rem; display:flex; flex-wrap:wrap; gap:.45rem 1.35rem; list-style:none; font-size:.9rem; font-weight:600; color:var(--text-soft); }
.hx-trust li{ display:inline-flex; align-items:center; gap:.4rem; }
.hx-trust .hx-ic{ width:.95rem; height:.95rem; color:#16a34a; stroke-width:2.8; }
/* proof under the checkmarks: live client sites (showcase count) + the company behind it */
.hx-proof{ margin-top:.75rem; padding:0 .35rem; display:flex; flex-direction:column; gap:.2rem; font-size:.8rem; line-height:1.45; color:var(--text-muted); }
.hx-proof-live{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--text-soft); }
.hx-proof-dot{ width:.5rem; height:.5rem; border-radius:999px; background:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.18); }

/* price line (inc/hero-price.php): the usual agency price, struck and labelled, next to ours.
   Above the form at every width (homepage hero and the /gratis-preview ad landing page). */
.hx-price{ margin-top:1.15rem; max-width:33rem; }
.hx-price + .hx-form{ margin-top:1rem; }
@media (min-width:1024px){ .hx-price{ margin-top:1.2rem; } }
.hx-price p{ margin:0; }
.hx-price-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .85rem; }
.hx-price-cmp{ display:inline-flex; align-items:baseline; gap:.45rem; font-size:.85rem; font-weight:600; color:var(--text-muted); }
.hx-price-cmp s, .hx-price-was{ font-size:1.3rem; font-weight:700; color:var(--text-soft); text-decoration-thickness:2px; text-decoration-color:#e2442a; }
.hx-price-now{ display:inline-flex; align-items:baseline; gap:.45rem; }
.hx-price-now strong{ padding:0 .2rem; font-size:2.5rem; font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--text);
    background:linear-gradient(transparent 60%, color-mix(in srgb, var(--coral) 42%, transparent) 60%); }
.hx-price-unit{ font-size:1rem; font-weight:800; color:var(--text); }
.hx-price-note{ margin-top:.3rem !important; font-size:.84rem; font-weight:500; line-height:1.45; color:var(--text-muted); }
.hx-price-month{ font-weight:700; color:var(--text-soft); }
.hx-price-row--lease{ align-items:center; gap:.5rem .9rem; }
.hx-price-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; border-radius:999px; font-size:.85rem; font-weight:800; color:#0f7a43; background:rgba(22,163,74,.12); white-space:nowrap; }
.hx-price-badge svg{ width:14px; height:14px; stroke-width:3; }
.dark .hx-price-badge{ color:#4ade80; background:rgba(74,222,128,.14); }
.hx-price-cmp-inline{ white-space:nowrap; }
.hx-price-cmp-inline s{ font-weight:700; text-decoration-thickness:2px; text-decoration-color:#e2442a; }
/* phones: number + "€0 setup" badge on one row, so the form loses as little of the first screen as possible */
@media (max-width:639px){ .hx-price{ margin-top:.9rem; } .hx-price-now strong{ font-size:2rem; } .hx-price-row--lease{ gap:.35rem .6rem; } .hx-price-now{ white-space:nowrap; }
    .hx-price-badge{ padding:.25rem .6rem; font-size:.78rem; } .hx-price + .hx-form{ margin-top:.85rem; } }
hx-price-deal{ display:inline-flex; margin-bottom:.5rem !important; padding:.3rem .75rem; border-radius:999px; background:var(--coral); color:#1a1622; font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.hx-price-deal--bf{ background:#1a1622; color:#fff; }
.dark .hx-price-deal--bf{ background:#f1f5f9; color:#0b1120; }
/* promo label: above the headline on desktop (takes the eyebrow's place), in the price block on phones */
.hx-deal-top{ display:none; }
@media (min-width:1024px){ .hx--deal .hx-deal-top{ display:inline-flex; margin-bottom:0 !important; } .hx--deal .hx-eyebrow, .hx .hx-price .hx-price-deal{ display:none; } }

/* stage: a real site in a browser frame, its phone view, and the site picker */
.hx-stage{ min-width:0; width:100%; max-width:40rem; animation:hx-rise .9s cubic-bezier(.16,1,.3,1) .05s both; }
@media (min-width:1024px){ .hx-stage{ max-width:none; } }
@media (min-width:1280px){ .hx-stage{ width:calc(100% + 2.5rem); margin-right:-2.5rem; } }
@keyframes hx-rise{ from{ transform:translateY(20px); } to{ transform:none; } }
.hx-frame{ position:relative; padding:0 1.6rem 1.4rem 0; }
.hx-stage--mock .hx-frame{ padding:0; }
.hx-frame::before{ content:""; position:absolute; z-index:-1; inset:-1.1rem .15rem .3rem 2.4rem; border-radius:1.9rem; transform:rotate(2.2deg);
    background:linear-gradient(140deg, #ffd0c2 0%, #ffe4d2 48%, #f0e6d4 100%); box-shadow:inset 0 0 0 1px rgba(26,22,34,.05); }
.hx-browser{ position:relative; overflow:hidden; border-radius:1.05rem; background:var(--surface); border:1px solid var(--border-strong);
    box-shadow:0 42px 70px -38px rgba(26,22,34,.6), 0 10px 24px -14px rgba(26,22,34,.22); }
.hx-bar{ display:flex; align-items:center; gap:.7rem; padding:.6rem .85rem; background:var(--surface-2); border-bottom:1px solid var(--border); }
.hx-dots{ display:flex; gap:.35rem; flex:none; }
.hx-dots i{ display:block; width:.6rem; height:.6rem; border-radius:999px; background:var(--border-strong); }
.hx-dots i:first-child{ background:var(--coral); }
.hx-url{ flex:1; min-width:0; display:flex; align-items:center; gap:.4rem; padding:.28rem .75rem; border-radius:999px; background:var(--bg); border:1px solid var(--border);
    font-family:var(--font-mono, "JetBrains Mono"), monospace; font-size:.72rem; color:var(--text-soft); }
.hx-url .hx-ic{ width:.7rem; height:.7rem; color:#16a34a; }
.hx-url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hx-view{ position:relative; aspect-ratio:16 / 11; overflow:hidden; background:var(--bg-2); }
.hx-mock{ background:#fff; }
.hx-slide{ position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s linear .7s; }
.hx-slide.is-active{ z-index:1; opacity:1; visibility:visible; transition:opacity .7s ease; }
.hx-shot{ display:block; width:100%; height:auto; max-width:none; }
.hx-slide > .hx-shot{ transform:translateY(0); transition:transform 1.2s cubic-bezier(.3,.7,.2,1); }
.hx-slide.is-pan > .hx-shot{ transform:translateY(var(--hx-shift, 0%)); transition:transform var(--hx-dur, 9s) cubic-bezier(.45,.05,.35,1); }
/* old → new: the previous site lies on top and is wiped away from the left */
.hx-before{ position:absolute; inset:0; overflow:hidden; background:var(--bg-2); clip-path:inset(0 0 0 0); transition:clip-path 1.3s cubic-bezier(.7,0,.2,1); }
.hx-slide.is-after .hx-before{ clip-path:inset(0 0 0 100%); }
.hx-wipe{ position:absolute; top:0; bottom:0; left:0; width:3px; margin-left:-1.5px; background:#fff; opacity:0; pointer-events:none;
    box-shadow:0 0 0 1px rgba(26,22,34,.14), 0 0 26px 7px color-mix(in srgb, var(--coral) 70%, transparent); }
.hx-slide.is-after .hx-wipe{ animation:hx-wipe-x 1.3s cubic-bezier(.7,0,.2,1) both, hx-wipe-o 1.3s linear both; }
@keyframes hx-wipe-x{ from{ left:0; } to{ left:100%; } }
@keyframes hx-wipe-o{ 0%, 100%{ opacity:0; } 12%, 88%{ opacity:1; } }
.hx-tag{ position:absolute; left:.7rem; bottom:.7rem; padding:.3rem .65rem; border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(26,22,34,.84); }
.hx-tag--after{ background:#15803d; }   /* same spot as "before": the wipe swaps them */
.hx-phone{ position:absolute; right:0; bottom:0; z-index:2; width:23%; min-width:84px; max-width:132px; padding:5px; border-radius:20px; background:#16131d; border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 46px -18px rgba(26,22,34,.7); opacity:0; transform:translateY(18px) scale(.94); transform-origin:100% 100%; transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.hx-stage.has-phone .hx-phone{ opacity:1; transform:none; }
.hx-phone-view{ position:relative; aspect-ratio:9 / 18.5; overflow:hidden; border-radius:15px; background:var(--bg-2); }
.hx-pshot{ position:absolute; top:0; left:0; width:100%; height:auto; opacity:0; transition:opacity .5s ease, transform 1.2s cubic-bezier(.3,.7,.2,1); }
.hx-pshot.is-active{ opacity:1; }
.hx-pshot.is-pan{ transform:translateY(var(--hx-pshift, 0%)); transition:opacity .5s ease, transform var(--hx-dur, 9s) cubic-bezier(.45,.05,.35,1); }
.hx-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem 1rem; margin-top:.5rem; padding-right:1.6rem; }
.hx-cap{ flex:1 1 11rem; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.hx-cap strong{ font-family:var(--font-display, "Bricolage Grotesque"), sans-serif; font-size:1.02rem; font-weight:800; letter-spacing:-.01em; line-height:1.3; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hx-cap span{ font-size:.8rem; line-height:1.4; color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hx-thumbs{ display:flex; gap:.45rem; flex:none; }
.hx-thumb{ position:relative; width:3.4rem; height:2.35rem; padding:0; border:0; border-radius:.55rem; overflow:hidden; cursor:pointer; background:var(--bg-2);
    box-shadow:0 0 0 1px var(--border-strong); opacity:.6; transition:opacity .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.hx-thumb:hover{ opacity:1; transform:translateY(-2px); }
.hx-thumb.is-active{ opacity:1; box-shadow:0 0 0 2px var(--text); }
.hx-thumb-img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.hx-thumb i{ position:absolute; left:0; right:0; bottom:0; height:3px; opacity:0; background:rgba(255,255,255,.7); }
.hx-thumb.is-active i{ opacity:1; }
.hx-thumb i::after{ content:""; position:absolute; inset:0; background:var(--coral); transform-origin:left; transform:scaleX(0); }
.hx-thumb.is-run i::after{ animation:hx-progress var(--hx-total, 12s) linear both; }
.hx-stage.is-paused .hx-thumb i::after{ animation-play-state:paused; }
@keyframes hx-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hx-noanim, .hx-noanim *{ transition:none !important; animation:none !important; }
/* no JS (or site.js never booted) and reduced motion: the new site, standing still */
html:not(.js) .hx-before, html:not(.js) .hx-wipe, html:not(.js) .hx-tag{ display:none; }
html:not(.js) .hx-stage--after-phone .hx-phone{ opacity:1; transform:none; }   /* before/after site: its phone belongs to the new site */
@media (prefers-reduced-motion: reduce){
    .hx-stage{ animation:none; }
    .hx-before, .hx-wipe, .hx-tag{ display:none; }
    .hx-stage--after-phone .hx-phone{ opacity:1; transform:none; }
    .hx-slide.is-pan > .hx-shot, .hx-pshot.is-pan{ transform:none; }
    .hx-thumb i{ display:none; }
}

/* phones: the form's button stays on the first screen, clear of the cookie bar */
@media (max-width:639px){
    .hx-foot{ padding-right:0; }
    .consent-bar{ flex-wrap:wrap; gap:.45rem .75rem; padding:.6rem .75rem; }
    .consent-text{ flex-basis:100%; }
    .consent-actions{ margin-left:auto; }
    .consent-btn{ padding:.4rem .75rem; }
}

/* ── Before/after on narrow screens: site.js renders both mocks at their 620px desktop width
   and scales them down (.ba-scaled, --ba-z, --ba-h), instead of a squeezed, cut-off stack. ── */
.ba.ba-scaled .ba-after{ height:calc(var(--ba-h) * var(--ba-z) * 1px); overflow:hidden; }
.ba.ba-scaled .mini{ width:620px; height:calc(var(--ba-h) * 1px); transform:scale(var(--ba-z)); transform-origin:0 0; }
.ba.ba-scaled .mini-pro .mp-top{ padding:12px 28px; }
.ba.ba-scaled .mini-pro .mp-hero{ grid-template-columns:1fr 1fr; padding:20px 28px; }
.ba.ba-scaled .mini-pro .mp-photo{ height:132px; }

/* ── Cookie consent: a slim bottom bar on phones, a small corner card on desktop — never
   over the hero form's submit button. ── */
.consent-bar{ position:fixed; z-index:60; left:.75rem; right:.75rem; bottom:calc(.75rem + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:.75rem; padding:.55rem .6rem .55rem .85rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--soft-shadow); font-size:12.5px; line-height:1.35; color:var(--text-soft); }
.consent-bar[hidden]{ display:none !important; }
.consent-bar{ transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s; }
.consent-bar.consent-tucked{ transform:translateY(calc(100% + 1.5rem)); opacity:0; pointer-events:none; }
.consent-text{ flex:1; min-width:0; }
.consent-text [data-lucide]{ display:inline; width:14px; height:14px; margin-right:.25rem; vertical-align:-2px; color:var(--iris); }
.consent-actions{ display:flex; gap:.4rem; flex:none; }
.consent-btn{ border-radius:999px; padding:.45rem .8rem; font-size:12.5px; font-weight:700; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); cursor:pointer; }
.consent-btn:hover{ color:var(--text); }
.consent-btn.btn-iris{ border-color:transparent; }
@media (min-width:768px){
    .consent-bar{ left:auto; right:1rem; bottom:1rem; max-width:24rem; flex-direction:column; align-items:stretch; gap:.7rem; padding:.9rem 1rem; }
    .consent-actions{ justify-content:flex-end; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Showcase ("Recent gebouwd") — client sites in a browser frame.
   The screenshot is taller than its window and pans by the hidden part on hover
   (touch: the card in view pans by itself, see site.js). Sites with an old-vs-new
   pair get a drag-to-compare view instead of the pan.
   ════════════════════════════════════════════════════════════════════════════ */
.sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 44px; }
.sc-all {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-weight: 600; font-size: .95rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 11px 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.sc-all:hover { transform: translateY(-2px); box-shadow: var(--soft-shadow); }

.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 44px; }
@media (min-width: 860px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sc-card { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sc-stage { position: relative; padding: 0 30px 28px 0; }            /* room for the phone that overlaps bottom right */

.sc-browser {
    border-radius: 16px; overflow: hidden; background: var(--surface);
    border: 1px solid var(--border-strong); box-shadow: var(--soft-shadow);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.sc-card:hover .sc-browser { transform: translateY(-5px); }
.sc-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.sc-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: none; }
.sc-bar i:first-child { background: var(--coral); }
.sc-url {
    margin-left: 10px; flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text-muted);
    background: var(--bg); border-radius: 999px; padding: 4px 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sc-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.sc-shot { display: block; width: 100%; height: auto; max-width: none; }
.sc-view > .sc-shot { transform: translateY(0); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
@media (hover: hover) {
    .sc-card:hover .sc-view:not([data-sc-compare]) > .sc-shot {
        transform: translateY(var(--sc-shift, 0%)); transition: transform var(--sc-dur, 8s) cubic-bezier(.4, .1, .4, 1);
    }
}
.sc-card.is-playing .sc-view:not([data-sc-compare]) > .sc-shot {
    transform: translateY(var(--sc-shift, 0%)); transition: transform var(--sc-dur, 8s) cubic-bezier(.4, .1, .4, 1);
}

.sc-phone {
    position: absolute; right: 0; bottom: 0; width: 23%; min-width: 84px; max-width: 132px;
    padding: 5px; border-radius: 19px; background: #16131d; border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 20px 44px -18px rgba(26, 22, 34, .65);
}
.sc-phone-view { aspect-ratio: 9 / 18.5; overflow: hidden; border-radius: 14px; background: var(--bg-2); }
.sc-phone-view img { display: block; width: 100%; height: auto; }
/* The phone scrolls with its site: under the pointer on a card, by itself where site.js plays it
   (.is-playing: cards on touch screens, and a phone on its own — [data-sc-auto] — everywhere). */
.sc-phone-view > * { transform: translateY(0); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1); }
@media (hover: hover) {
    .sc-card:hover .sc-phone-view > * { transform: translateY(var(--sc-pshift, 0%)); transition: transform var(--sc-dur, 8s) cubic-bezier(.4, .1, .4, 1); }
}
.is-playing .sc-phone-view > * { transform: translateY(var(--sc-pshift, 0%)); transition: transform var(--sc-dur, 8s) cubic-bezier(.4, .1, .4, 1); }

/* old vs new */
.sc-before { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.sc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 22, 34, .22); pointer-events: none; }
.sc-handle span {
    position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 18px rgba(26, 22, 34, .35);
}
.sc-handle span::before, .sc-handle span::after {
    content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px;
    border: solid #1a1622; border-width: 0 0 2px 2px;
}
.sc-handle span::before { left: 11px; transform: rotate(45deg); }
.sc-handle span::after { right: 11px; transform: rotate(-135deg); }
.sc-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.sc-view:has(.sc-range:focus-visible) .sc-handle span { outline: 3px solid var(--coral); outline-offset: 2px; }
.sc-tag {
    position: absolute; top: 12px; z-index: 1; pointer-events: none;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px; background: rgba(26, 22, 34, .8); color: #fff;
}
.sc-tag--before { left: 12px; }
.sc-tag--after { right: 12px; }

/* Homepage "Voor & na" with a real site: the same compare view in the site's own browser frame,
   and the new site on a phone beside it (it must not catch the drag: pointer-events none). */
.sc-compare-wrap { max-width: 860px; margin-left: auto; margin-right: auto; }
.sc-stage--bare { padding: 0; }
.sc-stage--compare .sc-phone { pointer-events: none; width: 21%; max-width: 150px; }
.sc-compare-wrap .sc-view { aspect-ratio: 16 / 10; }

.sc-meta { display: flex; flex-direction: column; gap: 8px; padding-right: 30px; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 5px 11px; border-radius: 999px; background: var(--iris-soft); color: var(--text); }
.sc-chip--live { background: rgba(25, 168, 102, .13); color: #0d6b41; }
.sc-chip--live i { width: 7px; height: 7px; border-radius: 50%; background: #19a866; box-shadow: 0 0 0 3px rgba(25, 168, 102, .2); }
.sc-chip--soon { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-soft); }
.sc-chip--new { background: var(--coral-soft); color: #a8321c; }
.dark .sc-chip--live { color: #6fdcaa; }
.dark .sc-chip--new { color: var(--coral); }
.sc-name { margin-top: 4px; font-size: 1.4rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.sc-tagline { color: var(--text-soft); line-height: 1.55; font-size: .975rem; }
.sc-where { color: var(--text-muted); font-size: .85rem; }
.sc-link {
    align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: .95rem; color: var(--text);
    text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 5px;
    transition: text-decoration-color .2s ease;
}
.sc-link:hover { text-decoration-color: var(--coral); }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 520px) {
    .sc-stage { padding: 0 18px 22px 0; }
    .sc-meta { padding-right: 0; }
    .sc-grid { gap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-view > .sc-shot, .sc-card:hover .sc-view > .sc-shot, .sc-card.is-playing .sc-view > .sc-shot { transition: none; transform: none; }
    .sc-browser, .sc-card:hover .sc-browser { transition: none; transform: none; }
    .sc-phone-view > *, .sc-card:hover .sc-phone-view > *, .is-playing .sc-phone-view > * { transition: none; transform: none; }
}

/* ── Ad landers: real sites under the form, and the form before the trust chips on phones ── */
.lp-proof { margin-top: 3.5rem; }
.lp-proof-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iris); text-align: center; }
.lp-proof-title { margin: .5rem auto 2.25rem; max-width: 34rem; text-align: center; font-family: var(--font-display, 'Bricolage Grotesque', sans-serif); font-weight: 800; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; }
/* Ad landers: the price inside the form card (inc/hero-price.php with $hxPricePos = 'lp') and the
   price section. A paid visitor decides whether to fill in the form by the price next to it. */
.hx-price--lp { margin-top: .9rem; padding: .7rem .9rem; border-radius: .9rem; background: var(--bg-2); }
.hx-price--lp .hx-price-now strong { font-size: 2rem; }
.hx-price--lp .hx-price-note { font-size: .78rem; }
@media (max-width: 639px) {
    /* phones: the price takes the place of the card's intro line (its "pay only if you keep it"
       is in the price note), and stays two lines so both fields and the button keep the first screen */
    #lead-card.lp-card > p.text-sm { display: none; }
    #lead-card.lp-card form { margin-top: .75rem; }
    .hx-price--lp { margin-top: .7rem; padding: .55rem .75rem; }
    .hx-price--lp .hx-price-row--lease { flex-wrap: nowrap; gap: .5rem; }
    .hx-price--lp .hx-price-now strong { font-size: 1.65rem; }
    .hx-price--lp .hx-price-unit { font-size: .9rem; white-space: nowrap; }
    .hx-price--lp .hx-price-badge { padding: .25rem .55rem; font-size: .76rem; }
    .hx-price--lp .hx-price-note { margin-top: .15rem !important; font-size: .74rem; }
}
.lp-pricebox { display: grid; gap: 1.75rem; max-width: 56rem; margin: 2.25rem auto 0; padding: 1.5rem; border-radius: 1.25rem; box-shadow: var(--soft-shadow); }
@media (min-width: 760px) { .lp-pricebox { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; padding: 2.25rem; } }
.lp-pricebox p { margin: 0; }
.lp-pricebox-amount { display: flex; align-items: baseline; gap: .5rem; }
.lp-pricebox-amount strong { font-size: 3.25rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.lp-pricebox-amount span { font-size: 1.1rem; font-weight: 800; }
.lp-pricebox-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem !important; font-size: .85rem; }
.lp-pricebox-list, .lp-pricebox-terms { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .65rem; }
.lp-pricebox-list li, .lp-pricebox-terms li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; line-height: 1.45; }
.lp-pricebox-list svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: #16a34a; stroke-width: 3; }
.lp-pricebox-terms svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--iris); }
.lp-pricebox-side { display: flex; flex-direction: column; }
.lp-pricebox-side .lp-pricebox-terms { margin: 0 0 1.5rem; }
.lp-pricebox-side .lp-paynote { margin-top: .75rem !important; }
.lp-cmp { margin-bottom: 1.35rem; padding: .9rem 1rem; border-radius: .9rem; background: var(--bg-2); display: grid; gap: .4rem; }
.lp-cmp-row { display: flex; align-items: baseline; gap: .45rem; font-size: .9rem; }
.lp-cmp-row > span:first-child { flex: 1; }
.lp-cmp-row s { font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: #e2442a; }
.lp-cmp-row--us { font-weight: 700; }
.lp-cmp-row--us strong { font-size: 1.15rem; }
@media (max-width: 639px) {
    /* A paid visitor on a phone must see both fields and the button without scrolling: the
       three trust chips move under the form (they repeat what the form's own lines say). */
    .lp-hero { display: flex; flex-direction: column; gap: 1.5rem; }
    .lp-hero > div:first-child { display: contents; }
    .lp-hero .lp-eyebrow { order: 1; align-self: flex-start; }
    .lp-hero .lp-h1 { order: 2; margin-top: -.75rem; }
    .lp-hero .lp-sub { order: 3; margin-top: -.5rem; }
    .lp-hero > div:last-child { order: 4; }
    .lp-hero .lp-chips { order: 5; margin-top: 0; }
    .lp-section:first-child, .bg-app > .lp-section { padding-top: 1.75rem; }
    .lp-proof-title { font-size: 1.35rem; }
}

/* ── Small phones (iPhone SE size: about 375 × 667) ──
   The form has to sit ABOVE the cookie bar there too. Text that only repeats the offer moves
   under the form or is shortened; nothing is removed from the page. */
@media (max-width: 639px) and (max-height: 760px) {
    /* ad landers: the intro sentence joins the chips under the form; the card loses its own
       intro line (the placeholder texts already say what to fill in) */
    .lp-hero .lp-sub { order: 5; margin-top: 0; }
    .lp-hero .lp-chips { order: 6; }
    .lp-h1 { font-size: 1.6rem; line-height: 1.15; }
    #lead-card.lp-card { padding: 1.1rem 1.15rem; }
    #lead-card.lp-card > p.text-sm { display: none; }
    #lead-card.lp-card form { margin-top: .75rem; }
    /* homepage hero: no line above the headline, intro capped at two lines */
    .hx-eyebrow { display: none; }
    .hx-h1 { margin-top: 0; }
    .hx-lead { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* a slimmer cookie bar: smaller type, tighter padding */
    .consent-bar { font-size: 11.5px; line-height: 1.3; padding: .45rem .6rem; gap: .3rem .6rem; }
    .consent-btn { padding: .3rem .7rem; font-size: 12px; }
}
/* ── Examples page: the "your site?" card in the open slot (inc/showcase.php) ──
   A wireframe page in the same browser + phone as the real sites; it scrolls on hover too. */
.sc-card--you { position: relative; }
.sc-card--you .sc-browser { border-style: dashed; border-color: color-mix(in srgb, var(--coral) 60%, var(--border-strong)); }
.sc-you-link::after { content: ""; position: absolute; inset: 0; }                 /* the whole card is the link */
.sc-you-page { aspect-ratio: 16 / 24; display: grid; grid-template-rows: 6.5% 30% 17% 22% 16% 8.5%; background: #fff; --ink: 26, 22, 34; }
.sc-you-page s, .sc-you-page em, .sc-you-page u, .sc-you-page b, .sc-you-page i, .sc-you-phone > * { display: block; border-radius: 999px; text-decoration: none; }
.sc-you-nav { display: flex; align-items: center; gap: 3%; padding: 0 6%; border-bottom: 1px solid rgba(var(--ink), .07); }
.sc-you-nav b { width: 13%; height: 30%; background: rgba(var(--ink), .82); }
.sc-you-nav i { width: 7%; height: 14%; background: rgba(var(--ink), .16); }
.sc-you-nav b + i { margin-left: auto; }
.sc-you-nav u { width: 13%; height: 46%; background: var(--coral); }
.sc-you-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6%; align-items: center; padding: 0 6%; background: linear-gradient(180deg, #fbf7f1, #fff); }
.sc-you-hero s, .sc-you-split s { width: 94%; aspect-ratio: 11 / 1; margin-bottom: 5%; background: rgba(var(--ink), .82); }
.sc-you-hero s + s { width: 66%; }
.sc-you-page em { width: 86%; aspect-ratio: 26 / 1; margin-top: 5%; background: rgba(var(--ink), .13); }
.sc-you-page em + em { width: 62%; }
.sc-you-hero u { width: 40%; aspect-ratio: 3.4 / 1; margin-top: 9%; background: var(--coral); }
.sc-you-hero > span { display: block; aspect-ratio: 4 / 3.3; border-radius: 9%;
    background: radial-gradient(circle at 72% 30%, #ff8a70 0 9%, transparent 9.6%), linear-gradient(158deg, transparent 60%, #f3b3a1 60.5%), linear-gradient(135deg, #ffe3d8, #f7ead9); }
.sc-you-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5%; align-items: center; padding: 0 6%; }
.sc-you-cards span { position: relative; display: block; aspect-ratio: 1.3 / 1; border-radius: 8%; border: 1px solid rgba(var(--ink), .09);
    background: linear-gradient(rgba(var(--ink), .5), rgba(var(--ink), .5)) 13% 60% / 58% 7% no-repeat, linear-gradient(rgba(var(--ink), .13), rgba(var(--ink), .13)) 13% 79% / 72% 6% no-repeat, #faf8f3; }
.sc-you-cards span::before { content: ""; position: absolute; left: 13%; top: 15%; width: 20%; aspect-ratio: 1; border-radius: 26%; background: linear-gradient(135deg, #334155, var(--coral)); }
.sc-you-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: center; padding: 0 6%; background: #f6f3ec; }
.sc-you-split > span { display: block; aspect-ratio: 16 / 10.5; border-radius: 7%; background: linear-gradient(135deg, #c9d3e0, #e6ebf2); }
.sc-you-split s { width: 78%; aspect-ratio: 9 / 1; }
.sc-you-foot { display: flex; align-items: center; gap: 3%; padding: 0 6%; background: #1a1622; }
.sc-you-foot b { width: 13%; height: 22%; background: rgba(255, 255, 255, .85); }
.sc-you-foot i { width: 8%; height: 11%; background: rgba(255, 255, 255, .3); }
.sc-you-foot b + i { margin-left: auto; }
.sc-you-badge {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
    padding: .6rem 1.1rem .6rem .6rem; border-radius: 999px; background: #1a1622; color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2;
    box-shadow: 0 16px 34px -14px rgba(26, 22, 34, .7); transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.sc-you-badge i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--coral); color: #1a1622; font-style: normal; font-weight: 800; font-size: 1.1rem; line-height: 1; }
.sc-card--you:hover .sc-you-badge { transform: translate(-50%, -50%) scale(1.05); }
.sc-you-phone { aspect-ratio: 9 / 34; display: flex; flex-direction: column; justify-content: space-between; padding: 16% 11% 0; background: #fff; }
.sc-you-phone b { width: 42%; aspect-ratio: 5 / 1; margin-bottom: 8%; background: rgba(26, 22, 34, .82); }
.sc-you-phone s { width: 92%; aspect-ratio: 7 / 1; background: rgba(26, 22, 34, .82); }
.sc-you-phone s + s { width: 64%; }
.sc-you-phone em { width: 84%; aspect-ratio: 12 / 1; background: rgba(26, 22, 34, .13); }
.sc-you-phone u { width: 58%; aspect-ratio: 3 / 1; margin-top: 4%; background: var(--coral); }
.sc-you-phone span { width: 100%; aspect-ratio: 1.5 / 1; margin-top: 6%; border-radius: 10%; background: linear-gradient(135deg, #ffe3d8, #f7ead9); }
.sc-you-phone span + span { aspect-ratio: 2.4 / 1; background: #f1ede5; }
.sc-you-phone i { width: 122%; margin-left: -11%; aspect-ratio: 3.2 / 1; border-radius: 0; background: #1a1622; }
@media (prefers-reduced-motion: reduce) { .sc-you-badge, .sc-card--you:hover .sc-you-badge { transition: none; transform: translate(-50%, -50%); } }

/* ── Thank-you state: the optional phone step ("show me the site live", free-preview.php) ── */
.cb { margin-top: 1.5rem; padding: 1.15rem 1.2rem 1.2rem; border-radius: 1.1rem; background: var(--surface-2); border: 1px solid var(--border); }
.cb-title { display: flex; align-items: center; gap: .65rem; font-size: 1.1rem; font-weight: 800; line-height: 1.25; color: var(--text); }
.cb-ic { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--coral); color: #1a1622; }
.cb-ic [data-lucide], .cb-ic svg { width: 1.05rem; height: 1.05rem; }
.cb-sub { margin-top: .6rem; font-size: .95rem; line-height: 1.6; color: var(--text-soft); }
.cb-label { display: block; margin-top: .95rem; font-size: .75rem; font-weight: 700; color: var(--text); }
.cb-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.cb-input { flex: 1 1 11rem; min-width: 0; padding: .8rem .95rem; border-radius: .8rem; border: 1px solid var(--border-strong); background: var(--surface); font-size: 1rem; color: var(--text); outline: 0; transition: box-shadow .2s ease, border-color .2s ease; }
.cb-input::placeholder { color: var(--text-muted); opacity: 1; }
.cb-input:focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--iris-soft); }
.cb-submit { flex: 1 1 auto; padding: .8rem 1.1rem; border: 0; border-radius: .8rem; cursor: pointer; background: var(--text); color: var(--bg); font-size: .95rem; font-weight: 700; line-height: 1.3; transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .2s ease; }
.cb-submit:hover { transform: translateY(-1px); opacity: .92; }
.cb-submit:disabled { opacity: .6; cursor: progress; transform: none; }
.cb-submit:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.cb-error { margin-top: .55rem; font-size: .875rem; font-weight: 600; color: #c2331b; }
.cb-note { margin-top: .6rem; font-size: .8rem; color: var(--text-muted); }
.cb-done { display: flex; align-items: flex-start; gap: .5rem; margin-top: .85rem; font-size: .95rem; font-weight: 600; line-height: 1.5; color: #15803d; }
.cb-done [data-lucide], .cb-done svg { flex: none; margin-top: .2rem; }

/* ── Call-to-action band (inc/footer.php): two real client sites on phones, wide screens only.
   They sit in the margins beside the centred copy and scroll while in view ([data-sc-auto]). ── */
.ft-phones { display: none; }
@media (min-width: 1280px) {
    .ft-phones { display: block; position: absolute; inset: 0; pointer-events: none; }
    .ft-phone { top: 50%; bottom: auto; width: 11.5rem; min-width: 0; max-width: none; padding: 6px; border-radius: 28px; border-color: rgba(255, 255, 255, .22);
        box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
    .ft-phone .sc-phone-view { border-radius: 22px; }
    .ft-phone--l { left: max(1.5rem, calc(50% - 41rem)); right: auto; transform: translateY(-46%) rotate(-7deg); }
    .ft-phone--r { right: max(1.5rem, calc(50% - 41rem)); transform: translateY(-40%) rotate(7deg); }
}