/*
Theme Name: JP Neon
Author: JP Dynamisch Design
Description: Blauw-wit-gouden onepage huisstijl voor JP.
Version: 1.0.0
Text Domain: jp-neon
*/

.jp-site{--night:#080f1d;--panel:#101d31;--blue:#008dff;--cyan:#35cfff;--gold:#ffc000;--white:#f3f7ff;--muted:#b6c5d9;background:var(--night);color:var(--white);font:17px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;isolation:isolate;overflow:hidden;text-align:left}
.jp-site *{box-sizing:border-box}.jp-site a{color:inherit;text-decoration:none}.jp-site a:focus-visible,.jp-site summary:focus-visible{outline:3px solid var(--gold);outline-offset:6px}.jp-site .wrap{width:min(1160px,calc(100% - 48px));margin:auto}.jp-site header{border-bottom:1px solid #ffffff15}.jp-site nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:90px}.jp-site .brand{font-weight:750;letter-spacing:-.5px;font-size:19px}.jp-site .brand b{font-size:30px;font-style:italic;color:var(--cyan);margin-right:12px}.jp-site .navlinks{display:flex;gap:28px;font-size:14px}.jp-site .navlinks a:hover{color:var(--gold)}.jp-site .eyebrow{color:var(--gold);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:750}.jp-site .hero{position:relative;padding:88px 0 76px;background:radial-gradient(ellipse at 80% 35%,#006aff25,transparent 58%)}.jp-site .hero-grid{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:60px}.jp-site h1{font-size:clamp(46px,5.5vw,76px);line-height:1.05;letter-spacing:-3px;margin:22px 0 28px;font-weight:800}.jp-site h1 span{color:var(--cyan)}.jp-site p{margin:0 0 22px}.jp-site .intro{color:var(--muted);max-width:510px;font-size:18px}.jp-site .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.jp-site .btn{display:inline-flex;justify-content:center;align-items:center;padding:13px 22px;border-radius:7px;background:linear-gradient(120deg,#009dff,#0055ec);color:white;font-size:14px;font-weight:750;box-shadow:0 8px 32px #008dff25;border:1px solid #37b5ff}.jp-site .btn.secondary{background:transparent;border-color:#7086a0;box-shadow:none}.jp-site .btn:hover{filter:brightness(1.15)}.jp-site .hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid #294360;border-radius:50%;background:radial-gradient(circle,#007bff15 0,transparent 65%);box-shadow:0 0 100px #008dff10}.jp-site svg{display:block;width:100%;height:auto}.jp-site .hero-art svg{width:110%;filter:drop-shadow(0 0 8px #008dff50)}.jp-site .orbit-label{position:absolute;bottom:30px;font-size:10px;letter-spacing:3px;color:var(--muted)}.jp-site .ticker{border-top:1px solid #24354c;border-bottom:1px solid #24354c;padding:20px 0;color:#d4dff0;font-size:12px;letter-spacing:2px}.jp-site .ticker .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.jp-site .ticker span::before{content:'✦';color:var(--gold);margin-right:12px}.jp-site section.block{padding:86px 0}.jp-site h2{font-size:clamp(32px,4vw,48px);line-height:1.16;letter-spacing:-1.5px;margin:14px 0 22px}.jp-site .section-head{max-width:650px;margin-bottom:40px}.jp-site .muted{color:var(--muted)}.jp-site .services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.jp-site .service{padding:28px;border:1px solid #263b56;border-radius:14px;background:linear-gradient(145deg,#13243b,#0b1525);display:flex;flex-direction:column}.jp-site .service svg{height:150px;object-fit:contain;margin-bottom:22px}.jp-site .service h3{font-size:21px;line-height:1.3;margin:0 0 16px}.jp-site .service p{font-size:15px;color:var(--muted)}.jp-site .service ul{padding:18px 0 0;margin:0;list-style:none;border-top:1px solid #ffffff14;font-size:14px}.jp-site .service li{padding:6px 0}.jp-site .service li::before{content:'↗';color:var(--gold);margin-right:10px}.jp-site .service a{color:var(--cyan);font-size:14px;font-weight:700;margin-top:auto;padding-top:22px}.jp-site .process{background:#0c1727;border-block:1px solid #22334a}.jp-site .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:42px}.jp-site .number{font-size:13px;color:var(--gold);border-bottom:1px solid #38506c;padding-bottom:14px;display:block}.jp-site .steps h3{font-size:23px;margin:20px 0 12px}.jp-site .steps p{color:var(--muted);font-size:15px}.jp-site .dj-row{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}.jp-site .dj-art{background:radial-gradient(ellipse,#008dff18,transparent 70%)}.jp-site .dj-art svg{filter:drop-shadow(0 0 6px #ffc00035)}.jp-site .gold{color:var(--gold)}.jp-site .contact{background:radial-gradient(ellipse at 15% 80%,#007bff24,transparent 65%),#101d31;border-top:1px solid #304b69}.jp-site .contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:start}.jp-site .contact-note{padding:28px;border-left:3px solid var(--gold);background:#080f1d80}.jp-site .contact-note p:last-child{margin:0}.jp-site footer{padding:28px 0;font-size:12px;color:var(--muted)}.jp-site footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.jp-site .skip{position:absolute;top:-200px}.jp-site .skip:focus{top:8px;left:8px;background:var(--night);z-index:5;padding:10px}html{scroll-behavior:smooth}body.jp-page{margin:0}.jp-site section{scroll-margin-top:24px}
@media(max-width:800px){.jp-site .hero-grid,.jp-site .dj-row,.jp-site .contact-grid{grid-template-columns:1fr;gap:30px}.jp-site .hero{padding:55px 0}.jp-site .hero-art{max-width:420px;width:100%;margin:auto}.jp-site .services{grid-template-columns:1fr}.jp-site .service svg{height:180px}.jp-site .steps{gap:22px}.jp-site nav{flex-wrap:wrap;padding:18px 0;gap:10px}.jp-site .navlinks{gap:18px;flex-wrap:wrap}.jp-site section.block{padding:58px 0}.jp-site h1{letter-spacing:-2px}.jp-site .dj-art{max-width:400px;margin:auto}.jp-site .ticker .wrap{justify-content:center}.jp-site .service{padding:25px}}@media(max-width:520px){.jp-site .wrap{width:calc(100% - 36px)}.jp-site .steps{grid-template-columns:1fr}.jp-site .navlinks{font-size:12px;gap:16px}.jp-site .brand{font-size:16px}.jp-site .hero-art{max-width:300px}.jp-site .orbit-label{font-size:8px;bottom:15px}.jp-site .ticker{font-size:10px}.jp-site .btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}