/* Footer: ontwerp naast code */
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.fd{position:relative;color:#fff;overflow:hidden;background:var(--ink);border-top:1px solid var(--line-d)}
.fd-in{max-width:1440px;margin:0 auto;padding:120px 80px 0;display:grid;grid-template-columns:1.25fr 2fr;gap:48px}
.fd-big{font-size:clamp(36px,4vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.03em}
.fd-big em{color:var(--spark2)}
.fd-contact{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;font-size:18px}
.fd-contact a{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.fd-contact a:hover{border-color:var(--spark2);color:var(--spark2)}
.fd-social{display:flex;gap:12px;margin-top:28px}
.fd-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:rgba(255,255,255,.8);transition:color .2s,background .25s,border-color .25s}
.fd-social a:hover{color:#fff;background:var(--spark);border-color:var(--spark)}
.fd-social svg{width:18px;height:18px}
.fd-ai{margin-top:36px;max-width:440px}
.fd-ai-t{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:14px}
.fd-ai-btns{display:flex;flex-wrap:wrap;gap:8px}
.fd-ai-btns a{padding:10px 18px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:15px;color:rgba(255,255,255,.85);transition:color .2s,background .25s,border-color .25s}
.fd-ai-btns a:hover,.fd-ai-btns a:focus-visible{color:#fff;background:var(--spark);border-color:var(--spark)}
.fd-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.fd-cols h2{color:rgba(255,255,255,.45)}
.fd-cols a{display:block;padding:4px 0;font-size:16px;color:rgba(255,255,255,.85)}
.fd-cols a:hover{color:var(--spark2)}
.fd-stage{max-width:1440px;margin:64px auto 0;padding:0 80px;display:grid;grid-template-columns:1.9fr 1fr;gap:20px}
.fd-win{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.fd-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.03)}
.fd-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.fd-bar span{margin-left:10px}
.fd-design{background:rgba(14,15,26,.35)}
.fd-canvas{position:relative;flex:1;display:flex;align-items:center;padding:56px 24px 40px}
.fd-svg{width:100%;height:auto;overflow:visible}
.fd-guides line{stroke:rgba(122,151,253,.35);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.fd-guides line.faint{stroke:rgba(122,151,253,.18)}
.fd-wire path{fill:rgba(50,95,252,.06);stroke:var(--spark2);stroke-width:1.2;vector-effect:non-scaling-stroke;cursor:pointer}
.fd-solid path{fill:var(--spark);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.fd-solid path.built{opacity:1}
.fd-nodes{pointer-events:none}
.fd-nodes g{transition:opacity .6s}
.fd-nodes g.built{opacity:.15}
.fd-nodes .h{stroke:rgba(122,151,253,.6);stroke-width:1;vector-effect:non-scaling-stroke}
.fd-nodes .n{fill:var(--ink);stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.fd-nodes .hn{fill:var(--spark2)}
.fd-red line{stroke:#FF4F6D;stroke-width:1;vector-effect:non-scaling-stroke}
.fd-red rect{fill:#FF4F6D}
.fd-red text{fill:#fff;font:600 7px var(--fb);text-anchor:middle}
.fd-sel,.fd-dev{pointer-events:none;transition:opacity .25s}
.fd-sel rect.box{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.fd-sel rect.hd{fill:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.fd-sel text{font:600 7.5px var(--fb)}
.fd-dev .mg{fill:rgba(246,178,107,.32)}
.fd-dev .ct{fill:rgba(111,168,220,.42)}
.fd-dev .tip{fill:#202331}
.fd-dev text{font:500 7px 'JetBrains Mono',ui-monospace,monospace;fill:#fff}
.fd-dev .tn{fill:#C792EA}
.fd-cursor{position:absolute;left:0;top:0;pointer-events:none;display:flex;align-items:flex-start;gap:2px;will-change:transform;z-index:2}
.fd-cursor svg{width:18px;height:22px;fill:var(--c);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.fd-cursor span,.fd-who{padding:4px 10px;border-radius:999px 999px 999px 4px;background:var(--c);color:var(--ink);font:600 12px var(--fb);white-space:nowrap}
.fd-cursor span{margin-top:16px}
.fd-editor{background:#07080e}
.fd-code{flex:1;padding:18px 0;font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.78);min-height:calc(17 * 1.75em + 36px)}
.fd-code .l{display:flex;padding-right:16px;white-space:pre;border-left:2px solid transparent;transition:background .2s}
.fd-code .l.on{background:rgba(43,212,154,.1);border-left-color:#2BD49A}
.fd-code .l[data-letter]{cursor:pointer}
.fd-code .no{flex:none;width:44px;padding-right:16px;text-align:right;color:rgba(255,255,255,.5)}
.fd-code .tg{color:#7A97FD}.fd-code .st{color:#2BD49A}.fd-code .kw{color:#C792EA}.fd-code .cm{color:rgba(255,255,255,.55)}
.fd-cur{position:relative;display:inline-block;height:1em}
.fd-caret{display:inline-block;width:2px;height:1.2em;vertical-align:-.25em;background:#2BD49A;animation:fcBlink 1s steps(1) infinite}
.fd-who{--c:#2BD49A;position:absolute;left:10px;top:-.35em;z-index:2;line-height:1.3}
.fd-status{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.fd-status.ok{color:#2BD49A}
.fd-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1440px;margin:40px auto 0;padding:24px 80px 32px;font-size:14px;color:rgba(255,255,255,.5);border-top:1px solid var(--line-d)}
.fd-bot a:hover{color:#fff}

.fd h2{font-family:var(--fb);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin-bottom:20px;line-height:1}
@keyframes fcBlink{50%{opacity:0}}
@media (max-width:1023px){
  .fd-in{grid-template-columns:1fr;padding-left:32px;padding-right:32px}
  .fd-stage{grid-template-columns:1fr;padding-left:32px;padding-right:32px}
  .fd-bot{padding-left:32px;padding-right:32px}
}
@media (max-width:767px){
  .fd-in{padding:72px 20px 0}
  .fd-stage{padding-left:20px;padding-right:20px;margin-top:48px}
  .fd-bot{padding:24px 20px 104px}
  .fd-cols{grid-template-columns:1fr 1fr}
  .fd-cursor span,.fd-who{font-size:10px;padding:3px 8px}
  .fd-canvas{padding:32px 12px}
  .fd-code{font-size:11px}
}