/* ReclameMans "Zie je naam in neon" studio. All rules scoped under .neon-studio. */
.neon-studio{--ns-c:#ff2d9b;--ns-rgb:255,45,155;--ns-core:#ffe0f0;--ns-off:#4a2c3b;
  --ns-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --ns-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E");
  --ns-brick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='64'%3E%3Crect width='128' height='64' fill='%23100807'/%3E%3Crect x='2' y='2' width='60' height='28' rx='1.5' fill='%234a2219'/%3E%3Crect x='66' y='2' width='60' height='28' rx='1.5' fill='%233c1a14'/%3E%3Crect x='-30' y='34' width='60' height='28' rx='1.5' fill='%2354281d'/%3E%3Crect x='34' y='34' width='60' height='28' rx='1.5' fill='%23411d16'/%3E%3Crect x='98' y='34' width='60' height='28' rx='1.5' fill='%2354281d'/%3E%3C/svg%3E");
  color:var(--txt,#f2f2f7);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;max-width:100%;min-width:0}
.neon-studio *,.neon-studio *::before,.neon-studio *::after{box-sizing:border-box}
.neon-studio .ns-wrap{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);grid-template-areas:"view" "ctrl" "cta"}
@media(min-width:960px){.neon-studio .ns-wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"view ctrl" "cta ctrl";gap:20px 26px;align-items:start}}
.neon-studio .ns-view{grid-area:view;min-width:0}

/* ---------- stage ---------- */
.neon-studio .ns-stage{position:relative;aspect-ratio:4/3;border-radius:var(--radius,16px);overflow:hidden;isolation:isolate;
  background:#060609;border:1px solid var(--line,#262633);box-shadow:0 30px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset}
@media(min-width:640px){.neon-studio .ns-stage{aspect-ratio:16/9}}
@supports not (aspect-ratio:1){.neon-studio .ns-stage{height:0;padding-top:75%}}
.neon-studio .ns-wall,.neon-studio .ns-spill,.neon-studio .ns-shade,.neon-studio .ns-center{position:absolute;inset:0}
.neon-studio .ns-wall{z-index:0;transition:filter .45s ease}
.neon-studio .ns-stage:not(.ns-on) .ns-wall,.neon-studio .ns-stage.ns-pre .ns-wall{filter:brightness(.5) saturate(.8)}
.neon-studio .ns-spill{z-index:1;inset:-15%;opacity:0;mix-blend-mode:screen;transition:opacity .4s ease;pointer-events:none;
  background:radial-gradient(ellipse 42% 36% at 50% 50%,rgba(var(--ns-rgb),.5),rgba(var(--ns-rgb),.2) 45%,rgba(var(--ns-rgb),.06) 70%,transparent 85%)}
.neon-studio .ns-shade{z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 40%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 70%,rgba(0,0,0,.4))}
.neon-studio .ns-center{z-index:3;display:flex;align-items:center;justify-content:center}
.neon-studio .ns-tag{position:absolute;z-index:4;left:12px;top:12px;font:600 10px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);padding:6px 8px;border-radius:6px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.neon-studio .ns-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px;vertical-align:1px;background:#555;transition:background .3s,box-shadow .3s}
.neon-studio .ns-on:not(.ns-pre) .ns-tag i{background:var(--ns-c);box-shadow:0 0 8px var(--ns-c)}

/* walls (also used as chip thumbnails) */
.neon-studio .ns-w-baksteen{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 40%,rgba(0,0,0,.45)),var(--ns-noise) 0 0/160px,var(--ns-brick) 50% 50%/96px 48px,#2a130e;background-blend-mode:normal,overlay,normal,normal}
@media(min-width:640px){.neon-studio .ns-wall.ns-w-baksteen{background-size:auto,160px,128px 64px,auto}}
.neon-studio .ns-w-beton{background:radial-gradient(circle,rgba(0,0,0,.6) 0 3px,rgba(255,255,255,.06) 4px,transparent 5.5px) 12.5% 25%/25% 50%,
  linear-gradient(90deg,rgba(0,0,0,.22) 1px,rgba(255,255,255,.03) 2px,transparent 3px) 0 0/50% 100%,
  linear-gradient(0deg,rgba(0,0,0,.18) 1px,transparent 2px) 0 0/100% 50%,
  var(--ns-noise) 0 0/160px,var(--ns-blot) 0 0/420px,linear-gradient(160deg,#47474d,#2e2e33);
  background-blend-mode:normal,normal,normal,overlay,overlay,normal}
.neon-studio .ns-w-donker{background:radial-gradient(ellipse at 50% 40%,#16161f,#07070b 70%),#07070b}

/* sign */
.neon-studio .ns-sign{flex:none;font-size:64px;line-height:1.15;text-align:center;white-space:pre;font-weight:400;letter-spacing:.01em}
.neon-studio .ns-plate{display:inline-block;position:relative;border-radius:.16em;border:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s,padding .2s}
.neon-studio .has-plate .ns-plate{padding:.34em .55em;border-color:rgba(255,255,255,.2);
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 40%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.015));
  box-shadow:0 .1em .3em rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.neon-studio .has-plate .ns-plate::before,.neon-studio .has-plate .ns-plate::after{content:"";position:absolute;top:.12em;bottom:.12em;width:.11em;
  background:radial-gradient(circle at 50% .055em,#d9d9e0 0 .03em,#8a8a94 .04em,#3a3a42 .055em,transparent .06em) 0 0/100% 50% no-repeat,
  radial-gradient(circle at 50% calc(100% - .055em),#d9d9e0 0 .03em,#8a8a94 .04em,#3a3a42 .055em,transparent .06em) 0 100%/100% 50% no-repeat}
.neon-studio .has-plate .ns-plate::before{left:.12em}.neon-studio .has-plate .ns-plate::after{right:.12em}
.neon-studio .has-plate.ns-on:not(.ns-pre) .ns-plate{border-color:rgba(var(--ns-rgb),.5);
  box-shadow:0 .1em .3em rgba(0,0,0,.5),inset 0 0 .6em rgba(var(--ns-rgb),.16),0 0 .5em rgba(var(--ns-rgb),.18),inset 0 1px 0 rgba(255,255,255,.25)}
.neon-studio .ns-txt{position:relative;display:block;padding:0 .12em}
.neon-studio .ns-tube{display:block;color:var(--ns-off);-webkit-text-stroke:var(--ns-stroke,0) var(--ns-off);
  text-shadow:0 .035em .05em rgba(0,0,0,.8),0 -.012em 0 rgba(255,255,255,.14),0 .09em .12em rgba(0,0,0,.45)}
.neon-studio .ns-lit{position:absolute;left:0;top:0;width:100%;padding:0 .12em;opacity:0;pointer-events:none;color:var(--ns-core);-webkit-text-stroke:var(--ns-stroke,0) var(--ns-core);transition:opacity .25s ease;
  text-shadow:0 0 .012em #fff,0 0 .04em var(--ns-c),0 0 .09em var(--ns-c),0 0 .18em rgba(var(--ns-rgb),.9),0 0 .36em rgba(var(--ns-rgb),.65),0 0 .7em rgba(var(--ns-rgb),.45)}
.neon-studio .ns-on .ns-lit,.neon-studio .ns-on .ns-spill{opacity:1}
.neon-studio .ns-pre .ns-lit,.neon-studio .ns-pre .ns-spill{opacity:0}
.neon-studio .ns-ignite .ns-lit{animation:ns-ignite 1s linear both}
.neon-studio .ns-ignite .ns-spill{animation:ns-ignite-s 1s linear both}
.neon-studio .ns-ignite .ns-wall{animation:ns-ignite-w 1s linear both}
@keyframes ns-ignite{0%{opacity:0}4%{opacity:.9}7%{opacity:.08}11%{opacity:.95}14%{opacity:.2}19%{opacity:.7}22%{opacity:.1}31%{opacity:1}37%{opacity:.62}43%{opacity:1}100%{opacity:1}}
@keyframes ns-ignite-s{0%{opacity:0}4%{opacity:.7}7%{opacity:0}11%{opacity:.8}14%{opacity:.1}19%{opacity:.5}22%{opacity:0}31%{opacity:1}37%{opacity:.5}43%{opacity:1}100%{opacity:1}}
@keyframes ns-ignite-w{0%,7%,22%{filter:brightness(.5) saturate(.8)}4%,11%,31%,43%,100%{filter:none}}

.neon-studio .ns-note{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--muted,#9a9aae)}

/* ---------- controls ---------- */
.neon-studio .ns-ctrl{grid-area:ctrl;min-width:0;display:grid;gap:20px;padding:20px;background:var(--card,#15151f);border:1px solid var(--line,#262633);border-radius:var(--radius,16px)}
.neon-studio fieldset{border:0;margin:0;padding:0;min-width:0}
.neon-studio .ns-lbl{display:flex;justify-content:space-between;gap:8px;width:100%;padding:0;margin:0 0 10px;font:600 11px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted,#9a9aae)}
.neon-studio .ns-lbl b{font-weight:600;color:var(--txt,#f2f2f7);letter-spacing:.08em}
.neon-studio .ns-input{display:block;width:100%;resize:none;min-height:76px;padding:12px 14px;border-radius:11px;background:var(--bg-soft,#101018);color:var(--txt,#f2f2f7);
  border:1.5px solid var(--line,#262633);font:600 18px/1.35 'Bricolage Grotesque','Inter',system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.neon-studio .ns-input:focus{outline:none;border-color:var(--ns-c);box-shadow:0 0 0 3px rgba(var(--ns-rgb),.2)}
.neon-studio .ns-hint{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:12px;color:var(--muted,#9a9aae)}
.neon-studio .ns-count{font-family:'JetBrains Mono',ui-monospace,monospace}
.neon-studio .ns-opt{position:relative;display:block;cursor:pointer;min-width:0}
.neon-studio .ns-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
.neon-studio .ns-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.neon-studio .ns-chip{display:flex;align-items:center;justify-content:center;height:54px;padding:0 8px;border-radius:11px;background:var(--bg-soft,#101018);
  border:1.5px solid var(--line,#262633);color:#c9c9d6;font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;transition:border-color .2s,color .2s,box-shadow .2s,background .2s}
.neon-studio .ns-opt:hover .ns-chip{border-color:#3a3a4c;color:#fff}
.neon-studio .ns-sr:checked+.ns-chip{border-color:var(--ns-c);color:#fff;background:rgba(var(--ns-rgb),.08);
  box-shadow:inset 0 0 0 1px var(--ns-c),0 0 18px rgba(var(--ns-rgb),.22);text-shadow:0 0 10px rgba(var(--ns-rgb),.8)}
.neon-studio .ns-sr:focus-visible+.ns-chip,.neon-studio .ns-sr:focus-visible+.ns-sw,.neon-studio .ns-sr:focus-visible+.ns-bgc{outline:2px solid #fff;outline-offset:2px}
.neon-studio .ns-colors{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.neon-studio .ns-sw{display:block;aspect-ratio:1;max-width:40px;margin:0 auto;width:100%;border-radius:50%;background:var(--sw);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 10px -2px var(--sw);transition:transform .15s,box-shadow .2s}
.neon-studio .ns-opt:hover .ns-sw{transform:scale(1.08)}
.neon-studio .ns-sr:checked+.ns-sw{box-shadow:0 0 0 2px var(--card,#15151f),0 0 0 4px #fff,0 0 16px var(--sw);transform:scale(1.04)}
.neon-studio .ns-bgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.neon-studio .ns-bgc{position:relative;display:flex;align-items:flex-end;min-height:58px;padding:8px 9px;border-radius:11px;overflow:hidden;
  border:1.5px solid var(--line,#262633);font-size:12.5px;font-weight:600;line-height:1.2;color:#fff;transition:border-color .2s,box-shadow .2s}
.neon-studio .ns-bgc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.75))}
.neon-studio .ns-bgc span{position:relative;z-index:1;text-shadow:0 1px 3px #000}
.neon-studio .ns-sr:checked+.ns-bgc{border-color:var(--ns-c);box-shadow:inset 0 0 0 1px var(--ns-c)}
.neon-studio .ns-row{display:flex;flex-wrap:wrap;gap:10px 22px}
.neon-studio .ns-switch{display:inline-flex;align-items:center;gap:10px;padding:4px 0;background:none;border:0;color:var(--txt,#f2f2f7);font:600 14px/1.2 'Inter',system-ui,sans-serif;cursor:pointer;border-radius:8px}
.neon-studio .ns-switch:focus-visible{outline:2px solid #fff;outline-offset:3px}
.neon-studio .ns-track{position:relative;flex:none;width:46px;height:26px;border-radius:13px;background:#2a2a38;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .25s,box-shadow .25s}
.neon-studio .ns-track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#8b8b9c;transition:transform .22s cubic-bezier(.3,1.4,.6,1),background .2s}
.neon-studio .ns-switch[aria-checked="true"] .ns-track{background:rgba(var(--ns-rgb),.35);box-shadow:inset 0 0 0 1px var(--ns-c),0 0 14px rgba(var(--ns-rgb),.35)}
.neon-studio .ns-switch[aria-checked="true"] .ns-track::after{transform:translateX(20px);background:#fff}
.neon-studio .ns-range{display:block;width:100%;margin:4px 0 0;accent-color:var(--ns-c);height:24px;cursor:pointer}
.neon-studio .ns-range:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- CTA ---------- */
.neon-studio .ns-cta{grid-area:cta;min-width:0;display:flex;flex-direction:column;gap:10px;align-self:start}
.neon-studio .ns-wa{width:100%;white-space:normal;text-align:center;line-height:1.3;font-size:16px;padding:16px 20px}
.neon-studio .ns-wa svg{flex:none;width:22px;height:22px}
.neon-studio .ns-links{display:flex;align-items:center;justify-content:center;gap:12px;min-height:24px;flex-wrap:wrap}
.neon-studio .ns-copy{background:none;border:0;padding:4px 2px;color:var(--muted,#9a9aae);font:500 14px/1.2 'Inter',system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
.neon-studio .ns-copy:hover{color:var(--txt,#f2f2f7)}
.neon-studio .ns-copy:focus-visible{outline:2px solid #fff;outline-offset:2px}
.neon-studio .ns-status{font-size:13px;color:var(--wa,#25D366)}
.neon-studio .ns-linkbox{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line,#262633);background:var(--bg-soft,#101018);color:var(--txt,#f2f2f7);font:13px/1.3 'JetBrains Mono',ui-monospace,monospace}
.neon-studio .ns-linkbox[hidden]{display:none}

@media(max-width:420px){.neon-studio .ns-ctrl{padding:16px;gap:18px}.neon-studio .ns-colors{gap:6px}.neon-studio .ns-chip{font-size:20px;height:50px}}
@media(prefers-reduced-motion:reduce){.neon-studio *,.neon-studio *::before,.neon-studio *::after{animation:none!important;transition:none!important}}