/* ==========================================================================
   WebApex — design system
   Vooruitstrevende, agentic-AI marketingsite. Donker, premium, met een
   signature cyan→indigo→violet gradient. Gebouwd als los, statisch systeem;
   alle interactiviteit degradeert netjes zonder backend.
   ========================================================================== */

:root{
  /* --- basis (donker) --- */
  --bg:#07070f;
  --bg-1:#0b0c1a;
  --bg-2:#11132a;
  --bg-glass:rgba(20,22,45,0.55);
  /* Visuele herziening deel 2: 3-kleuren-verloop ijsblauw -> cyaan ->
     licht-transparant wit, i.p.v. het vorige subtiele witte tintje. Zelfde
     formule als de wizard's .wz-root-override (index.css) hieronder in de
     wizard-app, zodat kaarten hoofdsite-breed en wizard-breed consistent
     ogen. --bg-card-2 is dezelfde 3 kleuren op een lager alpha-bereik,
     als lichtere/secundaire variant. */
  --bg-card:linear-gradient(155deg, rgba(56, 189, 248, 0.3) 0%, rgba(34, 211, 238, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  --bg-card-2:linear-gradient(155deg, rgba(56, 189, 248, 0.2) 0%, rgba(34, 211, 238, 0.15) 50%, rgba(255, 255, 255, 0.1) 100%);

  --ink:#f4f6ff;
  --ink-soft:#b9c0e0;
  --ink-dim:#7c84ab;
  --ink-faint:#575f83;

  --border:rgba(255,255,255,0.08);
  --border-soft:rgba(255,255,255,0.05);
  --border-glow:rgba(124,140,255,0.35);

  /* --- accenten / signature --- */
  --cyan:#22d3ee;
  --indigo:#6366f1;
  --violet:#a855f7;
  --blue:#5b8cff;
  --green:#34e0a1;
  --amber:#fbbf24;
  --pink:#f472b6;
  --red:#fb7185;

  --grad: linear-gradient(120deg,#22d3ee 0%,#6366f1 48%,#a855f7 100%);
  --grad-soft: linear-gradient(120deg,rgba(34,211,238,0.14),rgba(99,102,241,0.14),rgba(168,85,247,0.14));
  --grad-text: linear-gradient(100deg,#5eead4,#818cf8 55%,#c084fc);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --shadow-sm:0 2px 10px rgba(0,0,0,0.3);
  --shadow-md:0 14px 40px rgba(0,0,0,0.45);
  --shadow-lg:0 30px 80px rgba(0,0,0,0.55);
  --glow:0 0 40px rgba(99,102,241,0.35);

  --container:1180px;
  --font:"General Sans","Space Mono",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.62;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* globale sfeer-achtergrond */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 600px at 15% -5%,rgba(99,102,241,0.20),transparent 60%),
    radial-gradient(800px 600px at 100% 5%,rgba(168,85,247,0.16),transparent 55%),
    radial-gradient(700px 700px at 50% 110%,rgba(34,211,238,0.10),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.4;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 75%);
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{position:relative}

h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.022em;font-weight:800;line-height:1.1}
h1{font-size:clamp(2.5rem,5.4vw,4.1rem)}
h2{font-size:clamp(2rem,3.6vw,2.8rem);line-height:1.14}
h3{font-size:1.28rem;line-height:1.3;font-weight:700}
p{color:var(--ink-soft)}
.lead{font-size:1.16rem;color:var(--ink-soft);line-height:1.7}
.morph-word-3d{display:inline-block;perspective:340px}
.morph-word{display:inline-block;color:var(--cyan);font-weight:700;transform-origin:50% 50%;backface-visibility:hidden;transition:transform .35s ease,opacity .35s ease}
@media(prefers-reduced-motion:reduce){.morph-word{transition:none}}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.skip-link{position:absolute;left:-999px;top:0;background:var(--indigo);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:400}
.skip-link:focus{left:0}

/* ---------- utility ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:0.76rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:var(--ink);background:var(--grad-soft);border:1px solid var(--border);padding:7px 15px;border-radius:999px;margin-bottom:22px;backdrop-filter:blur(6px)}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.55;transform:scale(0.7)}}
.section-head{max-width:680px;margin:0 auto 60px;text-align:center}
.section-head p{margin-top:16px;font-size:1.05rem}
.section-pad{padding:104px 0}
.section-pad-sm{padding:72px 0}
.text-center{text-align:center}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);border:0}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:0.7rem;font-weight:700;padding:4px 11px;border-radius:999px;letter-spacing:0.02em}
.badge-green{background:rgba(52,224,161,0.13);color:var(--green);border:1px solid rgba(52,224,161,0.25)}
.badge-violet{background:rgba(168,85,247,0.14);color:#d8b4fe;border:1px solid rgba(168,85,247,0.28)}
.badge-cyan{background:rgba(34,211,238,0.12);color:var(--cyan);border:1px solid rgba(34,211,238,0.25)}
.badge-amber{background:rgba(251,191,36,0.13);color:var(--amber);border:1px solid rgba(251,191,36,0.25)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:12px;font-size:0.95rem;font-weight:600;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s;white-space:nowrap;position:relative}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 26px rgba(99,102,241,0.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(99,102,241,0.55)}
.btn-secondary{background:rgba(255,255,255,0.04);color:var(--ink);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-glow);background:rgba(255,255,255,0.07)}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:transparent}
.btn-ghost:hover{color:var(--ink)}
.btn-lg{padding:16px 32px;font-size:1.02rem}
.btn-sm{padding:9px 16px;font-size:0.85rem}
.btn-block{width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-arrow svg{transition:transform .18s}
.btn-arrow:hover svg{transform:translateX(3px)}

/* ---------- navbar ---------- */
.navbar{position:sticky;top:0;z-index:200;background:rgba(7,7,15,0.72);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--border-soft)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;max-width:var(--container);margin:0 auto}
.navbar__logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.18rem;letter-spacing:-0.02em;color:var(--ink)}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 18px rgba(99,102,241,0.5);position:relative;overflow:hidden}
.logo-mark svg{width:20px;height:20px}
.logo-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,0.4),transparent 55%)}
.navbar__links{display:flex;align-items:center;gap:28px}
.navbar__links a{font-size:0.9rem;font-weight:600;color:var(--ink-dim);transition:color .15s;position:relative}
.navbar__links a:hover,.navbar__links a.active{color:var(--ink)}
.navbar__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:var(--grad)}
.navbar__right{display:flex;align-items:center;gap:12px}
.navbar__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px}
.navbar__burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.navbar__mobile{display:none;flex-direction:column;gap:2px;padding:10px 24px 22px;border-top:1px solid var(--border-soft);background:rgba(11,12,26,0.98)}
.navbar__mobile a{padding:13px 4px;font-weight:600;font-size:0.98rem;color:var(--ink-soft);border-bottom:1px solid var(--border-soft)}
.navbar__mobile .btn{margin-top:14px}
.navbar__mobile.open{display:flex}
@media(max-width:940px){
  .navbar__links{display:none}
  .navbar__right .btn-nav-hide{display:none}
  .navbar__burger{display:flex}
}

/* ---------- hero ---------- */
.hero{padding:70px 0 96px;overflow:hidden;position:relative}
.hero__grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero__kicker{display:inline-flex;align-items:center;gap:10px;font-size:0.8rem;font-weight:700;color:var(--ink-soft);background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:999px;padding:7px 8px 7px 8px;margin-bottom:26px}
.hero__kicker b{background:var(--grad);color:#fff;font-weight:700;padding:3px 10px;border-radius:999px;font-size:0.72rem;letter-spacing:0.03em}
.hero h1{margin-bottom:10px}
.claim-kubus-wrap{perspective:1000px;margin-bottom:22px;height:3.4em;max-width:420px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.claim-kubus{position:relative;width:100%;height:100%}
.claim-vlak{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;line-height:1.22;letter-spacing:-0.02em;backface-visibility:hidden;animation:claimFaceCycle 30s cubic-bezier(.4,0,.2,1) infinite,claimShimmer 3.5s linear infinite;background-image:linear-gradient(100deg,var(--cyan) 0%,var(--indigo) 45%,var(--violet) 100%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.claim-vlak.groot{font-size:clamp(2.6rem,5.6vw,3.8rem);letter-spacing:-0.03em}
.claim-vlak.voor{animation-delay:0s,0s}
.claim-vlak.v2{animation-delay:-5s,0s}
.claim-vlak.v3{animation-delay:-10s,0s}
.claim-vlak.v4{animation-delay:-15s,0s}
.claim-vlak.v5{animation-delay:-20s,0s}
.claim-vlak.v6{animation-delay:-25s,0s}
@keyframes claimFaceCycle{
  0%{transform:rotateY(80deg) translateZ(70px);opacity:0;filter:blur(3px)}
  3%{transform:rotateY(0deg) translateZ(70px);opacity:1;filter:blur(0)}
  13%{transform:rotateY(0deg) translateZ(70px);opacity:1;filter:blur(0)}
  16.67%{transform:rotateY(-80deg) translateZ(70px);opacity:0;filter:blur(3px)}
  100%{transform:rotateY(-80deg) translateZ(70px);opacity:0;filter:blur(0)}
}
@keyframes claimShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@media(prefers-reduced-motion:reduce){
  .claim-vlak{animation:none;position:static;transform:none!important;opacity:1!important;filter:none!important}
  .claim-vlak:not(.voor){display:none}
}
.hero__dual{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.hero__dual-item{display:flex;align-items:center;gap:9px;font-size:0.88rem;font-weight:600;color:var(--ink-soft);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:10px 14px}
.hero__dual-item b{color:var(--ink);font-weight:700}
.hero__dual-item svg{width:18px;height:18px;flex-shrink:0}
.hero .lead{max-width:520px;margin-bottom:32px}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero__trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:0.82rem;color:var(--ink-dim)}
.hero__trust-item{display:flex;align-items:center;gap:7px}
.hero__trust-item svg{width:16px;height:16px;color:var(--green)}
@media(max-width:920px){.hero__grid{grid-template-columns:1fr;gap:56px}.hero__visual{order:-1}}

/* ---------- agent visual (robot) ---------- */
.agent-stage{position:relative;aspect-ratio:1/1;max-width:480px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.agent-stage__rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.agent-ring{position:absolute;border-radius:50%;border:1px solid rgba(124,140,255,0.18)}
.agent-ring--1{width:100%;height:100%;animation:spin 26s linear infinite}
.agent-ring--2{width:78%;height:78%;border-color:rgba(34,211,238,0.16);animation:spin 20s linear infinite reverse}
.agent-ring--3{width:56%;height:56%;border-style:dashed;border-color:rgba(168,85,247,0.2);animation:spin 34s linear infinite}
.agent-ring--4{width:90%;height:90%;border-style:dotted;border-color:rgba(251,191,36,0.22);animation:spin 29s linear infinite reverse}
.agent-ring__node{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan),0 0 24px var(--cyan)}
.agent-ring--2 .agent-ring__node{background:var(--red);box-shadow:0 0 10px var(--red),0 0 24px var(--red)}
.agent-ring--3 .agent-ring__node{background:var(--indigo);box-shadow:0 0 10px var(--indigo),0 0 24px var(--indigo)}
.agent-ring--4 .agent-ring__node{background:var(--amber);box-shadow:0 0 10px var(--amber),0 0 24px var(--amber)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.agent-glow{position:absolute;width:64%;height:64%;border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,0.55),rgba(168,85,247,0.2) 55%,transparent 72%);filter:blur(20px);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.08);opacity:1}}
.robot{position:relative;z-index:3;width:52%;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(99,102,241,0.45));animation:robotFloat 4.5s ease-in-out infinite;transform-origin:50% 100%}
.robot__eye{animation:blink 5.5s infinite}
.robot__scanline{opacity:0;animation:visorScan 4s ease-in-out infinite}
.robot__antenna-glow{transform-box:fill-box;transform-origin:center;animation:antennaPulse 1.8s ease-in-out infinite}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:0.15}}
@keyframes robotFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(-1.1deg)}}
@keyframes visorScan{0%{transform:translateY(-24px);opacity:0}8%{opacity:0.55}40%{opacity:0.55}48%{transform:translateY(108px);opacity:0}100%{transform:translateY(108px);opacity:0}}
@keyframes antennaPulse{0%,100%{opacity:0.35;transform:scale(1)}50%{opacity:0.8;transform:scale(1.7)}}
.agent-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;background:rgba(17,19,42,0.9);border:1px solid var(--border);border-radius:12px;padding:9px 13px;font-size:0.78rem;font-weight:600;color:var(--ink);box-shadow:var(--shadow-md);backdrop-filter:blur(10px);white-space:nowrap}
.agent-chip svg{width:15px;height:15px;color:var(--green);flex-shrink:0}
.agent-chip--1{top:8%;right:-6%;animation:floatY 6s ease-in-out infinite}
.agent-chip--2{bottom:20%;left:-12%;animation:floatY 7s ease-in-out infinite 0.6s}
.agent-chip--3{bottom:2%;right:4%;animation:floatY 6.5s ease-in-out infinite 1.2s}
.agent-chip--4{top:38%;left:-16%;animation:floatY 7.4s ease-in-out infinite 0.9s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.6s infinite;display:inline-block;flex-shrink:0}
@media(prefers-reduced-motion:reduce){
  .agent-ring--1,.agent-ring--2,.agent-ring--3,.agent-ring--4,.agent-glow,.agent-chip,.eyebrow-dot,.robot,.robot__eye,.robot__scanline,.robot__antenna-glow,.dotlive{animation:none}
}
@media(max-width:520px){.agent-chip--2{left:-4%}.agent-chip--4{display:none}.agent-chip{font-size:0.72rem;padding:7px 10px}}

/* ---------- marquee / trust strip ---------- */
.trust-strip{padding:26px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,0.015)}
.trust-strip__inner{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:0.86rem;font-weight:600;color:var(--ink-dim)}
.trust-item svg{width:20px;height:20px;color:var(--ink-soft);flex-shrink:0}
.trust-item b{color:var(--ink)}

/* ---------- generic card grid ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-1{display:grid;grid-template-columns:1fr;gap:22px;max-width:420px;margin-inline:auto}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:28px;transition:transform .22s ease,border-color .22s ease,background .22s ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--border-glow);background:var(--bg-card-2)}
.card__icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--grad-soft);border:1px solid var(--border);color:var(--ink)}
.card__icon svg{width:23px;height:23px}
.card h3{margin-bottom:9px}
.card p{font-size:0.92rem}
.card--glow::before{content:"";position:absolute;top:-40%;right:-30%;width:220px;height:220px;background:radial-gradient(circle,rgba(99,102,241,0.22),transparent 70%);opacity:0;transition:opacity .3s}
.card--glow:hover::before{opacity:1}

/* ---------- "wat is een AI-agent" split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.reverse .split__visual{order:2}
.split__list{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.split__list li{display:flex;gap:14px;align-items:flex-start}
.split__list .li-icon{width:34px;height:34px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cyan)}
.split__list .li-icon svg{width:17px;height:17px}
.split__list b{color:var(--ink);display:block;font-size:0.96rem;margin-bottom:2px}
.split__list span{font-size:0.9rem;color:var(--ink-dim)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}.split.reverse .split__visual{order:-1}}

/* compare-oud vs nieuw blokje */
.vs-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px}
.vs-card h4{font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;color:var(--ink-dim)}
.vs-card--old h4{color:var(--ink-faint)}
.vs-card ul li{display:flex;gap:10px;align-items:flex-start;font-size:0.9rem;padding:8px 0;color:var(--ink-soft)}
.vs-card ul li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px}
.vs-card--old ul li{color:var(--ink-dim)}
.vs-card--old ul li svg{color:var(--red)}
.vs-card--new{border-color:var(--border-glow);background:linear-gradient(160deg,rgba(99,102,241,0.08),rgba(168,85,247,0.04))}
.vs-card--new ul li svg{color:var(--green)}

/* ---------- agent-story (robot -> label -> pijl, wijst naar de site-mockup eronder) ---------- */
.agent-story{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:4px}
.agent-story__robot-group{display:flex;flex-direction:column;align-items:center;animation:agentRobotCycle 7s ease-in-out infinite}
.agent-story__bot{margin-bottom:14px;flex-shrink:0}
.agent-story__dot{animation:agentGlowPulse 1.5s ease-in-out infinite}
.agent-story__eye{transform-origin:center;animation:agentBlink 4s ease-in-out infinite}
.agent-story__head{stroke-dasharray:200;animation:agentDrawBorder 3s ease-in-out infinite}
.agent-story__arrow{position:relative;display:flex;justify-content:center;margin-top:16px;opacity:0;animation:agentArrowCycle 7s ease-in-out infinite}
.agent-story__arrow-line{stroke-dasharray:6 4;animation:agentDashFlow 0.6s linear infinite}
.agent-story__arc{display:block;margin-bottom:-4px}
.agent-story__arc path{animation:agentArcFlow 1.1s linear infinite}
.agent-story__website{margin-top:16px;transform-origin:center;animation:agentWebsiteCycle 7s ease-in-out infinite}
@keyframes agentRobotCycle{
  0%,36%{opacity:1;filter:blur(0);transform:scale(1)}
  43%{opacity:0.3;filter:blur(2px);transform:scale(1.05)}
  50%,86%{opacity:0;filter:blur(0);transform:scale(0.8)}
  100%{opacity:1;filter:blur(0);transform:scale(1)}
}
@keyframes agentArrowCycle{
  0%,34%{opacity:0}
  40%,84%{opacity:1}
  90%,100%{opacity:0}
}
@keyframes agentWebsiteCycle{
  0%,48%{opacity:0;filter:blur(0);transform:translateY(18px) scale(0.92)}
  55%,84%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
  92%{opacity:0.4;filter:blur(2px);transform:translateY(-14px) scale(0.96)}
  100%{opacity:0;filter:blur(0);transform:translateY(-14px) scale(0.92)}
}
@keyframes agentGlowPulse{0%,100%{opacity:0.7}50%{opacity:1}}
@keyframes agentBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes agentDashFlow{100%{stroke-dashoffset:-10}}
@keyframes agentArcFlow{100%{stroke-dashoffset:-7.5}}
@keyframes agentDrawBorder{0%{stroke-dashoffset:200;opacity:0.4}50%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:200;opacity:0.4}}
@media(prefers-reduced-motion:reduce){.agent-story__robot-group,.agent-story__arrow,.agent-story__website,.agent-story__dot,.agent-story__eye,.agent-story__head,.agent-story__arrow-line,.agent-story__arc path{animation:none;opacity:1!important;transform:none!important;filter:none!important}}

/* ---------- browser-mockup (herbruikt o.a. op diensten.html) ---------- */
.demo__bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--border-soft);background:rgba(255,255,255,0.02)}
.demo__dot{width:10px;height:10px;border-radius:50%}
.demo__url{margin-left:10px;flex:1;background:rgba(255,255,255,0.04);border-radius:7px;padding:5px 12px;font-size:0.72rem;color:var(--ink-dim);font-family:var(--mono);display:flex;align-items:center;gap:7px}
.demo__url svg{width:12px;height:12px;color:var(--green)}
.demo__site-hero{height:14px;width:55%;border-radius:6px;background:var(--grad);margin-bottom:12px;opacity:0.9;transition:width .5s}
.demo__site-line{height:9px;border-radius:5px;background:rgba(255,255,255,0.09);margin-bottom:9px}
.demo__site-line.short{width:70%}
.demo__site-line.mid{width:88%}
.demo__site-blocks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px}
.demo__site-block{height:64px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border-soft);position:relative;overflow:hidden}
.demo__site-block.filled{background:var(--grad-soft);border-color:var(--border-glow)}
.demo__replay:hover{color:var(--ink)}
.demo__replay svg{width:13px;height:13px}
/* ---------- kaart-filters (o.a. diensten) ---------- */
.lib-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.lib-filter{padding:9px 17px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,0.03);font-size:0.84rem;font-weight:600;color:var(--ink-dim);transition:.18s}
.lib-filter:hover{color:var(--ink);border-color:var(--border-glow)}
.lib-filter.active{background:var(--grad);color:#fff;border-color:transparent}

/* ---------- services / products ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:26px;display:flex;gap:18px;transition:.2s}
.svc-card:hover{border-color:var(--border-glow);background:var(--bg-card-2)}
.svc-card__icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--grad-soft);border:1px solid var(--border);color:var(--ink)}
.svc-card__icon svg{width:22px;height:22px}
.svc-card h3{font-size:1.05rem;margin-bottom:7px}
.svc-card p{font-size:0.88rem;margin-bottom:10px}
.svc-card__price{font-size:0.82rem;color:var(--ink-soft);font-weight:600}
.svc-card__price b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
@media(max-width:760px){.svc-grid{grid-template-columns:1fr}}

/* products table */
.ptable-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md)}
.ptable{width:100%;border-collapse:collapse;min-width:560px}
.ptable th,.ptable td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--border-soft);font-size:0.88rem}
.ptable thead th{background:rgba(255,255,255,0.03);font-weight:700;color:var(--ink);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em}
.ptable td:first-child,.ptable th:first-child{text-align:left;font-weight:600;color:var(--ink)}
.ptable tbody tr:last-child td{border-bottom:none}
.ptable tr:last-child td{border-bottom:none}
.ptable .col-apex{background:rgba(168,85,247,0.06)}
.ptable .incl{color:var(--green);font-weight:700}

/* ---------- pricing ---------- */
.pricing-note{text-align:center;font-size:0.9rem;color:var(--ink-dim);margin:-30px auto 48px;max-width:620px}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:stretch;max-width:440px;margin-inline:auto}
.price-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.price-card--featured{border-color:transparent;background:linear-gradient(170deg,rgba(99,102,241,0.14),rgba(168,85,247,0.06));box-shadow:var(--glow)}
.price-card--featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price-card__ribbon{position:absolute;top:16px;right:16px;background:var(--grad);color:#fff;font-size:0.66rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:0.04em;text-transform:uppercase}
.price-card__name{font-size:1.2rem;font-weight:800;margin-bottom:5px;letter-spacing:-0.01em}
.price-card__tier{font-size:0.78rem;color:var(--ink-dim);margin-bottom:22px}
.price-card__amount{display:flex;align-items:baseline;gap:5px;margin-bottom:4px}
.price-card__amount .from{font-size:0.8rem;color:var(--ink-dim);margin-right:2px}
.price-card__amount .num{font-size:2.7rem;font-weight:800;letter-spacing:-0.02em}
.price-card__ceil{font-size:0.8rem;color:var(--ink-dim);margin-bottom:20px}
.price-card__ceil b{color:var(--ink-soft)}
.price-card__agent{font-size:0.82rem;color:var(--ink-soft);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:10px 13px;margin-bottom:22px;display:flex;align-items:center;gap:9px}
.price-card__agent svg{width:17px;height:17px;color:var(--cyan);flex-shrink:0}
.price-card__agent b{color:var(--ink);font-weight:700}
.price-card__features{margin-bottom:28px;flex:1;display:flex;flex-direction:column;gap:2px}
.price-card__features li{display:flex;gap:10px;align-items:flex-start;font-size:0.88rem;color:var(--ink-soft);padding:7px 0}
.price-card__features li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--green)}
.price-card__features li.muted{color:var(--ink-faint)}
.price-card__features li.muted svg{color:var(--ink-faint)}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ---------- comparison table ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.compare{width:100%;border-collapse:collapse;min-width:720px}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border-soft);font-size:0.88rem;vertical-align:top}
.compare thead th{background:rgba(255,255,255,0.03);font-weight:800;font-size:0.9rem}
.compare thead th.col-wa{background:linear-gradient(180deg,rgba(99,102,241,0.18),rgba(168,85,247,0.08));color:var(--ink)}
.compare tbody td.col-wa{background:rgba(99,102,241,0.05)}
.compare td:first-child,.compare th:first-child{font-weight:700;color:var(--ink);width:210px}
.compare .c-good{color:var(--green);font-weight:600}
.compare .c-mid{color:var(--amber)}
.compare .c-bad{color:var(--red)}
.compare tr:last-child td{border-bottom:none}
.compare small{display:block;color:var(--ink-dim);font-size:0.76rem;font-weight:400;margin-top:2px}

/* ---------- faq ---------- */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;background:var(--bg-card);transition:border-color .2s}
.faq-item:hover{border-color:var(--border-glow)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;background:none;border:none;text-align:left;font-size:1rem;font-weight:700;color:var(--ink)}
.faq-icon{width:26px;height:26px;flex-shrink:0;border-radius:8px;background:var(--grad-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--cyan);transition:transform .25s}
.faq-q.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a__inner{padding:0 22px 22px}
.faq-a p{font-size:0.94rem;line-height:1.7}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,rgba(99,102,241,0.16),rgba(168,85,247,0.10));border:1px solid var(--border);border-radius:var(--radius-xl);padding:64px 48px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;background:radial-gradient(circle,rgba(34,211,238,0.22),transparent 65%);top:-240px;left:-120px;pointer-events:none}
.cta-band::after{content:"";position:absolute;width:520px;height:520px;background:radial-gradient(circle,rgba(168,85,247,0.22),transparent 65%);bottom:-260px;right:-140px;pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--ink-soft);max-width:560px;margin:0 auto 32px;font-size:1.05rem}
.cta-band__ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:0.84rem;font-weight:700;color:var(--ink)}
.form-field input,.form-field textarea,.form-field select{border:1px solid var(--border);border-radius:11px;padding:13px 15px;font-size:0.92rem;color:var(--ink);background:rgba(255,255,255,0.03);transition:border-color .15s,box-shadow .15s}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-faint)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(99,102,241,0.18)}
.form-field textarea{resize:vertical;min-height:130px}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c84ab' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.form-hint{font-size:0.78rem;color:var(--ink-dim)}
.form-error{font-size:0.78rem;color:var(--red);display:none}
.form-field.invalid input,.form-field.invalid textarea{border-color:var(--red)}
.form-field.invalid .form-error{display:block}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}}
.form-status{margin-top:18px;padding:15px 18px;border-radius:12px;font-size:0.9rem;font-weight:600;display:none;align-items:flex-start;gap:10px}
.form-status.show{display:flex}
.form-status svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.form-status.success{background:rgba(52,224,161,0.1);color:var(--green);border:1px solid rgba(52,224,161,0.25)}
.form-status.error{background:rgba(251,113,133,0.1);color:var(--red);border:1px solid rgba(251,113,133,0.25)}

/* ---------- page hero (inner) ---------- */
.page-hero{padding:78px 0 40px;text-align:center;position:relative}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.2rem);margin-bottom:16px}
.page-hero p{max-width:600px;margin:0 auto;font-size:1.1rem}
.breadcrumb{font-size:0.8rem;color:var(--ink-dim);margin-bottom:20px}
.breadcrumb a{color:var(--cyan);font-weight:600}

/* ---------- stats ---------- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:26px 18px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md)}
.stat h3{font-size:2.4rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--ink-dim);font-size:0.85rem;font-weight:600}
@media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr)}}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.team-grid--duo{grid-template-columns:repeat(2,1fr);max-width:600px;margin:0 auto}
.team-card{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 24px}
.team-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;position:relative;overflow:hidden}
.team-avatar--art svg{display:block}
.team-avatar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.4),transparent 60%)}
.team-card h3{font-size:1.05rem;margin-bottom:3px}
.team-card__role{font-size:0.82rem;color:var(--cyan);font-weight:600;margin-bottom:12px}
.team-card p{font-size:0.86rem;color:var(--ink-dim)}
@media(max-width:800px){.team-grid{grid-template-columns:1fr}}

/* ---------- values / timeline ---------- */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:34px;border-left:2px solid var(--border)}
.timeline-item{position:relative;padding-bottom:38px}
.timeline-item::before{content:"";position:absolute;left:-42px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(99,102,241,0.6)}
.timeline-item:last-child{padding-bottom:0}
.timeline-tag{font-size:0.76rem;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px}
.timeline-item h3{margin-bottom:6px;font-size:1.1rem}
.timeline-item p{font-size:0.92rem}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border-soft);padding:70px 0 32px;background:rgba(7,7,15,0.6)}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px;margin-bottom:50px}
.footer__brand-name{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.15rem;margin-bottom:16px}
.footer__brand p{font-size:0.88rem;max-width:280px;color:var(--ink-dim)}
.footer__socials{display:flex;gap:10px;margin-top:20px}
.footer__socials a{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--ink-soft);transition:.18s}
.footer__socials a:hover{border-color:var(--border-glow);color:var(--ink)}
.footer__col h4{font-size:0.8rem;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink)}
.footer__col li{margin-bottom:11px}
.footer__col a{font-size:0.88rem;color:var(--ink-dim);transition:color .15s}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid var(--border-soft);font-size:0.82rem;color:var(--ink-dim);flex-wrap:wrap;gap:12px}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---------- legal ---------- */
.legal{max-width:800px;margin:0 auto}
.legal h2{margin-top:44px;margin-bottom:14px;font-size:1.35rem}
.legal p,.legal li{color:var(--ink-soft);font-size:0.94rem;margin-bottom:12px}
.legal ul{padding-left:22px;list-style:disc}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- robot-entree (schaal + van boven inschuiven + fade) ---------- */
.robot-enter{opacity:0;transform:scale(0.85) translateY(-16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.robot-enter.in{opacity:1;transform:scale(1) translateY(0)}
@media(prefers-reduced-motion:reduce){.robot-enter{opacity:1;transform:none;transition:none}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--bg-2);border:1px solid var(--border-glow);color:var(--ink);padding:14px 20px;border-radius:12px;font-size:0.88rem;font-weight:600;box-shadow:var(--shadow-lg);z-index:500;transform:translateY(20px);opacity:0;pointer-events:none;transition:all .25s}
.toast.show{transform:translateY(0);opacity:1}

@media(max-width:700px){
  .section-pad{padding:72px 0}
  .cta-band{padding:48px 24px}
}