:root{
    --sp-ink:#081a38;
    --sp-ink-2:#12284c;
    --sp-blue:#0a7cff;
    --sp-blue-2:#58a9ff;
    --sp-soft:#f5f9ff;
    --sp-soft-2:#eef5ff;
    --sp-line:rgba(11,45,91,.12);
    --sp-muted:#68758a;
    --sp-white:#fff;
    --sp-radius:28px;
    --sp-shadow:0 24px 60px rgba(22,69,127,.10);
    --sp-shadow-soft:0 14px 34px rgba(30,80,140,.08);
}

.sp-page{
    overflow:clip;
    background:#fff;
    color:var(--sp-ink);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
.sp-shell{width:min(1280px,calc(100% - 64px));margin-inline:auto;}
.sp-eyebrow{margin:0 0 16px;color:var(--sp-blue);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.sp-display{margin:0;color:var(--sp-ink);font-size:clamp(3.7rem,6.6vw,7rem);line-height:.91;letter-spacing:-.066em;font-weight:700;text-wrap:balance;}
.sp-title{margin:0;color:var(--sp-ink);font-size:clamp(2.25rem,4.2vw,4.5rem);line-height:.96;letter-spacing:-.052em;font-weight:690;text-wrap:balance;}
.sp-lead{color:#5f6f86;font-size:clamp(1.04rem,1.25vw,1.22rem);line-height:1.7;}
.sp-copy{color:var(--sp-muted);font-size:1rem;line-height:1.72;}

.sp-hero{
    position:relative;
    padding:clamp(76px,7vw,118px) 0 clamp(72px,7vw,112px);
    background:
      radial-gradient(circle at 76% 15%,rgba(65,148,255,.27),transparent 30%),
      radial-gradient(circle at 5% 95%,rgba(107,189,255,.22),transparent 28%),
      linear-gradient(120deg,#fff 0%,#f6faff 48%,#eaf4ff 100%);
}
.sp-hero::after{content:"";position:absolute;inset:auto -12% -36% 45%;height:70%;background:radial-gradient(circle,rgba(27,120,255,.16),transparent 67%);filter:blur(28px);pointer-events:none;}
.sp-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(470px,.98fr);gap:clamp(50px,7vw,100px);align-items:center;}
.sp-hero-copy{max-width:720px;}
.sp-hero-copy .sp-lead{max-width:680px;margin:26px 0 0;}
.sp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:999px;text-decoration:none;font-weight:720;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;}
.sp-btn:hover{transform:translateY(-2px);}
.sp-btn-dark{background:var(--sp-ink);color:#fff;box-shadow:0 12px 26px rgba(8,26,56,.18);}
.sp-btn-dark:hover{background:#0f2d59;color:#fff;}
.sp-btn-light{background:rgba(255,255,255,.84);color:var(--sp-ink);border-color:rgba(23,71,124,.13);box-shadow:0 10px 26px rgba(35,84,139,.08);backdrop-filter:blur(16px);}
.sp-btn-light:hover{background:#fff;color:var(--sp-blue);}
.sp-benefits{display:flex;flex-wrap:wrap;gap:22px 30px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(18,52,95,.10);}
.sp-benefits span{display:inline-flex;align-items:center;gap:9px;color:#718097;font-size:.86rem;font-weight:650;}
.sp-benefits i{color:var(--sp-blue);font-size:1rem;}

.sp-hero-visual{position:relative;min-height:520px;}
.sp-glass-scene{position:absolute;inset:12px 0 0 42px;border-radius:38px;overflow:hidden;background:linear-gradient(145deg,#dbeaff,#f5fbff);box-shadow:0 35px 90px rgba(26,82,148,.18);border:1px solid rgba(255,255,255,.9);}
.sp-glass-scene img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(.98);}
.sp-glass-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.30),transparent 52%,rgba(16,67,127,.10));}
.sp-laptop{position:absolute;left:0;bottom:36px;width:74%;padding:10px;border-radius:20px;background:#0f1c32;box-shadow:0 32px 70px rgba(15,44,83,.28);transform:perspective(1000px) rotateY(-5deg) rotateX(1deg);}
.sp-laptop::after{content:"";position:absolute;left:12%;right:12%;bottom:-18px;height:18px;border-radius:0 0 18px 18px;background:linear-gradient(#dfe7f1,#9fb0c5);box-shadow:0 12px 28px rgba(0,0,0,.18);}
.sp-laptop-screen{overflow:hidden;border-radius:11px;background:#fff;aspect-ratio:16/10;}
.sp-laptop-screen img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-float{position:absolute;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 46px rgba(38,92,152,.17);backdrop-filter:blur(20px);}
.sp-float small{display:block;margin-bottom:5px;color:#71839a;font-size:.72rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase;}
.sp-float strong{display:block;color:var(--sp-ink);font-size:1.03rem;line-height:1.25;}
.sp-float i{color:var(--sp-blue);margin-right:8px;}
.sp-float-a{right:-22px;top:70px;width:230px;}
.sp-float-b{right:4px;bottom:68px;width:250px;background:rgba(8,26,56,.88);border-color:rgba(255,255,255,.12);}
.sp-float-b small,.sp-float-b strong{color:#fff;}

.sp-section{padding:clamp(76px,7vw,112px) 0;}
.sp-section-soft{background:linear-gradient(180deg,#fff 0%,#f7faff 100%);}
.sp-section-blue{background:linear-gradient(140deg,#eff7ff 0%,#f8fbff 48%,#eef6ff 100%);}
.sp-section-dark{background:#081426;color:#fff;}
.sp-section-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.72fr);gap:50px;align-items:end;margin-bottom:42px;}
.sp-section-head .sp-copy{margin:0 0 6px;max-width:600px;justify-self:end;}
.sp-section-dark .sp-title{color:#fff;}.sp-section-dark .sp-copy{color:#a9b9cc;}.sp-section-dark .sp-eyebrow{color:#77b8ff;}

.sp-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.sp-card{position:relative;display:flex;flex-direction:column;min-height:270px;padding:28px;border-radius:var(--sp-radius);background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(240,247,255,.9));border:1px solid rgba(81,135,196,.13);box-shadow:var(--sp-shadow-soft);text-decoration:none;color:var(--sp-ink);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.sp-card::before{content:"";position:absolute;width:180px;height:180px;right:-70px;top:-90px;background:radial-gradient(circle,rgba(54,149,255,.17),transparent 68%);}
.sp-card:hover{transform:translateY(-5px);box-shadow:var(--sp-shadow);border-color:rgba(55,137,232,.24);color:var(--sp-ink);}
.sp-card-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:#e7f2ff;color:var(--sp-blue);font-size:1.35rem;box-shadow:inset 0 0 0 1px rgba(61,135,224,.07);}
.sp-card h3{margin:24px 0 12px;font-size:1.3rem;line-height:1.05;letter-spacing:-.035em;font-weight:750;}
.sp-card p{margin:0;color:#68778d;line-height:1.58;font-size:.94rem;}
.sp-card-link{margin-top:auto;padding-top:24px;color:var(--sp-blue);font-size:.9rem;font-weight:760;}

.sp-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.sp-feature{padding:24px;border-radius:22px;background:#fff;border:1px solid var(--sp-line);box-shadow:0 10px 28px rgba(29,76,134,.06);}
.sp-feature i{color:var(--sp-blue);font-size:1.2rem;}.sp-feature h3{margin:14px 0 8px;font-size:1.04rem;font-weight:760;}.sp-feature p{margin:0;color:#738095;line-height:1.5;font-size:.88rem;}

.sp-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:38px;position:relative;}
.sp-process::before{content:"";position:absolute;left:6%;right:6%;top:18px;border-top:1px dashed rgba(13,124,255,.4);}
.sp-step{position:relative;padding-top:54px;}
.sp-step-no{position:absolute;top:0;left:0;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sp-blue);color:#fff;font-size:.74rem;font-weight:800;box-shadow:0 10px 22px rgba(10,124,255,.22);}
.sp-step-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#eef6ff;color:var(--sp-blue);font-size:1.15rem;margin-bottom:16px;}
.sp-step h3{margin:0 0 7px;font-size:1.02rem;font-weight:760;}.sp-step p{margin:0;color:#718097;font-size:.9rem;line-height:1.5;}

.sp-media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);gap:58px;align-items:center;}
.sp-media-card{position:relative;min-height:430px;border-radius:32px;overflow:hidden;background:#eef6ff;box-shadow:var(--sp-shadow);}
.sp-media-card img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-media-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,26,56,.16));}
.sp-text-stack>*:last-child{margin-bottom:0}.sp-text-stack .sp-copy{margin:18px 0 0;}

.sp-project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.sp-project{display:block;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--sp-line);box-shadow:var(--sp-shadow-soft);text-decoration:none;color:var(--sp-ink);transition:transform .22s ease,box-shadow .22s ease;}
.sp-project:hover{transform:translateY(-5px);box-shadow:var(--sp-shadow);color:var(--sp-ink);}
.sp-project-media{aspect-ratio:16/10;overflow:hidden;background:#eaf2fb;}.sp-project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}.sp-project:hover .sp-project-media img{transform:scale(1.035);}
.sp-project-body{padding:22px;}.sp-project-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}.sp-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef6ff;color:var(--sp-blue);font-size:.72rem;font-weight:760;}
.sp-project h3{margin:0 0 9px;font-size:1.3rem;line-height:1.05;letter-spacing:-.035em;font-weight:750;}.sp-project p{margin:0;color:#708096;font-size:.9rem;line-height:1.5;}.sp-project .sp-card-link{display:block;}

.sp-quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}.sp-quote{padding:27px;border-radius:24px;background:#fff;border:1px solid var(--sp-line);box-shadow:var(--sp-shadow-soft);}.sp-quote p{margin:0;color:#52657d;line-height:1.6;}.sp-quote strong{display:block;margin-top:20px;color:var(--sp-ink);}

.sp-cta{padding:0 0 clamp(70px,7vw,104px);background:#fff;}
.sp-cta-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);min-height:330px;padding:clamp(38px,5vw,68px);border-radius:34px;background:linear-gradient(120deg,#e7f2ff 0%,#f8fbff 52%,#dcecff 100%);border:1px solid rgba(78,132,193,.12);box-shadow:var(--sp-shadow);}
.sp-cta-card::after{content:"";position:absolute;right:-5%;bottom:-40%;width:46%;height:140%;background:radial-gradient(circle,rgba(55,137,232,.23),transparent 63%);transform:rotate(-15deg);}
.sp-cta-card h2{margin:0 0 16px;font-size:clamp(2.5rem,4.4vw,4.8rem);line-height:.94;letter-spacing:-.055em;font-weight:700;}.sp-cta-card p{max-width:620px;margin:0;color:#61738b;line-height:1.65;}.sp-cta-copy{position:relative;z-index:1}.sp-cta-list{position:relative;z-index:1;align-self:end;justify-self:end;display:grid;gap:12px;padding:26px;border-radius:24px;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 40px rgba(40,84,134,.13);backdrop-filter:blur(18px);}.sp-cta-list span{display:flex;gap:10px;align-items:center;color:#4c6079;font-size:.92rem}.sp-cta-list i{color:var(--sp-blue);}

.sp-contact-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:24px;align-items:start;}.sp-form-card,.sp-side-card{border-radius:28px;background:#fff;border:1px solid var(--sp-line);box-shadow:var(--sp-shadow-soft);}.sp-form-card{padding:34px}.sp-side-card{padding:30px;background:linear-gradient(145deg,#fff,#eff6ff)}
.sp-form-card .form-label{font-size:.78rem;font-weight:760;color:#425572}.sp-form-card .form-control{min-height:54px;border-radius:14px;border:1px solid #d7e2ef;background:#fbfdff;box-shadow:none}.sp-form-card textarea.form-control{min-height:150px}.sp-form-card .form-control:focus{border-color:#69aefb;box-shadow:0 0 0 4px rgba(10,124,255,.08)}.sp-form-card .btn-primary{min-height:50px;padding:0 22px;border:0;border-radius:999px;background:var(--sp-ink);font-weight:720}.sp-form-card .btn-primary:hover{background:#0d2d5c}.sp-contact-line{display:flex;gap:15px;align-items:center;padding:17px 0;border-bottom:1px solid var(--sp-line)}.sp-contact-line:last-child{border-bottom:0}.sp-contact-line i{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:15px;background:#e7f2ff;color:var(--sp-blue)}.sp-contact-line span{display:block;color:#7a879a;font-size:.72rem;font-weight:760;text-transform:uppercase;letter-spacing:.08em}.sp-contact-line strong{display:block;margin-top:3px;color:var(--sp-ink);font-size:1rem}

.sp-rich{color:#68788d;line-height:1.72;}.sp-rich h2,.sp-rich h3{color:var(--sp-ink)}.sp-rich p:last-child{margin-bottom:0}.sp-rich a{color:var(--sp-blue)}

.sp-page a:focus-visible,.sp-page button:focus-visible,.sp-page input:focus-visible,.sp-page textarea:focus-visible{outline:3px solid rgba(10,124,255,.35);outline-offset:4px;}

@media(max-width:1100px){
 .sp-shell{width:min(100% - 40px,1280px)}
 .sp-hero-grid,.sp-media-split{grid-template-columns:1fr;}
 .sp-hero-visual{min-height:470px;max-width:800px;width:100%;}
 .sp-section-head{grid-template-columns:1fr;gap:18px}.sp-section-head .sp-copy{justify-self:start}
 .sp-card-grid,.sp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-contact-grid{grid-template-columns:1fr}
 .sp-cta-card{grid-template-columns:1fr;gap:34px}.sp-cta-list{justify-self:start}
}
@media(max-width:700px){
 .sp-shell{width:min(100% - 28px,1280px)}
 .sp-hero{padding-top:58px}.sp-display{font-size:clamp(3rem,13vw,4.6rem)}
 .sp-hero-visual{min-height:360px;margin-top:8px}.sp-glass-scene{inset:0}.sp-laptop{left:5%;bottom:30px;width:78%;}.sp-float{padding:13px 14px;border-radius:16px}.sp-float-a{right:-4px;top:34px;width:178px}.sp-float-b{right:2px;bottom:40px;width:185px}.sp-float strong{font-size:.86rem}.sp-float small{font-size:.62rem}
 .sp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sp-benefits span:last-child{grid-column:1/-1}
 .sp-card-grid,.sp-feature-grid,.sp-project-grid,.sp-quote-grid{grid-template-columns:1fr}.sp-card{min-height:0}
 .sp-process{grid-template-columns:1fr;gap:22px}.sp-process::before{left:18px;right:auto;top:20px;bottom:20px;height:auto;border-top:0;border-left:1px dashed rgba(13,124,255,.4)}.sp-step{padding:4px 0 4px 62px}.sp-step-no{left:0}.sp-step-icon{display:none}
 .sp-media-split{gap:28px}.sp-media-card{min-height:300px}
 .sp-cta-card{padding:30px 24px}.sp-cta-list{width:100%}
 .sp-form-card,.sp-side-card{padding:24px 20px}
}
@media(prefers-reduced-motion:reduce){.sp-card,.sp-project,.sp-project-media img,.sp-btn{transition:none!important}.sp-card:hover,.sp-project:hover,.sp-btn:hover{transform:none!important}.sp-project:hover .sp-project-media img{transform:none!important}}
.sp-admin-upload{margin:12px 0 0;padding:12px;border-radius:14px;background:#fff8dc;border:1px solid #eadca5;position:relative;z-index:3}.sp-admin-upload input{max-width:220px;font-size:.8rem}.sp-admin-upload button{margin-top:8px;border:0;border-radius:999px;background:var(--sp-ink);color:#fff;padding:7px 12px;font-size:.75rem;font-weight:700}
.sp-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.sp-detail-card{overflow:hidden;border-radius:28px;background:#fff;border:1px solid var(--sp-line);box-shadow:var(--sp-shadow-soft)}.sp-detail-card:nth-child(1),.sp-detail-card:nth-child(5){grid-column:span 2}.sp-detail-media{aspect-ratio:16/9;overflow:hidden;background:#edf5ff}.sp-detail-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.sp-detail-card:hover .sp-detail-media img{transform:scale(1.025)}.sp-detail-copy{padding:26px}.sp-detail-copy h3{margin:0 0 10px;font-size:1.45rem;letter-spacing:-.035em;font-weight:750}.sp-detail-copy p{margin:0;color:#6c7b90;line-height:1.65}.sp-service-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.sp-service-strip span{padding:7px 11px;border-radius:999px;background:#eef6ff;color:#2c609d;font-size:.78rem;font-weight:720}
@media(max-width:900px){.sp-detail-grid{grid-template-columns:1fr 1fr}.sp-detail-card:nth-child(1),.sp-detail-card:nth-child(5){grid-column:span 1}}@media(max-width:650px){.sp-detail-grid{grid-template-columns:1fr}}

/* V18: uploadbare hero-afbeelding Over ons */
.sp-hero-image-placeholder {
    width:100%; min-height:100%; display:flex; flex-direction:column; justify-content:flex-end;
    padding:clamp(28px,4vw,54px); color:#fff;
    background:linear-gradient(145deg,#5f2fc5 0%,#744ee8 48%,#4a2cb0 100%);
}
.sp-hero-image-placeholder span { font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
.sp-hero-image-placeholder strong { margin-top:8px; font-size:clamp(1.8rem,3vw,3rem); line-height:1.02; letter-spacing:-.04em; }
.sp-hero-image-placeholder-screen { justify-content:center; background:linear-gradient(145deg,#edf5ff,#dbeaff); color:#0b1326; }

/* V19 mobile hardening */
.sp-page *,
.sp-page *::before,
.sp-page *::after { min-width: 0; }
@media (max-width: 700px) {
    .sp-shell { width: min(100% - 28px, 1280px) !important; }
    .sp-hero-copy h1 { overflow-wrap: anywhere; }
    .sp-card { min-height: 0; padding: 22px; border-radius: 22px; }
    .sp-hero-visual { width: 100%; max-width: 100%; overflow: clip; }
    .sp-float-a { right: 0 !important; }
    .sp-float-b { right: 0 !important; }
    .sp-cta-card { padding-inline: 24px; }
    .sp-cta-list { width: 100%; justify-self: stretch; }
}