@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/sourceserif.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap;font-optical-sizing:auto}
@font-face{font-family:'Source Sans 3';src:url('/assets/fonts/sourcesans.woff2') format('woff2-variations');
  font-weight:400 600;font-style:normal;font-display:swap}
/* SEMQO — an editorial identity. Paper, ink, chrome and a single signal colour. */
:root{--paper:#f5f4ef;--white:#fff;--wash:#ecedea;--ink:#161817;--muted:#65635d;--line:#d4d1c9;--dark:#161817;--dark-surface:#1e201f;--dark-line:#3a3a36;--dark-muted:#b0afa7;--accent:#8c3230;--signal:#c4645c;--green:#b7cea9;--amber:#efbd78;--red:#b73529;--graphite:#0c0e0d;--container:1440px;--display:'Source Serif 4',Georgia,serif;--font:'Source Sans 3',-apple-system,Segoe UI,sans-serif;--mono:"Courier New",monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{overflow-x:clip;margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,summary{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.5}a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--signal);outline-offset:5px}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{font-weight:700;letter-spacing:-.055em;line-height:1.03}h1{font-size:clamp(52px,7.4vw,112px)}h2{font-size:clamp(40px,4.4vw,68px)}h2 em,h1 em{font-style:italic;font-weight:500}h3{font-size:30px;letter-spacing:-.04em}h4{font-size:26px;letter-spacing:-.035em}p{color:var(--muted)}p+p{margin-top:20px}ul,ol{margin:0;padding:0;list-style:none}svg{display:block}img{display:block;max-width:100%}::selection{background:var(--accent);color:white}[hidden]{display:none!important}.container{width:calc(100% - 112px);max-width:var(--container);margin-inline:auto}.section{padding-block:116px}.split{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}.split>*,.product-stage>*,.hero-bottom>*{min-width:0}.lead{font-size:20px;line-height:1.5;letter-spacing:-.015em}.eyebrow{display:flex;gap:16px;align-items:center;margin-bottom:28px;font:12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.eyebrow>span:first-child{color:var(--accent)}.section-heading{margin-bottom:56px;max-width:830px}.section-heading>p:last-child{max-width:550px;font-size:18px;margin-top:24px}.fine-print{font-size:12px;line-height:1.65;color:var(--muted)}.fine-print a{text-decoration:underline;text-underline-offset:3px}.center{text-align:center}.muted{color:var(--dark-muted)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}.status-dot.pending{background:var(--signal)}.status-dot.stopped{background:#85837a}.skip-link{position:fixed;left:20px;top:-80px;padding:12px 20px;background:var(--paper);z-index:100}.skip-link:focus{top:20px}
/* Light, quiet navigation. */
.site-header{position:sticky;top:0;z-index:30;background:rgba(244,242,237,.96);backdrop-filter:blur(16px)}.nav-bar{height:90px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:9px;font-size:28px;font-weight:800;letter-spacing:-1.7px;line-height:1;white-space:nowrap}.brand-mark{width:40px;height:auto;flex:none;mix-blend-mode:darken;filter:brightness(1.035)}.nav-bar nav{display:flex;align-items:center;gap:28px;margin-left:auto}.nav-bar nav a{font-size:14px;font-weight:600;min-height:44px;display:flex;align-items:center}.nav-bar nav a:hover,.text-link:hover{color:var(--accent)}.nav-actions{display:flex;gap:25px;align-items:center}.language{display:flex;gap:7px;align-items:center;min-height:44px;font:12px var(--mono)}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:50px;padding:14px 25px;border:1px solid transparent;border-radius:50px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;line-height:1.4;text-align:center;transition:background .2s,transform .2s}.button:hover{background:var(--accent);color:white;transform:translateY(-2px)}.button span{font-size:18px;font-weight:400}.button-small{min-height:43px;padding:11px 20px;font-size:12px;gap:18px}.button-outline{background:transparent;color:var(--ink);border-color:var(--line)}.button-light{background:var(--paper);color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:18px;font-size:14px;font-weight:600;min-height:46px}.text-link span{font-size:18px}.menu-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:none;border:1px solid var(--line);border-radius:50%;width:44px;height:44px}.menu-toggle span{height:1px;width:17px;background:currentColor}
/* Oversized type, a unique chrome Q, and deliberately open space. */
.hero{position:relative;isolation:isolate;overflow:clip}.hero-stage{padding-top:32px}.hero-kicker{display:flex;justify-content:space-between;font:11px/1.5 var(--mono);letter-spacing:.1em;color:var(--muted)}.hero-kicker>span:first-child{display:flex;gap:9px;align-items:center}.hero-kicker .status-dot{background:var(--accent)}.hero-headline{position:relative;margin-top:90px;margin-bottom:52px;min-height:265px}.hero h1{position:relative;z-index:2;font-size:clamp(75px,8.5vw,148px);line-height:.91;letter-spacing:-.075em;max-width:1080px;pointer-events:none}.hero h1 em{font-weight:500}.hero-sculpture{position:absolute;height:auto;width:22%;max-width:290px;right:0;top:-46px;z-index:1;mix-blend-mode:darken;filter:brightness(1.035);transform:none;animation:sculpture-arrive 1.2s cubic-bezier(.16,1,.3,1) both}.hero-bottom{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-bottom:66px}.hero-index{display:flex;align-items:flex-end;gap:22px;font:11px/1.6 var(--mono);letter-spacing:.08em}.crosshair{font:50px/1 var(--mono);font-weight:normal;color:var(--accent)}.hero-copy{max-width:480px}.hero-copy .lead{font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.04em;color:var(--ink)}.hero-copy>p+p{font-size:16px;max-width:380px;margin-top:16px}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:25px}.hero-scroll{border-top:1px solid var(--line);padding:21px 0;display:flex;justify-content:space-between;font:11px/1.5 var(--mono);letter-spacing:.12em;color:var(--muted)}
/* Reference systems, with clear integration scope. */
.compatibility{padding:28px 0 34px;border-top:1px solid var(--line);background:var(--paper);text-align:center}.compatibility .container>p:first-child{font:11px var(--mono);letter-spacing:.13em}.wordmarks{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:28px 0;font-size:27px;font-weight:700;color:#6b6963;letter-spacing:-1px}.wordmarks .exact-word{font-weight:400;font-size:35px}.wordmarks .microsoft-word{font-size:23px}.wordmarks .api-word{font:18px var(--mono)}.compatibility .fine-print{font-size:11px;opacity:.85}
/* A full-sized interactive product, not a flattened screenshot. */
.product-section{background:var(--dark);color:var(--paper);padding-bottom:55px}.product-section p,.governance-section p{color:var(--dark-muted)}.product-intro{display:flex;justify-content:space-between;align-items:end;gap:80px;margin-bottom:60px}.product-intro>p{max-width:365px;font-size:16px;padding-bottom:5px}.product-section .eyebrow,.governance-section .eyebrow{color:var(--dark-muted)}.product-section .eyebrow>span,.governance-section .eyebrow>span{color:var(--signal)}.product-stage{display:grid;grid-template-columns:.6fr 1.4fr;gap:60px;align-items:center}.product-aside .eyebrow{font-size:11px;color:var(--signal)}.product-aside h3{font-size:34px;line-height:1.1}.product-aside p{font-size:16px;margin:22px 0 12px;max-width:260px}.product-aside .text-link{font-size:12px}.product-legend{display:flex;flex-direction:column;gap:0;margin-top:42px;max-width:255px}.product-legend>span{display:flex;gap:12px;align-items:center;border-top:1px solid var(--dark-line);padding:15px 0;font:11px var(--mono);letter-spacing:.05em}.product-caption{display:flex;justify-content:space-between;font:11px var(--mono);letter-spacing:.05em;padding-top:26px}.product-caption span{letter-spacing:0}.command-center{background:#20201e;border:1px solid #45453e;border-radius:10px;overflow:hidden;box-shadow:0 20px 80px #0004;scroll-margin-top:120px}.console-bar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--dark-line);font:12px var(--mono);color:#ddddd6}.console-bar>span:first-child{display:flex;align-items:center;gap:9px}.console-bar .brand-mark{width:24px;height:15px}.console-path{color:#92928b}.demo-tag{padding:5px 7px;border:1px solid #535047;border-radius:3px;font:11px var(--mono);color:#c8b59c;white-space:nowrap}.console-body{display:grid;grid-template-columns:145px 1fr;min-height:415px}.console-nav{border-right:1px solid var(--dark-line);padding:20px 10px;display:flex;flex-direction:column;gap:7px}.console-nav button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#b2b1a9;padding:12px 7px;border-radius:4px;text-align:left;font-size:12px;min-height:40px}.console-nav button[aria-selected=true]{background:#36332d;color:#f1e9db;box-shadow:inset 2px 0 var(--signal)}.console-nav button b{font-size:11px;background:var(--signal);color:#181817;border-radius:2px;padding:1px 4px;margin-left:auto}.console-nav-bottom{display:flex;gap:9px;align-items:center;margin-top:auto;padding:10px 7px;font:11px var(--mono);color:#a0a198}.console-content{padding:26px;min-width:0}.console-heading{display:flex;justify-content:space-between;gap:12px;font-size:14px}.console-heading .muted{font:11px var(--mono)}.demo-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--dark-line);margin:22px 0;padding:18px 0;gap:15px}.demo-metrics small{display:block;font-size:11px;color:#a5a49b}.demo-metrics strong{display:block;font-size:33px;font-weight:400;line-height:1.4;letter-spacing:-1px}.metric-check{font-size:15px;color:var(--green);padding-left:8px}.amber{color:var(--amber)}.workflow-row{display:flex;align-items:center;gap:12px}.workflow-icon{display:grid;place-items:center;width:31px;height:31px;background:#30332b;border:1px solid #474a40;border-radius:4px;color:var(--green);font-size:17px}.workflow-icon.amber{background:#383025;color:var(--amber);border-color:#514534}.workflow-row strong{display:block;font-size:12px;font-weight:500}.workflow-row small{display:block;font:11px var(--mono);color:#aaa99f;margin-top:4px}.badge{display:inline-block;padding:4px 7px;border:1px solid currentColor;border-radius:3px;font:11px/1.3 var(--mono);white-space:nowrap}.workflow-row .badge{margin-left:auto}.badge.green{color:#c0d4b3;background:#2a3525;border-color:#48563d}.badge.amber{color:#e9b981;background:#3b2e20;border-color:#66513a}.badge.red{color:#f4b5a9;background:#4d2622;border-color:#89534b}.mini-flow{display:flex;gap:10px;margin:15px 0 24px 43px;font:11px var(--mono);color:#9fa695}.mini-flow li+li:before{content:'→';margin-right:10px;color:#6e7366}.approval-notice{display:flex;gap:12px;padding:14px;margin-top:16px;background:#302b23;border:1px solid #534534;border-radius:4px}.approval-notice strong{font-size:12px;font-weight:500;color:#e1cfb6}.approval-notice p{font-size:12px;line-height:1.7;margin-top:6px}.console-link{display:inline-flex;align-items:center;min-height:42px;background:none;border:0;border-bottom:1px solid #8d6e46;color:#edc997;padding:5px 0;font-size:12px}.console-status{font:11px/1.6 var(--mono);margin-top:21px;color:#aaa89e;min-height:26px}.console-footer{border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:15px;padding:12px 20px;font:11px/1.5 var(--mono);color:#b4b2a6}.demo-approval h3{font-size:21px;line-height:1.2}.demo-approval p{font-size:14px;margin-top:14px}.demo-buttons{display:flex;gap:12px;margin-block:20px}.demo-buttons button{border:1px solid #89775e;border-radius:40px;padding:10px 18px;min-height:44px;background:#eac298;color:#211e19;font-size:12px}.demo-buttons button+button{background:none;color:#e3d6c4}.demo-audit li{font:12px/1.7 var(--mono);padding:13px 0;border-bottom:1px solid var(--dark-line);overflow-wrap:anywhere}.demo-audit span{display:block;font-size:11px;color:#a3a294;margin-bottom:4px}
/* Strong editorial pause, followed by the operating model. */
.problem{padding-block:130px;background:var(--wash)}.problem-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px}.problem-layout>div:first-child{grid-column:span 2}.problem h2{font-size:clamp(45px,6.2vw,100px);line-height:1;max-width:1180px}.problem h2 em{color:#77766f}.problem-layout>div:last-child{grid-column:2}.problem .lead{font-size:19px;color:var(--ink)}.problem p:not(.lead):not(.eyebrow){font-size:16px}.before-after{display:flex;gap:24px;align-items:center;border-top:1px solid #c7c3ba;margin-top:28px;padding-top:22px;font:12px/1.6 var(--mono)}.before-after>span:first-child{text-decoration:line-through;color:#7d7970}.before-after>span:nth-child(2){font-size:22px;color:var(--accent)}
.architecture-section{border-bottom:1px solid var(--line)}.architecture{padding:45px;background:#eeece6;border:1px solid var(--line);border-radius:8px}.architecture-systems{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:900px;margin:auto}.architecture-systems span{padding:12px;border:1px solid #c6c2b8;background:var(--paper);text-align:center;font:12px var(--mono);border-radius:4px}.architecture-connector{height:40px;width:75%;border-inline:1px solid #b9b4a9;border-bottom:1px solid #b9b4a9;margin:auto;position:relative}.architecture-connector:after{content:'';position:absolute;height:20px;bottom:-20px;left:50%;border-left:1px solid #b9b4a9}.architecture-core{padding:25px;border:1px solid #9d988c;background:#f8f7f3;border-radius:6px;margin-top:20px}.architecture-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:bold;letter-spacing:-.06em}.architecture-brand>span{font:11px var(--mono);letter-spacing:.08em;color:var(--muted);margin-left:auto}.architecture-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:25px}.architecture-step{min-height:122px;border:1px solid var(--line);padding:13px;background:var(--paper);display:flex;flex-direction:column;align-items:flex-start;gap:15px;border-radius:4px;font-size:14px}.architecture-step[aria-pressed=true]{border-color:var(--accent);background:#f1dfd5}.step-number{font:11px var(--mono);color:var(--muted)}.step-symbol{font-size:25px;line-height:1;color:var(--accent)}#architecture-detail{font-size:14px;min-height:25px;margin-top:20px}.architecture-outcomes{display:flex;justify-content:center;gap:60px;margin-top:28px;font:12px var(--mono);color:var(--muted)}.architecture-section .fine-print{margin-top:20px}
/* Four horizontal disciplines instead of another card grid. */
#solutions{background:var(--dark);color:var(--paper)}#solutions .eyebrow{color:var(--dark-muted)}#solutions .eyebrow span{color:var(--signal)}#solutions p{color:var(--dark-muted)}.solutions-editorial{border-top:1px solid var(--dark-line)}.solution{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;gap:25px 45px;border-bottom:1px solid var(--dark-line);padding:43px 0;align-items:start;transition:background .2s}.solution-top{display:flex;align-items:center;gap:24px}.solution-top>span:first-child{font:11px var(--mono);color:var(--signal)}.solution-top h3{font-size:30px;letter-spacing:-.055em}.solution-top>span:last-child{display:none}.solution h4{font-size:26px;font-weight:400;letter-spacing:-.035em;line-height:1.2}.solution>p{font-size:15px;line-height:1.8}.solution-flow{grid-column:2;font:11px/1.7 var(--mono);color:#c4baa9}.solution>.text-link{grid-column:3;font-size:12px;min-height:25px}.solutions-editorial+.fine-print{margin-top:22px}
/* Governance: a real, keyboard-operable decision example. */
.governance-section{background:var(--dark);color:var(--paper);border-top:1px solid var(--dark-line)}.governance-section h2{font-size:clamp(38px,4.2vw,65px)}.governance-section .lead{font-size:18px;margin:28px 0 20px}.governance-section .split>div>p:not(.lead){font-size:15px}.policy-questions{margin:28px 0}.policy-questions>div{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--dark-line)}.policy-questions dt{font:11px/1.7 var(--mono);color:#d2bda2}.policy-questions dd{font-size:12px;margin:0;text-align:right;color:var(--dark-muted)}.policy-console{border:1px solid #504b40;border-radius:8px;background:#24231f;overflow:hidden}.policy-form{padding:30px}.policy-form>label{display:flex;justify-content:space-between;font-size:12px;color:#d0cec3;margin-bottom:10px}.policy-form select{width:100%;background:#302e28;color:#f0ebe1;border:1px solid #625b4d;border-radius:4px;font-size:16px;min-height:48px;padding:12px;margin-bottom:22px}.policy-form .check-label{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px}.check-label input{accent-color:var(--signal);width:17px;height:17px}.policy-code{padding:18px;background:#191916;border:1px solid #423d33;border-radius:4px;font:12px/2 var(--mono);color:#c5c0b4;overflow-wrap:anywhere}.policy-code span{color:#847b6d;margin-right:12px}.policy-code b{color:#eabf8e;font-weight:400}.policy-result{padding:22px 0 0;min-height:123px}.policy-result p{font-size:14px;margin-top:12px}.policy-console .console-footer{color:#bbb09e}
/* Calculator has an editorial results panel and proper form affordances. */
.scanner-section{background:var(--wash)}.scanner-shell{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid #c7c1b6;border-radius:8px;overflow:hidden}.scanner-inputs{padding:40px;background:#f6f4ef}.scanner-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;font:11px var(--mono);letter-spacing:.04em;margin-bottom:30px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;min-width:0}.field label{font-size:12px;font-weight:600;line-height:1.5}.field input,.field select,.field textarea{width:100%;min-width:0;min-height:48px;background:transparent;border:1px solid #bcb7ac;padding:12px;border-radius:3px;color:var(--ink);font-size:16px}.field textarea{resize:vertical;min-height:110px}.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.field-error{font-size:12px;color:var(--red);line-height:1.6}.field-error:empty{display:none}.assumptions{border-block:1px solid var(--line);margin-block:5px 20px}.assumptions summary{cursor:pointer;min-height:48px;padding:13px 0;font-size:14px}.assumptions .field-grid{margin-top:15px}.assumptions p{font-size:12px;line-height:1.7;margin-bottom:20px}.scanner-inputs>.button{margin-top:20px;width:100%}.scanner-results{padding:40px;background:#20201c;color:var(--paper);display:flex;flex-direction:column}.scanner-results .scanner-heading{color:#c5c0b1}.estimate-label{font:11px var(--mono);padding:5px 7px;border:1px solid #6b624f;color:#e6c397;border-radius:3px}.score-row{display:flex;justify-content:space-between;gap:25px;border-bottom:1px solid #484438;padding-bottom:26px;align-items:center}.score-row p{font-size:14px;color:#d3cfc1}.score-row strong{display:block;font-size:76px;line-height:1.25;letter-spacing:-5px;font-weight:500}.score-row strong span{font-size:20px;letter-spacing:-1px;color:#b5ad98;margin-left:5px}.score-row small{font-size:12px;color:#bbb4a2}.score-ring{width:104px;height:104px;flex-shrink:0}.score-ring circle{fill:none;stroke:#4d4537;stroke-width:4}.score-ring circle+circle{stroke:var(--signal);transform:rotate(-90deg);transform-origin:center;stroke-linecap:round;transition:stroke-dasharray .3s}.score-ring path{fill:none;stroke:#edc49c;stroke-width:2}.result-metrics{display:flex;flex-direction:column;gap:24px;margin:28px 0}.result-metrics span{display:block;font-size:12px;color:#c1bba9}.result-metrics strong{display:block;font-size:43px;line-height:1.2;font-weight:400;letter-spacing:-2px;margin-top:6px}.result-metrics small{font-size:16px;letter-spacing:0}.scanner-results .recommendation{padding-top:20px;border-top:1px solid #484438;font-size:14px;color:#f0d2b0}.scanner-results .fine-print{font-size:12px;color:#bdb6a5;margin-top:15px}.scanner-results .button{margin-top:auto;align-self:flex-start}.scanner-results .fine-print+.button{margin-top:25px}.scanner-results.is-invalid{background:#392920}.optional{font-weight:400;color:var(--muted)}
/* Integration index, security principles and evidence. */
.integrations-section{border-bottom:1px solid var(--line)}.integrations-section h2+p{font-size:16px;max-width:430px;margin-top:26px}.integration-list details{border-bottom:1px solid var(--line)}.integration-list details:first-child{border-top:1px solid var(--line)}.integration-list summary{display:grid;grid-template-columns:95px 1fr 16px;gap:20px;align-items:center;list-style:none;cursor:pointer;padding:25px 0;min-height:76px}.integration-list summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}.integration-list summary>span:first-child{font:11px/1.6 var(--mono);color:var(--muted);text-transform:uppercase}.integration-list summary strong{font-size:18px;font-weight:400;letter-spacing:-.03em}.integration-list details p{font-size:15px;padding:0 28px 24px 115px}.integration-list>.fine-print{margin-top:20px}.security-section{padding-bottom:80px}.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.security-grid article{border-top:1px solid var(--line);padding-top:23px}.security-index{font:12px var(--mono);color:var(--accent)}.security-grid h3{font-size:21px;line-height:1.15;min-height:50px;margin:27px 0 15px}.security-grid p{font-size:15px;line-height:1.8}.security-note{border-block:1px solid var(--line);padding:23px 0;display:flex;align-items:center;gap:25px;margin-top:45px}.security-note>span{font-size:30px;color:var(--accent)}.security-note p{font-size:12px;flex:1}.security-note .text-link{white-space:nowrap;font-size:12px}.observability-section{padding-top:50px}.observability-section .lead{margin:25px 0 15px}.observability-section .split>div>p:not(.lead){font-size:16px}.observability-section .text-link{margin-top:15px}.trace-panel{border:1px solid #ccc6ba;border-radius:6px;background:#eae6dd;overflow:hidden}.trace-panel .console-bar{color:var(--ink);border-color:#ccc6ba}.trace-panel .demo-tag{color:#6f5034;border-color:#b5a087}.trace-list{padding:25px}.trace-list li{display:flex;gap:18px;position:relative;min-height:85px}.trace-list time{font:12px var(--mono);color:#7c6e59;padding-top:5px}.trace-dot{width:8px;height:8px;background:var(--accent);border:2px solid #e6d2bd;border-radius:50%;margin-top:6px;position:relative;z-index:1}.trace-list li:not(:last-child):after{content:'';position:absolute;left:82px;top:14px;bottom:-6px;width:1px;background:#bdb1a1}.trace-list strong{font:12px var(--mono);color:#4c4338}.trace-list p{font-size:12px;margin-top:6px}.trace-summary{display:flex;justify-content:space-between;padding:16px 25px;border-top:1px solid #ccc6ba;font:12px var(--mono)}.trace-panel>.fine-print{padding:5px 25px 20px;font-size:12px}.scenario-section{background:var(--wash)}.scenario-section h2+p{font-size:16px;margin-top:26px}.implementation-steps li{display:flex;gap:25px;border-top:1px solid #cbc5b9;padding:24px 0}.implementation-steps li>span{font:12px var(--mono);color:var(--accent)}.implementation-steps h3{font-size:22px;margin-bottom:13px}.implementation-steps p{font-size:15px}
/* Pricing and conversations: clear choices, not inflated claims. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.price-card{border:1px solid var(--line);padding:35px 28px;border-radius:6px;background:#eeece6}.price-card.featured{background:#20201d;color:var(--paper);border-color:#20201d}.price-label{font:12px var(--mono);letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;gap:10px}.price-label>span{font-size:11px;border:1px solid #807056;color:#e8bb87;padding:5px}.price-card>p{font-size:15px;margin-top:20px;min-height:42px}.price{margin:25px 0 32px;min-height:90px;display:flex;align-content:flex-start;flex-wrap:wrap;align-items:baseline;gap:0 8px}.price small{font-size:12px;width:100%;margin-bottom:8px;color:var(--muted)}.price strong{font-size:48px;font-weight:400;letter-spacing:-2.5px;line-height:1.2}.price>span{font-size:12px;color:var(--muted)}.price-card .button{width:100%;font-size:12px;gap:8px}.price-card ul{border-top:1px solid var(--line);padding-top:17px;margin-top:30px}.price-card li{font-size:14px;line-height:1.8;padding:7px 0;color:var(--muted)}.price-card.featured p,.price-card.featured li,.price-card.featured .price small,.price-card.featured .price>span{color:#bab8ab}.price-card.featured ul{border-color:#444238}.price-card.featured .button{background:#ece6d9;color:var(--ink)}.price-card.featured .button:hover{background:var(--signal);color:var(--ink)}.pricing-note p{font-size:12px;margin-top:24px;max-width:950px}.faq-section{border-top:1px solid var(--line);padding-top:85px}.faq-section h2+p{margin-top:25px;max-width:330px;font-size:16px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;padding:23px 0;font-size:16px;font-weight:500;min-height:70px}.faq-list summary>span{font-size:22px;font-weight:400;transition:transform .2s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details p{font-size:15px;line-height:1.8;padding:0 25px 25px 0}.contact-section{background:#d7d0c2;border-bottom:1px solid #b9b0a1}.contact-section h2{font-size:clamp(46px,5.2vw,82px)}.contact-section .lead{font-size:18px;margin-top:28px;max-width:450px}.contact-section .text-link{margin-top:22px}.contact-expectation{display:flex;flex-direction:column;margin-top:36px}.contact-expectation span{border-top:1px solid #b9b0a1;padding:14px 0;font:12px var(--mono);color:#5d5546}.contact-form{padding:32px;background:#eeebe3;border-radius:5px}.contact-form h3{font-size:30px}.contact-form>p:first-of-type{font-size:15px;margin:12px 0 28px}.contact-form .field-grid{gap:16px}.contact-form .fine-print{font-size:12px;margin-bottom:22px}.contact-form .button{width:100%}.contact-form-status{font-size:14px;min-height:20px;margin-top:15px;color:#355829}.contact-form-status.error{color:var(--red)}.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.footer{background:#191918;color:var(--paper);padding:0 0 25px}.footer-wordmark{font-size:clamp(100px,20vw,330px);font-weight:800;letter-spacing:-.075em;line-height:1.2;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3d3c36;margin-bottom:60px}.footer-wordmark>span{font-size:.5em;color:var(--signal);font-weight:400}.footer-top{display:flex;justify-content:space-between;gap:60px;padding-bottom:60px}.footer-top>div:first-child{max-width:260px}.footer-top p{font-size:16px;margin-top:25px;color:#a9a79b}.footer-links{display:flex;gap:80px}.footer-links>div{display:flex;flex-direction:column;gap:6px}.footer-links strong{font:11px var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-bottom:17px;color:#dad6c7}.footer-links a{font-size:14px;min-height:32px;display:flex;align-items:center;color:#b8b5a7}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #3d3c36;padding-top:25px;font:11px/1.8 var(--mono);color:#a9a597}.prose{max-width:820px;padding-block:100px;min-height:60vh}.prose h1{font-size:58px}.prose h2{font-size:28px;margin:42px 0 18px}.prose p{margin-top:20px}.prose a:not(.button){text-decoration:underline}.prose .button{margin-top:30px}
@keyframes sculpture-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}}}
@media(min-width:1700px){.hero-stage{padding-top:45px}.hero-headline{margin-top:115px;margin-bottom:55px;min-height:300px}.hero-sculpture{top:-52px;right:0;width:21%}.hero-bottom{padding-bottom:85px}.hero-copy .lead{font-size:28px}.hero-copy>p+p{font-size:17px}.console-body{grid-template-columns:170px 1fr;min-height:470px}.console-nav button{font-size:14px}.console-content{padding:30px}.workflow-row strong{font-size:15px}.workflow-row small,.badge,.mini-flow{font-size:12px}.approval-notice strong{font-size:15px}.approval-notice p{font-size:14px}.console-status{font-size:12px}.console-heading{font-size:16px}}
@media(max-width:1200px){.container{width:calc(100% - 72px)}.nav-bar{gap:22px}.nav-bar nav{gap:22px}.nav-actions{gap:20px}.hero-headline{margin-top:85px;min-height:210px}.hero h1{font-size:8.8vw}.hero-sculpture{width:20%;right:0;top:-40px}.hero-bottom{gap:40px}.hero-copy .lead{font-size:21px}.hero-actions{gap:17px}.hero-actions .button{font-size:12px;padding-inline:20px}.hero-actions .text-link{font-size:12px}.split{gap:55px}.product-stage{gap:35px;grid-template-columns:.55fr 1.45fr}.product-aside h3{font-size:29px}.console-body{grid-template-columns:120px 1fr}.console-nav{padding-inline:7px}.console-nav button{font-size:11px}.console-content{padding:20px}.solution{gap:25px;grid-template-columns:.85fr 1.1fr 1fr}.solution-top{gap:14px}.solution-top h3{font-size:27px}.solution h4{font-size:22px}.scanner-inputs,.scanner-results{padding:30px}.price-card{padding:30px 22px}.price-label>span{display:none}.footer-links{gap:45px}}
@media(max-width:1000px){.nav-bar{height:76px}.nav-bar nav{display:none}.menu-toggle{display:flex}.nav-bar nav.is-open{display:flex;position:absolute;top:76px;left:0;right:0;margin:0;padding:20px 36px 30px;align-items:stretch;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 15px 25px #19191815}.nav-bar nav.is-open a{padding:15px 0;border-bottom:1px solid var(--line)}.hero-headline{margin-top:85px;min-height:180px;margin-bottom:50px}.hero h1{font-size:8.9vw}.hero-sculpture{width:22%;top:-34px}.hero-bottom{grid-template-columns:.6fr 1.4fr}.hero-index{font-size:11px}.hero-copy{max-width:470px}.section{padding-block:85px}.product-intro{gap:45px}.product-intro>p{max-width:260px;font-size:16px}.product-stage{grid-template-columns:1fr}.product-aside{display:none}.command-center{width:100%}.console-body{grid-template-columns:170px 1fr}.console-nav button{font-size:14px;padding:12px}.console-content{padding:28px}.workflow-row strong{font-size:15px}.workflow-row small,.mini-flow{font-size:12px}.approval-notice strong{font-size:15px}.approval-notice p{font-size:14px}.console-status{font-size:11px}.architecture{padding:25px}.architecture-steps{gap:6px}.architecture-step{padding:12px 8px;font-size:12px;min-height:114px}.architecture-outcomes{gap:25px;font-size:11px}.solution{grid-template-columns:.85fr 1.2fr}.solution>p{grid-column:2}.solution-flow{grid-column:2}.solution>.text-link{grid-column:2}.solution-top{grid-row:span 3}.governance-section .split{gap:35px}.policy-form{padding:24px}.policy-questions>div{flex-direction:column;gap:5px}.policy-questions dd{text-align:left}.scanner-shell{grid-template-columns:1fr 1fr}.field-grid{gap:14px}.field label{font-size:12px}.score-ring{width:85px;height:85px}.score-row strong{font-size:62px}.security-grid{grid-template-columns:repeat(2,1fr);gap:40px}.security-grid h3{min-height:0}.price strong{font-size:38px}.price-card{padding:26px 18px}.price-card .button{padding-inline:12px;font-size:12px}.price-card li{font-size:12px}.footer-top{gap:40px}.footer-links{gap:30px}.footer-links a{font-size:12px}}
@media(max-width:760px){.container{width:calc(100% - 40px)}.nav-bar{height:70px;gap:15px}.brand{font-size:26px}.brand-mark{width:36px;height:23px}.nav-actions{gap:18px}.nav-cta{display:none}.nav-bar nav.is-open{top:70px;padding-inline:20px}.hero-stage{padding-top:24px}.hero-kicker{font-size:11px;letter-spacing:.06em}.hero-kicker>span:last-child{display:none}.hero-headline{margin-top:110px;margin-bottom:30px;min-height:0}.hero h1{font-size:10.15vw;letter-spacing:-.065em;line-height:.99}.hero-sculpture{width:30%;max-width:130px;right:0;top:-30px}.hero-bottom{grid-template-columns:1fr;gap:0;padding-bottom:35px}.hero-index{display:none}.hero-copy{max-width:520px}.hero-copy .lead{font-size:21px;max-width:270px}.hero-copy>p+p{font-size:15px;line-height:1.75;max-width:350px;margin-top:14px}.hero-actions{gap:18px;margin-top:22px;flex-wrap:wrap}.hero-actions .button{min-height:47px;font-size:12px;padding-inline:20px}.hero-actions .text-link{font-size:12px}.hero-scroll{font-size:11px;letter-spacing:.07em;padding:19px 0}.compatibility{padding:23px 0}.compatibility .container>p:first-child{font-size:11px}.wordmarks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 15px;font-size:21px;margin:23px 0}.wordmarks .exact-word{font-size:27px}.wordmarks .microsoft-word{font-size:16px;letter-spacing:-.5px}.wordmarks .api-word{font-size:15px}.compatibility .fine-print{font-size:11px;max-width:480px;margin:auto}.section{padding-block:64px}h2{font-size:39px;letter-spacing:-.055em}h2 br{display:initial}.eyebrow{font-size:11px;gap:10px;margin-bottom:24px}.section-heading{margin-bottom:35px}.section-heading>p:last-child{font-size:16px;margin-top:20px}.split{grid-template-columns:1fr;gap:35px}.product-intro{display:block;margin-bottom:32px}.product-intro>p{max-width:400px;font-size:15px;margin-top:23px}.product-caption{font-size:11px;letter-spacing:0;gap:20px;line-height:1.7}.console-bar{padding:14px 12px;font-size:11px;min-height:48px}.console-path{display:none}.demo-tag{font-size:11px;padding:4px 5px}.console-body{display:flex;flex-direction:column;min-height:0}.console-nav{flex-direction:row;border-right:0;border-bottom:1px solid var(--dark-line);padding:6px;gap:3px}.console-nav button{flex:1;font-size:11px;justify-content:center;padding:10px 6px;min-height:44px;gap:5px}.console-nav button b{display:none}.console-nav button[aria-selected=true]{box-shadow:inset 0 -2px var(--signal)}.console-nav-bottom{display:none}.console-content{padding:19px 14px}.console-heading{font-size:12px}.console-heading .muted{font-size:11px}.demo-metrics{margin:18px 0;padding:13px 0;gap:9px}.demo-metrics small{font-size:11px}.demo-metrics strong{font-size:30px}.workflow-row{gap:9px}.workflow-row strong{font-size:12px}.workflow-row small{font-size:11px}.workflow-row .badge{font-size:11px;padding:4px}.workflow-icon{width:26px;height:28px}.mini-flow{font-size:11px;gap:8px;margin-left:35px}.mini-flow li+li:before{margin-right:8px}.approval-notice{padding:12px 10px;gap:8px}.approval-notice strong{font-size:12px}.approval-notice p{font-size:12px}.console-status,.console-footer{font-size:11px}.console-footer{padding-inline:12px}.demo-approval h3{font-size:20px}.demo-audit li{font-size:12px}.problem-layout{display:block}.problem h2{font-size:10vw;line-height:1.05}.problem-layout>div:last-child{margin-top:35px;max-width:500px}.problem .lead{font-size:18px}.problem p:not(.lead):not(.eyebrow){font-size:15px}.before-after{font-size:11px;gap:15px}.architecture{padding:20px 12px}.architecture-systems{grid-template-columns:repeat(3,1fr);gap:7px}.architecture-systems span{font-size:11px;padding:10px 4px}.architecture-connector{height:25px;width:60%}.architecture-core{padding:18px 10px}.architecture-brand{font-size:18px}.architecture-brand>span{font-size:11px}.architecture-steps{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.architecture-step{font-size:12px;gap:10px;min-height:100px;padding:12px 9px}.architecture-outcomes{flex-wrap:wrap;gap:12px 20px;font-size:11px;margin-top:20px}#architecture-detail{font-size:12px;min-height:38px}.architecture-section .fine-print{font-size:12px}.solution{grid-template-columns:1fr;padding:30px 0;gap:20px}.solution-top{grid-row:auto;gap:20px}.solution-top h3{font-size:30px}.solution-top>span:last-child{display:block;margin-left:auto;font-size:23px;color:var(--signal)}.solution>p,.solution-flow,.solution>.text-link{grid-column:1}.solution h4{font-size:25px;max-width:350px}.solution>p{max-width:500px;font-size:15px}.solution-flow{font-size:11px}.solution>.text-link{font-size:12px}.governance-section h2{font-size:39px}.governance-section .lead{font-size:18px}.policy-questions>div{flex-direction:row;gap:20px}.policy-questions dd{text-align:right;font-size:12px}.policy-questions dt{font-size:11px}.policy-form{padding:22px}.policy-form select{font-size:17px}.scanner-shell{grid-template-columns:1fr}.scanner-inputs,.scanner-results{padding:26px 20px}.scanner-heading{font-size:11px;margin-bottom:25px}.field-grid{gap:14px}.field label{font-size:12px}.field input,.field select,.field textarea{font-size:17px}.assumptions p{font-size:12px}.score-row strong{font-size:70px}.result-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px}.result-metrics strong{font-size:29px;letter-spacing:-1px}.result-metrics small{font-size:12px}.result-metrics span{font-size:12px;min-height:32px}.score-ring{width:95px;height:95px}.scanner-results .recommendation{font-size:14px}.integration-list summary{grid-template-columns:80px 1fr 12px;gap:12px}.integration-list summary>span:first-child{font-size:11px}.integration-list summary strong{font-size:17px}.integration-list details p{padding-left:0;font-size:14px}.security-grid{gap:32px 20px}.security-grid h3{font-size:21px;margin:22px 0 14px;line-height:1.15}.security-grid p{font-size:14px}.security-note{flex-wrap:wrap;gap:15px}.security-note p{font-size:12px}.security-note .text-link{width:100%;margin-left:38px}.observability-section{padding-top:0}.trace-panel .demo-tag{font-size:11px}.trace-list{padding:23px 16px}.trace-list li{gap:12px}.trace-list strong{font-size:12px}.trace-list li:not(:last-child):after{left:76px}.trace-summary{font-size:11px;padding-inline:16px}.trace-panel>.fine-print{padding-inline:16px;font-size:11px}.implementation-steps h3{font-size:21px}.pricing-grid{grid-template-columns:1fr;gap:18px}.price-card{padding:32px 25px}.price-card>p{min-height:0}.price{min-height:0;margin:24px 0}.price strong{font-size:47px}.price-card .button{font-size:14px}.price-card li{font-size:14px}.price-label>span{display:block}.pricing-note p{font-size:12px}.faq-section h2+p{font-size:16px}.faq-list summary{font-size:15px;gap:18px}.faq-list details p{font-size:14px}.contact-section h2{font-size:11vw}.contact-section .lead{font-size:17px}.contact-form{padding:27px 20px}.contact-form .field-grid{grid-template-columns:1fr;gap:0}.contact-form h3{font-size:27px}.footer-wordmark{margin-bottom:40px;font-size:21.2vw;padding-block:15px}.footer-top{flex-direction:column;gap:36px;padding-bottom:35px}.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:35px}.footer-links>div:last-child{grid-column:span 2}.footer-links a{font-size:14px}.footer-bottom{font-size:11px;flex-wrap:wrap;gap:15px}.footer-bottom>span:nth-child(2){display:none}.prose{padding-block:60px}.prose h1{font-size:40px}.prose h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}
@media print{.site-header,.footer,button,.hero-sculpture{display:none}.section{break-inside:avoid;padding-block:30px}.container{width:100%}body,.product-section,.governance-section,#solutions{color:#000;background:#fff}}

/* ── Investering: genummerde volvlak-blokken. Eigen palet (papier / inkt /
      accent), eigen inhoud — alleen de afwerking is opgetrokken. ── */
.tier-stack{border-top:1px solid var(--line)}
.tier{position:relative;display:grid;grid-template-columns:auto 1.05fr 1.15fr auto;gap:46px;
  align-items:start;padding:54px 0;border-bottom:1px solid var(--line)}
/* Volvlak tot buiten de container, zonder horizontale scrollbalk. */
.tier::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);z-index:-1}
.tier-n{font-size:clamp(58px,6.4vw,104px);font-weight:800;letter-spacing:-.07em;line-height:.82;
  min-width:1.6em;color:var(--accent)}
.tier-main h3{font-size:30px;letter-spacing:-.04em}
.tier-main p{font-size:16px;margin-top:12px;max-width:34ch}
.tier-flag{display:inline-block;margin-top:16px;padding:5px 9px;font:11px var(--mono);
  letter-spacing:.1em;border:1px solid currentColor;opacity:.75}
.tier-list{display:grid;gap:9px;padding-top:9px}
.tier-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:var(--muted)}
.tier-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--accent)}
.tier-end{display:grid;gap:16px;justify-items:end;text-align:right;min-width:190px}
.tier-end .price{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.tier-end .price strong{font-size:38px;letter-spacing:-.04em}
.tier-end .price small,.tier-end .price>span{font:12px var(--mono);color:var(--muted)}
.tier-end .button{width:100%;justify-content:space-between}

/* 01 papier · 02 inkt · 03 accent — ritme, zoals de rest van de pagina. */
.tier-1{color:var(--paper)}
.tier-1::before{background:var(--dark)}
.tier-1 .tier-n{color:var(--signal)}
.tier-1 .tier-list li::before{background:var(--signal)}
.tier-1 .tier-list li,.tier-1 .tier-main p,.tier-1 .price small,.tier-1 .price>span{color:var(--dark-muted)}
.tier-2{color:#fff}
.tier-2::before{background:var(--accent)}
.tier-2 .tier-n{color:#fff;opacity:.9}
.tier-2 .tier-list li,.tier-2 .tier-main p,.tier-2 .price small,.tier-2 .price>span{color:rgba(255,255,255,.82)}
.tier-2 .tier-list li::before{background:#fff}

@media (max-width:1000px){
  .tier{grid-template-columns:auto 1fr;gap:26px 30px;padding:40px 0}
  .tier-list,.tier-end{grid-column:1/-1}
  .tier-end{justify-items:start;text-align:left}
  .tier-end .button{width:auto;min-width:230px}
}

/* ── 14. Slotmoment. Volle breedte, donker, schermvullend gevoel.
      Het formulier zelf is ongemoeid gelaten (velden, namen, validatie
      en verzendlogica gaan naar de governance-API) — alleen de
      presentatie is opgetrokken. ── */
.contact-section{background:var(--graphite);color:var(--paper);border-bottom:none;
  min-height:72vh;display:grid;align-content:center;padding-block:120px}
.contact-section .split{gap:90px;align-items:center}
.contact-section .eyebrow{color:var(--dark-muted)}
.contact-section .eyebrow>span:first-child{color:var(--signal)}
.contact-section h2{font-size:clamp(52px,6.4vw,104px);line-height:.98;letter-spacing:-.055em}
.contact-section h2 em{color:var(--signal)}
.contact-section .lead{color:var(--dark-muted);font-size:19px;max-width:44ch}
.contact-section .text-link{color:var(--paper)}
.contact-section .text-link:hover{color:var(--signal)}
.contact-expectation{display:grid;gap:10px;margin-top:38px;padding-top:26px;
  border-top:1px solid var(--dark-line)}
.contact-expectation span{font:12px var(--mono);letter-spacing:.06em;color:var(--dark-muted)}

/* Formulier op donkere ondergrond. */
.contact-section .contact-form{background:var(--dark-surface);border:1px solid var(--dark-line);
  padding:40px;border-radius:8px}
.contact-section .contact-form h3{font-size:32px;letter-spacing:-.04em}
.contact-section .contact-form>p:first-of-type{color:var(--dark-muted)}
.contact-section .contact-form label{color:var(--dark-muted)}
.contact-section .contact-form input,.contact-section .contact-form textarea{
  background:#141615;border:1px solid var(--dark-line);color:var(--paper)}
.contact-section .contact-form input:focus,.contact-section .contact-form textarea:focus{
  border-color:var(--signal);outline:none}
.contact-section .contact-form .optional{color:#7b7972}
.contact-section .contact-form .button{background:var(--signal);color:#161817;border-color:var(--signal)}
.contact-section .contact-form .button:hover{background:var(--paper);color:var(--ink)}

@media (max-width:1000px){
  .contact-section{min-height:0;padding-block:80px}
  .contact-section .split{gap:48px}
}

/* ── 05. Diensten: grote genummerde blokken met wisselende compositie.
      Geen kaartjes — editorial rijen die om en om spiegelen. ── */
.solutions-editorial{border-top:1px solid var(--dark-line)}
.solution{display:grid;grid-template-columns:minmax(150px,0.5fr) 1.5fr;gap:34px 64px;
  align-items:start;padding:72px 0;border-bottom:1px solid var(--dark-line);transition:none}
.solution-n{font-size:clamp(66px,7.2vw,124px);font-weight:800;letter-spacing:-.07em;
  line-height:.8;color:var(--signal)}
.solution-body{max-width:72ch}
.solution-body h3{font-size:clamp(30px,2.6vw,42px);letter-spacing:-.05em}
.solution-body h4{font-size:clamp(22px,1.9vw,30px);font-weight:400;letter-spacing:-.03em;
  line-height:1.25;margin-top:14px;color:var(--dark-muted)}
.solution-body>p{font-size:17px;line-height:1.7;margin-top:22px;max-width:56ch}
.solution-flow{margin-top:26px;padding:14px 18px;border:1px solid var(--dark-line);
  border-radius:5px;display:table;font:13px/1.6 var(--mono);color:#cfc6b6}
.solution-body>.text-link{display:inline-flex;margin-top:22px;font-size:13px}
/* Om en om spiegelen: 02 en 04 krijgen het nummer rechts. */
.solution:nth-child(even){grid-template-columns:1.5fr minmax(150px,0.5fr)}
.solution:nth-child(even) .solution-n{grid-column:2;grid-row:1;justify-self:end}
.solution:nth-child(even) .solution-body{grid-column:1;grid-row:1}

@media (max-width:1000px){
  .solution,.solution:nth-child(even){grid-template-columns:1fr;gap:18px;padding:48px 0}
  .solution:nth-child(even) .solution-n,.solution:nth-child(even) .solution-body{grid-column:1}
  .solution:nth-child(even) .solution-n{grid-row:1;justify-self:start}
  .solution:nth-child(even) .solution-body{grid-row:2}
}

/* ── 08. Productshowcase groter: het Command Center is het bewijs,
      niet een plaatje in een kaartje. ── */
.product-stage{grid-template-columns:.52fr 1.48fr;gap:70px}
.console-body{min-height:560px;grid-template-columns:190px 1fr}
.console-bar{min-height:60px;font-size:13px}

/* ── 12. Werkwijze: grote nummers, ruimere stappen, 3 per rij i.p.v. 6
      opeengepakte hokjes. ── */
.architecture{padding:56px}
.architecture-steps{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.architecture-step{min-height:170px;padding:22px;gap:12px;font-size:15px;border-radius:6px}
.step-number{font:700 clamp(30px,3vw,46px)/1 var(--font);letter-spacing:-.05em;color:var(--accent)}
.step-symbol{font-size:22px;color:var(--muted)}

/* ── 10. Scanner: groot getal, groot resultaat. Berekening ongewijzigd. ── */
.score-ring{width:152px;height:152px}
.scanner-inputs,.scanner-results{padding:52px}
.scanner-results .score-row{padding-bottom:34px}

@media (max-width:1000px){
  .product-stage{grid-template-columns:1fr;gap:38px}
  .console-body{min-height:0;grid-template-columns:1fr}
  .architecture{padding:30px}
  .architecture-steps{grid-template-columns:1fr 1fr;gap:12px}
  .scanner-inputs,.scanner-results{padding:32px}
  .score-ring{width:118px;height:118px}
}

/* ── Scroll-effecten. De verborgen begintoestand geldt ALLEEN als het
      script draait (html.js-anim). Faalt het script, dan staat er niets
      op onzichtbaar — dat was de fout van de vorige poging. ── */
.js-anim [data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.js-anim [data-rv].rv-in{opacity:1;transform:none}
/* Koppen: onthullen achter een masker i.p.v. simpel opdoemen. */
.js-anim h2[data-rv],.js-anim h1[data-rv]{clip-path:inset(0 0 105% 0);transform:none;
  transition:clip-path 1s cubic-bezier(.16,1,.3,1),opacity .6s ease}
.js-anim h2[data-rv].rv-in,.js-anim h1[data-rv].rv-in{clip-path:inset(0 0 -18% 0)}
/* Gestapelde binnenkomst binnen één blok. */
.js-anim [data-rv][data-rv-d="1"]{transition-delay:.09s}
.js-anim [data-rv][data-rv-d="2"]{transition-delay:.18s}
.js-anim [data-rv][data-rv-d="3"]{transition-delay:.27s}
/* Productpaneel komt met diepte binnen — het enige filmische moment. */
.js-anim .product-stage [data-rv]{transform:translateY(46px) scale(.965);transform-origin:50% 100%}
.js-anim .product-stage [data-rv].rv-in{transform:none}
/* Subtiele parallax op het logo. */
.js-anim .hero-sculpture{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .js-anim [data-rv]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none}
  .js-anim .hero-sculpture{transform:none!important}
}

/* ── 06. Processbeeld: de vijf bronsystemen lopen zichtbaar samen in de
      controlelaag. Zelf getekend in SVG — geen externe afbeelding. ── */
.architecture-fan{width:100%;height:96px;display:block;margin:6px 0 4px;overflow:visible}
.architecture-fan path{fill:none;stroke:var(--accent);stroke-width:1.25;opacity:.5;
  vector-effect:non-scaling-stroke}
/* Lijnen tekenen zichzelf zodra het blok in beeld komt. */
.js-anim .architecture-fan path{stroke-dasharray:180;stroke-dashoffset:180;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1)}
.js-anim [data-rv].rv-in .architecture-fan path{stroke-dashoffset:0}
.js-anim .architecture-fan path:nth-child(2){transition-delay:.1s}
.js-anim .architecture-fan path:nth-child(3){transition-delay:.2s}
.js-anim .architecture-fan path:nth-child(4){transition-delay:.3s}
.js-anim .architecture-fan path:nth-child(5){transition-delay:.4s}
.architecture-systems span{border:1px solid var(--line);background:var(--paper);
  border-radius:5px;padding:14px 10px;text-align:center;font:13px var(--mono);letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){
  .js-anim .architecture-fan path{stroke-dashoffset:0;transition:none}
}

/* ── 24. Cursor-interacties. Alleen op desktop met een echte muis;
      aanraakschermen en reduced-motion krijgen hier niets van mee. ── */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),
    rgba(255,255,255,.07),transparent 62%)}
.spot.spot-on::after{opacity:1}
/* Lichte ondergrond: donkere in plaats van lichte gloed. */
.spot-light::after{background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),
  rgba(17,19,18,.05),transparent 62%)}
/* Rand reageert op de cursor. */
.spot{transition:border-color .45s ease}
.spot.spot-on{border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
/* Magnetische knop: verplaatsing blijft binnen een paar pixels. */
.magnetic{will-change:transform;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.magnetic.mag-on{transition:transform .08s linear}
.magnetic>*{display:inline-flex;align-items:center;gap:inherit;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
/* Diepte op geselecteerde visuals: maximaal anderhalve graad. */
.depth{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.depth.depth-on{transition:transform .12s linear}

@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .spot::after{display:none}
  .magnetic,.depth{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════════════
   DONKER ALS BASIS — ~75% donker, ~25% licht.
   Licht blijft alleen waar het als contrastmoment werkt: de hero, de
   scanner en de FAQ. Alle overige secties gaan naar inkt/grafiet,
   inclusief de lichte panelen die erin zaten.
   ═══════════════════════════════════════════════════════════════════ */
.compatibility,.problem,.architecture-section,.integrations-section,
.security-section,.observability-section,.scenario-section,#pricing{
  background:var(--dark);color:var(--paper);border-color:var(--dark-line)}
.problem,.observability-section,#pricing{background:var(--graphite)}

/* Tekst en lijnen binnen de omgeklapte secties. */
.compatibility p,.problem p,.architecture-section p,.integrations-section p,
.security-section p,.observability-section p,.scenario-section p,#pricing p,
.compatibility .fine-print,.architecture-section .fine-print,#pricing .fine-print{color:var(--dark-muted)}
.compatibility,.problem,.architecture-section,.integrations-section,
.security-section,.observability-section,.scenario-section,#pricing{border-top-color:var(--dark-line)}
.architecture-section,.scenario-section{border-bottom:1px solid var(--dark-line)}

/* Panelen die licht waren, worden donkere oppervlakken. */
.architecture{background:var(--dark-surface);border-color:var(--dark-line)}
.architecture-core{background:#191b1a;border-color:var(--dark-line)}
.architecture-step{background:#1c1e1d;border-color:var(--dark-line);color:var(--paper)}
.architecture-step[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 22%,#1c1e1d);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--dark-line))}
.architecture-systems span{background:#1c1e1d;border-color:var(--dark-line);color:var(--dark-muted)}
.architecture-fan path{stroke:var(--signal);opacity:.6}
.step-symbol{color:var(--dark-muted)}
.architecture-outcomes span,.architecture-brand span{color:var(--dark-muted)}

/* Wordmarks in de integratiestrip. */
.wordmarks{color:#8d918e}

/* Investering: 01 wordt nu het donkere blok, 02 grafiet, 03 accent. */
.tier-0{color:var(--paper)}
.tier-0::before{background:var(--dark-surface)}
.tier-0 .tier-list li,.tier-0 .tier-main p,.tier-0 .price small,.tier-0 .price>span{color:var(--dark-muted)}
.tier-1::before{background:#101211}
.tier-stack{border-top-color:var(--dark-line)}
.tier{border-bottom-color:var(--dark-line)}
.tier-0 .button{background:var(--paper);color:var(--ink)}

/* Losse kaarten/randen die nog van het lichte thema waren. */
.security-section .container>*,.observability-section .container>*,
.scenario-section .container>*{border-color:var(--dark-line)}

/* De lichte eilanden die blijven: hero, scanner, FAQ. */
.hero,.scanner-section,.faq-section{background:var(--paper);color:var(--ink)}
.faq-section{border-top-color:var(--line)}

/* ── Leesbaarheid op de donkere basis.
      Het accent #8c3230 heeft te weinig contrast op inkt/grafiet; op
      donkere vlakken gebruiken we daarom de lichtere signaalkleur.
      Alles wat nog expliciet inktzwart was, wordt papier. ── */
.compatibility,.problem,.architecture-section,.integrations-section,
.security-section,.observability-section,.scenario-section,#pricing,
.product-section,.governance-section,#solutions,.contact-section{color:var(--paper)}

.compatibility h1,.compatibility h2,.compatibility h3,.compatibility h4,
.problem h1,.problem h2,.problem h3,.problem h4,.problem .lead,.problem p,
.architecture-section h2,.architecture-section h3,.architecture-section h4,
.integrations-section h2,.integrations-section h3,.integrations-section h4,
.security-section h2,.security-section h3,.security-section h4,
.observability-section h2,.observability-section h3,.observability-section h4,
.scenario-section h2,.scenario-section h3,.scenario-section h4,
#pricing h2,#pricing h3,#pricing h4{color:var(--paper)}

.problem .lead{color:var(--paper)}
.problem p+p,.problem .fine-print{color:var(--dark-muted)}

/* Accenten op donker: de lichtere variant. */
.problem .eyebrow>span:first-child,.compatibility .eyebrow>span:first-child,
.architecture-section .eyebrow>span:first-child,.integrations-section .eyebrow>span:first-child,
.security-section .eyebrow>span:first-child,.observability-section .eyebrow>span:first-child,
.scenario-section .eyebrow>span:first-child,#pricing .eyebrow>span:first-child,
.problem em,.architecture-section em,.integrations-section em,.security-section em,
.observability-section em,.scenario-section em,#pricing em,
.tier-n,.step-number,.solution-n,
.tier-list li::before,.problem .crosshair{color:var(--signal)}
.tier-list li::before{background:var(--signal)}
.tier-2 .tier-n{color:#fff;opacity:.92}
.tier-2 .tier-list li::before{background:#fff}
.tier-2 em,.tier-2 h3{color:#fff}

/* Muted tekst overal op donker gelijktrekken. */
.compatibility .fine-print,.architecture-section .fine-print,#pricing .fine-print,
.scenario-section .fine-print,.security-section .fine-print,
.observability-section .fine-print,.integrations-section .fine-print,
.problem .wf-label,.architecture-outcomes span{color:#9ba09d}

/* ── Tokens omzetten binnen de donkere secties.
      Elke bestaande regel die var(--muted), var(--line), var(--ink) of
      var(--accent) gebruikt, past zich hierdoor vanzelf aan. Dat is
      betrouwbaarder dan tientallen losse selectors patchen. ── */
.compatibility,.problem,.architecture-section,.integrations-section,
.security-section,.observability-section,.scenario-section,#pricing,
.product-section,.governance-section,#solutions,.contact-section,.flowmap-section{
  --ink:#f6f6f2;
  --muted:#a5aaa7;
  --line:#3a3c3a;
  --accent:#c4645c;
  --white:#1c1e1d;
  --paper:#f6f6f2;
  --wash:#1c1e1d;
}
/* Het accentblok in de tarieven houdt de volle merkkleur. */
.tier-2::before{background:#8c3230}

/* ── Laatste lichte panelen die nog hardgecodeerd waren. ── */
.trace-panel{background:#1a1c1b;border-color:var(--dark-line)}
.trace-summary{border-top-color:var(--dark-line);color:#a5aaa7}
.trace-dot{border-color:#2a2c2b;background:var(--signal)}
.trace-list li,.trace-list span{color:#c9cdca}
.trace-list strong,.trace-list b{color:var(--paper)}
/* Warme greys uit het lichte thema die op donker net te dof uitvielen. */
.compatibility .fine-print,.wordmarks,.hero-kicker,.hero-scroll,
.solution-flow,.architecture-outcomes span,.price-note,.pricing-note p{color:#a5aaa7}
.eyebrow{color:#a5aaa7}
.hero .eyebrow,.scanner-section .eyebrow,.faq-section .eyebrow{color:var(--muted)}

/* De lichtgrijze tinten horen alleen op donker; in de hero (licht) gaan
   ze terug naar de donkere muted-kleur, anders zakt het contrast weg. */
.hero .eyebrow,.hero .hero-kicker,.hero .hero-scroll,.hero .hero-index,
.scanner-section .eyebrow,.faq-section .eyebrow{color:var(--muted)}
.hero .hero-kicker>span,.hero .hero-scroll>span{color:var(--muted)}
.compatibility{--muted:#a5aaa7}

/* ═══════════════════════════════════════════════════════════════════
   KETENWEERGAVE — knooppunten met getekende verbindingen.
   De lijnen worden in app.js berekend uit de werkelijke posities van de
   knooppunten, niet vastgelegd in de opmaak: daardoor klopt het beeld
   op elke breedte en na elke tekstwijziging.
   ═══════════════════════════════════════════════════════════════════ */
.flowmap-section{background:var(--graphite)}
.flowmap{position:relative;margin-top:16px}
.flowmap-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flowmap-lines path{fill:none;stroke:var(--signal);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:4 7;opacity:.55;vector-effect:non-scaling-stroke}
.js-anim .flowmap-lines path{stroke-dashoffset:var(--len,400);
  transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1)}
.js-anim .flowmap.rv-in .flowmap-lines path{stroke-dashoffset:0}

.flowrow{position:relative;z-index:1;display:grid;gap:22px;justify-content:center;margin-bottom:96px}
.flowrow-core{margin-bottom:96px}
.flowrow>.fnode{height:100%}
.flowrow-top,.flowrow-bottom{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.flowrow-core{grid-template-columns:minmax(0,440px);justify-content:center}
.flowrow:last-child{margin-bottom:0}

.fnode{background:#15171680;backdrop-filter:blur(4px);border:1px solid #2c302e;
  border-radius:10px;padding:18px 20px 20px;transition:border-color .3s ease,transform .3s ease}
.fnode:hover{border-color:#4a524e;transform:translateY(-2px)}
.fnode-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.fnode-tag{font:11px var(--mono);letter-spacing:.09em;padding:4px 8px;border-radius:4px;
  border:1px solid var(--dark-line);color:#a5aaa7;background:#1b1d1c}
.fnode-layer{font:11px var(--mono);letter-spacing:.08em;color:#6f7673}
.fnode h3{font-size:19px;letter-spacing:-.025em;color:#f6f6f2}
.fnode p{font-size:13px;line-height:1.55;margin-top:7px;color:#9ba09d}

/* Onderscheid via gewicht en één accent, niet via losse kleuren:
   de controlelaag en het menselijke akkoord zijn de twee momenten die
   er in dit verhaal toe doen. De rest blijft neutraal. */
#fn-core{border-color:#5a3a37;background:#1d171680}
#fn-core .fnode-tag{color:var(--signal);border-color:#5a3a37;background:#241a19}
#fn-core h3{font-size:26px;letter-spacing:-.045em}
#fn-human{border-color:#4a3330}
#fn-human .fnode-tag{color:var(--signal);border-color:#4a3330;background:#221a19}
#fn-result{border-color:#3a403d}

@media (max-width:1000px){
  .flowrow-top,.flowrow-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flowrow{margin-bottom:40px;gap:16px}
  .flowmap-lines{display:none}
}
@media (max-width:560px){
  .flowrow-top,.flowrow-bottom,.flowrow-core{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .flowmap-lines path{stroke-dashoffset:0;transition:none}
}

/* ── Fase 3. Woordmerk linksboven: ~20% groter en in dezelfde
      letterafstand als het grote SEMQO onderaan, zodat het één merk
      blijft in plaats van twee verschillende weergaven. ── */
.site-header .brand{font-size:34px;letter-spacing:-.062em;gap:0;line-height:1;
  align-self:center;padding-block:2px}
.site-header .nav-bar{gap:44px}
.site-header .nav-bar nav{gap:32px}
.site-header .nav-bar nav a{font-size:13px}

/* ── Fase 4. Sectielabels overal identiek: één grootte, één kleur,
      één letterafstand, één afstand tot de kop. ── */
.eyebrow{font:12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:26px;gap:14px;color:#a5aaa7}
.eyebrow>span:first-child{color:var(--signal);font-weight:500}
.hero .eyebrow,.scanner-section .eyebrow,.faq-section .eyebrow{color:var(--muted)}
.hero .eyebrow>span:first-child,.scanner-section .eyebrow>span:first-child,
.faq-section .eyebrow>span:first-child{color:var(--accent)}

/* ── Fase 3 (mobiel). ── */
@media (max-width:1000px){.site-header .brand{font-size:30px}.site-header .nav-bar{gap:20px}}
@media (max-width:560px){.site-header .brand{font-size:27px}}

/* Mobiel/tablet: geen lijnenwirwar maar een simpele richtingaanduiding. */
@media (max-width:1000px){
  .flowrow{margin-bottom:34px}
  .flowrow-top::after,.flowrow-core::after{content:"\2193";display:block;grid-column:1/-1;
    text-align:center;margin-top:26px;font-size:20px;color:var(--signal);opacity:.75}
}

/* ── Fase 7. Slide-in en stagger.
      Timing en easing volgens opgaaf: 700-900ms, cubic-bezier(.22,1,.36,1).
      Richting wordt in app.js toegekend op basis van de kolompositie. ── */
.js-anim [data-rv]{transition-duration:.8s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.js-anim [data-rv="left"]{opacity:0;transform:translateX(-40px)}
.js-anim [data-rv="right"]{opacity:0;transform:translateX(40px)}
.js-anim [data-rv="left"].rv-in,.js-anim [data-rv="right"].rv-in{opacity:1;transform:none}

/* Stagger binnen een groep kaarten: 0 / 100 / 200 / 300 ms. */
.js-anim [data-stagger]{opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.js-anim [data-stagger].rv-in{opacity:1;transform:none}

/* Stappen 01-04: ingetogen tot ze aan de beurt zijn. */
.js-anim .solution-n,.js-anim .tier-n{opacity:.35;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.js-anim .solution.rv-in .solution-n,.js-anim .tier.rv-in .tier-n{opacity:1}

/* Fase 11. Micro-interacties. */
.button{transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s ease,color .2s ease}
.button:hover{transform:translateY(-2px)}
.button span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.button:hover span{transform:translate(4px,-1px)}
.text-link span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.text-link:hover span{transform:translate(4px,-1px)}
.fnode:hover,.sec-card:hover{transform:translateY(-3px)}
.nav-bar nav a{transition:opacity .2s ease,color .2s ease}
.nav-bar nav a:hover{opacity:1}

@media (prefers-reduced-motion:reduce){
  .js-anim [data-rv="left"],.js-anim [data-rv="right"],.js-anim [data-stagger]{
    opacity:1!important;transform:none!important;transition:none}
  .js-anim .solution-n,.js-anim .tier-n{opacity:1}
  .button:hover,.fnode:hover,.sec-card:hover{transform:none}
}

/* ── §12. Sectieritme gelijkgetrokken naar 110-150px desktop.
      Vier secties zaten eronder (55/80/50/85px) en braken daardoor de
      cadans bij het scrollen. De compatibiliteitsstrip blijft bewust
      smal: dat is een strip, geen sectie. ── */
.product-section{padding-bottom:120px}
.security-section{padding-bottom:120px}
.observability-section{padding-top:120px}
.faq-section{padding-top:120px}
.flowmap-section{padding-block:124px}
.contact-section{padding-block:130px}

@media (max-width:1000px){
  /* 70-90px op mobiel, zoals opgegeven. */
  .product-section{padding-bottom:80px}
  .security-section{padding-bottom:80px}
  .observability-section{padding-top:80px}
  .faq-section{padding-top:80px}
  .flowmap-section{padding-block:80px}
  .contact-section{padding-block:84px}
}

/* ── Hero: gekanteld productpaneel rechts.
      Inhoud komt uit wat al op de site staat (controlelaag, beleidstoets,
      menselijk akkoord) — geen verzonnen cijfers, en het staat er ook bij. ── */
.hero-stage{position:relative}
.hero-visual{position:absolute;right:0;top:150px;width:44%;max-width:540px;z-index:1;
  perspective:1600px;pointer-events:none}
.hero-panel{background:#141615;border:1px solid #2c302e;border-radius:12px;overflow:hidden;
  box-shadow:0 34px 70px rgba(10,12,11,.42);
  transform:rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg);transform-origin:100% 50%}
.hero-panel-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:1px solid #2c302e;background:#101211}
.hero-panel-brand{font-weight:800;letter-spacing:-.055em;font-size:17px;color:#f6f6f2}
.hero-panel-path{font:11px var(--mono);letter-spacing:.06em;color:#8d928f}
.hero-panel-body{padding:16px 18px 18px}
.hero-panel-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  padding:13px 0;border-bottom:1px solid #232625}
.hero-panel-row:last-of-type{border-bottom:none}
.hero-panel-row>span:nth-child(2){font-size:14px;color:#e7e9e7}
.hero-panel-row b{font:11px var(--mono);letter-spacing:.05em;color:#9ec9b4;font-weight:400}
.hero-panel-row b.wacht{color:var(--signal)}
.hero-panel-note{font:11px var(--mono);letter-spacing:.05em;color:#7d8280;margin-top:14px}
.hero-chip{position:absolute;background:#f6f5f1;color:#161817;border-radius:9px;
  padding:11px 15px;font:11px var(--mono);letter-spacing:.07em;
  box-shadow:0 14px 28px rgba(10,12,11,.24)}
.hero-chip-1{left:-6%;top:34%}
.hero-chip-2{right:6%;bottom:-6%;background:var(--accent);color:#fff}

@media (max-width:1100px){
  .hero-visual{position:static;width:100%;max-width:none;margin:34px 0 44px;perspective:none}
  .hero-panel{transform:none}
  .hero-chip{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   COMPOSITIE VOLGENS DE REFERENTIE
   De referentie hanteert door de hele pagina één regel: kop en korte
   inleiding in een smalle kolom links, inhoud breed rechts. Dat is wat
   het verschil maakt met de huidige opzet, waar bijna elke sectie een
   gecentreerde kop met daaronder volle breedte heeft.
   Secties die in de referentie juist volle breedte hebben (de grote
   interface, het diagram en de tarieven) zijn hieronder uitgezonderd.
   ═══════════════════════════════════════════════════════════════════ */
.section>.container{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:52px 76px;align-items:start}
.section>.container>*:first-child{grid-column:1;margin-bottom:0;max-width:none;
  position:sticky;top:112px;align-self:start}
.section>.container>*:not(:first-child){grid-column:2}
.section>.container>*:first-child h2{font-size:clamp(34px,3.1vw,50px);line-height:1.04}
.section>.container>*:first-child p{max-width:40ch;font-size:17px}

/* Volle breedte waar de referentie dat ook doet. */
.flowmap-section>.container,#pricing>.container,.product-section>.container,
.scanner-section>.container{
  display:block}
.flowmap-section>.container>.section-heading,#pricing>.container>.section-heading,
.scanner-section>.container>.section-heading{position:static;margin-bottom:52px;max-width:760px}
.flowmap-section>.container>.section-heading h2,#pricing>.container>.section-heading h2,
.scanner-section>.container>.section-heading h2{font-size:clamp(40px,4.2vw,64px)}

/* Eyebrow met streepje, zoals "01 — OVERZICHT" in de referentie. */
.eyebrow>span:first-child::after{content:" —";opacity:.55}

@media (max-width:1100px){
  .section>.container{grid-template-columns:1fr;gap:34px}
  .section>.container>*:not(:first-child),.section>.container>*:first-child{grid-column:1}
  .section>.container>*:first-child{position:static}
  .section>.container>*:first-child h2{font-size:clamp(32px,6vw,44px)}
}

/* Kop en paneel elkaar niet laten overlappen: de referentie zet ze
   naast elkaar, niet over elkaar heen. */
@media (min-width:1101px){
  .hero h1{max-width:52%}
  .hero-headline{min-height:340px}
  .hero-chip-1{left:auto;right:82%;top:26%}
}

/* Het productpaneel is nu het beeld rechtsboven; het logo botste daar
   mee. Het verhuist naar de lege ruimte linksonder in de hero, op ware
   grootte en recht — zo vult het de dode hoek in plaats van te
   concurreren met het paneel. */
@media (min-width:1101px){
  .hero-sculpture{position:absolute;left:0;right:auto;top:auto;bottom:-236px;
    width:20%;max-width:230px;transform:none;opacity:.9;z-index:0}
  .hero-index{padding-left:23%}
}

/* Knop op het eerste tariefblok: de tokens binnen #pricing maken --ink
   licht, waardoor deze knop licht-op-licht werd. Expliciet donker. */
.tier-0 .button,.tier-1 .button{background:#f6f5f1;color:#161817}
.tier-0 .button:hover,.tier-1 .button:hover{background:#fff;color:#161817}
.tier-2 .button{background:#161817;color:#f6f5f1}
.tier-2 .button:hover{background:#0c0e0d;color:#fff}

/* Verbindingslijnen duidelijker: op grafiet viel 1.2px bij 55% weg. */
.flowmap-lines path{stroke-width:1.6;opacity:.85;stroke-dasharray:5 6}

.flowmap{position:relative}

/* Ketensectie hoort bij de donkere groep; stond niet in de tokenlijst. */
.flowmap-section{color:var(--paper)}
.flowmap-section h2,.flowmap-section h3{color:#f6f6f2}
.flowmap-section .section-heading>p,.flowmap-section .fine-print{color:#a5aaa7}
.flowmap-section em{color:var(--signal)}
.fnode-tag{color:#b6bbb8}

/* Laatste contrastcorrecties. */
.demo-tag{color:#b6bbb8}
.optional{color:#8d928f}
.contact-section .optional{color:#9aa09d}
.eyebrow>span:first-child{color:var(--signal)}
.hero .eyebrow>span:first-child,.scanner-section .eyebrow>span:first-child,
.faq-section .eyebrow>span:first-child{color:#8c3230}

/* Onder 1100px staat het productpaneel onder de kop; het logo mag daar
   niet alsnog tegen de kop aan liggen. */
@media (max-width:1100px){
  .hero-sculpture{position:static;display:block;width:150px;max-width:150px;
    margin:20px 0 0;transform:none}
  .hero-headline{min-height:0}
  .hero h1{max-width:none}
}

/* Het formulierblok mag nooit onder een meelopende kolom verdwijnen:
   de linkerkolom hier niet sticky maken, en de split-indeling bewaren. */
.contact-section>.container{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact-section>.container>*{position:static!important;grid-column:auto!important}
@media (max-width:1000px){
  .contact-section>.container{grid-template-columns:1fr;gap:44px}
}

/* ── Typografie: koppen in een humanistische schreefletter, lopende
      tekst in een warmere sans dan Arial. Beide zelf meegeleverd
      (assets/fonts), want de CSP staat font-src 'self' — een verwijzing
      naar Google Fonts zou in productie geblokkeerd worden.
      Schreefletters verdragen minder negatieve letterafstand dan Arial;
      vandaar de ruimere waarden hieronder. ── */
h1,h2,h3,h4,.brand,.footer-wordmark,.hero-panel-brand,.architecture-brand,
.price strong,.tier-n,.solution-n,.step-number,.tier-end .price strong,
.score-circle,.kpi-val{font-family:var(--display)}
h1,h2{letter-spacing:-.028em;font-weight:600}
h3,h4{letter-spacing:-.015em;font-weight:600}
.hero h1{letter-spacing:-.034em;font-weight:700}
.brand,.site-header .brand{letter-spacing:-.018em;font-weight:700}
.footer-wordmark{letter-spacing:-.035em;font-weight:700}
.tier-n,.solution-n,.step-number{letter-spacing:-.03em;font-weight:700}
h1 em,h2 em,.hero h1 em{font-style:italic;font-weight:500}
body{font-weight:400}
.lead{font-weight:500;letter-spacing:-.005em}

/* Source Serif 4 is een variabele letter met een optische-maat-as: hoe
   groter de tekst, hoe dunner de haarlijnen worden. Precies dat geeft op
   grote koppen dat onrustige, trillende beeld. De as wordt hier vastgezet
   op een tekstmaat, zodat de vormen stevig blijven ongeacht hoe groot de
   kop staat. */
h1,h2,h3,h4,.brand,.footer-wordmark,.tier-n,.solution-n,.step-number,
.price strong,.tier-end .price strong,.score-circle,.kpi-val{
  font-optical-sizing:none;font-variation-settings:'opsz' 14}
.hero h1,.footer-wordmark{font-variation-settings:'opsz' 12}