/* VOXON premium v2 — shared visual system for CMS-driven public pages.
   Loaded last so this file deliberately normalises older page/CMS variants. */

:root{
  --vx2-ink:#101a2b;
  --vx2-ink-soft:#263247;
  --vx2-muted:#667085;
  --vx2-blue:#2e63e9;
  --vx2-blue-soft:#edf3ff;
  --vx2-paper:#ffffff;
  --vx2-canvas:#f7f8fa;
  --vx2-warm:#f4f1ea;
  --vx2-line:rgba(16,26,43,.10);
  --vx2-radius-sm:12px;
  --vx2-radius:18px;
  --vx2-radius-lg:24px;
  --vx2-shadow:0 24px 70px rgba(16,26,43,.10);
  --vx2-shadow-soft:0 12px 34px rgba(16,26,43,.07);
  --vx2-section:clamp(76px,8vw,124px);
}

html{background:var(--vx2-canvas)}
body{background:var(--vx2-canvas);color:var(--vx2-ink)}
.site-header{background:rgba(247,248,250,.88);border-bottom:1px solid rgba(16,26,43,.055)}
.site-header.is-scrolled{background:rgba(247,248,250,.96);border-color:var(--vx2-line)}
.brand img{width:116px}
.main-nav{gap:30px}
.main-nav a{font-size:13px;font-weight:610;color:#536072}
.button{min-height:46px}
.button--primary,.vx-button--primary{background:var(--vx2-ink)}
.button--primary:hover,.vx-button--primary:hover{background:#1b2940}

.cms-page{background:var(--vx2-canvas)}
.cms-page .cms-section{position:relative;padding-block:var(--vx2-section)}
.cms-page .cms-spacing--compact{padding-block:clamp(52px,6vw,78px)}
.cms-page .cms-spacing--spacious{padding-block:clamp(96px,10vw,150px)}
.cms-page .cms-theme--light{background:var(--vx2-canvas)}
.cms-page .cms-theme--white{background:#fff}
.cms-page .cms-theme--warm{background:var(--vx2-warm)}
.cms-page .cms-theme--blue{background:linear-gradient(135deg,#2e63e9 0%,#2457d8 100%);color:#fff}
.cms-page .cms-theme--dark{background:
  radial-gradient(circle at 82% 12%,rgba(46,99,233,.15),transparent 32%),
  #0d1727;color:#fff}

.cms-page .cms-copy{position:relative;z-index:2}
.cms-page h1,
.cms-page h2,
.cms-page h3{color:inherit}
.cms-page h1{font-size:clamp(3.5rem,6.2vw,6.25rem);line-height:.94;letter-spacing:-.06em;max-width:10.5ch;text-wrap:balance}
.cms-page h2{font-size:clamp(2.45rem,4.3vw,4.35rem);line-height:.99;letter-spacing:-.052em;max-width:13ch;text-wrap:balance}
.cms-page h3{font-size:clamp(1.2rem,1.6vw,1.55rem);letter-spacing:-.025em}
.cms-page p{color:var(--vx2-muted)}
.cms-theme--dark p,.cms-theme--blue p{color:rgba(255,255,255,.68)}
.cms-intro{font-size:17px;line-height:1.65;max-width:620px;margin-top:18px}

/* Hero: every main page gets a composed, intentional visual rather than an empty media box. */
.cms-hero{overflow:hidden;padding-top:clamp(70px,8vw,116px)!important;padding-bottom:clamp(82px,8vw,118px)!important}
.cms-hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(48px,6vw,92px);align-items:center}
.cms-hero .cms-copy>p{font-size:clamp(1.03rem,1.35vw,1.18rem);line-height:1.62;max-width:610px;margin-top:26px}
.cms-hero .vx-actions{margin-top:30px}
.cms-hero-title-accent{display:block;color:var(--vx2-blue)}
.cms-hero-media{position:relative;min-height:500px;border-radius:var(--vx2-radius-lg);overflow:visible!important;background:#e9edf3;box-shadow:var(--vx2-shadow)}
.cms-hero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;filter:saturate(.92) contrast(1.02)}
.cms-hero-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,26,43,.06);pointer-events:none}
.cms-page--product .cms-hero-media>img{object-position:center}
.cms-page--veiligheid .cms-hero-media>img{object-position:center 40%}

.cms-hero-product-overlay{position:absolute;left:-44px;bottom:-32px;width:min(330px,54%);z-index:3}
.cms-hero-product-overlay .vx-phone{width:100%;box-shadow:0 28px 70px rgba(16,26,43,.22)}
.cms-hero-review-overlay{position:absolute;left:-34px;right:34px;bottom:-36px;z-index:3}
.cms-hero-review-overlay .vx-review{width:100%;box-shadow:0 26px 70px rgba(16,26,43,.18)}
.cms-hero-route-overlay{position:absolute;left:-48px;right:26px;bottom:-38px;z-index:3}

/* Statement: editorial punctuation, not an empty block. */
.cms-statement{overflow:hidden}
.cms-statement>.vx-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);gap:70px;align-items:end}
.cms-statement h2{font-size:clamp(2.75rem,4.8vw,4.8rem);max-width:13ch}
.cms-statement p{font-size:18px;line-height:1.65;max-width:500px}
.cms-theme--dark.cms-statement h2{color:#fff}

/* Steps become a clear process system. */
.cms-steps> .vx-shell > h2{margin-bottom:18px}
.cms-step-list{margin-top:54px;display:grid;gap:12px}
.cms-step{position:relative;display:grid;grid-template-columns:62px 1fr;gap:20px;padding:24px 26px;border:1px solid var(--vx2-line);border-radius:var(--vx2-radius);background:rgba(255,255,255,.82);box-shadow:0 8px 26px rgba(16,26,43,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cms-step:hover{transform:translateY(-2px);box-shadow:var(--vx2-shadow-soft);border-color:rgba(46,99,233,.18)}
.cms-step>span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--vx2-blue);padding-top:4px}
.cms-step h3{margin-bottom:7px}
.cms-step p{font-size:14px;line-height:1.55;max-width:720px}

.cms-page--product .cms-step-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cms-page--product .cms-step{display:flex;flex-direction:column;min-height:225px;padding:22px}
.cms-page--product .cms-step>span{margin-bottom:36px}
.cms-page--product .cms-step h3{font-size:18px}
.cms-page--product .cms-step p{font-size:13px}
.cms-page--veiligheid .cms-step-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cms-page--veiligheid .cms-step{display:flex;flex-direction:column;min-height:210px;padding:22px}
.cms-page--veiligheid .cms-step>span{margin-bottom:30px}
.cms-page--pilot .cms-step-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cms-page--pilot .cms-step{display:flex;flex-direction:column;min-height:215px}
.cms-page--pilot .cms-step>span{margin-bottom:34px}

/* Feature grids: fewer generic SaaS cards, more editorial hierarchy. */
.cms-features>.vx-shell>h2{margin-bottom:18px}
.cms-card-grid{margin-top:54px;gap:12px}
.cms-card{position:relative;border:1px solid var(--vx2-line);border-radius:var(--vx2-radius);background:rgba(255,255,255,.78);padding:26px;box-shadow:0 8px 26px rgba(16,26,43,.035);min-height:205px;display:flex;flex-direction:column}
.cms-card>span{font-size:10px;letter-spacing:.1em;font-weight:800;color:var(--vx2-blue);margin-bottom:auto}
.cms-card h3{margin-top:26px;margin-bottom:10px}
.cms-card p{font-size:14px;line-height:1.55}
.cms-theme--dark .cms-card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);box-shadow:none}
.cms-theme--dark .cms-card h3{color:#fff}
.cms-theme--dark .cms-card p{color:rgba(255,255,255,.62)}
.cms-theme--dark .cms-card>span{color:#8eacff}
.cms-card-grid--2 .cms-card{min-height:190px}
.cms-card-grid--2 .cms-card h3{font-size:clamp(1.45rem,2vw,1.9rem);margin-top:auto}
.cms-page--home .cms-card-grid--4 .cms-card,
.cms-page--oplossingen .cms-card-grid--4 .cms-card{border-top:2px solid rgba(46,99,233,.55)}

/* Split sections: visual and copy have equal authority. */
.cms-split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(54px,7vw,100px);align-items:center}
.cms-split .cms-copy>p{font-size:16px;line-height:1.68;max-width:550px;margin-top:20px}
.cms-split .cms-media{position:relative;min-height:430px;border-radius:var(--vx2-radius-lg);overflow:hidden;background:rgba(255,255,255,.55);box-shadow:var(--vx2-shadow-soft)}
.cms-split .cms-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cms-theme--blue .cms-media{background:rgba(255,255,255,.09);box-shadow:0 24px 70px rgba(8,28,79,.20)}
.cms-theme--blue .cms-copy h2{color:#fff}

/* Product context composition replaces generic photography where the product story is stronger. */
.cms-media--product-context{overflow:visible!important;background:linear-gradient(145deg,#edf2ff,#f8fafc)!important;padding:28px}
.cms-context-stack{position:relative;min-height:430px}
.cms-context-stack>.vx-continuity{position:absolute;left:0;top:10px;width:76%;z-index:1;filter:drop-shadow(0 18px 36px rgba(16,26,43,.08))}
.cms-context-stack>.vx-report{position:absolute;right:0;bottom:0;width:78%;z-index:2;box-shadow:0 24px 60px rgba(16,26,43,.14)}

/* Security route visual */
.cms-media--data-route{display:grid;place-items:center;padding:30px;overflow:visible!important;background:linear-gradient(145deg,#f7f9fc,#eef3fb)!important}
.cms-data-route{display:grid;grid-template-columns:repeat(9,auto);align-items:center;justify-content:center;gap:10px;width:100%}
.cms-data-route>div{width:118px;min-height:126px;padding:16px 14px;border:1px solid var(--vx2-line);border-radius:16px;background:#fff;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(16,26,43,.05)}
.cms-data-route>div>span{font-size:9px;color:var(--vx2-blue);font-weight:800;letter-spacing:.08em}
.cms-data-route>div>strong{font-size:13px;line-height:1.18;margin-top:auto;letter-spacing:-.02em}
.cms-data-route>div>small{font-size:10px;color:#7b8493;margin-top:6px}
.cms-data-route>div.is-boundary{border-color:rgba(46,99,233,.35);background:#f2f6ff}
.cms-data-route>div.is-final{border-color:rgba(15,118,110,.28);background:#f4faf8}
.cms-data-route>i{font-style:normal;color:#9aa5b4}
.cms-hero-route-overlay .cms-data-route{padding:14px;border-radius:18px;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(16,26,43,.16)}
.cms-hero-route-overlay .cms-data-route>div{width:92px;min-height:96px;padding:12px}
.cms-hero-route-overlay .cms-data-route>div>strong{font-size:11px}

/* Product visuals */
.cms-product-visual .cms-split-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(50px,7vw,100px);align-items:center}
.cms-product-visual .cms-copy p{font-size:16px;line-height:1.68;margin-top:20px;max-width:520px}
.cms-visual-frame{padding:28px;border-radius:var(--vx2-radius-lg);background:rgba(255,255,255,.6);box-shadow:var(--vx2-shadow-soft)}
.cms-theme--dark .cms-visual-frame{background:rgba(255,255,255,.06);box-shadow:none}
.cms-theme--dark .cms-visual-frame .vx-review{box-shadow:0 24px 70px rgba(0,0,0,.24)}

/* Booking CTA: compact, deliberate conversion surface. */
.cms-booking{padding-block:clamp(64px,7vw,92px)!important}
.cms-booking-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:center;padding:38px 42px;border:1px solid rgba(16,26,43,.07);border-radius:var(--vx2-radius-lg);background:#fff;box-shadow:var(--vx2-shadow-soft)}
.cms-booking-card h2{font-size:clamp(2.35rem,3.8vw,3.75rem);max-width:14ch}
.cms-booking-card p{max-width:600px;margin-top:12px}
.cms-booking-card>.button{min-width:240px}

/* FAQ: less empty, easier to scan. */
.cms-page--veelgestelde-vragen .cms-hero{padding-bottom:74px!important}
.cms-page--veelgestelde-vragen .cms-hero-grid{grid-template-columns:1fr}
.cms-page--veelgestelde-vragen .cms-hero h1{max-width:12ch}
.cms-page--veelgestelde-vragen .vx-faq-group{padding-block:clamp(64px,7vw,94px)}
.cms-page--veelgestelde-vragen .vx-faq-grid{gap:70px}
.cms-page--veelgestelde-vragen .vx-faq-item{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(16,26,43,.035)}
.cms-page--veelgestelde-vragen .vx-faq-item summary{padding:19px 20px}

/* Legal stays restrained. */
.cms-page--privacy .cms-hero{padding-bottom:78px!important}
.cms-page--privacy .cms-hero-grid{grid-template-columns:1fr}
.cms-page--privacy .cms-hero h1{max-width:12ch;font-size:clamp(3.2rem,5vw,5.2rem)}
.cms-page--privacy .cms-legal{padding-block:0!important;background:#fff}
.cms-page--privacy .cms-legal>.vx-legal-copy{padding-block:52px;border-top:1px solid var(--vx2-line)}
.cms-page--privacy .cms-legal h2{font-size:clamp(1.7rem,2.4vw,2.25rem);max-width:none;margin-bottom:14px}
.cms-page--privacy .cms-legal p{font-size:15px;line-height:1.75}

/* Footer: retain dark brand anchor but reduce visual heaviness. */
.site-footer{padding-top:78px;background:#0d1727}
.footer-brand p{font-size:clamp(1.35rem,2vw,1.85rem);max-width:500px}
.footer-nav{padding:42px 0}

/* Responsive: intentionally recomposed rather than desktop simply shrinking. */
@media (max-width:1050px){
  .cms-page--product .cms-step-list,
  .cms-page--veiligheid .cms-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cms-page--pilot .cms-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cms-data-route{grid-template-columns:1fr}
  .cms-data-route>div{width:100%;min-height:0}
  .cms-data-route>i{transform:rotate(90deg);justify-self:center}
  .cms-hero-route-overlay{left:-24px;right:18px}
  .cms-hero-route-overlay .cms-data-route{display:flex;gap:6px;overflow:hidden}
  .cms-hero-route-overlay .cms-data-route>div{min-width:90px}
  .cms-hero-route-overlay .cms-data-route>i{transform:none}
}
@media (max-width:860px){
  .cms-hero-grid,
  .cms-statement>.vx-shell,
  .cms-split-grid,
  .cms-product-visual .cms-split-grid,
  .cms-booking-card{grid-template-columns:1fr}
  .cms-hero-grid{gap:44px}
  .cms-page h1{font-size:clamp(3rem,9vw,4.8rem);max-width:12ch}
  .cms-page h2{font-size:clamp(2.2rem,7vw,3.5rem)}
  .cms-hero-media{min-height:460px}
  .cms-statement>.vx-shell{gap:28px}
  .cms-split-grid{gap:42px}
  .cms-split .cms-media{min-height:390px}
  .cms-media--left .cms-media{order:1}
  .cms-media--left .cms-copy{order:2}
  .cms-booking-card{gap:28px;padding:32px}
  .cms-booking-card>.button{justify-self:start}
}
@media (max-width:600px){
  :root{--vx2-section:64px}
  .container,.vx-shell{width:min(100% - 40px,1240px)}
  .cms-page h1,.cms-page h2{hyphens:none;overflow-wrap:normal;word-break:normal}
  .cms-page h1{font-size:clamp(2.55rem,12vw,3.55rem);line-height:.98;letter-spacing:-.052em}
  .cms-page h2{font-size:clamp(2.05rem,9.5vw,2.8rem);line-height:1.01}
  .cms-hero{padding-top:48px!important;padding-bottom:74px!important}
  .cms-hero-grid{gap:32px}
  .cms-hero .cms-copy>p{font-size:16px;margin-top:20px}
  .cms-hero .vx-actions{display:grid;grid-template-columns:1fr;margin-top:24px}
  .cms-hero .vx-actions .button{width:100%}
  .cms-hero-media{min-height:390px;border-radius:20px}
  .cms-hero-product-overlay{left:10px;bottom:-24px;width:58%}
  .cms-hero-review-overlay{left:10px;right:10px;bottom:-28px}
  .cms-hero-route-overlay{display:none}
  .cms-step-list,
  .cms-page--product .cms-step-list,
  .cms-page--veiligheid .cms-step-list,
  .cms-page--pilot .cms-step-list{grid-template-columns:1fr}
  .cms-step,
  .cms-page--product .cms-step,
  .cms-page--veiligheid .cms-step,
  .cms-page--pilot .cms-step{min-height:0;padding:20px}
  .cms-page--product .cms-step>span,
  .cms-page--veiligheid .cms-step>span,
  .cms-page--pilot .cms-step>span{margin-bottom:18px}
  .cms-card-grid{grid-template-columns:1fr!important;margin-top:34px}
  .cms-card{min-height:0;padding:22px}
  .cms-card>span{margin-bottom:24px}
  .cms-card h3{margin-top:0}
  .cms-split .cms-media{min-height:320px;border-radius:20px}
  .cms-media--product-context{min-height:440px!important;padding:14px}
  .cms-context-stack>.vx-continuity{width:94%}
  .cms-context-stack>.vx-report{width:94%}
  .cms-visual-frame{padding:14px;border-radius:20px}
  .cms-booking-card{padding:26px 22px;border-radius:20px}
  .cms-booking-card>.button{width:100%;min-width:0}
  .footer-lead{grid-template-columns:1fr;gap:34px}
  .footer-question{justify-self:start}
}