/* 365OPTIMIZERS subpagina's (oplossingen en klantcases). Laadt na stijl.css.
Rustiger dan de hoofdpagina: één hemellichaam per pagina, leesregels van 60 tot 72 tekens.
Elke pagina zet zijn laagkleur in --laag (r,g,b). Beweging alleen met transform en opacity. */
.sub { --laag: 143, 211, 240; --skop: clamp(42px, 5vw, 76px); --lees: 34em; }
.sub main { position: relative; }
/* kop: op een leespagina altijd egaal zodra je een stukje scrolt */
.sub .kop__merk { text-decoration: none; }
/* ronde 7: de strook boven en naast de pil krijgt de nachtkleur, zodat er nooit inhoud boven de kopbalk piept */
.sub::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 40px; z-index: 19; pointer-events: none; background: linear-gradient(180deg, var(--zij) 30%, rgba(4, 10, 27, 0)); }
/* ronde 8: na scrollen geen verzadiging en dichter glas, zodat de gele knop onder de pil geen gele vlek achter het logo geeft */
.sub .kop.is-vast .kop__binnen::before { background-color: rgba(6, 13, 32, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
/* ── Algemene bouwstenen ──────────────────────────────────────────────── */
.s-sectie { position: relative; padding: var(--sectie) var(--marge); }
.s-binnen { position: relative; max-width: var(--breed); margin: 0 auto; }
/* scheidingslijn op de sectie zelf (binnen de marges), niet op .s-binnen: anders leest de uitlijningscontrole die lijn als vlakrand */
.s-sectie + .s-sectie::before {
content: ""; position: absolute; top: 0; height: 1px; pointer-events: none;
left: max(var(--marge), (100% - var(--breed)) / 2); right: max(var(--marge), (100% - var(--breed)) / 2);
background: linear-gradient(90deg, var(--lijn), var(--lijn-zacht) 70%, transparent);
}
.s-sectie--los + .s-sectie::before, .s-sectie--naadloos::before { display: none; }
.s-tekst p + p { margin-top: 1em; }
.s-tekst { color: var(--tekst-2); max-width: var(--lees); text-wrap: pretty; }
.s-tekst strong { color: var(--wit); font-weight: 600; }
.s-groot { font-size: var(--lead); line-height: 1.5; }
/* ronde 6: h2 kleiner dan op de hoofdpagina, zodat h1 en h2 duidelijk verschillen (h1/h2 ≈ 1,4×) */
.s-kop2 { font-family: var(--kop); font-size: clamp(30px, 3.7vw, 54px); line-height: 1.06; letter-spacing: -.028em; font-weight: 500; text-wrap: balance; max-width: 15ch; }
.s-kop3 { font-family: var(--kop); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; }
.s-laagstip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 0 3px rgba(var(--laag), .14), 0 0 12px 2px rgba(var(--laag), .45); flex: none; }
.sterren-vak { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* ── Opening ──────────────────────────────────────────────────────────── */
.s-open { position: relative; min-height: min(100svh, 940px); padding: 0 var(--marge); display: grid; overflow: hidden; }
.s-open__binnen {
position: relative; max-width: var(--breed); width: 100%; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 48px;
padding: calc(var(--kop-h, 72px) + 48px) 0 112px;
}
.s-open__tekst { position: relative; z-index: 2; }
.s-pad { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; font-size: 15px; color: var(--tekst-3); margin-bottom: 20px; }
.s-pad a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tekst-2); text-decoration: underline; text-decoration-color: rgba(var(--laag), .35); text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color var(--t3) var(--erin), text-decoration-color var(--t3) var(--erin); }
.s-pad a:hover { color: var(--wit); text-decoration-color: rgb(var(--laag)); }
.s-pad__streep { width: 16px; height: 1px; background: var(--lijn); }
.s-pad__hier { display: inline-flex; align-items: center; gap: 10px; color: var(--wit); }
.s-kop1 { font-family: var(--kop); font-size: var(--skop); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; max-width: 14ch; }
.s-onder { margin-top: 18px; font-size: var(--lead); color: rgb(var(--laag)); }
.s-open .lead { margin-top: 28px; max-width: 31em; }
.s-acties { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.s-open__beeld { position: relative; z-index: 1; align-self: center; }
.s-open__beeld .hemel { width: 100%; }
.s-zweef { will-change: transform; }
/* de vijf lagen onderin de opening: waar je bent, en de andere vier een klik verder */
.s-lagen { position: absolute; left: var(--marge); right: var(--marge); bottom: 0; z-index: 2; max-width: var(--breed); margin: 0 auto; display: flex; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--lijn-zacht); padding: 10px 0 18px; }
.s-lagen a {
position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
color: var(--tekst-3); text-decoration: none; font-size: 15px; font-weight: 600; transition: color var(--t3) var(--erin);
}
.s-lagen a i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--k)); opacity: .55; transition: opacity var(--t3) var(--erin), transform var(--t3) var(--erin); }
.s-lagen a:hover { color: var(--wit); }
.s-lagen a:hover i { opacity: 1; transform: scale(1.4); }
.s-lagen a[aria-current] { color: var(--wit); }
.s-lagen a[aria-current] i { opacity: 1; box-shadow: 0 0 0 3px rgba(var(--k), .16), 0 0 12px 2px rgba(var(--k), .5); }
/* markering van de huidige laag hangt aan de stip (i), positie ten opzichte van de link */
.s-lagen a[aria-current] i { transform: none; }
.s-lagen a[aria-current] i::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 1px; background: rgb(var(--k)); }
/* ronde 7: muis op een andere laag laat dezelfde lijn zien als de huidige laag, maar zwakker (alleen transform en opacity) */
.s-lagen a:not([aria-current])::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 1px; background: rgb(var(--k)); opacity: 0; transform: scaleX(.3); transform-origin: left; transition: opacity var(--t3) var(--erin), transform var(--t3) var(--erin); }
.s-lagen a:not([aria-current]):hover::after { opacity: .7; transform: none; }
/* ── Twee kolommen: kop links, tekst rechts ───────────────────────────── */
.s-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: start; }
.s-duo .s-tekst { padding-top: 10px; }
/* ── Stappen met een maan per stap (adoptie) ──────────────────────────── */
.s-werk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 64px; align-items: start; }
.s-werk__kop { position: sticky; top: calc(var(--kop-h, 72px) + 48px); }
.s-werk__kop .s-tekst { margin-top: 24px; }
.s-fasen { position: relative; display: grid; gap: 36px; }
.s-fasen::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(var(--laag), .12), rgba(var(--laag), .45)); }
.s-fase { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 24px; align-items: start; }
.s-fase svg { width: 44px; height: 44px; background: var(--zij); border-radius: 50%; }
.s-fase h3 { font-family: var(--kop); font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; padding-top: 8px; }
.s-fase p { margin-top: 6px; color: var(--tekst-2); max-width: 30em; }
.s-fasen__zin { position: relative; margin: 40px 0 0 68px; color: rgb(var(--laag)); font-size: 17px; max-width: 28em; text-wrap: pretty; }
/* kaders: dun omlijnd, een lichtlijn in de laagkleur bovenaan */
.s-kaders { margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.s-kader { position: relative; padding: 32px 32px 34px; border: 1px solid var(--lijn); border-radius: var(--r); background: linear-gradient(180deg, rgba(var(--laag), .045), rgba(var(--laag), 0) 60%); }
.s-kader::before { content: ""; position: absolute; left: 32px; top: -1px; width: 48px; height: 1px; background: rgb(var(--laag)); box-shadow: 0 0 10px 1px rgba(var(--laag), .5); }
.s-kader h3 { font-family: var(--kop); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.s-kader p { margin-top: 12px; color: var(--tekst-2); text-wrap: pretty; }
/* ── Bewijs: case met citaat ──────────────────────────────────────────── */
.s-bewijs { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; padding-top: 48px; border-top: 1px solid var(--lijn-zacht); }
.s-bewijs__naam { font-family: var(--kop); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.s-bewijs__naam + p { margin-top: 12px; color: var(--tekst-2); max-width: 26em; text-wrap: pretty; }
.s-citaat p { font-family: var(--kop); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.22; letter-spacing: -.02em; font-weight: 500; text-wrap: pretty; max-width: 24em; }
.s-citaat footer { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tekst-2); }
.s-citaat footer::before { content: ""; width: 24px; height: 1px; background: rgb(var(--laag)); }
.s-bewijs .tekstlink { margin-top: 20px; }
/* rechts van een kop: een klein hemellichaam als echo van de opening */
.s-kopregel { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.s-echo { flex: none; width: clamp(88px, 9vw, 128px); }
/* ── Slot: beginnen en de actie ───────────────────────────────────────── */
.s-slot { position: relative; padding: calc(var(--sectie) * 1.1) var(--marge) calc(var(--sectie) * 1.2); overflow: hidden; }
.s-slot__binnen { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; display: grid; justify-items: center; }
.s-slot .s-kop2 { max-width: 16ch; }
.s-slot .s-kop2--breed { max-width: 22ch; }
.s-slot .s-tekst { margin-top: 24px; max-width: 32em; }
.s-slot__vraag { font-family: var(--kop); font-size: var(--kop3); line-height: 1.15; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.s-slot .s-acties { justify-content: center; }
.s-verder { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--wit); font-weight: 600; text-decoration: none; }
.s-verder span { text-decoration: underline; text-decoration-color: rgba(var(--k, var(--laag)), .5); text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color var(--t3) var(--erin); }
.s-verder i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--k, var(--laag))); box-shadow: 0 0 10px 2px rgba(var(--k, var(--laag)), .45); }
.s-verder svg { width: 16px; height: 10px; transition: transform var(--t3) var(--erin); }
.s-verder:hover span { text-decoration-color: rgb(var(--k, var(--laag))); }
.s-verder:hover svg { transform: translate3d(4px, 0, 0); }
/* licht van onderen: één fijne lichtlijn met een smalle gloed, geen horizon */
.s-slot__licht { position: absolute; left: 50%; bottom: 0; width: min(880px, 90vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(var(--laag), 0), rgba(var(--laag), .7) 50%, rgba(var(--laag), 0)); }
.s-slot__licht::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 120px; background: radial-gradient(50% 100% at 50% 100%, rgba(var(--laag), .10), rgba(var(--laag), .05) 35%, rgba(var(--laag), .015) 70%, rgba(var(--laag), 0)); }
/* ── Klantcases ───────────────────────────────────────────────────────── */
.s-vraag { margin-top: 40px; font-family: var(--kop); font-size: var(--kop3); line-height: 1.15; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.s-stappen3 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; }
.s-stappen3::before { content: ""; position: absolute; left: 3px; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, rgba(var(--laag), .5), rgba(var(--laag), .12)); }
.s-stap3 { position: relative; padding-top: 36px; }
.s-stap3::before { content: ""; position: absolute; left: 0; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--zij); box-shadow: inset 0 0 0 1px rgb(var(--laag)); }
.s-stap3:last-child::before { background: rgb(var(--laag)); box-shadow: 0 0 0 3px rgba(var(--laag), .16), 0 0 12px 2px rgba(var(--laag), .5); }
.s-stap3 h3 { font-family: var(--kop); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.s-stap3 p { margin-top: 10px; color: var(--tekst-2); text-wrap: pretty; }
.s-uitkomst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 72px; align-items: start; }
.s-getal { position: relative; padding: 40px 0 0; }
.s-getal strong { display: block; font-family: var(--kop); font-weight: 500; font-size: clamp(140px, 17vw, 240px); line-height: .84; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.s-getal span { display: block; margin-top: 20px; font-size: var(--lead); color: rgb(var(--laag)); }
.s-treden { margin-top: 28px; display: grid; gap: 4px; border-top: 1px solid var(--lijn-zacht); }
.s-treden li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lijn-zacht); color: var(--wit); }
.s-treden svg { width: 28px; height: 28px; }
.s-slotzin { margin-top: 28px; }
.s-oplossing { display: flex; flex-wrap: wrap; gap: 16px; }
.s-oplossing a {
position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px;
min-height: 88px; padding: 16px 24px 16px 16px; flex: 1 1 320px; max-width: 560px;
border: 1px solid var(--lijn); border-radius: var(--r); text-decoration: none; color: var(--wit); font-weight: 600;
transition: border-color var(--t3) var(--erin), background-color var(--t3) var(--erin);
}
.s-oplossing a:hover { border-color: rgba(var(--k), .6); background: rgba(var(--k), .04); }
.s-oplossing a svg.hemel { width: 56px; }
.s-oplossing a > svg:last-child { width: 16px; height: 10px; color: rgb(var(--k)); transition: transform var(--t3) var(--erin); }
.s-oplossing a:hover > svg:last-child { transform: translate3d(4px, 0, 0); }
.s-label { font-size: 15px; color: var(--tekst-3); margin-bottom: 20px; }
/* ── Sterrenbeeld van Anculus: 17 kansen ──────────────────────────────── */
.zk .zk__lijn { transform-box: view-box; transform-origin: var(--o); }
.js .zk__lijn { transform: scale(0); opacity: 0; transition: transform 900ms var(--erin), opacity 400ms var(--erin); transition-delay: calc(400ms + var(--i) * 70ms); }
.js .zk__ster { opacity: 0; transition: opacity 700ms var(--erin); transition-delay: calc(var(--i) * 50ms); }
.js .is-in .zk__lijn { transform: scale(1); opacity: 1; }
.js .is-in .zk__ster { opacity: 1; }
/* ── Lijsten met een fijne stip in de laagkleur ───────────────────────── */
.s-lijst { display: grid; gap: 12px; margin-top: 20px; color: var(--tekst-2); }
.s-lijst li { position: relative; padding-left: 22px; text-wrap: pretty; }
.s-lijst li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 8px 1px rgba(var(--laag), .45); }
.s-lijst strong { color: var(--wit); font-weight: 600; }
.s-kader .s-lijst { margin-top: 16px; }
.s-kader > p + .s-lijst { margin-top: 16px; }
.s-intro { margin-top: 24px; }
.s-kaders--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 64px; }
.s-kaders--drie .s-kader p { margin-top: 10px; }
/* een los kader dat over de volle breedte loopt: tekst links, lichtlijn ervoor */
.s-noot { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 64px; padding-top: 32px; border-top: 1px solid var(--lijn-zacht); position: relative; }
.s-noot::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: rgb(var(--laag)); box-shadow: 0 0 10px 1px rgba(var(--laag), .5); }
.s-noot h3 { font-family: var(--kop); font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.s-noot p { color: var(--tekst-2); max-width: var(--lees); text-wrap: pretty; }
/* stappen in een rij van vier of vijf */
.s-stappen3--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.s-stappen3--vijf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.s-stappen3--vijf .s-stap3 h3, .s-stappen3--vier .s-stap3 h3 { font-size: 20px; }
/* citaat naast de tekst in het klantdeel, en een kleiner tweede citaat */
.s-duo .s-citaat { padding-top: 10px; }
.s-citaat--klein p { font-size: clamp(20px, 1.7vw, 24px); color: var(--tekst-2); }
/* ÆVO: het verschil als typografisch gebaar */
.s-verschil { display: grid; gap: 4px; }
.s-verschil__van { font-family: var(--kop); font-size: clamp(24px, 2.4vw, 34px); color: var(--tekst-3); letter-spacing: -.02em; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(var(--laag), .6); }
.s-verschil__naar { font-family: var(--kop); font-size: clamp(64px, 9vw, 132px); line-height: .92; letter-spacing: -.05em; font-weight: 500; }
.s-verschil svg { width: 40px; height: 20px; color: rgb(var(--laag)); margin: 10px 0 14px; }
/* HEMA: het woord groot, met drie rustige lijnen eronder */
.s-woord { font-family: var(--kop); font-size: clamp(72px, 12vw, 176px); line-height: .9; letter-spacing: -.055em; font-weight: 500; }
.s-woord-lijnen { display: block; width: min(100%, 560px); margin-top: 28px; }
/* FMI: drie regels van de contractmodule */
.s-drieluik { display: grid; gap: 0; border-top: 1px solid var(--lijn-zacht); }
.s-drieluik li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--lijn-zacht); font-weight: 600; }
.s-drieluik svg { width: 40px; height: 40px; }
.s-drieluik li > i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 0 3px rgba(var(--laag), .14), 0 0 10px 2px rgba(var(--laag), .45); }
.s-oplossing--twee a { flex-basis: 360px; }
/* ── Hemellichamen in beweging: één langzame omloop, alleen transform ── */
.om, .tegen { transform-box: view-box; transform-origin: 0 0; }
.om--lang { animation: s-om 150s linear infinite; }
.om--lang .tegen { animation: s-om 150s linear infinite reverse; }
.om--sat { animation: s-om 96s linear infinite; }
.om--sat .tegen { animation: s-om 96s linear infinite reverse; }
@keyframes s-om { to { transform: rotate(360deg); } }
/* FMI: het lichtpunt schuift één keer naar de markering en blijft daar */
.js .om--nadert { transform: rotate(-64deg); }
.is-in .om--nadert { transform: rotate(0deg); transition: transform 5.5s cubic-bezier(.22, .8, .3, 1) .5s; }
.js .om--nadert .tegen { transform: rotate(64deg); }
.is-in .om--nadert .tegen { transform: rotate(0deg); transition: transform 5.5s cubic-bezier(.22, .8, .3, 1) .5s; }
.js .fm-puls { opacity: 0; }
.is-in .fm-puls { opacity: 1; transition: opacity 900ms var(--erin) 5.4s; }
/* HEMA: de lijnen tekenen zich één keer in, van links naar rechts */
.hm-dek { transform-box: view-box; transform-origin: 0 0; }
.js .hm-dek { transform: scaleX(0); }
.is-in .hm-dek { transform: scaleX(1); transition: transform 2.4s cubic-bezier(.3, .7, .2, 1) .3s; }
.js .hm-nu { opacity: 0; }
.js .is-in .hm-nu { opacity: 1; transition: opacity 700ms var(--erin) 2.4s; }
/* aanvullingen voor de overige pagina's */
.s-beeld { width: 100%; }
.s-kader--los { margin-top: 48px; max-width: 46em; }
.s-kader--los p { margin-top: 0; }
.s-getal--klein { padding-top: 32px; }
.s-getal--klein strong { font-size: clamp(88px, 9vw, 128px); }
.s-getal--klein span { margin-top: 12px; font-size: 17px; }
.s-label--stap { margin: 72px 0 0; font-size: 17px; color: var(--tekst-2); }
.s-stappen3--kort { margin-top: 28px; }
.s-stappen3--kort .s-stap3 p { margin-top: 0; color: var(--wit); }
.s-citaten { display: grid; gap: 48px; }
.s-duo--woord { margin-top: 24px; align-items: center; }
.s-duo--woord .s-woord-lijnen { margin-top: 0; }
.s-fasen--ruim .s-fase p { max-width: 34em; }
/* ── Ronde 6: sfeer, middenplan, productbeeld en arcering. Gedeeld door alle negen pagina's ── */
/* Sfeer: een zachte nevel in de laagkleur aan de rand van een sectie, achter alles, nooit achter leestekst.
Veel tussenstops plus een fijne korrel, zodat er geen kleurtrappen ontstaan. Stil: beweegt niet mee. */
.s-sfeer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
/* nooit een rand waar de sectie ophoudt: de nevel lost naar onder en opzij op in het navy */
-webkit-mask-image: linear-gradient(180deg, #000, #000 62%, rgba(0, 0, 0, .45) 82%, transparent);
mask-image: linear-gradient(180deg, #000, #000 62%, rgba(0, 0, 0, .45) 82%, transparent); }
/* Sfeer = het echte nevelbeeld uit assets/sfeer (geen zelfgemaakte vlekken), stil en ver weg, aan de rand */
.s-sfeer::before {
content: ""; position: absolute;
right: -22%; top: -16%; width: 82%; height: 112%;
background: url("assets/sfeer/nevel-paars.webp") center / contain no-repeat;
opacity: .42;
}
/* Middenplan: het hemellichaam van de laag groot achter het productbeeld. Scherp, alleen transform. */
.s-hemel { position: absolute; z-index: 0; pointer-events: none; }
.s-hemel svg { width: 100%; height: 100%; }
.s-hemel [vector-effect], .s-hemel .lijn { vector-effect: non-scaling-stroke; }
/* Productbeeld: donker glas, lijn van 1 px, hoek --r, smalle titelbalk, zachte gloed eronder.
Daarbinnen is elk scherm anders. Geen backdrop-filter: het kader zweeft mee met scrollen. */
.s-product { position: relative; z-index: 1; }
.s-product::before {
content: ""; position: absolute; left: 6%; right: 6%; bottom: -72px; height: 168px; z-index: -1; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--laag), .26), rgba(var(--laag), .14) 35%, rgba(var(--laag), .05) 68%, rgba(var(--laag), 0));
}
.s-scherm {
position: relative; overflow: hidden;
border: 1px solid rgba(var(--laag), .24); border-radius: var(--r);
background: linear-gradient(180deg, rgba(17, 29, 60, .94), rgba(8, 15, 35, .96) 70%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(var(--laag), .1), 0 48px 90px -42px rgba(0, 0, 0, .95);
font-size: 14px; line-height: 1.35; color: var(--wit);
}
/* lichtlijn bovenop het kader: licht met gloed = nu */
.s-scherm::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, rgba(var(--laag), 0), rgba(var(--laag), .9) 30%, rgba(171, 225, 246, .9) 55%, rgba(var(--laag), 0));
}
.s-scherm__balk {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
min-height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(163, 176, 202, .1);
background: rgba(255, 255, 255, .018); font-size: 13px; font-weight: 600; color: var(--tekst-2);
}
.s-scherm__titel { display: inline-flex; align-items: center; gap: 10px; color: var(--wit); }
.s-scherm__titel i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 0 3px rgba(var(--laag), .14), 0 0 10px 2px rgba(var(--laag), .45); }
.s-scherm__meta { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst-3); font-weight: 600; }
.s-scherm__inhoud { padding: 20px; }
.s-scherm__noot { margin-top: 14px; font-size: 13px; color: var(--tekst-3); }
/* schakelaar in een productbeeld: rechthoekig, geen pil */
.s-keuze { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid rgba(163, 176, 202, .16); border-radius: 4px; }
.s-keuze button {
min-height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: none; cursor: pointer;
font: 600 13px/1 "Instrument Sans", system-ui, sans-serif; color: var(--tekst-2);
transition: color var(--t3) var(--erin);
}
.s-keuze button:hover { color: var(--wit); }
.s-keuze button[aria-pressed="true"] { color: var(--zij); background: rgb(var(--laag)); }
@media (pointer: coarse) { .s-keuze button { min-height: 40px; } }
/* Neon-arcering met verloop. Vaste betekenis op de hele site: arcering = nog niet of zoals het was;
licht met gloed = nu. Fijne lijnen van 1 px in het verloop van de hemel, met een zweem eronder. */
.s-arcering { position: relative; background: linear-gradient(90deg, rgba(171, 225, 246, .05), rgba(var(--laag), .07)); box-shadow: inset 0 0 0 1px rgba(var(--laag), .3); }
.s-arcering::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(100deg, rgba(171, 225, 246, .7), rgba(94, 151, 255, .62) 50%, rgba(var(--laag), .7));
-webkit-mask-image: repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 6px);
mask-image: repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 6px);
}
.s-nu { background: linear-gradient(90deg, var(--ijs), rgb(var(--laag))); box-shadow: 0 0 14px 1px rgba(var(--laag), .45); }
/* Neon-verloop: hetzelfde motief als "laag voor laag." op de hoofdpagina (verloop --hemel plus ingehouden gloed).
Een accent: per pagina op een andere plek en in een andere vorm, nooit op elke kop.
Tekst: één beeld.
Lijn: een element met class="s-neon-lijn" (hoogte of breedte 1 tot 2 px)
Rand: class="s-neon-rand" op een kader met position: relative */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.s-neon {
padding: .28em; margin: -.28em;
background: var(--hemel); -webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
/* ronde 7: gloed met text-shadow in plaats van filter: drop-shadow. De filter gaf op een inline woord over
twee regels een donkere rand van 1 kleurstap om het hele regelvak (gemeten op DPR 2: ±30.000 pixels
net donkerder dan het navy), en die las als een rechthoekig donker kader. text-shadow volgt de letters. */
filter: none;
text-shadow: 0 0 .32em rgba(94, 151, 255, .26), 0 0 .08em rgba(171, 225, 246, .18);
}
}
.s-neon-lijn { background: var(--hemel); box-shadow: 0 0 10px 0 rgba(94, 151, 255, .45), 0 0 2px 0 rgba(171, 225, 246, .5); }
.s-neon-rand::after {
content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
background: var(--hemel);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.s-scherm.s-neon-rand { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 22px -4px rgba(94, 151, 255, .32), 0 48px 90px -42px rgba(0, 0, 0, .95); }
.s-product:has(.s-neon-rand)::before { background: radial-gradient(closest-side, rgba(94, 151, 255, .3), rgba(123, 74, 226, .14) 40%, rgba(var(--laag), .05) 70%, rgba(var(--laag), 0)); }
/* Microsoft-product: officieel icoon links (24 px, ongewijzigd, geen filter of doorzichtigheid), naam rechts in tekst.
Gedeeld door oplossingen en klantcases. Alleen waar het product genoemd wordt, op een rustig vlak.
Power BI
Iconen zonder viewBox (power-bi, copilot, fabric, purview) alleen als -24-bestand. */
.ms { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--tekst-2); white-space: nowrap; }
.ms img { flex: none; display: block; width: 24px; height: 24px; }
/* een rustige regel "Gebouwd met" met een paar producten naast elkaar */
.ms-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 13px; color: var(--tekst-3); }
/* handelsmerkregel in de voet */
.voet__merkrecht { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--tekst-3); max-width: 62em; }
/* ── Breedtes ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
.s-stappen3--vijf, .s-stappen3--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
/* vijf stappen: drie boven, twee breder eronder, zodat er geen wees overblijft */
.s-stappen3--vijf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.s-stappen3--vijf .s-stap3 { grid-column: span 2; }
.s-stappen3--vijf .s-stap3:nth-child(n+4) { grid-column: span 3; }
.s-stappen3--vijf::before, .s-stappen3--vier::before { display: none; }
}
@media (max-width: 900px) {
.s-open { min-height: 0; }
.s-open__binnen { grid-template-columns: 1fr; gap: 8px; padding: calc(var(--kop-h, 72px) + 24px) 0 104px; }
.s-open__beeld { order: -1; width: min(100%, 520px); justify-self: end; margin-right: -8px; }
.s-lagen { flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
.s-duo, .s-werk, .s-bewijs, .s-uitkomst { grid-template-columns: 1fr; }
.s-werk__kop { position: relative; top: auto; }
.s-kaders { grid-template-columns: 1fr; margin-top: 72px; }
.s-stappen3 { grid-template-columns: 1fr; gap: 32px; padding-left: 28px; }
.s-stappen3::before { left: 3px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(var(--laag), .5), rgba(var(--laag), .12)); }
.s-stap3 { padding-top: 0; }
.s-stap3::before { left: -28px; top: 9px; }
.s-kaders--drie { grid-template-columns: 1fr; }
.s-stappen3--vijf, .s-stappen3--vier { grid-template-columns: 1fr; row-gap: 32px; }
.s-stappen3--vijf .s-stap3, .s-stappen3--vijf .s-stap3:nth-child(n+4) { grid-column: auto; }
.s-stappen3--vijf::before, .s-stappen3--vier::before { display: block; }
.s-noot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.sub { --skop: clamp(40px, 11.4vw, 50px); }
.s-open__beeld { width: 100%; margin-right: 0; }
.s-lagen { display: none; }
.s-open__binnen { padding-bottom: 64px; }
.s-acties .knop--geel { flex: 1 1 100%; }
.s-fase { grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
.s-fase svg { width: 36px; height: 36px; }
.s-fasen::before { left: 17.5px; }
.s-fasen__zin { margin-left: 54px; }
.s-kader { padding: 28px 24px; }
.s-kader::before { left: 24px; }
.s-echo { width: 72px; }
.s-oplossing a { padding-right: 16px; gap: 16px; grid-template-columns: 48px minmax(0, 1fr) auto; }
.s-oplossing a svg.hemel { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.s-zweef, [data-diepte] { transform: none !important; will-change: auto; }
.js .zk__lijn, .js .zk__ster { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
.s-verder svg, .s-oplossing a > svg:last-child { transition: none; }
.s-verder:hover svg, .s-oplossing a:hover > svg:last-child { transform: none; }
.s-lagen a i, .s-lagen a::after { transition: none; }
.s-lagen a:not([aria-current])::after { transform: none; }
.s-lagen a:hover i { transform: none; }
.om, .tegen { animation: none !important; }
.js .om--nadert, .js .om--nadert .tegen, .js .hm-dek { transform: none; transition: none; }
.js .fm-puls, .js .hm-nu { opacity: 1; transition: none; }
}
/* gat in stijl.css: het mobiele menu schuift ook bij minder beweging 8 px; hier alleen vervagen */
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
.kop__nav { transform: none; transition: opacity 200ms linear, visibility 0s linear 200ms; }
.kop.is-open .kop__nav { transition-delay: 0s; }
}