/* UCM productpagina's — visuele taal van homepage v12, zonder wijzigingen aan de applicatie */
:is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page){--product-ink:#1d283c;--product-muted:#526174;--product-accent:#83123b;color:var(--product-ink);overflow:hidden}
:is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .breadcrumb{margin-bottom:27px;font-weight:500;color:#7c7e89}
:is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .breadcrumb a{color:#771133}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero){position:relative;isolation:isolate;padding-top:49px;padding-bottom:65px}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero):before{content:"";position:absolute;z-index:-1;inset:-15px -12vw -10px;background:radial-gradient(ellipse at 85% 17%,#f3dbe6 0,transparent 37%),radial-gradient(ellipse at 0% 90%,#faf0f5 0,transparent 41%),linear-gradient(115deg,#fff,#fafafd);pointer-events:none}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero):after{content:"";position:absolute;z-index:-1;right:-9vw;bottom:-25px;width:min(750px,80vw);height:230px;background:url('uniform-wave.svg') center/contain no-repeat;opacity:.45;pointer-events:none}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero) h1{max-width:1050px;font-size:clamp(39px,4.5vw,60px);letter-spacing:-.045em;line-height:1.1;margin:10px 0 21px;color:#152034}
:is(.ucm-about-lead,.ucm-process-lead,.ucm-quality-lead,.ucm-config-lead){max-width:880px;font-size:clamp(18px,1.9vw,23px);line-height:1.56;color:var(--product-muted);margin:0}
/* 1. Wat is UCM */
.ucm-about-hero{padding-bottom:76px}
.ucm-highlights{gap:17px;margin-top:39px;grid-template-columns:repeat(4,minmax(0,1fr))}
.ucm-highlight{position:relative;padding:72px 21px 26px;border:1px solid #e9dee5;border-radius:16px;background:linear-gradient(160deg,#fff 65%,#fcf6f9);box-shadow:0 12px 24px #631b3b0b;min-height:248px;transition:transform .2s,box-shadow .2s}
.ucm-highlight:hover{transform:translateY(-4px);box-shadow:0 16px 30px #631b3b1a}
.ucm-highlight-number{position:absolute;top:20px;left:21px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#f8ebf1;color:#80133e;font-size:15px;letter-spacing:0}
.ucm-highlight:nth-child(1) .ucm-highlight-number:after,.ucm-highlight:nth-child(2) .ucm-highlight-number:after,.ucm-highlight:nth-child(3) .ucm-highlight-number:after,.ucm-highlight:nth-child(4) .ucm-highlight-number:after{content:"";position:absolute;inset:5px;background-repeat:no-repeat;background-position:center;background-size:contain}
.ucm-highlight:nth-child(1) .ucm-highlight-number:after{background-image:url('icon-agility.svg')}
.ucm-highlight:nth-child(2) .ucm-highlight-number:after{background-image:url('icon-cost.svg')}
.ucm-highlight:nth-child(3) .ucm-highlight-number:after{background-image:url('icon-accountability.svg')}
.ucm-highlight:nth-child(4) .ucm-highlight-number:after{background-image:url('icon-platform.svg')}
.ucm-highlight-number{font-size:0}
.ucm-highlight h2{font-size:19px;line-height:1.3;margin:1px 0 11px}
.ucm-highlight p{font-size:14px;line-height:1.63}
.ucm-core-band{background:linear-gradient(130deg,#faf3f7,#fff 73%);padding:74px 0}
.ucm-core-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:64px}
.ucm-core-copy h2,.ucm-history-copy h2{font-size:clamp(29px,3.4vw,42px)}
.ucm-core-figure{max-width:435px;justify-self:center;width:100%;padding:13px;border-radius:15px;box-shadow:0 15px 38px #4e1f3614}
.ucm-core-figure img{max-height:240px;object-fit:contain}
.ucm-history-layout{grid-template-columns:minmax(0,.48fr) minmax(0,1fr);gap:65px;padding-top:80px;padding-bottom:82px}
.ucm-history-figure{width:100%;max-width:310px;justify-self:center}
.ucm-history-figure img{max-height:310px;object-fit:contain;box-shadow:0 15px 32px #321b301a}
.ucm-origin{background:#fcf7f9;padding:18px 21px;border-radius:0 12px 12px 0}
/* 2. Producten en processen */
.ucm-process-page .ucm-process-hero{padding-top:49px;padding-bottom:61px}
.ucm-process-page .ucm-process-terms{max-width:1030px;gap:14px;margin-top:35px}
.ucm-process-page .ucm-process-terms div{position:relative;padding:22px 22px 24px 74px;background:linear-gradient(125deg,#fff,#fdf7fa);border-radius:15px;box-shadow:0 8px 25px #661b3b0e;min-height:109px}
.ucm-process-page .ucm-process-terms div:before{content:"";position:absolute;left:19px;top:26px;width:41px;height:41px;border-radius:13px;background:#f6e6ed url('icon-rules.svg') center/29px no-repeat}
.ucm-process-page .ucm-process-terms div:nth-child(2):before{background-image:url('icon-uniform.svg')}
.ucm-process-page .ucm-process-terms div:nth-child(3):before{background-image:url('icon-platform.svg')}
.ucm-process-page .ucm-process-terms strong{font-size:17px}
.ucm-process-page .ucm-process-section{padding:76px 0}
.ucm-process-page .ucm-process-shaded{background:linear-gradient(120deg,#fbf3f7,#fff)}
.ucm-process-page .ucm-process-grid{grid-template-columns:minmax(0,1fr) 365px;max-width:1100px;gap:64px;align-items:center}
.ucm-process-page .ucm-process-copy h2{font-size:clamp(29px,3vw,39px)}
.ucm-process-page .ucm-process-figure{width:365px;max-width:100%;padding:13px;border-radius:15px;box-shadow:0 15px 32px #631d3d15}
.ucm-process-page .ucm-process-figure img{max-width:100%;max-height:280px;object-fit:contain;background:#fff}
.ucm-process-page .ucm-process-figure figcaption{font-size:12px;margin-top:10px}
/* 3. Kwaliteit en accountability */
.ucm-quality-hero{padding-bottom:59px}
.ucm-quality-section{padding:73px 0}
.ucm-quality-shaded{background:linear-gradient(120deg,#fbf3f7,#fff)}
.ucm-quality-grid{gap:69px;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);max-width:1130px}
.ucm-quality-copy h2{font-size:clamp(29px,3vw,39px)}
.quality-graphic{max-width:430px;margin:auto;border-radius:19px;box-shadow:0 19px 39px #62183916;padding:27px;background:linear-gradient(150deg,#fff,#fefbfd)}
.quality-pill{background:linear-gradient(160deg,#fdf8fa,#fff);box-shadow:0 5px 16px #77113313}
.quality-result{background:linear-gradient(120deg,#83133f,#ab3660);color:white;border:0;padding:20px}
.quality-graphic-steps{gap:12px}
.quality-step{min-height:125px;box-shadow:0 5px 17px #691c3e0c;background:#fff}
.quality-graphic-audit{padding:0;background:#fff}
.quality-log-head{padding:22px}
/* 4. Configureren zonder programmeren */
.ucm-config-hero{padding-bottom:57px}
.ucm-config-section{padding:74px 0}
.ucm-config-shaded{background:linear-gradient(120deg,#fbf3f7,#fff)}
.ucm-config-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:60px;max-width:1120px}
.ucm-config-copy h2{font-size:clamp(29px,3vw,39px)}
.ucm-config-figure,.config-graphic{max-width:430px;margin:auto;box-shadow:0 19px 40px #62183915;border-radius:18px;background:#fff}
.ucm-config-figure img{max-height:280px;object-fit:contain}
.config-graphic-api{background:radial-gradient(circle at center,#fff 40%,#f9edf3);padding:29px}
.api-core{width:150px;height:150px;font-size:22px;box-shadow:0 14px 28px #77113336}
.config-graphic-split{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:center}
.config-graphic-split .config-box{min-height:130px;display:flex;flex-direction:column;justify-content:center}
.config-link{padding:0;font-size:30px}
.config-outcomes{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.config-outcomes div{font-size:12px;line-height:1.4;padding:11px 7px}
/* Afsluiter zoals de homepage: duidelijke CTA, zachte lijnen */
.ucm-about-cta{position:relative;isolation:isolate;padding:70px 15px 77px;background:linear-gradient(110deg,#5c0b2a,#8b1a49);overflow:hidden}
.ucm-about-cta:before{content:"";position:absolute;z-index:-1;inset:-30px -10%;background:url('uniform-wave.svg') center/cover no-repeat;opacity:.24}
.ucm-about-cta h2{font-size:clamp(27px,3vw,39px);line-height:1.18}
.ucm-about-cta .btn{border-radius:9px;box-shadow:0 7px 17px #25000d27}
@media(max-width:1100px){.ucm-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.ucm-highlight{min-height:210px}.ucm-process-page .ucm-process-grid{gap:35px}}
@media(max-width:850px){.ucm-core-layout,.ucm-history-layout,.ucm-process-page .ucm-process-grid,.ucm-quality-grid,.ucm-config-grid{grid-template-columns:1fr;gap:28px}.ucm-core-figure,.ucm-history-figure,.ucm-process-page .ucm-process-figure,.quality-graphic,.ucm-config-figure,.config-graphic{justify-self:start;margin:0;max-width:min(100%,430px)}.ucm-process-page .ucm-process-hero{padding-bottom:43px}.ucm-process-page .ucm-process-section,.ucm-quality-section,.ucm-config-section{padding:51px 0}.ucm-history-layout{padding-top:55px;padding-bottom:55px}.ucm-process-page .ucm-process-terms{grid-template-columns:1fr}}
@media(max-width:560px){.ucm-highlights{grid-template-columns:1fr}.ucm-highlight{min-height:0}.ucm-process-page .ucm-process-terms div{min-height:0}.config-graphic-split{grid-template-columns:1fr}.config-link{transform:rotate(90deg)}.config-outcomes{grid-column:auto;grid-template-columns:1fr}.quality-graphic-split{grid-template-columns:1fr}.ucm-about-cta{padding:50px 12px}}
@media(prefers-reduced-motion:reduce){.ucm-highlight{transition:none}}


/* v14: zelfde zijmarges en hero-opbouw als de homepage */
:is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .container{max-width:1190px;padding-left:28px;padding-right:28px;margin-left:auto;margin-right:auto}
.product-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);gap:40px;align-items:center}
.product-hero-copy{max-width:560px;padding-top:4px}
.product-hero-figure{margin:0;justify-self:end;width:100%;max-width:690px;border-radius:24px;overflow:hidden;box-shadow:0 16px 48px rgba(70,19,44,.11);background:linear-gradient(180deg,#fff,#f7f0f4);border:1px solid #eee3e8}
.product-hero-figure img{display:block;width:100%;height:auto}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero){padding-top:42px;padding-bottom:52px}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero):before{inset:-12px 0 -10px;background:radial-gradient(ellipse at 80% 15%,#f3dbe6 0,transparent 34%),radial-gradient(ellipse at 0% 90%,#faf0f5 0,transparent 41%),linear-gradient(115deg,#fff,#fafafd)}
:is(.ucm-about-hero,.ucm-process-hero,.ucm-quality-hero,.ucm-config-hero):after{right:0;width:min(720px,58vw);opacity:.38}
:is(.ucm-about-lead,.ucm-process-lead,.ucm-quality-lead,.ucm-config-lead){max-width:540px}
.ucm-highlights{margin-top:28px}
.ucm-core-band,.ucm-process-page .ucm-process-section,.ucm-quality-section,.ucm-config-section{padding-top:66px;padding-bottom:66px}
.ucm-process-page .ucm-process-grid,.ucm-quality-grid,.ucm-config-grid,.ucm-core-layout,.ucm-history-layout{max-width:none}
.ucm-process-page .ucm-process-grid{grid-template-columns:minmax(0,1fr) minmax(300px,365px)}
.ucm-process-page .ucm-process-figure,.quality-graphic,.ucm-config-figure,.config-graphic,.ucm-core-figure,.ucm-history-figure{max-width:100%}
.ucm-process-page .ucm-process-terms{margin-top:24px}
@media(max-width:1024px){
  .product-hero-grid{grid-template-columns:1fr;gap:24px}
  .product-hero-copy{max-width:100%}
  .product-hero-figure{justify-self:start;max-width:min(100%,760px)}
}
@media(max-width:560px){
  :is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .container{padding-left:19px;padding-right:19px}
  .product-hero-figure{border-radius:18px}
}

/* v15 — één vaste contentbreedte voor ALLE productpagina's.
   Achtergrondvlakken blijven paginabreed, hun inhoud niet. */
body :is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .container {
  box-sizing:border-box;
  width:100%;
  max-width:1190px;
  margin-inline:auto;
  padding-inline:28px;
}
body :is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) :is(.product-hero-grid,.ucm-core-layout,.ucm-history-layout,.ucm-process-grid,.ucm-quality-grid,.ucm-config-grid) {
  width:100%;
  min-width:0;
}
body :is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) :is(.product-hero-grid,.ucm-core-layout,.ucm-history-layout,.ucm-process-grid,.ucm-quality-grid,.ucm-config-grid) > * {
  min-width:0;
}
@media(max-width:540px){
  body :is(.ucm-about-page,.ucm-process-page,.ucm-quality-page,.ucm-config-page) .container{padding-inline:19px}
}