/* ============================================================
   WebOké Design System — Tokens
   Single source of truth, extracted from deployed production TPL
   (templates/lagom2/core/cms/sections/config/verhuisservice).
   ============================================================ */

:root {
  /* ---------- BRAND / PRIMARY ---------- */
  --brand-primary:         #1062fe;   /* Core action blue, used for CTAs, links, focus */
  --brand-primary-lighter: #009aff;   /* Hover lift, gradient highlight */
  --brand-primary-darker:  #003cb2;   /* Pressed state, dark gradient stop */
  --brand-secondary:       #083fbf;   /* Secondary blue, bottom of CTA gradient */

  /* ---------- HERO GRADIENT (signature) ----------
     Use for hero headers, step-numbers, "naar WebOké" chips.
     90deg horizontal for backgrounds, 135deg for pills/buttons. */
  --grad-start:            #152a80;   /* Deep navy */
  --grad-end:              #1d65af;   /* Mid blue */
  --hero-gradient:         linear-gradient(90deg, #152a80, #1d65af);
  --cta-gradient:          linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
  --chip-gradient:         linear-gradient(135deg, #152a80, #1d65af);

  /* ---------- SEMANTIC STATUS ---------- */
  --brand-success:         #36c055;   /* "klaar", uptime dots, green bars */
  --brand-success-dark:    #1b7d34;   /* Success text on light bg */
  --brand-warning:         #ffaa00;   /* "attentie", accent dashes, emailverhuis */
  --brand-warning-dark:    #9c6a00;   /* Warning text on light bg */
  --brand-danger:          #d92632;   /* Error, storingen */
  --accent-yellow:         #ffd166;   /* Hero-tag text, highlights op donkerblauw */

  /* ---------- NEUTRALS ----------
     A 4-step gray scale — deliberately short.
     Do NOT invent intermediate grays; pick the closest token. */
  --gray-darker:           #17191c;   /* Primary body copy, headings */
  --gray-base:             #5e636e;   /* Secondary copy, meta, labels */
  --gray-lighter:          #979ba4;   /* Disabled, placeholder, "uppercase eyebrow on light" */
  --gray-lighter-4:        #e9eaec;   /* Hairline borders, dividers, bar-track */
  --body-bg:               #f7f8fa;   /* Page background (off-white) */
  --surface:               #ffffff;   /* Cards, modals, headers */

  /* ---------- RADII ---------- */
  --radius-sm:             8px;       /* Buttons, chips, inline pills */
  --radius-md:             12px;      /* Small cards, input fields */
  --radius-lg:             18px;      /* Feature cards, step cards, panels */
  --radius-xl:             24px;      /* Hero cards, large panels */
  --radius-pill:           50px;      /* Pills, tags, rounded bars */

  /* ---------- SHADOWS ---------- */
  --shadow-card:   0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
  --shadow-lift:   0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
  --shadow-primary:0 8px 30px rgba(16,98,254,.25);
  --shadow-badge:  0 2px 4px rgba(10,15,30,.08), 0 14px 28px -6px rgba(10,15,30,.3);
  --shadow-hero:   0 40px 80px -20px rgba(10,15,30,.55),
                   0 15px 30px -10px rgba(10,15,30,.25),
                   0 2px 4px rgba(10,15,30,.08);

  /* ---------- TYPOGRAPHY ----------
     WebOké gebruikt system-stack (geen webfont laden = snel + duurzaam).
     Mono reserved for eyebrows, numeric meta, code. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font weights (system stack has all of these) */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-heavy:      800;       /* Heading weight */
  --fw-black:      900;

  /* Type scale — fluid where it matters (hero, section headers) */
  --fs-eyebrow:    12px;      /* mono, uppercase, letter-spacing 1.6px */
  --fs-meta:       11px;      /* mono, tertiary info */
  --fs-caption:    13px;      /* nav, trust item labels */
  --fs-body:       15px;      /* default paragraph */
  --fs-body-lg:    17px;      /* sub-section, lede copy */
  --fs-h4:         18px;      /* card titles */
  --fs-h3:         22px;      /* panel titles */
  --fs-h2:         clamp(28px, 3.4vw, 44px);   /* section headers */
  --fs-h1:         clamp(32px, 4.2vw, 52px);   /* hero h1 */

  /* Line heights */
  --lh-tight:      1.04;      /* Hero display */
  --lh-heading:    1.1;
  --lh-snug:       1.3;
  --lh-body:       1.55;
  --lh-loose:      1.65;

  /* ---------- LAYOUT ---------- */
  --container-max: 1288px;
  --container-pad: 24px;

  /* Section rhythm */
  --section-pad-y: 90px;              /* desktop */
  --section-pad-y-sm: 56px;           /* mobile */

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:      .15s;
  --dur-base:      .25s;
  --dur-slow:      .45s;
}

/* ============================================================
   BASE — apply on body of any product page.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--gray-darker);
  background: var(--body-bg);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* ============================================================
   WebOké · /ai-wordpress-hosting — page styles
   Built on tokens.css. Family of /sitebuilder, but the hero
   takes a darker "vibe-code" / terminal accent.
   Scope wrapper: .wok-aiwp
   ============================================================ */

.wok-aiwp { color: var(--gray-darker); }
.wok-aiwp *, .wok-aiwp *::before, .wok-aiwp *::after { box-sizing: border-box; }
.wok-aiwp .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* shared section header */
.wok-aiwp .section-header { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.wok-aiwp .section-header .eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 1.6px; color: var(--brand-primary);
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.wok-aiwp .section-header .eyebrow::before,
.wok-aiwp .section-header .eyebrow::after { content: ""; width: 16px; height: 1px; background: currentColor; opacity: .55; }
.wok-aiwp .section-header h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -.025em;
  line-height: var(--lh-heading); margin-bottom: 14px; text-wrap: balance;
}
.wok-aiwp .section-header p { font-size: var(--fs-body-lg); color: var(--gray-base); line-height: var(--lh-loose); text-wrap: pretty; }

/* Knoppen komen uit de centrale laag in site.css (maten, varianten, pill);
   deze sectie voegt alleen nog structuur toe waar nodig. */

.wok-aiwp section { position: relative; }

/* ============================================================
   HERO — "vibe-code" dark
   ============================================================ */
.aiwp-hero {
  --hero-bg: #0a1030;
  position: relative; overflow: hidden;
  background:
    radial-gradient(820px 480px at 84% -8%, rgba(0,154,255,.42), transparent 58%),
    radial-gradient(680px 460px at 4% 112%, rgba(16,98,254,.32), transparent 60%),
    linear-gradient(158deg, #152a80 0%, #1a4f9c 55%, #1d65af 100%);
  color: #fff;
  padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 7vw, 96px);
}
/* light variant */
.wok-aiwp[data-hero="light"] .aiwp-hero {
  background:
    radial-gradient(800px 480px at 82% -10%, rgba(16,98,254,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--body-bg) 100%);
  color: var(--gray-darker);
}
/* aurora variant — softer, more colorful glow, no grid */
.wok-aiwp[data-hero="aurora"] .aiwp-hero {
  background:
    radial-gradient(720px 520px at 70% -5%, rgba(0,154,255,.42), transparent 58%),
    radial-gradient(640px 480px at 18% 110%, rgba(255,99,180,.26), transparent 60%),
    radial-gradient(700px 520px at 110% 80%, rgba(120,90,255,.30), transparent 60%),
    linear-gradient(180deg, #0b0e2c 0%, #120a30 100%);
}

/* grid + code motif */
.aiwp-hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.aiwp-hero-grid::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
.wok-aiwp[data-hero="light"] .aiwp-hero-grid,
.wok-aiwp[data-motif="off"] .aiwp-hero-grid { display: none; }

/* floating tokens */
.aiwp-hero-tokens { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aiwp-tok {
  position: absolute; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.16); white-space: nowrap; user-select: none;
  animation: aiwp-float 14s var(--ease-standard) infinite;
}
.aiwp-tok.t1 { top: 16%; left: 6%;  animation-delay: 0s;   }
.aiwp-tok.t2 { top: 30%; right: 7%; animation-delay: -3s;  color: rgba(255,209,102,.20); }
.aiwp-tok.t3 { top: 62%; left: 10%; animation-delay: -6s;  }
.aiwp-tok.t4 { top: 74%; right: 12%;animation-delay: -9s;  color: rgba(0,154,255,.26); }
.aiwp-tok.t5 { top: 46%; left: 3%;  animation-delay: -11s; }
@keyframes aiwp-float { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-16px); opacity: 1; } }
.wok-aiwp[data-hero="light"] .aiwp-hero-tokens,
.wok-aiwp[data-motif="off"] .aiwp-hero-tokens { display: none; }
@media (prefers-reduced-motion: reduce) { .aiwp-tok { animation: none; } }

.aiwp-hero-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 0 var(--container-pad); text-align: center; }

.aiwp-hero-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 1.5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-pill); padding: 7px 15px; color: #fff; margin-bottom: 26px;
}
.wok-aiwp[data-hero="light"] .aiwp-hero-tag { background: rgba(16,98,254,.08); border-color: rgba(16,98,254,.18); color: var(--brand-primary-darker); }
.aiwp-hero-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-success); box-shadow: 0 0 0 4px rgba(54,192,85,.22); }

.aiwp-h1 {
  font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: -.035em;
  line-height: var(--lh-tight); margin-bottom: 16px; text-wrap: balance;
}
.aiwp-h1 .acc {
  color: var(--accent-yellow);
  -webkit-text-fill-color: var(--accent-yellow);
}
.wok-aiwp[data-hero="light"] .aiwp-h1 .acc {
  background: linear-gradient(100deg, var(--brand-primary), var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.aiwp-sub {
  font-size: var(--fs-body-lg); line-height: var(--lh-body); color: rgba(255,255,255,.82);
  max-width: 600px; margin: 0 auto 32px; text-wrap: pretty;
}
.wok-aiwp[data-hero="light"] .aiwp-sub { color: var(--gray-base); }

/* prompt field */
@property --aiwp-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aiwp-flow { to { --aiwp-ang: 360deg; } }

.aiwp-prompt {
  position: relative; text-align: left; max-width: 720px; margin: 0 auto;
  --aiwp-rainbow: conic-gradient(from var(--aiwp-ang),
    #4fb6ff, #6f8bff, #b6a6ff, #ffd98a, #8fe6cb, #4fb6ff);
  background: rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  padding: 10px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.5);
}
/* subtle flowing rainbow — in the border only */
.aiwp-prompt::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); padding: 1.5px;
  background: var(--aiwp-rainbow);
  -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: .5; pointer-events: none; transition: opacity var(--dur-base);
  animation: aiwp-flow 7s linear infinite;
}
.aiwp-prompt:focus-within::before { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .aiwp-prompt::before { animation: none; }
}

/* ===== prompt design tweaks (data-prompt) ===== */
/* DIEP — solid dark-blue card with glowing rainbow edge */
.wok-aiwp[data-prompt="diep"] .aiwp-prompt {
  background: linear-gradient(160deg, #1d3a8a 0%, #142a72 55%, #0f2160 100%); padding: 11px;
  box-shadow: 0 30px 72px -22px rgba(0,0,0,.6), 0 0 46px -10px rgba(0,154,255,.45);
}
.wok-aiwp[data-prompt="diep"] .aiwp-prompt::before { opacity: 1; padding: 2px; }
.wok-aiwp[data-prompt="diep"] .aiwp-prompt-label { color: var(--accent-yellow); }
.wok-aiwp[data-prompt="diep"] .aiwp-textarea { color: #fff; }
.wok-aiwp[data-prompt="diep"] .aiwp-textarea::placeholder { color: rgba(255,255,255,.66); }
.wok-aiwp[data-prompt="diep"] .aiwp-prompt-hint,
.wok-aiwp[data-prompt="diep"] .aiwp-counter { color: rgba(255,255,255,.7); }

/* HELDER — solid white card, dark text, pops off the blue */
.wok-aiwp[data-prompt="helder"] .aiwp-prompt {
  background: #fff; padding: 11px;
  box-shadow: 0 34px 80px -26px rgba(0,0,0,.6);
}
.wok-aiwp[data-prompt="helder"] .aiwp-prompt::before { opacity: .9; padding: 2px; }
.wok-aiwp[data-prompt="helder"] .aiwp-prompt-label { color: var(--brand-primary); }
.wok-aiwp[data-prompt="helder"] .aiwp-textarea { color: var(--gray-darker); }
.wok-aiwp[data-prompt="helder"] .aiwp-textarea::placeholder { color: var(--gray-lighter); }
.wok-aiwp[data-prompt="helder"] .aiwp-prompt-hint,
.wok-aiwp[data-prompt="helder"] .aiwp-counter { color: var(--gray-base); }

/* TERMINAL — code-editor look: dark, mono, green prompt, title bar */
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt {
  background: #0d1117; padding: 0; border-radius: var(--radius-lg);
  --aiwp-rainbow: linear-gradient(100deg, #2ea043, #1f6feb, #2ea043);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.75);
}
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt::before { opacity: .7; padding: 1.5px; border-radius: var(--radius-lg); animation: none; }
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt::after {
  content: "prompt.txt"; position: absolute; top: 0; left: 0; right: 0; height: 34px;
  display: flex; align-items: center; padding-left: 58px;
  font-family: var(--font-mono); font-size: 11px; color: #7d8590; letter-spacing: .5px;
  background: #161b22; border-bottom: 1px solid #21262d; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 14px 0 0 -9px #ff5f57 inset, 34px 0 0 -9px #febc2e inset, 54px 0 0 -9px #28c840 inset;
}
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-label {
  color: #2ea043; padding: 44px 16px 4px;
}
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-label::before { content: "$ "; color: #2ea043; }
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-inner { padding: 0 10px 6px; }
.wok-aiwp[data-prompt="terminal"] .aiwp-textarea {
  color: #e6edf3; font-family: var(--font-mono); font-size: 15px; line-height: 1.6;
}
.wok-aiwp[data-prompt="terminal"] .aiwp-textarea::placeholder { color: #6e7681; }
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-footer { padding: 8px 12px 12px; }
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-hint,
.wok-aiwp[data-prompt="terminal"] .aiwp-counter { color: #7d8590; }
.wok-aiwp[data-prompt="terminal"] .aiwp-prompt-hint .blip { background: #2ea043; }
.wok-aiwp[data-hero="light"] .aiwp-prompt { background: var(--surface); border-color: var(--gray-lighter-4); box-shadow: var(--shadow-lift); }

.aiwp-prompt-label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(255,255,255,.55); padding: 10px 14px 4px;
}
.wok-aiwp[data-hero="light"] .aiwp-prompt-label { color: var(--gray-base); }
.aiwp-prompt-inner { padding: 0 6px 6px; }
.aiwp-textarea {
  width: 100%; resize: none; border: none; background: transparent; outline: none;
  color: #fff; font-family: var(--font-sans); font-size: 17px; line-height: 1.5;
  padding: 6px 10px 4px; min-height: 92px;
  /* Groeit mee met de tekst (JS zet de hoogte); pas bij de max een scrollbar. */
  max-height: 65vh; overflow-y: hidden;
}
.aiwp-textarea::placeholder { color: rgba(255,255,255,.42); }
.wok-aiwp[data-hero="light"] .aiwp-textarea { color: var(--gray-darker); }
.wok-aiwp[data-hero="light"] .aiwp-textarea::placeholder { color: var(--gray-lighter); }

.aiwp-prompt-footer { display: flex; align-items: center; gap: 12px; padding: 8px 8px 6px; }
.aiwp-prompt-hint {
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4);
  display: inline-flex; align-items: center; gap: 7px;
}
.wok-aiwp[data-hero="light"] .aiwp-prompt-hint { color: var(--gray-base); }
.aiwp-prompt-hint .blip { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary-lighter); animation: aiwp-blip 1.6s var(--ease-standard) infinite; }
@keyframes aiwp-blip { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.aiwp-prompt-footer .spacer { flex: 1; }
.aiwp-counter { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4); }
.wok-aiwp[data-hero="light"] .aiwp-counter { color: var(--gray-base); }
/* Genereer-knop in de prompt-box: opmaak via de centrale knoppenlaag */

/* "Uitbreiden met AI" — secundaire knop, naast Genereren */
.aiwp-ai-expand {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); color: #fff; font-weight: var(--fw-semibold); font-size: 13px;
  padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.22);
  margin-right: 10px; transition: background var(--dur-base), border-color var(--dur-base), opacity var(--dur-base);
}
.aiwp-ai-expand:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.aiwp-ai-expand:disabled, .aiwp-ai-expand.busy { opacity: .65; cursor: default; }
.aiwp-ai-expand svg { color: var(--accent-yellow); }
.wok-aiwp[data-prompt="helder"] .aiwp-ai-expand { background: rgba(16,98,254,.08); color: var(--brand-primary); border-color: rgba(16,98,254,.22); }
.wok-aiwp[data-prompt="helder"] .aiwp-ai-expand:hover { background: rgba(16,98,254,.16); }

/* chips */
.aiwp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 0; max-width: 640px; }
.aiwp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92); font-size: 14px; font-weight: var(--fw-medium);
  padding: 8px 15px; border-radius: var(--radius-pill);
  transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
.aiwp-chip:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.aiwp-chip .emoji { font-size: 15px; }
.wok-aiwp[data-hero="light"] .aiwp-chip { background: var(--surface); border-color: var(--gray-lighter-4); color: var(--gray-darker); }
.wok-aiwp[data-hero="light"] .aiwp-chip:hover { border-color: var(--brand-primary); }

/* trust strip */
.aiwp-hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  margin: 30px auto 0; font-size: var(--fs-caption); color: rgba(255,255,255,.66);
}
.aiwp-hero-trust b { color: #fff; font-weight: var(--fw-bold); }
.aiwp-hero-trust .sep { opacity: .4; }
.aiwp-hero-trust .stars { color: var(--accent-yellow); letter-spacing: 1px; }.wok-aiwp[data-hero="light"] .aiwp-hero-trust { color: var(--gray-base); }
.wok-aiwp[data-hero="light"] .aiwp-hero-trust b { color: var(--gray-darker); }

/* ============================================================
   TRUST BAR (under hero) — from design system /webhosting
   ============================================================ */
.aiwp-trustbar { padding: 26px 0; background: var(--surface); border-bottom: 1px solid var(--gray-lighter-4); }
.aiwp-trustbar .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.aiwp-trustbar .trust-item { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 210px; }
.aiwp-trustbar .trust-stars-col { display: flex; flex-direction: column; gap: 2px; }
.aiwp-trustbar .trust-stars { color: #00b67a; font-size: 18px; letter-spacing: 1px; line-height: 1; }
.aiwp-trustbar .trust-item-num { font-size: 24px; font-weight: 800; color: var(--grad-start); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.aiwp-trustbar .trust-item-label { font-size: 12px; color: var(--gray-base); line-height: 1.3; white-space: pre-line; }
.aiwp-trustbar .trust-divider { width: 1px; height: 38px; background: var(--gray-lighter-4); flex-shrink: 0; }
@media (max-width: 900px) {
  .aiwp-trustbar .trust-divider { display: none; }
  .aiwp-trustbar .container { gap: 22px 28px; }
  .aiwp-trustbar .trust-item { flex: 1 1 40%; min-width: 180px; }
}

/* ============================================================
   EMAIL MODAL
   ============================================================ */
.aiwp-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6,10,28,.62); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; animation: aiwp-fade-in var(--dur-base) var(--ease-standard) forwards;
}
@keyframes aiwp-fade-in { to { opacity: 1; } }
.aiwp-modal {
  position: relative; width: 100%; max-width: 460px; color: var(--gray-darker);
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero); padding: 32px 30px 28px;
  transform: translateY(14px) scale(.98); opacity: 0;
  animation: aiwp-modal-in var(--dur-slow) var(--ease-bounce) forwards;
}
@keyframes aiwp-modal-in { to { transform: translateY(0) scale(1); opacity: 1; } }
.aiwp-modal-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%; color: var(--gray-base);
  background: var(--body-bg); transition: background var(--dur-base), color var(--dur-base);
}
.aiwp-modal-close:hover { background: var(--gray-lighter-4); color: var(--gray-darker); }
.aiwp-modal-eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-primary); margin-bottom: 10px;
}
.aiwp-modal h3 { font-size: 23px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }
.aiwp-modal .lede { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-body); margin-bottom: 20px; }
.aiwp-modal-recap {
  background: linear-gradient(180deg, rgba(16,98,254,.06), rgba(16,98,254,.02));
  border: 1px solid rgba(16,98,254,.16);
  border-radius: var(--radius-md); padding: 13px 15px; margin-bottom: 20px;
  font-size: 14px; color: var(--gray-darker); line-height: 1.5; max-height: 96px; overflow: auto;
}
.aiwp-modal-recap .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brand-primary); display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.aiwp-modal-recap .lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16,98,254,.18); }
.aiwp-field { margin-bottom: 14px; }
.aiwp-field label { display: block; font-size: 13px; font-weight: var(--fw-semibold); margin-bottom: 6px; }
.aiwp-field label .opt { color: var(--gray-base); font-weight: var(--fw-regular); }
.aiwp-input {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--gray-darker);
  padding: 12px 14px; border: 1.5px solid var(--gray-lighter-4); border-radius: var(--radius-md);
  background: var(--surface); transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.aiwp-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16,98,254,.14); }
.aiwp-input.err { border-color: var(--brand-danger); }
.aiwp-err-msg { font-size: 12px; color: var(--brand-danger); margin-top: 5px; }
.aiwp-gdpr { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; cursor: pointer; }
.aiwp-gdpr input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand-primary); flex-shrink: 0; }
.aiwp-gdpr span { font-size: 12.5px; color: var(--gray-base); line-height: 1.5; }
.aiwp-modal-micro { text-align: center; font-size: 12px; color: var(--gray-base); margin-top: 12px; }
.aiwp-modal-micro .lock { color: var(--brand-success-dark); }

/* confirmation */
.aiwp-confirm { text-align: center; padding: 8px 0 4px; }
.aiwp-confirm-ico {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-success), var(--brand-success-dark));
  box-shadow: 0 12px 30px rgba(54,192,85,.4);
  animation: aiwp-pop var(--dur-slow) var(--ease-bounce);
}
@keyframes aiwp-pop { from { transform: scale(.3); opacity: 0; } }
.aiwp-confirm h3 { font-size: 23px; margin-bottom: 8px; }
.aiwp-confirm p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-body); margin-bottom: 6px; }
.aiwp-confirm .mail { font-weight: var(--fw-bold); color: var(--gray-darker); }
.aiwp-confirm-steps { text-align: left; background: var(--body-bg); border-radius: var(--radius-md); padding: 16px 18px; margin: 18px 0 4px; }
.aiwp-confirm-steps li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--gray-base); padding: 6px 0; }
.aiwp-confirm-steps .n { font-family: var(--font-mono); font-weight: 700; color: var(--brand-primary); flex-shrink: 0; }

/* ============================================================
   ANIMATED BROWSER MOCKUP ("video")
   ============================================================ */
.aiwp-demo { padding: clamp(56px,7vw,90px) 0; background: var(--body-bg); }
.aiwp-browser {
  max-width: 1040px; margin: 0 auto; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lift); border: 4px solid #e3e6eb;
}
.aiwp-browser-chrome {
  display: flex; align-items: center; gap: 8px; padding: 13px 16px;
  background: #f2f3f6; border-bottom: 1px solid var(--gray-lighter-4);
}
.aiwp-browser-chrome .dot { width: 12px; height: 12px; border-radius: 50%; }
.aiwp-browser-chrome .r { background: #ff5f57; } .aiwp-browser-chrome .y { background: #febc2e; } .aiwp-browser-chrome .g { background: #28c840; }
.aiwp-browser-url {
  flex: 1; margin-left: 10px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--gray-lighter-4);
  border-radius: var(--radius-pill); padding: 7px 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--gray-base);
}
.aiwp-browser-url .lock { color: var(--brand-success-dark); }
.aiwp-browser-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-base);
  display: inline-flex; align-items: center; gap: 7px;
}
.aiwp-browser-tag .live { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-success); box-shadow: 0 0 0 3px rgba(54,192,85,.25); }
.aiwp-browser-stage { position: relative; aspect-ratio: 16/9.4; background: #0c0e14; overflow: hidden; }
.aiwp-browser-stage--video { aspect-ratio: 16/9; background: #1d65af; }
.aiwp-demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.aiwp-demo-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #1d65af; color: rgba(255,255,255,.85); }
.aiwp-demo-poster .spin { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: aiwp-spin .8s linear infinite; }
.aiwp-demo-poster .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.aiwp-demo-cover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: #1d65af; transition: opacity .45s var(--ease-standard); }
.aiwp-demo-cover.hide { opacity: 0; pointer-events: none; }

/* phase chrome bar */
.aiwp-phase-rail { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; gap: 0; background: rgba(12,14,20,.7); backdrop-filter: blur(6px); }
.aiwp-phase-rail .ph { flex: 1; padding: 9px 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.4); display: flex; align-items: center; gap: 7px; transition: color var(--dur-base); }
.aiwp-phase-rail .ph .num { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 9px; }
.aiwp-phase-rail .ph.active { color: #fff; }
.aiwp-phase-rail .ph.active .num { background: var(--brand-primary); border-color: var(--brand-primary); }
.aiwp-phase-rail .ph.done .num { background: var(--brand-success); border-color: var(--brand-success); }
.aiwp-phase-progress { position: absolute; top: 35px; left: 0; height: 2px; background: var(--brand-primary-lighter); z-index: 6; transition: width .3s linear; box-shadow: 0 0 8px var(--brand-primary-lighter); }

.aiwp-scene { position: absolute; inset: 37px 0 0; opacity: 0; transition: opacity .5s var(--ease-standard); pointer-events: none; }
.aiwp-scene.show { opacity: 1; }

/* scene 1 — typing */
.aiwp-sc-type { display: flex; align-items: center; justify-content: center; padding: 24px; }
.aiwp-sc-type .box { width: 100%; max-width: 560px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 18px 20px; }
.aiwp-sc-type .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px; }
.aiwp-sc-type .txt { font-size: 17px; color: #fff; line-height: 1.5; min-height: 52px; }
.aiwp-sc-type .txt .caret { display: inline-block; width: 2px; height: 19px; background: var(--brand-primary-lighter); margin-left: 2px; vertical-align: -3px; animation: aiwp-caret 1s steps(2) infinite; }
@keyframes aiwp-caret { 50% { opacity: 0; } }
.aiwp-sc-type .send { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--brand-primary-lighter),var(--brand-primary)); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: var(--radius-sm); }

/* scene 2 — building */
.aiwp-sc-build { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; }
.aiwp-sc-build .ring { width: 64px; height: 64px; position: relative; }
.aiwp-sc-build .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aiwp-sc-build .ring .pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; }
.aiwp-build-logs { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 7px; }
.aiwp-build-log { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.45); opacity: 0; transform: translateY(6px); }
.aiwp-build-log.in { opacity: 1; transform: translateY(0); transition: all .4s var(--ease-standard); color: rgba(255,255,255,.8); }
.aiwp-build-log .tick { color: var(--brand-success); }
.aiwp-build-log .spin { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--brand-primary-lighter); border-radius: 50%; animation: aiwp-spin .7s linear infinite; }
@keyframes aiwp-spin { to { transform: rotate(360deg); } }

/* scene 3 — editor */
.aiwp-sc-edit { display: grid; grid-template-columns: 168px 1fr; height: 100%; }
.aiwp-edit-side { background: #14161f; border-right: 1px solid rgba(255,255,255,.07); padding: 14px 12px; }
.aiwp-edit-side .h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 9px; }
.aiwp-edit-block { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 5px; background: rgba(255,255,255,.03); }
.aiwp-edit-block.sel { background: rgba(16,98,254,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,154,255,.5); }
.aiwp-edit-block .gr { width: 11px; height: 11px; opacity: .5; }
.aiwp-edit-canvas { background: #fff; position: relative; overflow: hidden; }
.aiwp-edit-cursor { position: absolute; z-index: 4; color: #11131a; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); transition: all 1.1s var(--ease-standard); }

/* scene 4 — live preview (mini site) */
.aiwp-sc-live { background: #fff; height: 100%; overflow: hidden; }

.aiwp-demo-caption { text-align: center; margin-top: 22px; font-size: var(--fs-caption); color: var(--gray-base); }
.aiwp-demo-caption b { color: var(--gray-darker); }
.aiwp-demo-replay { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; color: var(--brand-primary); font-weight: 600; font-family: var(--font-mono); font-size: 12px; }

/* mini demo site (reused in scene 4 + templates) */
.aiwp-mini { height: 100%; display: flex; flex-direction: column; color: #1a1d24; font-size: 11px; }
.aiwp-mini-nav { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid #eef0f3; }
.aiwp-mini-nav .logo { font-weight: 800; font-size: 13px; letter-spacing: -.02em; }
.aiwp-mini-nav a { color: #5e636e; font-size: 10.5px; }
.aiwp-mini-nav .cta { margin-left: auto; background: #1062fe; color: #fff; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 10px; }
.aiwp-mini-hero { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; padding: 22px; align-items: center; }
.aiwp-mini-hero h4 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 8px; }
.aiwp-mini-hero h4 em { font-style: italic; }
.aiwp-mini-hero p { color: #5e636e; line-height: 1.5; margin-bottom: 12px; font-size: 11px; }
.aiwp-mini-hero .b { display: inline-block; background: #1062fe; color: #fff; padding: 8px 14px; border-radius: 7px; font-weight: 700; font-size: 10.5px; }
.aiwp-mini-card { aspect-ratio: 4/3.4; border-radius: 12px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 14px; }
.aiwp-mini-card .tag { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.9); border-radius: 50px; padding: 3px 9px; font-size: 9px; font-weight: 700; }
.aiwp-mini-card .nm { color: #fff; font-weight: 700; font-size: 12px; }
.aiwp-mini-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 0 22px 20px; }
.aiwp-mini-svc { background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 9px; padding: 11px 13px; }
.aiwp-mini-svc .n { font-weight: 700; font-size: 11px; }
.aiwp-mini-svc .p { font-family: var(--font-mono); color: #1062fe; font-size: 10px; margin-top: 3px; }

/* ============================================================
   TLDR + PIJLERS
   ============================================================ */
.aiwp-intro { padding: 10px 0 clamp(48px,6vw,80px); background: var(--body-bg); }
.aiwp-tldr {
  max-width: 760px; margin: 0 auto 48px; text-align: center;
  font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--gray-darker);
}
.aiwp-tldr .eyebrow { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 14px; font-weight: 600; }
.aiwp-tldr b { font-weight: var(--fw-bold); }
.aiwp-tldr .aiwp-price { color: var(--brand-primary); font-weight: var(--fw-bold); font-size: inherit; line-height: inherit; display: inline; }

.aiwp-pijlers { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.aiwp-pijler {
  background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-card);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.aiwp-pijler:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.aiwp-pijler-ico { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: 18px; color: #fff; }
.aiwp-pijler-ico.blue { background: var(--cta-gradient); }
.aiwp-pijler-ico.navy { background: var(--chip-gradient); }
.aiwp-pijler-ico.amber { background: linear-gradient(135deg, var(--brand-warning), var(--brand-warning-dark)); }
.aiwp-pijler h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -.01em; margin-bottom: 10px; }
.aiwp-pijler p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-body); }

/* ============================================================
   HOE WERKT HET — 4 steps
   ============================================================ */
.aiwp-how { padding: clamp(56px,7vw,90px) 0; background: var(--surface); }

/* ---- shared mini-visual stage (always-on subtle motion) ---- */
.aiwp-step-visual { height: 80px; border-radius: var(--radius-md); background: linear-gradient(160deg, #eef3ff, #f7faff); border: 1px solid rgba(16,98,254,.08); overflow: hidden; position: relative; }
.sv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sv-type { gap: 8px; padding: 0 16px; }
.sv-prompt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary-lighter); box-shadow: 0 0 0 4px rgba(0,154,255,.18); flex-shrink: 0; }
.sv-type-text { font-family: var(--font-mono); font-size: 12.5px; color: var(--gray-darker); white-space: nowrap; overflow: hidden; animation: sv-typing 5s steps(20) infinite; }
@keyframes sv-typing { 0% { max-width: 0; } 35% { max-width: 168px; } 80% { max-width: 168px; } 100% { max-width: 0; } }
.sv-caret { display: inline-block; width: 2px; height: 13px; background: var(--brand-primary); margin-left: 2px; vertical-align: -2px; animation: sv-blink 1s steps(2) infinite; }
@keyframes sv-blink { 50% { opacity: 0; } }
.sv-build { gap: 8px; align-items: flex-end; padding-bottom: 22px; }
.sv-build .sv-bar { width: 16px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brand-primary-lighter), var(--brand-primary)); height: 14px; animation: sv-grow 1.3s var(--ease-bounce) infinite alternate; }
.sv-build .b1 { animation-delay: .2s; } .sv-build .b2 { animation-delay: .4s; }
@keyframes sv-grow { from { height: 12px; } to { height: 38px; } }
.sv-build .sv-spark { position: absolute; top: 16px; right: 32%; color: var(--accent-yellow); font-size: 14px; animation: sv-twinkle 1.8s ease-in-out infinite; }
@keyframes sv-twinkle { 0%,100% { opacity: .3; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.sv-edit { gap: 7px; }
.sv-edit .sv-block { height: 11px; border-radius: 3px; background: rgba(16,98,254,.22); }
.sv-edit .a { width: 46px; } .sv-edit .b { width: 30px; background: rgba(16,98,254,.34); animation: sv-shift 2s var(--ease-standard) infinite; } .sv-edit .c { width: 38px; }
@keyframes sv-shift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sv-edit .sv-cursor { position: absolute; width: 16px; height: 16px; color: var(--gray-darker); left: 50%; top: 54%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); animation: sv-point 2s var(--ease-standard) infinite; }
@keyframes sv-point { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-9px); } }
.sv-live .sv-globe { color: var(--brand-success-dark); width: 34px; height: 34px; display: grid; place-items: center; z-index: 1; }
.sv-live .sv-globe svg { width: 34px; height: 34px; }
.sv-live .sv-pulse { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brand-success); opacity: 0; animation: sv-ring 2.2s ease-out infinite; }
.sv-live .sv-pulse.d2 { animation-delay: 1.1s; }
@keyframes sv-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sv-type-text, .sv-bar, .sv-spark, .sv-edit .b, .sv-cursor, .sv-pulse, .sv-caret { animation: none !important; } .sv-type-text { max-width: 168px; } }

/* ============================================================
   variant PIN — sticky scrollytelling
   ============================================================ */
.aiwp-pin { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; margin-top: 10px; }
.aiwp-pin-aside { position: sticky; top: 96px; }
.aiwp-pin-stage { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-xl); background: var(--hero-gradient); overflow: hidden; box-shadow: var(--shadow-hero); display: grid; place-items: center; }
.aiwp-pin-stage::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(120% 90% at 50% 35%,#000 40%,transparent 80%); mask-image: radial-gradient(120% 90% at 50% 35%,#000 40%,transparent 80%); }
.aiwp-pin-art { position: relative; z-index: 1; animation: aiwp-pin-pop .55s var(--ease-bounce); }
.aiwp-pin-art .aiwp-show-visual { width: 260px; max-width: 64%; height: 130px; background: rgba(255,255,255,.97); border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.5); }
.aiwp-pin-art .sv { transform: scale(1.3); }
@keyframes aiwp-pin-pop { from { opacity:0; transform: translateY(16px) scale(.94); } }
.aiwp-pin-bignum { position:absolute; top: 16px; left: 22px; font-family: var(--font-mono); font-weight: 900; font-size: 72px; line-height:1; color: rgba(255,255,255,.18); z-index:1; animation: aiwp-fade-in .5s; }
.aiwp-pin-track { position:absolute; bottom:20px; left:22px; right:22px; display:flex; gap:6px; z-index:1; }
.aiwp-pin-track .seg { flex:1; height:4px; border-radius:2px; background: rgba(255,255,255,.22); transition: background .4s; }
.aiwp-pin-track .seg.on { background: linear-gradient(90deg, var(--brand-primary-lighter), #fff); }
.aiwp-pin-step { min-height: 62vh; display:flex; flex-direction:column; justify-content:center; border-left: 2px solid var(--gray-lighter-4); padding: 8px 0 8px 30px; opacity:.38; transition: opacity .45s var(--ease-standard), border-color .45s; }
.aiwp-pin-step.active { opacity:1; border-color: var(--brand-primary); }
.aiwp-pin-kicker { font-family: var(--font-mono); font-size: 12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color: var(--brand-primary); margin-bottom: 12px; }
.aiwp-pin-step h3 { font-size: clamp(24px,3.2vw,36px); font-weight: var(--fw-black); letter-spacing:-.03em; line-height:1.08; margin-bottom: 14px; color: var(--gray-darker); }
.aiwp-pin-step p { font-size: var(--fs-body-lg); color: var(--gray-base); line-height: var(--lh-loose); max-width: 460px; }
@media (max-width: 760px) {
  .aiwp-pin { grid-template-columns: 1fr; gap: 18px; }
  .aiwp-pin-aside { position: relative; top: 0; }
  .aiwp-pin-stage { aspect-ratio: 16/10; max-height: 260px; }
  .aiwp-pin-step { min-height: 0; padding: 16px 0 16px 22px; opacity: 1; }
}

/* ============================================================
   variant WIPE — clip-path sweep reveal
   ============================================================ */
.aiwp-wipe { display:flex; flex-direction:column; gap: 16px; margin: 10px auto 0; max-width: 900px; }
.aiwp-wipe-row { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--gray-lighter-4); box-shadow: var(--shadow-card); }
.aiwp-wipe-inner { display:flex; align-items:center; gap: 22px; padding: 20px 26px; clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease-standard) .18s; }
.aiwp-wipe-row.in .aiwp-wipe-inner { clip-path: inset(0 0 0 0); }
.aiwp-wipe-sweep { position:absolute; inset:0; background: linear-gradient(120deg, var(--grad-start) 0%, var(--brand-primary) 45%, var(--brand-warning) 100%); transform: scaleX(0); transform-origin:left; pointer-events:none; opacity:.92; }
.aiwp-wipe-row.alt .aiwp-wipe-sweep { background: linear-gradient(120deg, var(--brand-warning) 0%, var(--brand-primary) 55%, var(--grad-start) 100%); }
.aiwp-wipe-row.in .aiwp-wipe-sweep { animation: aiwp-sweep .85s var(--ease-standard) forwards; }
@keyframes aiwp-sweep { 0% { transform: scaleX(0); transform-origin:left; } 48% { transform: scaleX(1); transform-origin:left; } 49% { transform: scaleX(1); transform-origin:right; } 100% { transform: scaleX(0); transform-origin:right; } }
.aiwp-wipe-num { font-family: var(--font-mono); font-weight:900; font-size: 42px; color: var(--brand-primary); opacity:.22; flex-shrink:0; width: 52px; text-align:center; }
.aiwp-wipe-row.alt .aiwp-wipe-num { color: var(--brand-primary); }
.aiwp-wipe-visual { position: relative; width: 200px; height: 112px; flex-shrink:0; border-radius: var(--radius-md); overflow: hidden; }
.aiwp-wipe-body h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing:-.01em; margin-bottom: 6px; }
.aiwp-wipe-body p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-body); white-space: pre-line; }
.aiwp-pin-step p, .aiwp-stack-foot p { white-space: pre-line; }
@media (prefers-reduced-motion: reduce) { .aiwp-wipe-inner { clip-path: none; transition: none; } .aiwp-wipe-sweep { display: none; } }
@media (max-width: 620px) { .aiwp-wipe-inner { flex-wrap: wrap; gap: 14px; } .aiwp-wipe-visual { width: 100%; } .aiwp-wipe-num { width: auto; } }

/* ============================================================
   variant STAPEL — 3D snap-in fanned deck
   ============================================================ */
.aiwp-stack { display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 10px; perspective: 1400px; }
.aiwp-stack-card { background: var(--surface); border:1px solid var(--gray-lighter-4); border-radius: var(--radius-lg); padding: 18px 18px 20px; box-shadow: var(--shadow-card); opacity:0; transform: translateY(46px) rotateX(30deg) rotate(-4deg) scale(.9); transform-origin: center bottom; transition: opacity .55s var(--ease-standard) var(--d), transform .75s var(--ease-bounce) var(--d), box-shadow var(--dur-base); }
.aiwp-stack-card:nth-child(even) { transform: translateY(46px) rotateX(30deg) rotate(4deg) scale(.9); }
.aiwp-stack-card.in { opacity:1; transform: none; }
.aiwp-stack-card.c1 { margin-top: 22px; } .aiwp-stack-card.c2 { margin-top: 44px; } .aiwp-stack-card.c3 { margin-top: 66px; }
.aiwp-stack-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: rgba(16,98,254,.28); }
.aiwp-stack-foot { display:flex; gap:12px; align-items:flex-start; margin-top: 14px; }
.aiwp-stack-num { flex-shrink:0; width: 30px; height: 30px; border-radius: 50%; display:grid; place-items:center; font-family: var(--font-mono); font-weight:800; font-size:14px; color:#fff; background: var(--chip-gradient); box-shadow: var(--shadow-badge); }
.aiwp-stack-card:nth-child(2) .aiwp-stack-num { background: linear-gradient(135deg,var(--brand-primary-lighter),var(--brand-primary)); }
.aiwp-stack-card:nth-child(3) .aiwp-stack-num { background: linear-gradient(135deg,var(--brand-warning),var(--brand-warning-dark)); }
.aiwp-stack-card:nth-child(4) .aiwp-stack-num { background: linear-gradient(135deg,var(--brand-success),var(--brand-success-dark)); }
.aiwp-stack-foot h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing:-.01em; margin-bottom: 5px; }
.aiwp-stack-foot p { font-size: 13.5px; color: var(--gray-base); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .aiwp-stack-card { opacity:1; transform:none; transition:none; } }
@media (max-width: 860px) { .aiwp-stack { grid-template-columns: repeat(2,1fr); } .aiwp-stack-card.c1,.aiwp-stack-card.c2,.aiwp-stack-card.c3 { margin-top: 0; } }
@media (max-width: 520px) { .aiwp-stack { grid-template-columns: 1fr; } }

/* ============================================================
   STEP WIDGETS — venster · diepte · neon
   ============================================================ */
.aiwp-wv { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }

/* ---- VENSTER: mini browser/app mockups ---- */
.aiwp-wv-venster { background: #fff; }
.wv-win { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.wv-win-bar { height: 19px; display: flex; align-items: center; gap: 4px; padding: 0 9px; background: #f1f3f7; border-bottom: 1px solid #e7eaf0; flex-shrink: 0; }
.wv-win-bar .d { width: 6px; height: 6px; border-radius: 50%; }
.wv-win-bar .d.r { background: #ff5f57; } .wv-win-bar .d.y { background: #febc2e; } .wv-win-bar .d.g { background: #28c840; }
.wv-win-url { margin-left: 7px; font-family: var(--font-mono); font-size: 7.5px; color: #9aa1ad; white-space: nowrap; overflow: hidden; }
.wv-win-body { flex: 1; position: relative; padding: 10px 11px; }
.wv-input { display: flex; align-items: center; gap: 5px; background: #f7f8fa; border: 1px solid #e7eaf0; border-radius: 6px; padding: 6px 8px; }
.wv-bdot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary-lighter); flex-shrink: 0; }
.wv-tline { font-family: var(--font-mono); font-size: 9px; color: #33373f; white-space: nowrap; overflow: hidden; animation: sv-typing 5s steps(20) infinite; }
.wv-car { width: 1.5px; height: 10px; background: var(--brand-primary); animation: sv-blink 1s steps(2) infinite; flex-shrink: 0; }
.wv-gen { display: inline-block; margin-top: 8px; background: var(--cta-gradient); color: #fff; font-size: 8px; font-weight: 700; padding: 4px 9px; border-radius: 5px; }
.wv-prog { height: 5px; background: #eef1f5; border-radius: 3px; overflow: hidden; margin-bottom: 9px; }
.wv-prog span { display: block; height: 100%; width: 40%; background: var(--cta-gradient); border-radius: 3px; animation: wv-load 2.2s var(--ease-standard) infinite; }
@keyframes wv-load { 0% { width: 8%; } 80% { width: 96%; } 100% { width: 100%; } }
.wv-skel { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #eef1f5, #e2e6ee, #eef1f5); background-size: 200% 100%; animation: wv-shim 1.4s linear infinite; margin-bottom: 5px; }
.wv-skel.a { width: 90%; } .wv-skel.b { width: 68%; } .wv-skel.c { width: 80%; }
@keyframes wv-shim { to { background-position: -200% 0; } }
.wv-ed { display: flex; gap: 7px; height: 100%; }
.wv-rail { width: 28px; display: flex; flex-direction: column; gap: 5px; }
.wv-rail span { height: 9px; border-radius: 2px; background: #e7eaf0; }
.wv-rail .on { background: rgba(16,98,254,.4); }
.wv-cv { flex: 1; position: relative; background: #f7f8fa; border-radius: 5px; padding: 8px; }
.wv-cv-h { height: 8px; width: 58%; background: rgba(16,98,254,.32); border-radius: 2px; margin-bottom: 6px; }
.wv-cv-l { height: 5px; background: #e2e6ee; border-radius: 2px; margin-bottom: 4px; }
.wv-cv-l.sh { width: 70%; }
.wv-cur { position: absolute; width: 12px; height: 12px; color: #2b2f36; right: 22%; bottom: 16%; animation: sv-point 2s var(--ease-standard) infinite; }
.wv-site { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wv-snav { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #eef1f5; }
.wv-snav b { width: 18px; height: 6px; background: var(--brand-primary); border-radius: 2px; }
.wv-snav span { width: 12px; height: 4px; background: #dfe3ea; border-radius: 2px; }
.wv-snav i { margin-left: auto; width: 22px; height: 9px; background: var(--cta-gradient); border-radius: 3px; }
.wv-shero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 13px; background: linear-gradient(160deg, #eef3ff, #fff); }
.wv-sh-t { width: 62%; height: 9px; background: #2b2f36; border-radius: 3px; }
.wv-sh-p { width: 82%; height: 5px; background: #c4cad4; border-radius: 2px; }
.wv-sh-btn { width: 32px; height: 9px; background: var(--cta-gradient); border-radius: 3px; margin-top: 3px; }

/* ---- DIEPTE: floating layered fragments ---- */
.aiwp-wv-diepte { background: radial-gradient(120% 120% at 50% 18%, #f1f6ff, #dde6f5); }
.wd { position: absolute; inset: 0; }
@keyframes wd-bob { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-6px) rotate(var(--r,0deg)); } }
.wd-bubble { position: absolute; top: 30%; left: 13%; background: #fff; border-radius: 10px 10px 10px 2px; padding: 7px 10px; font-size: 9px; font-family: var(--font-mono); color: #33373f; box-shadow: 0 8px 18px -6px rgba(20,42,128,.4); animation: wd-bob 3s ease-in-out infinite; }
.wd-cur { position: absolute; width: 13px; height: 13px; color: #2b2f36; right: 22%; bottom: 24%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); animation: wd-bob 3s ease-in-out infinite .3s; }
.wd-build .wd-card { position: absolute; width: 52px; height: 36px; border-radius: 7px; background: #fff; box-shadow: 0 8px 18px -6px rgba(20,42,128,.35); }
.wd-card.f1 { left: 22%; top: 30%; --r: -8deg; animation: wd-bob 3.2s ease-in-out infinite; }
.wd-card.f2 { left: 38%; top: 22%; --r: 0deg; background: linear-gradient(135deg, #dceaff, #fff); animation: wd-bob 3.2s ease-in-out infinite .2s; }
.wd-card.f3 { left: 54%; top: 32%; --r: 7deg; animation: wd-bob 3.2s ease-in-out infinite .4s; }
.wd-spark { position: absolute; top: 18%; right: 26%; color: var(--accent-yellow); font-size: 13px; animation: sv-twinkle 1.8s ease-in-out infinite; }
.wd-edit .wd-tile { position: absolute; border-radius: 6px; box-shadow: 0 8px 16px -6px rgba(20,42,128,.3); }
.wd-tile.a { width: 60px; height: 22px; left: 18%; top: 26%; background: #fff; --r: -4deg; animation: wd-bob 3.4s ease-in-out infinite; }
.wd-tile.b { width: 46px; height: 20px; left: 40%; top: 50%; background: linear-gradient(135deg, #cfe0ff, #fff); --r: 3deg; animation: wd-bob 3s ease-in-out infinite .2s; }
.wd-guide { position: absolute; left: 36%; top: 18%; width: 1px; height: 62%; background: repeating-linear-gradient(180deg, var(--brand-primary) 0 3px, transparent 3px 6px); opacity: .45; }
.wd-edit .wd-cur { right: 26%; bottom: 24%; }
.wd-live .wd-phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 52px; height: 62px; border-radius: 10px; background: #fff; box-shadow: 0 10px 22px -6px rgba(20,42,128,.4); display: grid; place-items: center; }
.wd-check { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-success), var(--brand-success-dark)); color: #fff; display: grid; place-items: center; animation: aiwp-pop .6s var(--ease-bounce); }
.wd-check svg { width: 14px; height: 14px; }
.wd-badge { position: absolute; right: 20%; top: 24%; background: var(--brand-primary); color: #fff; font-family: var(--font-mono); font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 50px; box-shadow: 0 6px 14px -4px rgba(16,98,254,.6); --r: 0deg; animation: wd-bob 3s ease-in-out infinite .4s; }

/* ---- NEON: dark techy panels w/ glow ---- */
.aiwp-wv-neon { background: radial-gradient(120% 130% at 70% 8%, #1b3a86, #0a1030); }
.wn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wn-type { gap: 5px; padding: 0 14px; }
.wn-prompt { font-family: var(--font-mono); color: var(--brand-primary-lighter); font-size: 12px; font-weight: 700; text-shadow: 0 0 8px rgba(0,154,255,.8); }
.wn-tline { font-family: var(--font-mono); font-size: 9px; color: #cfe0ff; white-space: nowrap; overflow: hidden; animation: sv-typing 5s steps(20) infinite; }
.wn-car { width: 6px; height: 11px; background: var(--brand-primary-lighter); box-shadow: 0 0 8px var(--brand-primary-lighter); animation: sv-blink 1s steps(2) infinite; }
.wn-build .wn-ring { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(0,154,255,.18); border-top-color: #009aff; box-shadow: 0 0 16px rgba(0,154,255,.6); animation: aiwp-spin 1.1s linear infinite; }
.wn-build .wn-pct { position: absolute; font-family: var(--font-mono); font-size: 9px; font-weight: 800; color: #cfe0ff; letter-spacing: .5px; }
.wn-scan { position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, #009aff, transparent); box-shadow: 0 0 10px #009aff; animation: wn-scan 2.4s ease-in-out infinite; }
@keyframes wn-scan { 0%,100% { top: 26%; } 50% { top: 70%; } }
/* new neon build: counting conic progress ring */
.wn-build2 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
.wn-pring { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from -90deg, #009aff calc(var(--p,0) * 1%), rgba(255,255,255,.08) 0);
  box-shadow: 0 0 18px rgba(0,154,255,.45), inset 0 0 8px rgba(0,154,255,.25); }
.wn-pring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #1b3a86, #0a1030); }
.wn-pnum { position: relative; font-family: var(--font-mono); font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 0 9px rgba(0,154,255,.85); letter-spacing: -.5px; }
.wn-pnum i { font-size: 8px; font-style: normal; opacity: .65; margin-left: 1px; }
.wn-pbars { display: flex; gap: 4px; }
.wn-pbars span { width: 11px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); transition: background .3s, box-shadow .3s; }
.wn-pbars span.on { background: #009aff; box-shadow: 0 0 8px #009aff; }
.wn-pbars span:nth-child(4).on { background: var(--brand-warning); box-shadow: 0 0 8px var(--brand-warning); }
.wn-edit { flex-direction: column; gap: 6px; }
.wn-wire { height: 10px; border-radius: 3px; border: 1px solid rgba(120,170,255,.4); }
.wn-wire.w1 { width: 74px; } .wn-wire.w2 { width: 50px; } .wn-wire.w3 { width: 62px; }
.wn-wire.w1 { animation: wn-shift 3.8s var(--ease-standard) infinite; }
.wn-wire.sel { border-color: #009aff; box-shadow: 0 0 12px rgba(0,154,255,.7); background: rgba(0,154,255,.12); position: relative; z-index: 3; animation: wn-drag 3.8s var(--ease-standard) infinite; }
@keyframes wn-drag {
  0%, 14% { transform: translateY(0) scale(1); }
  22% { transform: translateY(0) scale(1.14); }
  46% { transform: translateY(-18px) scale(1.14); }
  58%, 76% { transform: translateY(-18px) scale(1); }
  88%, 100% { transform: translateY(0) scale(1); }
}
@keyframes wn-shift {
  0%, 24% { transform: translateY(0); }
  48%, 76% { transform: translateY(18px); }
  88%, 100% { transform: translateY(0); }
}
.wn-dragcur { position: absolute; width: 14px; height: 14px; color: #fff; left: 56%; top: 50%; filter: drop-shadow(0 0 6px rgba(0,154,255,.85)); z-index: 4; opacity: 0; animation: wn-dragcur 3.8s var(--ease-standard) infinite; }
@keyframes wn-dragcur {
  0%, 7% { opacity: 0; transform: translate(8px, 12px) scale(1); }
  14% { opacity: 1; transform: translate(0, 2px) scale(1); }
  22% { opacity: 1; transform: translate(0, 0) scale(.86); }
  46% { opacity: 1; transform: translate(0, -18px) scale(.86); }
  58% { opacity: 1; transform: translate(0, -18px) scale(1); }
  70% { opacity: 0; transform: translate(7px, -16px) scale(1); }
  100% { opacity: 0; transform: translate(8px, 12px) scale(1); }
}
.wn-live .wn-globe { color: #009aff; filter: drop-shadow(0 0 10px rgba(0,154,255,.85)); }
.wn-live .wn-globe svg { width: 38px; height: 38px; }
.wn-tag { position: absolute; bottom: 14%; font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--brand-success); letter-spacing: 1px; text-shadow: 0 0 8px rgba(54,192,85,.8); }

/* live: WERELDKAART (dotted) */
.wn-map { width: 96%; height: 90%; }
.wn-map-dots circle { fill: rgba(120,170,255,.45); }
.wn-map-link path { fill: none; stroke: #009aff; stroke-width: 1; stroke-dasharray: 3 4; opacity: .9; filter: drop-shadow(0 0 2px rgba(0,154,255,.9)); animation: wn-flow 1.1s linear infinite; }
@keyframes wn-flow { to { stroke-dashoffset: -14; } }
.wn-map-node circle { fill: var(--brand-warning); filter: drop-shadow(0 0 4px rgba(255,170,0,.9)); }
.wn-map-node .hub { fill: #fff; filter: drop-shadow(0 0 5px #009aff); }
.wn-map-node .hub-ring { fill: none; stroke: #009aff; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: wn-hubring 2s ease-out infinite; }
@keyframes wn-hubring { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

/* live: SIGNAAL */
.wn-sig { position: absolute; inset: 0; display: grid; place-items: center; }
.wn-sig .wn-globe { color: #009aff; filter: drop-shadow(0 0 12px rgba(0,154,255,.9)); z-index: 2; }
.wn-sig .wn-globe svg { width: 36px; height: 36px; }
.wn-sig-ring { position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1.6px solid #009aff; opacity: 0; animation: wn-sigring 2.4s ease-out infinite; }
.wn-sig-ring.r2 { animation-delay: .8s; } .wn-sig-ring.r3 { animation-delay: 1.6s; }
@keyframes wn-sigring { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
.wn-sat { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-warning); box-shadow: 0 0 8px var(--brand-warning); offset-path: ellipse(46px 30px at 50% 50%); animation: wn-orbit 3.4s linear infinite; }
@keyframes wn-orbit { to { offset-distance: 100%; } }

/* live: UPTIME */
.wn-up { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 0 20px; }
.wn-up-top { display: flex; align-items: center; gap: 7px; }
.wn-up-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-success); box-shadow: 0 0 8px var(--brand-success); animation: wn-blip 1.4s ease-in-out infinite; }
@keyframes wn-blip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }
.wn-up-top b { font-family: var(--font-mono); font-size: 10px; font-weight: 800; color: var(--brand-primary-lighter); letter-spacing: 1px; text-shadow: 0 0 8px rgba(0,154,255,.7); }
.wn-up-url { margin-left: auto; font-family: var(--font-mono); font-size: 8px; color: #8fa6d8; }
.wn-ekg { width: 100%; height: 26px; }
.wn-ekg path { fill: none; stroke: var(--brand-primary-lighter); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0,154,255,.85)); stroke-dasharray: 240; stroke-dashoffset: 240; animation: wn-draw 2.6s ease-in-out infinite; }
@keyframes wn-draw { 0% { stroke-dashoffset: 240; } 55% { stroke-dashoffset: 0; } 80%,100% { stroke-dashoffset: 0; opacity: 1; } }
.wn-up-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 7.5px; color: #6f86b8; }
.wn-up-ms { color: var(--brand-warning); }
@media (prefers-reduced-motion: reduce) {
  .wn-map-link path, .wn-map-node .hub-ring, .wn-sig-ring, .wn-sat, .wn-up-dot, .wn-ekg path { animation: none !important; }
  .wn-ekg path { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wv-tline, .wv-prog span, .wv-skel, .wv-cur, .wd-bubble, .wd-cur, .wd-card, .wd-tile, .wd-badge, .wd-spark, .wn-tline, .wn-ring, .wn-scan, .wn-car, .wn-wire.sel, .wn-wire.w1, .wn-dragcur { animation: none !important; }
}

/* ============================================================
   VOOR WIE
   ============================================================ */
.aiwp-features { padding: clamp(56px,7vw,90px) 0; background: var(--body-bg); }
.wok-aiwp .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; max-width: 1100px; margin: 0 auto; }
.wok-aiwp .bento-tile { position: relative; background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-lg); padding: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base); }
.wok-aiwp .bento-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(300px 200px at var(--mx,50%) var(--my,50%), rgba(16,98,254,.08), transparent 70%); opacity: 0; transition: opacity var(--dur-base); pointer-events: none; }
.wok-aiwp .bento-tile:hover { border-color: rgba(16,98,254,.3); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.wok-aiwp .bento-tile:hover::before { opacity: 1; }
.wok-aiwp .bento-tile.wide-2 { grid-column: span 2; }
.wok-aiwp .bento-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(16,98,254,.08); display: grid; place-items: center; margin-bottom: 14px; }
.wok-aiwp .bento-icon svg { width: 22px; height: 22px; fill: var(--brand-primary); }
.wok-aiwp .bento-tile h3 { font-size: 17px; font-weight: 700; color: var(--gray-darker); margin-bottom: 8px; letter-spacing: -.01em; }
.wok-aiwp .bento-tile p { font-size: 13px; color: var(--gray-base); line-height: 1.55; }
.wok-aiwp .bento-tile.dark { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); border-color: transparent; color: #fff; }
.wok-aiwp .bento-tile.dark h3 { color: #fff; }
.wok-aiwp .bento-tile.dark p { color: rgba(255,255,255,.78); }
.wok-aiwp .bento-tile.dark .bento-icon { background: rgba(255,255,255,.15); }
.wok-aiwp .bento-tile.dark .bento-icon svg { fill: #fff; }
.wok-aiwp .bento-tile.dark::before { background: radial-gradient(300px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 70%); }
.wok-aiwp .bento-stat { font-size: 46px; font-weight: 900; line-height: 1.1; letter-spacing: -.03em; color: var(--brand-primary); margin-bottom: 4px; }
.wok-aiwp .bento-tile.dark .bento-stat { background: linear-gradient(135deg,#fff,#a8d4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wok-aiwp .bento-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 13px; color: var(--accent-yellow); width: fit-content; }
.wok-aiwp .bento-arrow svg { width: 14px; height: 14px; fill: var(--accent-yellow); }

/* ============================================================
   DEMO FLOW — gratis demo uitleg
   ============================================================ */
.aiwp-dflow { padding: clamp(56px,7vw,90px) 0; background: var(--surface); }
.aiwp-dflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; position: relative; }
.aiwp-dflow-card { position: relative; background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.aiwp-dflow-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.aiwp-dflow-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.aiwp-dflow-ico { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; color: #fff; background: var(--cta-gradient); box-shadow: var(--shadow-primary); flex-shrink: 0; }
.aiwp-dflow-ico svg { width: 23px; height: 23px; }
.aiwp-dflow-card:nth-child(2) .aiwp-dflow-ico { background: var(--chip-gradient); }
.aiwp-dflow-card:nth-child(3) .aiwp-dflow-ico { background: linear-gradient(135deg, var(--brand-warning), var(--brand-warning-dark)); }
.aiwp-dflow-step { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray-base); }
.aiwp-dflow-card h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -.01em; margin-bottom: 8px; }
.aiwp-dflow-card p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-loose); }
/* connector arrows */
.aiwp-dflow-card:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -16px; transform: translateY(-50%);
  font-size: 20px; color: var(--brand-primary); z-index: 2; font-weight: 700;
}
.aiwp-dflow-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 28px auto 0; width: fit-content; padding: 10px 20px;
  background: rgba(54,192,85,.1); border: 1px solid rgba(54,192,85,.28); border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--brand-success-dark);
}
.aiwp-dflow-note.glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
@media (max-width: 860px) {
  .aiwp-dflow-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .aiwp-dflow-card:not(:last-child)::after { content: "↓"; top: auto; bottom: -16px; right: 50%; transform: translateX(50%); }
}

/* ============================================================
   DEMO FLOW — donker offer-paneel
   ============================================================ */
.dflow-dark { position: relative; overflow: hidden; background: var(--hero-gradient); }
.dflow-gridbg { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); }
.dflow-dark .container { position: relative; z-index: 1; }

.dflow-panel { position: relative; max-width: 720px; margin: 0 auto; text-align: center;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-xl);
  padding: clamp(32px,5vw,52px) clamp(26px,4vw,48px); backdrop-filter: blur(10px); box-shadow: 0 30px 70px -32px rgba(0,0,0,.6); }
.dflow-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(0,154,255,.7), rgba(120,90,255,.4), rgba(255,170,0,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; }
.dflow-panel-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent-yellow); display: inline-block; margin-bottom: 14px; }
.dflow-panel h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: var(--lh-heading); color: #fff; margin-bottom: 16px; text-wrap: balance; }
.dflow-panel p { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto; text-wrap: pretty; }
.dflow-panel p b { color: #fff; font-weight: var(--fw-bold); }
.dflow-incl { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 30px; }
.dflow-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill); padding: 9px 16px; font-size: 14px; font-weight: var(--fw-semibold); color: #fff; }
.dflow-chip svg { width: 17px; height: 17px; color: var(--brand-primary-lighter); }
.dflow-chip:nth-child(4) svg { color: var(--brand-success); }
.dflow-chip:nth-child(2) svg { color: var(--accent-yellow); }
.dflow-cta { display: flex; justify-content: center; }
/* Demo-startknop: opmaak via de centrale knoppenlaag */
@media (max-width: 560px) { .dflow-incl { gap: 8px; } .dflow-chip { font-size: 13px; padding: 8px 13px; } }

/* design: SPLIT (text + demo-card mock) */
.dflow-split2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; max-width: 1040px; margin: 0 auto; }
.dflow-split2-text { text-align: left; }
.dflow-split2-text h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: var(--lh-heading); color: #fff; margin-bottom: 14px; }
.dflow-split2-text p { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: rgba(255,255,255,.82); margin-bottom: 22px; }
.dflow-split2 .dflow-incl { justify-content: flex-start; margin: 0 0 26px; }
.dflow-cta.start { justify-content: flex-start; }
.dflow-democard { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 64px -28px rgba(0,0,0,.65); backdrop-filter: blur(6px); }
.ddc-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.1); }
.ddc-bar .d { width: 8px; height: 8px; border-radius: 50%; } .ddc-bar .d.r { background: #ff5f57; } .ddc-bar .d.y { background: #febc2e; } .ddc-bar .d.g { background: #28c840; }
.ddc-url { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.7); }
.ddc-body { padding: 16px; }
.ddc-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--brand-success); margin-bottom: 14px; }
.ddc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-success); box-shadow: 0 0 0 3px rgba(54,192,85,.25); }
.ddc-nav { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.ddc-nav b { width: 26px; height: 8px; background: var(--brand-primary-lighter); border-radius: 3px; }
.ddc-nav span { width: 16px; height: 5px; background: rgba(255,255,255,.25); border-radius: 3px; }
.ddc-nav i { margin-left: auto; width: 30px; height: 11px; background: var(--accent-yellow); border-radius: 3px; }
.ddc-hero { display: flex; flex-direction: column; gap: 8px; }
.ddc-h-t { width: 70%; height: 12px; background: rgba(255,255,255,.85); border-radius: 3px; }
.ddc-h-p { width: 90%; height: 7px; background: rgba(255,255,255,.3); border-radius: 3px; }
.ddc-h-btn { width: 64px; height: 16px; background: var(--cta-gradient); border-radius: 5px; margin-top: 4px; }
@media (max-width: 820px) { .dflow-split2 { grid-template-columns: 1fr; gap: 28px; max-width: 480px; } .dflow-split2-text { text-align: center; } .dflow-split2 .dflow-incl, .dflow-cta.start { justify-content: center; } }

/* design: OPEN (airy, big stat tiles) */
.dflow-open2 { text-align: center; max-width: 820px; margin: 0 auto; }
.dflow-open2 h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: var(--lh-heading); color: #fff; margin-bottom: 14px; text-wrap: balance; }
.dflow-open2 p { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: rgba(255,255,255,.82); max-width: 600px; margin: 0 auto; }
.dflow-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 32px 0; }
.dflow-stat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 14px; border-radius: var(--radius-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: transform var(--dur-base), background var(--dur-base); }
.dflow-stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); }
.dflow-stat-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,154,255,.16); border: 1px solid rgba(0,154,255,.35); color: var(--brand-primary-lighter); box-shadow: 0 0 18px rgba(0,154,255,.25); }
.dflow-stat:nth-child(2) .dflow-stat-ico { background: rgba(255,209,102,.16); border-color: rgba(255,209,102,.4); color: var(--accent-yellow); box-shadow: 0 0 18px rgba(255,170,0,.22); }
.dflow-stat:nth-child(4) .dflow-stat-ico { background: rgba(54,192,85,.16); border-color: rgba(54,192,85,.4); color: var(--brand-success); box-shadow: 0 0 18px rgba(54,192,85,.22); }
.dflow-stat-ico svg { width: 24px; height: 24px; }
.dflow-stat-t { font-size: 14px; font-weight: var(--fw-semibold); color: #fff; }
@media (max-width: 700px) { .dflow-stats { grid-template-columns: repeat(2,1fr); } }

/* design: BANNER (horizontal promo) */
.dflow-banner2 { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; max-width: 1080px; margin: 0 auto; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-xl); padding: 32px 36px; backdrop-filter: blur(8px); }
.dflow-banner-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; background: var(--cta-gradient); box-shadow: 0 0 30px rgba(0,154,255,.4); flex-shrink: 0; color: #fff; }
.dflow-banner-badge b { font-family: var(--font-mono); font-size: 44px; font-weight: 900; line-height: 1; }
.dflow-banner-badge span { font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; line-height: 1.2; margin-top: 2px; }
.dflow-banner-text { text-align: left; }
.dflow-banner-text h2 { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -.02em; color: #fff; margin-bottom: 8px; }
.dflow-banner-text p { font-size: var(--fs-body); line-height: var(--lh-body); color: rgba(255,255,255,.8); margin-bottom: 14px; }
.dflow-banner2 .dflow-incl { justify-content: flex-start; margin: 0; }
.dflow-banner-cta { flex-shrink: 0; }
@media (max-width: 860px) { .dflow-banner2 { grid-template-columns: 1fr; gap: 22px; text-align: center; padding: 30px 26px; } .dflow-banner-badge { margin: 0 auto; } .dflow-banner-text { text-align: center; } .dflow-banner2 .dflow-incl { justify-content: center; } }
/* ============================================================
   CROSS-SELL → /webhosting
   ============================================================ */
.aiwp-cross { padding: clamp(56px,7vw,90px) 0; background: var(--surface); }
.aiwp-cross-box { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; max-width: 1040px; margin: 0 auto; border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.aiwp-cross-main { padding: clamp(32px,4vw,46px); }
.aiwp-cross-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 1.6px; color: var(--brand-primary); display: inline-block; margin-bottom: 14px; }
.aiwp-cross-main h2 { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: var(--lh-heading); margin-bottom: 12px; text-wrap: balance; }
.aiwp-cross-main > p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-loose); margin-bottom: 22px; }
.aiwp-cross-main > p b { color: var(--gray-darker); font-weight: var(--fw-bold); }
.aiwp-cross-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.aiwp-cross-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body); color: var(--gray-darker); line-height: var(--lh-body); }
.aiwp-cross-list li b { font-weight: var(--fw-bold); }
.aiwp-cross-mk { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(54,192,85,.14); color: var(--brand-success-dark); margin-top: 1px; }
.aiwp-cross-mk svg { width: 13px; height: 13px; }
.aiwp-cross-cta { background: var(--hero-gradient); color: #fff; padding: clamp(32px,4vw,46px) clamp(26px,3vw,36px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; overflow: hidden; }
.aiwp-cross-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 90% -10%, rgba(0,154,255,.4), transparent 60%); pointer-events: none; }
.aiwp-cross-ico { position: relative; width: 50px; height: 50px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; margin-bottom: 18px; }
.aiwp-cross-ico svg { width: 26px; height: 26px; }
.aiwp-cross-cta-t { position: relative; font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -.01em; margin-bottom: 6px; }
.aiwp-cross-cta-p { position: relative; font-size: 13px; color: rgba(255,255,255,.78); margin-bottom: 22px; line-height: 1.4; }
/* Cross-link-knop: boven de sfeerlaag houden, opmaak via centrale laag */
.aiwp-cross-btn { position: relative; }
@media (max-width: 760px) {
  .aiwp-cross-box { grid-template-columns: 1fr; }
  .aiwp-cross-cta { align-items: center; text-align: center; }
}

/* ============================================================
   WORDPRESS, MAAR DAN GEBRUIKSVRIENDELIJK — blue section
   ============================================================ */
.aiwp-friendly { position: relative; overflow: hidden; padding: clamp(56px,7vw,90px) 0; background: var(--hero-gradient); color: #fff; }
.aiwp-friendly .dflow-gridbg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 80%); }
.aiwp-friendly .container { position: relative; z-index: 1; }
.friendly-head .eyebrow { color: var(--accent-yellow); }
.friendly-head h2 { color: #fff; }
.friendly-head p { color: rgba(255,255,255,.82); }

.aiwp-friendly .fr-ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-md); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: var(--brand-primary-lighter); flex-shrink: 0; }
.aiwp-friendly .fr-ico svg { width: 25px; height: 25px; }
.aiwp-friendly .fr-ico.lg { width: 62px; height: 62px; background: rgba(255,209,102,.14); border-color: rgba(255,209,102,.3); color: var(--accent-yellow); }
.aiwp-friendly .fr-ico.lg svg { width: 31px; height: 31px; }
.aiwp-friendly h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -.01em; color: #fff; }
.aiwp-friendly p { line-height: var(--lh-loose); }

/* kaarten */
.fr-kaarten .fr-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.fr-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); padding: 26px 22px; backdrop-filter: blur(6px); transition: transform var(--dur-base), background var(--dur-base); }
.fr-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); }
.fr-card .fr-ico { margin-bottom: 16px; }
.fr-card h3 { margin-bottom: 9px; }
.fr-card p { font-size: var(--fs-body); color: rgba(255,255,255,.78); }
@media (max-width: 880px) { .fr-kaarten .fr-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .fr-kaarten .fr-grid { grid-template-columns: 1fr; } }

/* spotlight */
.fr-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.fr-spot-hero { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-xl); padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; backdrop-filter: blur(6px); position: relative; overflow: hidden; }
.fr-spot-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 110% -10%, rgba(255,209,102,.18), transparent 60%); pointer-events: none; }
.fr-spot-hero .fr-ico { margin-bottom: 20px; }
.fr-spot-hero h3 { font-size: var(--fs-h3); letter-spacing: -.02em; margin-bottom: 12px; }
.fr-spot-hero p { font-size: var(--fs-body-lg); color: rgba(255,255,255,.85); }
.fr-spot-rest { display: flex; flex-direction: column; gap: 18px; }
.fr-spot-card { flex: 1; display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); padding: 20px 22px; backdrop-filter: blur(6px); transition: transform var(--dur-base), background var(--dur-base); }
.fr-spot-card:hover { transform: translateX(3px); background: rgba(255,255,255,.09); }
.fr-spot-card h3 { margin-bottom: 6px; }
.fr-spot-card p { font-size: var(--fs-body); color: rgba(255,255,255,.78); }
@media (max-width: 820px) { .fr-spot-grid { grid-template-columns: 1fr; } }

/* lijst */
.fr-lijst-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.fr-lijst-left { position: sticky; top: 96px; }
.fr-lijst-left .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent-yellow); display: inline-block; margin-bottom: 14px; }
.fr-lijst-left h2 { font-size: var(--fs-h2); font-weight: var(--fw-black); letter-spacing: -.025em; line-height: var(--lh-heading); margin-bottom: 14px; }
.fr-lijst-left p { font-size: var(--fs-body-lg); color: rgba(255,255,255,.82); line-height: var(--lh-loose); }
.fr-lijst-items { display: flex; flex-direction: column; gap: 4px; }
.fr-lijst-item { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); }
.fr-lijst-item:first-child { border-top: none; }
.fr-lijst-item h3 { margin-bottom: 7px; }
.fr-lijst-item p { font-size: var(--fs-body); color: rgba(255,255,255,.78); }
@media (max-width: 820px) { .fr-lijst-grid { grid-template-columns: 1fr; gap: 26px; } .fr-lijst-left { position: relative; top: 0; } }

/* ============================================================
   PRICING
   ============================================================ */
.aiwp-pricing { padding: clamp(56px,7vw,90px) 0 30px; background: #fff; }

/* promo pill */
.wok-aiwp .pricing-promo-wrap { text-align: center; }
.wok-aiwp .pricing-promo { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 26px; padding: 8px 14px; background: rgba(255,170,0,.12); border: 1px solid rgba(255,170,0,.3); color: var(--brand-warning-dark); font-family: var(--font-mono); font-size: 12px; font-weight: 600; border-radius: 50px; }

/* BTW toggle */
.wok-aiwp .btw-toggle-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 40px; font-size: 14px; color: var(--gray-base); font-weight: 600; }
.wok-aiwp .btw-label { transition: color .2s; cursor: pointer; }
.wok-aiwp .btw-label.active { color: var(--brand-primary); }
.wok-aiwp .btw-switch { position: relative; width: 52px; height: 28px; background: var(--gray-lighter-4); border: none; border-radius: 50px; cursor: pointer; transition: background .25s; padding: 0; flex-shrink: 0; }
.wok-aiwp .btw-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.wok-aiwp .btw-switch.active { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); }
.wok-aiwp .btw-switch.active::after { transform: translateX(24px); }

/* grid + cards */
.wok-aiwp .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.wok-aiwp .pricing-card { position: relative; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-lg); padding: 32px 26px; display: flex; flex-direction: column; transition: all .25s; }
.wok-aiwp .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(16,98,254,.25); }
.wok-aiwp .pricing-card.featured { background: linear-gradient(180deg,#fff 0%,#f7faff 100%); border-color: var(--brand-primary); border-width: 2px; box-shadow: var(--shadow-primary); transform: scale(1.03); z-index: 2; }
.wok-aiwp .pricing-card.featured:hover { transform: scale(1.03) translateY(-4px); }
.wok-aiwp .pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 50px; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; box-shadow: var(--shadow-primary); }
.wok-aiwp .pricing-name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brand-primary); margin-bottom: 8px; }
.wok-aiwp .pricing-desc { font-size: 13px; color: var(--gray-base); min-height: 56px; line-height: 1.45; margin-bottom: 18px; }

/* speed meter */
.wok-aiwp .pricing-speed { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 9px 12px; background: linear-gradient(135deg, rgba(16,98,254,.04), rgba(255,170,0,.04)); border-radius: 10px; border: 1px solid rgba(16,98,254,.08); }
.wok-aiwp .ps-icon { width: 16px; height: 16px; flex-shrink: 0; fill: var(--brand-primary); }
.wok-aiwp .ps-bar { display: flex; gap: 3px; flex: 1; }
.wok-aiwp .ps-seg { flex: 1; height: 6px; border-radius: 2px; background: var(--gray-lighter-4); transition: all .3s; }
.wok-aiwp .ps-seg.on { background: linear-gradient(90deg, var(--grad-start), var(--grad-end)); }
.wok-aiwp .speed-3 .ps-seg.on:nth-child(3) { background: linear-gradient(90deg, var(--grad-end), #009aff); }
.wok-aiwp .ps-tag { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--gray-darker); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }

/* rekenkracht specs */
.wok-aiwp .pricing-specs { display: flex; gap: 8px; margin: 0 0 18px; }
.wok-aiwp .pricing-spec { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--body-bg); border: 1px solid var(--gray-lighter-4); border-radius: 9px; }
.wok-aiwp .pricing-spec svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--brand-primary); }
.wok-aiwp .pricing-spec span { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--gray-darker); letter-spacing: -.01em; line-height: 1.1; }
.wok-aiwp .pricing-card.featured .pricing-spec { border-color: rgba(16,98,254,.22); background: rgba(16,98,254,.05); }

/* price row */
.wok-aiwp .pricing-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.wok-aiwp .pricing-price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--gray-darker); line-height: 1.1; white-space: nowrap; }
.wok-aiwp .pricing-card.featured .pricing-price { background: linear-gradient(135deg, var(--grad-start), var(--grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wok-aiwp .pricing-period { font-size: 14px; color: var(--gray-base); }
.wok-aiwp .pricing-strike { font-size: 16px; color: var(--gray-base); font-weight: 600; opacity: .9; margin-left: 4px; position: relative; display: inline-block; }
.wok-aiwp .pricing-strike::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: var(--brand-danger); opacity: .75; border-radius: 1px; transform: rotate(-14deg); transform-origin: center; pointer-events: none; }
.wok-aiwp .pricing-exBtw { font-family: var(--font-mono); font-size: 11px; color: var(--gray-base); margin: 8px 0 18px; }

/* features */
.wok-aiwp .pricing-features { list-style: none; flex: 1; margin-bottom: 20px; }
.wok-aiwp .pricing-features li { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--gray-darker); border-bottom: 1px solid var(--gray-lighter-4); align-items: center; line-height: 1.4; }
.wok-aiwp .pricing-features li:last-child { border-bottom: none; }
.wok-aiwp .pricing-features li .f-val { margin-left: auto; color: var(--gray-darker); font-weight: 600; white-space: nowrap; }
.wok-aiwp .pricing-features li .f-t { flex: 1; }
.wok-aiwp .pricing-features li svg { width: 14px; height: 14px; fill: var(--brand-success); flex-shrink: 0; }
.wok-aiwp .pricing-features li.no { color: var(--gray-base); }
.wok-aiwp .pricing-features li svg.f-no { fill: var(--brand-danger); opacity: .6; }
.wok-aiwp .pricing-features li.f-opslag { align-items: flex-start; }
.wok-aiwp .pricing-features li.f-opslag .f-opslag-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wok-aiwp .pricing-features li.f-opslag .f-opslag-main { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.wok-aiwp .pricing-features li.f-opslag .f-opslag-hint { font-size: 11px; color: var(--gray-base); font-style: italic; line-height: 1.4; }

/* button */
/* Bestelknop in de prijskaart: alleen plaatsing, opmaak via centrale laag */
.wok-aiwp .pricing-btn { width: 100%; }

.wok-aiwp .pricing-disclaimer { margin-top: 26px; text-align: center; font-size: var(--fs-caption); color: var(--gray-base); }

/* ============================================================
   COMMODITY STRIP
   ============================================================ */
.aiwp-commodity { background: var(--surface); border-top: 1px solid var(--gray-lighter-4); border-bottom: 1px solid var(--gray-lighter-4); }
.aiwp-commodity .container { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 26px; padding-bottom: 26px; }
.aiwp-commodity .lead { font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--gray-darker); flex-shrink: 0; }
.aiwp-commodity .items { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.aiwp-comm-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray-base); font-weight: 500; }
.aiwp-comm-item .mk { color: var(--brand-primary); }

/* ============================================================
   FAQ
   ============================================================ */
.aiwp-faq { padding: clamp(56px,7vw,90px) 0; background: var(--body-bg); }
.aiwp-faq-list { max-width: 820px; margin: 0 auto; }
.aiwp-faq-cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray-base); font-weight: 700; margin: 26px 0 8px; padding-left: 2px; }
.aiwp-faq-cat:first-child { margin-top: 0; }
.aiwp-faq-item { background: var(--surface); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; transition: box-shadow var(--dur-base); }
.aiwp-faq-item.open { box-shadow: var(--shadow-card); border-color: rgba(16,98,254,.3); }
.aiwp-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 17px 20px; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--gray-darker); }
.aiwp-faq-q .ic { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--body-bg); color: var(--brand-primary); font-size: 18px; font-weight: 400; transition: transform var(--dur-base), background var(--dur-base); }
.aiwp-faq-item.open .aiwp-faq-q .ic { transform: rotate(45deg); background: var(--brand-primary); color: #fff; }
.aiwp-faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-standard); }
.aiwp-faq-a-inner { padding: 0 20px 18px; font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-loose); }
.aiwp-faq-a-inner a { font-weight: 600; }

/* ============================================================
   EEAT + FINAL CTA
   ============================================================ */
.aiwp-eeat { background: var(--surface); padding: 30px 0; border-top: 1px solid var(--gray-lighter-4); }
.aiwp-eeat .container { text-align: center; }
.aiwp-eeat p { max-width: 780px; margin: 0 auto; font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-loose); }
.aiwp-eeat b { color: var(--gray-darker); font-weight: 700; }

.aiwp-final { padding: clamp(60px,7vw,96px) var(--container-pad); background: var(--body-bg); }
.aiwp-final-box {
  max-width: 1040px; margin: 0 auto; position: relative; overflow: hidden;
  background:
    radial-gradient(700px 360px at 85% -10%, rgba(0,154,255,.4), transparent 60%),
    var(--hero-gradient);
  border-radius: var(--radius-xl); padding: clamp(40px,5vw,64px); text-align: center; color: #fff;
  box-shadow: var(--shadow-hero);
}
.aiwp-final-box .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent-yellow); font-weight: 600; display: inline-block; margin-bottom: 16px; }
.aiwp-final-box h2 { font-size: var(--fs-h1); font-weight: var(--fw-black); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 14px; }
.aiwp-final-box p { font-size: var(--fs-body-lg); color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto 28px; line-height: var(--lh-body); }
.aiwp-final-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
/* Final-CTA-knoppen: opmaak via de centrale knoppenlaag */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .aiwp-pijlers { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .wok-aiwp .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
  .wok-aiwp .pricing-card.featured { transform: none; order: -1; }
  .wok-aiwp .pricing-card.featured:hover { transform: translateY(-4px); }
  .wok-aiwp .bento { grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; }
}
@media (max-width: 560px) {
  .aiwp-sc-edit { grid-template-columns: 120px 1fr; }
  .aiwp-h1 { font-size: clamp(30px, 9vw, 40px); }
}

@media (max-width:560px){ .wok-aiwp .bento{grid-template-columns:1fr;grid-auto-rows:auto} .wok-aiwp .bento-tile{min-height:190px} .wok-aiwp .bento-tile.wide-2{grid-column:auto} }



  html, body { margin: 0; background: var(--body-bg); }
  #root { width: 100%; }

/* ---- supplementary (preview-only additions) ---- */
.aiwp-modal-overlay{position:fixed;inset:0;background:rgba(10,16,40,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.aiwp-modal-overlay.open{display:flex}
.aiwp-modal-check{width:64px;height:64px;border-radius:50%;background:rgba(54,192,85,.14);color:var(--brand-success-dark);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px}
#aiwpModalSuccess{text-align:center}
.aiwp-demo-poster{justify-content:center;gap:6px;cursor:pointer;background:linear-gradient(135deg,#0f1a3a,#16307a)}
.aiwp-demo-poster b{color:#fff;font-size:16px;margin-top:8px}
.aiwp-demo-poster>span:last-child{color:rgba(255,255,255,.7);font-size:13px}
.aiwp-demo-play{width:66px;height:66px;border-radius:50%;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(16,98,254,.45)}
/* ---- autoplay demo build-mock (vervangbaar door <video>) ---- */
.aiwp-demo-build{position:absolute;inset:0;background:linear-gradient(160deg,#0e1530,#0b1024);padding:16px;display:flex;flex-direction:column;gap:11px;overflow:hidden}
.adb-nav{display:flex;align-items:center;gap:8px;animation:adb-pop 6s ease-in-out infinite}
.adb-logo{width:28px;height:11px;border-radius:3px;background:var(--brand-primary)}
.adb-sp{flex:1}
.adb-link{width:34px;height:7px;border-radius:3px;background:rgba(255,255,255,.18)}
.adb-cta{width:48px;height:17px;border-radius:5px;background:var(--brand-warning)}
.adb-hero{display:flex;gap:16px;flex:1;align-items:center}
.adb-htxt{flex:1;display:flex;flex-direction:column;gap:9px}
.adb-l{height:9px;border-radius:4px;background:rgba(255,255,255,.16)}
.adb-l1{width:82%;background:rgba(255,255,255,.6);animation:adb-pop 6s ease-in-out .4s infinite}
.adb-l2{width:64%;animation:adb-pop 6s ease-in-out .7s infinite}
.adb-l3{width:72%;animation:adb-pop 6s ease-in-out 1s infinite}
.adb-pillbtn{width:98px;height:22px;border-radius:6px;background:linear-gradient(135deg,#1062fe,#083fbf);margin-top:7px;animation:adb-pop 6s ease-in-out 1.3s infinite}
.adb-himg{width:42%;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#152a80,#1d65af);animation:adb-pop 6s ease-in-out 1.6s infinite}
.adb-row{display:flex;gap:10px}
.adb-card{flex:1;height:32px;border-radius:8px;background:rgba(255,255,255,.08)}
.adb-row .adb-card:nth-child(1){animation:adb-pop 6s ease-in-out 1.9s infinite}
.adb-row .adb-card:nth-child(2){animation:adb-pop 6s ease-in-out 2.15s infinite}
.adb-row .adb-card:nth-child(3){animation:adb-pop 6s ease-in-out 2.4s infinite}
.adb-badge{position:absolute;left:16px;bottom:13px;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;font-weight:600;color:#cfe0ff;background:rgba(16,98,254,.18);border:1px solid rgba(16,98,254,.4);padding:6px 11px;border-radius:20px}
.adb-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-success);box-shadow:0 0 8px var(--brand-success);animation:adb-blink 1.2s ease-in-out infinite}
@keyframes adb-pop{0%,6%{opacity:0;transform:translateY(10px) scale(.96)}16%,84%{opacity:1;transform:none}100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes adb-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.aiwp-demo-build>*,.aiwp-demo-build .adb-dot{animation:none!important;opacity:1!important;transform:none!important}}
/* ---- bewegende regenboog-rand om het vibe-vak ----
   filter:hue-rotate cyclet de volledige kleurencirkel en herschildert ALTIJD betrouwbaar
   (background-position/@property-conic deden dat in sommige Chrome-builds niet). De mask-border
   van het design blijft intact; alleen de gradient + animatie worden vervangen. */
.wok-aiwp .aiwp-prompt::before{
  background:conic-gradient(from 0deg,#ff004d,#ff9a00,#ffe600,#28e06a,#00c2ff,#6a5cff,#d400ff,#ff004d)!important;
  background-size:auto!important;
  opacity:1!important;
  animation:aiwp-rainbow-hue 4s linear infinite!important;
  will-change:filter;
}
.wok-aiwp .aiwp-prompt:focus-within::before{opacity:1!important;}
@keyframes aiwp-rainbow-hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.wok-aiwp .aiwp-prompt::before{animation:none!important}}


/* ===== Sectie "Alle kracht van WordPress" (redesign): tekst + AI-chat-mock ===== */
.wok-aiwp .frx-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
.wok-aiwp .frx-left .eyebrow{color:var(--accent-yellow)}
.wok-aiwp .frx-left h2{font-size:clamp(27px,3.3vw,40px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.12;margin:12px 0 16px}
.wok-aiwp .frx-intro{font-size:16px;line-height:1.65;color:rgba(255,255,255,.92);margin-bottom:28px;max-width:540px}
.wok-aiwp .frx-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
.wok-aiwp .frx-list li{display:flex;gap:14px;align-items:flex-start}
.wok-aiwp .frx-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#9ec3ff}
.wok-aiwp .frx-ico svg{width:20px;height:20px}
.wok-aiwp .frx-list h3{font-size:15px;font-weight:700;color:#fff;margin:1px 0 4px}
.wok-aiwp .frx-list p{font-size:14px;line-height:1.62;color:rgba(255,255,255,.82)}
.wok-aiwp .frx-right{display:flex;justify-content:center;position:sticky;top:90px}
.wok-aiwp .frx-chat{width:100%;max-width:420px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 70px -28px rgba(0,0,0,.6);overflow:hidden}
.wok-aiwp .frx-chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.wok-aiwp .frx-ava{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1062fe,#6a5cff);color:#fff;font-size:15px}
.wok-aiwp .frx-chat-head b{display:block;font-size:14px;color:#fff}
.wok-aiwp .frx-status{font-size:11px;color:rgba(255,255,255,.55);font-family:var(--font-mono);display:flex;align-items:center;gap:5px}
.wok-aiwp .frx-status .frx-dot{width:7px;height:7px;border-radius:50%;background:#36c055;box-shadow:0 0 8px #36c055;animation:frx-pulse 1.6s ease-in-out infinite}
.wok-aiwp .frx-msgs{padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.wok-aiwp .frx-msg{font-size:13.5px;line-height:1.5;padding:11px 14px;border-radius:14px;max-width:88%}
.wok-aiwp .frx-user{align-self:flex-end;background:linear-gradient(135deg,#ffc24d,#ffaa00);color:var(--gray-darker);font-weight:600;border-bottom-right-radius:4px}
.wok-aiwp .frx-ai{align-self:flex-start;background:rgba(255,255,255,.1);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:4px}
.wok-aiwp .frx-preview{margin-top:11px;background:#fff;border-radius:9px;padding:9px;display:flex;flex-direction:column;gap:7px}
.wok-aiwp .frx-pv-nav{display:flex;gap:5px;align-items:center}
.wok-aiwp .frx-pv-nav span{height:5px;border-radius:3px;background:#d6e0f5}
.wok-aiwp .frx-pv-cols{display:flex;gap:6px}
.wok-aiwp .frx-pv-cols span{flex:1;height:40px;border-radius:6px;background:linear-gradient(160deg,#eef2fb,#dbe6fb);border:1px solid #e3e9f5}
.wok-aiwp .frx-pv-cols span:nth-child(2){background:linear-gradient(160deg,#e3edff,#cdddff);border-color:#bcd2ff}
.wok-aiwp .frx-pv-link{font-size:10px;color:var(--brand-primary);font-weight:700;font-family:var(--font-mono)}
.wok-aiwp .frx-inputbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.1)}
.wok-aiwp .frx-input{flex:1;font-size:13px;color:rgba(255,255,255,.45);font-family:var(--font-mono)}
.wok-aiwp .frx-input::after{content:"";display:inline-block;width:1.5px;height:13px;background:#9ec3ff;margin-left:2px;vertical-align:middle;animation:frx-caret 1s step-end infinite}
.wok-aiwp .frx-send{width:30px;height:30px;border-radius:8px;background:var(--brand-warning);color:#17191c;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
@keyframes frx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes frx-caret{0%,100%{opacity:1}50%{opacity:0}}
@media (max-width:900px){.wok-aiwp .frx-grid{grid-template-columns:1fr;gap:32px}.wok-aiwp .frx-intro{max-width:none}.wok-aiwp .frx-right{position:static}}
.wok-aiwp .aiwp-cross{background:#fff}

/* ===== Keuzehulp: Sitebuilder vs AI WordPress (laag op pagina) ===== */
.wok-aiwp .aiwp-choice{background:var(--body-bg);padding:clamp(56px,6vw,84px) 0}
.wok-aiwp .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:38px auto 0}
.wok-aiwp .choice-card{position:relative;background:#fff;border:1px solid var(--gray-lighter-4);border-radius:var(--radius-lg);padding:30px 28px}
.wok-aiwp .choice-card.is-here{background:linear-gradient(160deg,#eef3ff,#ffffff);border:1.5px solid var(--brand-primary);box-shadow:var(--shadow-card)}
.wok-aiwp .choice-card h3{font-size:19px;font-weight:800;color:var(--gray-darker);margin-bottom:10px}
.wok-aiwp .choice-card p{font-size:14.5px;line-height:1.6;color:var(--gray-base);margin-bottom:16px}
.wok-aiwp .choice-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--brand-primary);padding:4px 10px;border-radius:20px;margin-bottom:12px}
.wok-aiwp .choice-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--brand-primary);text-decoration:none}
.wok-aiwp .choice-link:hover{gap:9px}
.wok-aiwp .choice-note{font-size:13px;font-weight:600;color:var(--brand-primary-darker);font-family:var(--font-mono)}
@media (max-width:768px){.wok-aiwp .choice-grid{grid-template-columns:1fr}}

/* hero USP-vinkjes */
.wok-aiwp .aiwp-usps{list-style:none;padding:0;margin:22px auto 34px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;max-width:640px}
.wok-aiwp .aiwp-usps li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,.9)}
.wok-aiwp .aiwp-usps .u-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(54,192,85,.2);color:#6ee58e;font-size:11px;font-weight:800;flex-shrink:0}
@media(max-width:600px){.wok-aiwp .aiwp-usps{gap:8px 16px;font-size:13px}}

/* ===== Vergelijkingstabel Sitebuilder vs AI WordPress ===== */
.wok-aiwp .cmp-wrap{max-width:920px;margin:40px auto 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.wok-aiwp .cmp{display:grid;grid-template-columns:200px 1fr 1fr;min-width:680px;background:#fff;border:1px solid var(--gray-lighter-4);border-radius:16px;box-shadow:0 10px 40px -16px rgba(21,42,128,.18);overflow:hidden;text-align:left}
.wok-aiwp .cmp>div{padding:17px 22px}
.wok-aiwp .cmp-l,.wok-aiwp .cmp-v{border-top:1px solid var(--gray-lighter-4)}
.wok-aiwp .cmp-corner{background:#fff}
.wok-aiwp .cmp-h{padding:26px 22px}
.wok-aiwp .cmp-h.sb{background:#fff}
.wok-aiwp .cmp-h.ai{background:var(--hero-gradient)}
.wok-aiwp .cmp-name{font-size:19px;font-weight:800;color:var(--gray-darker);margin-bottom:8px}
.wok-aiwp .cmp-h.ai .cmp-name{color:#fff}
.wok-aiwp .cmp-desc{font-size:12.5px;line-height:1.55;color:var(--gray-base);margin-bottom:13px}
.wok-aiwp .cmp-h.ai .cmp-desc{color:rgba(255,255,255,.85)}
.wok-aiwp .cmp-badge{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-darker);background:var(--brand-warning);padding:4px 11px;border-radius:20px;margin-bottom:11px}
.wok-aiwp .cmp-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--brand-primary);text-decoration:none}
.wok-aiwp .cmp-link:hover{gap:9px}
.wok-aiwp .cmp-h.ai .cmp-link{color:#fff}
.wok-aiwp .cmp-v.ai{background:rgba(16,98,254,.05)}
.wok-aiwp .cmp-l{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:700;color:var(--gray-darker);background:var(--body-bg)}
.wok-aiwp .cmp-ico{flex-shrink:0;display:inline-flex;width:30px;height:30px;border-radius:8px;align-items:center;justify-content:center;background:rgba(16,98,254,.09);color:var(--brand-primary)}
.wok-aiwp .cmp-ico svg{width:16px;height:16px}
.wok-aiwp .cmp-v{font-size:13.5px;line-height:1.6;color:var(--gray-base);min-width:0}
@media(max-width:768px){.wok-aiwp .cmp{min-width:600px}}

/* ===== Canonical Trustpilot-slider ===== */
.wok-aiwp .tp-wrap {
  padding: 8px 0 clamp(56px,7vw,80px);
  background: #fff;
}
.wok-aiwp .tp-wrap .container { max-width: 1288px; }
.wok-aiwp .tp-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin-bottom: 40px;
}
.wok-aiwp .tp-header img { height: 26px; }
.wok-aiwp .tp-stars-row { display: flex; gap: 2px; color: #00b67a; font-size: 22px; line-height: 1; }
.wok-aiwp .tp-star.half {
  background: linear-gradient(90deg, #00b67a 60%, #dcdce6 60%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wok-aiwp .tp-rating { font-size: 15px; color: var(--gray-base); }
.wok-aiwp .tp-rating strong { color: var(--gray-darker); }
.wok-aiwp .tp-rating a { color: var(--grad-end); font-weight: 600; }
.wok-aiwp .tp-slider-wrap { display: flex; align-items: center; gap: 14px; }
.wok-aiwp .tp-slider { overflow: hidden; flex: 1; }
.wok-aiwp .tp-track { display: flex; gap: 16px; transition: transform 0.4s ease; }
.wok-aiwp .tp-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-lighter-4);
  display: flex; flex-direction: column;
  width: 220px; min-width: 220px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.wok-aiwp .tp-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.wok-aiwp .tp-card-stars img { height: 18px; margin-bottom: 10px; }
.wok-aiwp .tp-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--grad-start);
  margin-bottom: 8px;
  line-height: 1.3;
}
.wok-aiwp .tp-card-text {
  font-size: 13px; line-height: 1.55; color: var(--gray-base);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}
.wok-aiwp .tp-card-author {
  border-top: 1px solid var(--gray-lighter-4);
  padding-top: 10px;
  font-weight: 600; font-size: 13px;
  color: var(--gray-base);
}
.wok-aiwp .tp-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--gray-lighter-4);
  box-shadow: var(--shadow-card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--grad-start); transition: all 0.2s;
  flex-shrink: 0;
}
.wok-aiwp .tp-btn:hover { background: var(--grad-start); color: #fff; border-color: var(--grad-start); }
.wok-aiwp .tp-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.wok-aiwp .tp-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 24px;
}
.wok-aiwp .tp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #dcdce6; border: none; cursor: pointer;
  transition: all 0.2s;
}
.wok-aiwp .tp-dot.active {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  width: 26px; border-radius: 5px;
}

/* pricing + trustpilot als 1 blok, opvallende prijsboxen */
.wok-aiwp .tp-header{margin-bottom:30px}
.wok-aiwp .pricing-card{box-shadow:0 12px 32px -14px rgba(21,42,128,.20)}
.wok-aiwp .pricing-card:hover{box-shadow:0 18px 44px -14px rgba(21,42,128,.28)}

/* nieuwe AI-demo popup */
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/9446d131-d106-4200-b291-976fd90f1154") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/e741409c-1fb6-4793-91f7-fbed04f6883c") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/d8dcdc4b-668f-4662-a6ac-94758bdafd8c") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/cfcf319c-e9b0-4d96-9035-8113f49ced08") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/fa890e95-71ac-4c04-a7a7-7e506fdc1d28") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("blob:http://localhost:8765/1ca25a0d-3b72-4eaf-89ca-08f6888f02ab") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/9446d131-d106-4200-b291-976fd90f1154") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/e741409c-1fb6-4793-91f7-fbed04f6883c") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/d8dcdc4b-668f-4662-a6ac-94758bdafd8c") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/cfcf319c-e9b0-4d96-9035-8113f49ced08") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/fa890e95-71ac-4c04-a7a7-7e506fdc1d28") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("blob:http://localhost:8765/1ca25a0d-3b72-4eaf-89ca-08f6888f02ab") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/9446d131-d106-4200-b291-976fd90f1154") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/e741409c-1fb6-4793-91f7-fbed04f6883c") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/d8dcdc4b-668f-4662-a6ac-94758bdafd8c") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/cfcf319c-e9b0-4d96-9035-8113f49ced08") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/fa890e95-71ac-4c04-a7a7-7e506fdc1d28") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("blob:http://localhost:8765/1ca25a0d-3b72-4eaf-89ca-08f6888f02ab") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/9446d131-d106-4200-b291-976fd90f1154") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/e741409c-1fb6-4793-91f7-fbed04f6883c") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/d8dcdc4b-668f-4662-a6ac-94758bdafd8c") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/cfcf319c-e9b0-4d96-9035-8113f49ced08") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/fa890e95-71ac-4c04-a7a7-7e506fdc1d28") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("blob:http://localhost:8765/1ca25a0d-3b72-4eaf-89ca-08f6888f02ab") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   WebOké Design System — Tokens
   Single source of truth, extracted from deployed production TPL
   (templates/lagom2/core/cms/sections/config/verhuisservice).
   ============================================================ */

:root {
  /* ---------- BRAND / PRIMARY ---------- */
  --brand-primary:         #1062fe;   /* Core action blue, used for CTAs, links, focus */
  --brand-primary-lighter: #009aff;   /* Hover lift, gradient highlight */
  --brand-primary-darker:  #003cb2;   /* Pressed state, dark gradient stop */
  --brand-secondary:       #083fbf;   /* Secondary blue, bottom of CTA gradient */

  /* ---------- HERO GRADIENT (signature) ----------
     Use for hero headers, step-numbers, "naar WebOké" chips.
     90deg horizontal for backgrounds, 135deg for pills/buttons. */
  --grad-start:            #152a80;   /* Deep navy */
  --grad-end:              #1d65af;   /* Mid blue */
  --hero-gradient:         linear-gradient(90deg, #152a80, #1d65af);
  --cta-gradient:          linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
  --chip-gradient:         linear-gradient(135deg, #152a80, #1d65af);

  /* ---------- SEMANTIC STATUS ---------- */
  --brand-success:         #36c055;   /* "klaar", uptime dots, green bars */
  --brand-success-dark:    #1b7d34;   /* Success text on light bg */
  --brand-warning:         #ffaa00;   /* "attentie", accent dashes, emailverhuis */
  --brand-warning-dark:    #9c6a00;   /* Warning text on light bg */
  --brand-danger:          #d92632;   /* Error, storingen */
  --accent-yellow:         #ffd166;   /* Hero-tag text, highlights op donkerblauw */

  /* ---------- NEUTRALS ----------
     A 4-step gray scale — deliberately short.
     Do NOT invent intermediate grays; pick the closest token. */
  --gray-darker:           #17191c;   /* Primary body copy, headings */
  --gray-base:             #5e636e;   /* Secondary copy, meta, labels */
  --gray-lighter:          #979ba4;   /* Disabled, placeholder, "uppercase eyebrow on light" */
  --gray-lighter-4:        #e9eaec;   /* Hairline borders, dividers, bar-track */
  --body-bg:               #f7f8fa;   /* Page background (off-white) */
  --surface:               #ffffff;   /* Cards, modals, headers */

  /* ---------- RADII ---------- */
  --radius-sm:             8px;       /* Buttons, chips, inline pills */
  --radius-md:             12px;      /* Small cards, input fields */
  --radius-lg:             18px;      /* Feature cards, step cards, panels */
  --radius-xl:             24px;      /* Hero cards, large panels */
  --radius-pill:           50px;      /* Pills, tags, rounded bars */

  /* ---------- SHADOWS ---------- */
  --shadow-card:   0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
  --shadow-lift:   0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
  --shadow-primary:0 8px 30px rgba(16,98,254,.25);
  --shadow-badge:  0 2px 4px rgba(10,15,30,.08), 0 14px 28px -6px rgba(10,15,30,.3);
  --shadow-hero:   0 40px 80px -20px rgba(10,15,30,.55),
                   0 15px 30px -10px rgba(10,15,30,.25),
                   0 2px 4px rgba(10,15,30,.08);

  /* ---------- TYPOGRAPHY ----------
     WebOké gebruikt system-stack (geen webfont laden = snel + duurzaam).
     Mono reserved for eyebrows, numeric meta, code. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font weights (system stack has all of these) */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-heavy:      800;       /* Heading weight */
  --fw-black:      900;

  /* Type scale — fluid where it matters (hero, section headers) */
  --fs-eyebrow:    12px;      /* mono, uppercase, letter-spacing 1.6px */
  --fs-meta:       11px;      /* mono, tertiary info */
  --fs-caption:    13px;      /* nav, trust item labels */
  --fs-body:       15px;      /* default paragraph */
  --fs-body-lg:    17px;      /* sub-section, lede copy */
  --fs-h4:         18px;      /* card titles */
  --fs-h3:         22px;      /* panel titles */
  --fs-h2:         clamp(28px, 3.4vw, 44px);   /* section headers */
  --fs-h1:         clamp(32px, 4.2vw, 52px);   /* hero h1 */

  /* Line heights */
  --lh-tight:      1.04;      /* Hero display */
  --lh-heading:    1.1;
  --lh-snug:       1.3;
  --lh-body:       1.55;
  --lh-loose:      1.65;

  /* ---------- LAYOUT ---------- */
  --container-max: 1288px;
  --container-pad: 24px;

  /* Section rhythm */
  --section-pad-y: 90px;              /* desktop */
  --section-pad-y-sm: 56px;           /* mobile */

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce:   cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:      .15s;
  --dur-base:      .25s;
  --dur-slow:      .45s;
}


/* ============================================================
   BASE — apply on body of any product page.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


img { max-width: 100%; height: auto; display: block; }


a { color: var(--brand-primary); text-decoration: none; }

a:hover { text-decoration: underline; }


button { font-family: inherit; cursor: pointer; border: none; background: none; }


.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}


/* switcher */
.pr-switch {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 4px; padding: 5px; border-radius: var(--radius-pill);
  background: rgba(10,16,40,.5); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px);
}

.pr-switch button {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .3px;
  color: rgba(255,255,255,.75); padding: 8px 18px; border-radius: var(--radius-pill);
  transition: background var(--dur-base), color var(--dur-base);
}

.pr-switch button.on { background: #fff; color: var(--grad-start); }


/* overlay (always open in playground) */
.pr-overlay {
  position: relative; z-index: 10; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 24px;
}


/* ---------- shared form atoms ---------- */
.pr-field { margin-bottom: 14px; text-align: left; }

.pr-field label { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--gray-darker); margin-bottom: 7px; }

.pr-input {
  width: 100%; font-family: var(--font-sans); font-size: 15px; color: var(--gray-darker);
  padding: 13px 15px; border: 1.5px solid var(--gray-lighter-4); border-radius: var(--radius-md);
  background: var(--surface); transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.pr-input::placeholder { color: var(--gray-lighter); }

.pr-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16,98,254,.14); }

.pr-input.err { border-color: var(--brand-danger); }

.pr-err { font-size: 12px; color: var(--brand-danger); margin-top: 6px; }


/* Verstuurknop in de demo-modal: alleen breedte, opmaak via centrale laag */
.pr-btn { width: 100%; }


.pr-micro { text-align: center; font-size: 12px; color: var(--gray-base); margin-top: 13px; line-height: 1.5; }

.pr-micro .lock { color: var(--brand-success-dark); }


.pr-close {
  position: absolute; top: 15px; right: 15px; z-index: 4; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; color: var(--gray-base);
  background: var(--body-bg); transition: background var(--dur-base), color var(--dur-base);
}

.pr-close:hover { background: var(--gray-lighter-4); color: var(--gray-darker); }

.pr-close.on-dark { background: rgba(255,255,255,.14); color: #fff; }

.pr-close.on-dark:hover { background: rgba(255,255,255,.26); }


/* recap chip */
.pr-recap {
  text-align: left; background: var(--body-bg); border: 1px solid var(--gray-lighter-4);
  border-left: 3px solid var(--brand-primary); border-radius: var(--radius-md);
  padding: 11px 14px; font-size: 13.5px; color: var(--gray-base); line-height: 1.5;
}

.pr-recap .lbl {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brand-primary);
  margin-bottom: 5px;
}

.pr-recap .lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16,98,254,.18); }


/* ---------- AI build log (split + agent) ---------- */
.pr-log { display: flex; flex-direction: column; gap: 9px; }

.pr-log-row { display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-standard), transform .4s var(--ease-standard); }

.pr-log-row.in { opacity: 1; transform: none; }

.pr-log-row .tick { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }

.pr-log-row .tick.done { background: var(--brand-success); color: #fff; }

.pr-log-row .tick.busy { border: 2px solid currentColor; border-top-color: transparent; animation: pr-spin .7s linear infinite; opacity: .8; }

@keyframes pr-spin { to { transform: rotate(360deg); } }

@keyframes pr-fade-in { to { opacity: 1; } }

@keyframes pr-pop { from { transform: scale(.3); opacity: 0; } }


/* ============================================================
   VARIANT A — SPLIT (dark aside + form)
   ============================================================ */
.pr-split {
  position: relative; width: 100%; max-width: 760px; background: var(--surface);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-hero);
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(14px) scale(.98); opacity: 0; animation: pr-modal-in .45s var(--ease-bounce) forwards;
}

@keyframes pr-modal-in { to { transform: none; opacity: 1; } }

.pr-split-aside {
  position: relative; padding: 34px 30px; color: #fff; overflow: hidden;
  background:
    radial-gradient(420px 240px at 90% -10%, rgba(0,154,255,.5), transparent 60%),
    var(--hero-gradient);
}

.pr-split-aside-grid {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(120% 80% at 30% 10%, #000 40%, transparent 85%); mask-image: radial-gradient(120% 80% at 30% 10%, #000 40%, transparent 85%);
}

.pr-split-eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--accent-yellow); margin-bottom: 18px;
}

.pr-split-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-success); box-shadow: 0 0 0 4px rgba(54,192,85,.3); animation: pr-blip 1.5s var(--ease-standard) infinite; }

@keyframes pr-blip { 50% { opacity: .4; } }

.pr-split-aside h4 { position: relative; font-size: 20px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 20px; }

.pr-split-aside .pr-log { position: relative; margin-bottom: 22px; }

.pr-split-aside .pr-log-row { color: rgba(255,255,255,.9); }

.pr-split-aside .pr-log-row .tick.busy { color: var(--accent-yellow); }

.pr-split-recap {
  position: relative; margin-top: auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-md); padding: 11px 13px; font-size: 12.5px; color: rgba(255,255,255,.85); line-height: 1.5;
}

.pr-split-recap .lbl { display: block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.6); margin-bottom: 4px; }

.pr-split-form { padding: 38px 34px; display: flex; flex-direction: column; justify-content: center; }

.pr-split-form h3 { font-size: 22px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.18; margin-bottom: 8px; color: var(--gray-darker); }

.pr-split-form .lede { font-size: 14px; color: var(--gray-base); line-height: var(--lh-body); margin-bottom: 20px; }


/* ============================================================
   VARIANT B — AGENT (centered, animated orb)
   ============================================================ */
.pr-agent {
  position: relative; width: 100%; max-width: 440px; background: var(--surface);
  border-radius: var(--radius-xl); padding: 32px 30px 26px; box-shadow: var(--shadow-hero); text-align: center;
  transform: translateY(14px) scale(.98); opacity: 0; animation: pr-modal-in .45s var(--ease-bounce) forwards;
}

.pr-orb { position: relative; width: 76px; height: 76px; margin: 4px auto 20px; display: grid; place-items: center; }

.pr-orb-core {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #4fb6ff, var(--brand-primary) 60%, var(--brand-secondary));
  box-shadow: 0 10px 30px rgba(16,98,254,.5); position: relative; z-index: 2;
}

.pr-orb-core svg { width: 30px; height: 30px; animation: pr-orb-spin 8s linear infinite; }

@keyframes pr-orb-spin { to { transform: rotate(360deg); } }

.pr-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-primary-lighter); opacity: 0; animation: pr-ring 2.4s ease-out infinite; }

.pr-orb-ring.d2 { animation-delay: 1.2s; }

@keyframes pr-ring { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

.pr-agent-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px; color: var(--brand-primary); margin-bottom: 10px; }

.pr-agent h3 { font-size: 21px; font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; color: var(--gray-darker); }

.pr-agent .lede { font-size: 14px; color: var(--gray-base); line-height: var(--lh-body); margin-bottom: 20px; }

.pr-agent .pr-log { text-align: left; background: var(--body-bg); border: 1px solid var(--gray-lighter-4); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; }

.pr-agent .pr-log-row { color: var(--gray-darker); }

.pr-agent .pr-log-row .tick.busy { color: var(--brand-primary); }

.pr-points .pr-log-row { align-items: flex-start; line-height: 1.4; }

.pr-points .pr-log-row .tick { margin-top: 1px; }


/* ============================================================
   VARIANT C — MINIMAL (calm, inline send)
   ============================================================ */
.pr-min {
  position: relative; width: 100%; max-width: 480px; background: var(--surface);
  border-radius: var(--radius-xl); padding: 40px 38px 32px; box-shadow: var(--shadow-hero); text-align: center;
  transform: translateY(14px) scale(.98); opacity: 0; animation: pr-modal-in .45s var(--ease-bounce) forwards;
}

.pr-min-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-primary); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }

.pr-min-eyebrow .spark { color: var(--accent-yellow); }

.pr-min h3 { font-size: 26px; font-weight: var(--fw-black); letter-spacing: -.03em; line-height: 1.12; margin-bottom: 12px; color: var(--gray-darker); text-wrap: balance; }

.pr-min .lede { font-size: 15px; color: var(--gray-base); line-height: var(--lh-loose); margin-bottom: 22px; }

.pr-min-quote {
  font-family: var(--font-mono); font-size: 13px; color: var(--gray-darker); background: var(--body-bg);
  border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 22px; line-height: 1.5; text-align: left;
  position: relative; border: 1px solid var(--gray-lighter-4);
}

.pr-min-quote::before { content: "“"; font-size: 30px; line-height: 0; color: var(--brand-primary); opacity: .4; margin-right: 4px; vertical-align: -6px; }

/* inline pill input + send */
.pr-min-inline { display: flex; gap: 8px; align-items: stretch; }

.pr-min-inline .pr-input { flex: 1; border-radius: var(--radius-pill); padding: 14px 20px; }

.pr-min-send {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--cta-gradient); color: #fff;
  font-weight: var(--fw-bold); font-size: 15px; padding: 0 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-primary);
  transition: transform var(--dur-fast) var(--ease-bounce);
}

.pr-min-send:hover { transform: translateY(-2px); }

.pr-min-err { text-align: left; padding-left: 4px; }

.pr-min-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 18px; }

.pr-min-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-base); font-weight: var(--fw-medium); }

.pr-min-trust svg { width: 14px; height: 14px; color: var(--brand-success-dark); }


/* ============================================================
   CONFIRM (shared)
   ============================================================ */
.pr-confirm { text-align: center; padding: 6px 0 2px; }

.pr-confirm-ico {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--brand-success), var(--brand-success-dark)); box-shadow: 0 12px 30px rgba(54,192,85,.4);
  animation: pr-pop .55s var(--ease-bounce);
}

.pr-confirm h3 { font-size: 23px; font-weight: var(--fw-heavy); margin-bottom: 8px; color: var(--gray-darker); }

.pr-confirm p { font-size: var(--fs-body); color: var(--gray-base); line-height: var(--lh-body); margin-bottom: 6px; }

.pr-confirm .mail { font-weight: var(--fw-bold); color: var(--gray-darker); }

.pr-confirm-steps { text-align: left; background: var(--body-bg); border-radius: var(--radius-md); padding: 16px 18px; margin: 18px 0 4px; }

.pr-confirm-steps li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--gray-base); padding: 6px 0; line-height: 1.5; }

.pr-confirm-steps .n { font-family: var(--font-mono); font-weight: 700; color: var(--brand-primary); flex-shrink: 0; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px) {
  .pr-split { grid-template-columns: 1fr; max-width: 440px; }
  .pr-split-aside { display: none; }
  .pr-split-form { padding: 34px 28px; }
}

@media (max-width: 520px) {
  .pr-min-inline { flex-direction: column; }
  .pr-min-send { padding: 13px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-orb-core svg, .pr-orb-ring, .pr-split-eyebrow .dot, .pr-log-row .tick.busy { animation: none; }
  .pr-split, .pr-agent, .pr-min { animation: none; opacity: 1; transform: none; }
}

  #root { height: 100%; }
.pr-overlay{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:24px;background:rgba(10,16,40,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pr-overlay.open{display:grid}
#aiwpModalSuccess{text-align:center}


/* fix: hero-gradient exact als webhosting + witte koppen op donkere achtergrond */
.aiwp-hero{background:var(--hero-gradient,linear-gradient(90deg,#152a80,#1d65af))!important}
.aiwp-h1{color:#fff!important}
.aiwp-final-box h2{color:#fff!important}

/* ============================================================
   Uit template gehaalde statische inline-styles (class-based).
   Zelfde uiterlijk; JS-getoggelde/dynamische styles bleven inline.
   ============================================================ */
/* pricing: introductiekorting-tekst */
.wok-aiwp .pricing-exBtw .disc { color: var(--brand-warning-dark); }
/* trustpilot: sterren-link zonder onderstreping */
.wok-aiwp .tp-stars-link { text-decoration: none; }
/* dflow: klikbare knop (a zonder href) */
/* bento: vaste tegelhoogte onderste rij */
.wok-aiwp .bento-tile.fixed { height: 270px; }
/* wereldkaart-lijnen: gestaggerde animatie-start (vgl. .aiwp-tok.tN) */
.wn-map-link path.l1 { animation-delay: 0s; }
.wn-map-link path.l2 { animation-delay: 0.18s; }
.wn-map-link path.l3 { animation-delay: 0.36s; }
.wn-map-link path.l4 { animation-delay: 0.54s; }
.wn-map-link path.l5 { animation-delay: 0.72s; }
.wn-map-link path.l6 { animation-delay: 0.9s; }
/* frx-preview: nav-balkjes */
.wok-aiwp .frx-pv-nav span { width: 18px; }
.wok-aiwp .frx-pv-nav span.logo { width: 34px; }
.wok-aiwp .frx-pv-nav span.push { width: 18px; margin-left: auto; }