@font-face{font-family:Plex;src:url('fonts/ibm-plex-sans-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:Space;src:url('fonts/space-grotesk-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}@font-face{font-family:Mono;src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--paper:#E7EEED;--white:#fff;--ink:#0E2A30;--muted:#4E666B;--green:#0F9C82;--lime:#46E0C0;--mint:#DDEDE9;--line:#C7D8D5;--dark:#06141a;--radius:14px;--wrap:1280px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px;scrollbar-gutter:stable}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Plex,system-ui,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-family:Space,Plex,sans-serif;font-weight:600;line-height:1.12;letter-spacing:-.045em}h1{font-size:clamp(44px,5.5vw,78px)}h2{font-size:clamp(34px,4.1vw,54px)}h3{font-size:26px;letter-spacing:-.03em}h4{font-size:19px;letter-spacing:-.02em}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}img,svg{max-width:100%;vertical-align:middle}img{height:auto}ul,ol{padding-left:1.3em}p+ p{margin-top:18px}::selection{background:var(--lime);color:var(--ink)}.container{width:min(var(--wrap),calc(100% - 80px));margin-inline:auto}.section{padding-block:100px}.section-sm{padding-block:60px}.eyebrow{display:flex;align-items:baseline;gap:10px;margin-bottom:24px;font:500 12px/1.4 Mono,monospace;text-transform:uppercase;letter-spacing:.1em}.eyebrow:before{content:'';width:7px;height:7px;background:var(--green);display:inline-block;border-radius:50%}.intro{font-size:20px;line-height:1.6;color:var(--muted);max-width:660px;margin-top:26px}.muted{color:var(--muted)}.small{font-size:14px}.mono{font-family:Mono,monospace}.accent{color:var(--green)}.rule{border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px}.section-head h2{max-width:760px}.section-head p{max-width:400px;color:var(--muted)}.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;border:1px solid transparent;border-radius:6px;padding:12px 22px;font-size:15px;font-weight:600;line-height:1.4;transition:background .2s,transform .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--green);color:white}.btn-primary:hover{background:#0B7460}.btn-light{background:var(--lime);color:var(--ink)}.btn-outline{border-color:var(--line);background:transparent}.btn-outline:hover{background:var(--mint)}.text-link{font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:18px;padding-block:8px}.text-link:after{content:'↗';transition:transform .2s}.text-link:hover:after{transform:translate(3px,-3px)}.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--lime);padding:10px 20px}.skip:focus{top:12px}.topbar{background:var(--dark);color:#E6EFEE;text-align:center;font-size:12px;letter-spacing:.02em;padding:8px 20px}.site-header{position:sticky;top:0;z-index:50;background:rgba(231,238,237,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-inner{min-height:86px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand img{width:37px;height:37px}.brand-name{font-family:Space,sans-serif;font-size:29px;font-weight:600;letter-spacing:-.05em;line-height:1}.brand-name small{display:block;font:400 9px/1.3 Mono,monospace;letter-spacing:.07em;text-transform:uppercase;margin-top:6px}.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto}.site-nav>a{font-size:14px;position:relative;padding:12px 0}.site-nav>a:hover,.site-nav>a[aria-current=page]{color:var(--green)}.site-nav>a[aria-current=page]:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:2px;background:var(--green)}.header-tools{display:flex;gap:19px;align-items:center}.language{font:500 12px Mono,monospace;display:flex;gap:8px;white-space:nowrap}.language [aria-current=true]{color:var(--green);text-decoration:underline;text-underline-offset:5px}.language a:hover{color:var(--green)}.menu-toggle{display:none;background:none;border:0;padding:10px;color:var(--ink);font-size:23px}.hero{padding:74px 0 72px;background:radial-gradient(ellipse at 86% 30%,#D6E9E4 0,transparent 58%);position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr;gap:0}.hero h1{max-width:680px;font-size:clamp(42px,4.6vw,66px)}.hero h1 span{color:var(--green)}.hero .intro{max-width:550px;font-size:18px}.trust-points{display:flex;gap:22px;flex-wrap:wrap;margin-top:32px;font-size:12px;color:var(--muted)}.trust-points span:before{content:'✓';color:var(--green);margin-right:7px}.graph-shell{background:var(--dark);border:1px solid #143036;border-radius:18px;color:white;box-shadow:0 28px 50px -25px #0A2A3055;position:relative;overflow:hidden}.graph-shell:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#46E0C015 1px,transparent 1px);background-size:22px 22px;pointer-events:none}.graph-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid #46E0C020;font-size:11px;font-family:Mono,monospace}.graph-head>span:first-child:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:9px}.graph-visual{position:relative;width:100%;height:auto}.graph-visual text{font-family:Plex,sans-serif}.graph-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #46E0C020;padding:18px 24px;font-size:11px;color:#AFC0C0}.graph-foot strong{color:var(--lime);font-weight:500}.manifesto{display:grid;grid-template-columns:1fr 1.5fr;gap:70px}.manifesto>div>p{font-size:24px;line-height:1.5;letter-spacing:-.02em}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}.mini-grid article{border-top:1px solid var(--line);padding-top:23px}.mini-grid p{color:var(--muted);font-size:15px;margin-top:12px}.mini-grid h3{font-size:19px}.demo-section{background:#DEEAE7}.explorer{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 36px -28px #12343A66}.explorer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 25px;border-bottom:1px solid var(--line);gap:15px}.tabs{display:flex;gap:4px;flex-wrap:wrap}.tab{border:0;background:transparent;border-radius:5px;padding:10px 17px;font-size:13px;color:var(--muted)}.tab[aria-selected=true]{background:var(--mint);color:var(--ink);font-weight:600}.demo-badge{font:10px Mono,monospace;letter-spacing:.02em;color:var(--muted);white-space:nowrap}.explorer-body{display:grid;grid-template-columns:1.4fr 1fr;min-height:350px}.path-area{padding:38px;position:relative;background-image:radial-gradient(#BFD2CE 1px,transparent 1px);background-size:20px 20px}.path-title{font:11px Mono,monospace;color:var(--muted);margin-bottom:27px;text-transform:uppercase;letter-spacing:.06em}.path-nodes{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px}.path-node{background:var(--paper);border:1px solid var(--line);padding:18px;text-align:left;border-radius:8px;position:relative;transition:border-color .2s,box-shadow .2s;min-width:0}.path-node[aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px #0F9C8219}.path-node:nth-child(odd):after{content:'→';position:absolute;right:-27px;top:38%;color:var(--green)}.path-node small{display:block;font:9px Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}.path-node strong{font-size:14px;font-weight:500;overflow-wrap:anywhere}.node-icon{color:var(--green);font-size:20px;display:block;margin-bottom:8px}.evidence{padding:34px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}.evidence .eyebrow{font-size:10px;margin-bottom:15px}.evidence h3{font-size:25px}.evidence p{font-size:14px;color:var(--muted);margin-top:15px}.evidence dl{margin:22px 0 0;font-size:11px}.evidence dl div{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:10px 0}.evidence dt{color:var(--muted)}.evidence dd{margin:0;text-align:right;font-family:Mono,monospace;font-size:10px}.demo-note{padding:12px 24px;background:var(--paper);border-top:1px solid var(--line);color:var(--muted);font-size:11px}.bento{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.feature{padding:38px;background:white;border:1px solid var(--line);border-radius:var(--radius)}.feature p{color:var(--muted);font-size:16px;margin-top:18px}.feature-top{display:flex;justify-content:space-between;margin-bottom:30px;font:11px Mono,monospace;color:var(--green)}.feature.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:70px;background:var(--mint)}.code-path{font:12px/2.3 Mono,monospace;margin-top:25px;border-left:2px solid var(--green);padding-left:20px;color:var(--green)}.coverage-bars{margin-top:28px}.coverage-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:14px}.coverage-track{height:5px;background:#D3DFDE;border-radius:4px;margin-top:6px}.coverage-track span{display:block;height:100%;background:var(--green);border-radius:4px}.coverage-track.missing span{background:#A96A08}.badge{display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:5px 10px;font:10px Mono,monospace;background:#D7EDE7;color:#0B7460}.badge.pilot{background:#F5E9D2;color:#8F5A08}.role-layout{display:grid;grid-template-columns:350px 1fr;gap:70px}.role-tabs{display:flex;flex-direction:column;gap:6px}.role-tab{text-align:left;border:1px solid transparent;border-radius:8px;padding:19px 22px;background:transparent;color:var(--muted);font-size:16px;display:flex;justify-content:space-between}.role-tab[aria-selected=true]{background:var(--mint);border-color:var(--line);color:var(--ink)}.role-tab:after{content:'↗'}.role-content{padding:18px 0}.role-content h3{font-size:34px;max-width:680px}.role-content p{color:var(--muted);margin-top:22px}.checks{padding:0;list-style:none;margin:24px 0 0}.checks li{position:relative;padding:11px 0 11px 25px;border-bottom:1px solid var(--line);font-size:15px}.checks li:before{content:'✓';color:var(--green);position:absolute;left:0}.dark{background:var(--dark);color:#E6EFEE}.dark .eyebrow:before{background:var(--lime)}.dark .eyebrow{color:#AFC0C0}.dark .intro,.dark .muted,.dark p{color:#AFC0C0}.dark .btn-light{color:var(--ink)}.deployment-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.deployment-visual{border:1px solid #1C3A40;border-radius:14px;padding:28px}.deploy-label{font:11px Mono,monospace;color:var(--lime);display:flex;justify-content:space-between;gap:20px}.deploy-sources{display:flex;gap:10px;margin:28px 0;flex-wrap:wrap}.deploy-sources span{border:1px solid #1C3A40;padding:9px 12px;border-radius:5px;font-size:11px}.deploy-engine{padding:23px;background:#46E0C012;border:1px solid #46E0C065;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-family:Space,sans-serif;font-size:23px}.deploy-engine img{width:36px}.deploy-outputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.deploy-outputs span{padding:14px;border:1px dashed #7FA8A570;border-radius:5px;font:11px Mono,monospace}.deploy-caption{font-size:11px;margin-top:18px!important}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}.step{border-top:1px solid var(--line);padding-top:22px}.step-num{font:12px Mono,monospace;color:var(--green);margin-bottom:30px;display:block}.step h3{font-size:23px}.step p{color:var(--muted);font-size:15px;margin-top:15px}.resource-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.resource-card{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.resource-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px -20px #0E2A3055}.resource-art{height:175px;background:#DDEAE7;display:flex;align-items:center;justify-content:center;overflow:hidden}.resource-art svg{width:100%;height:100%}.resource-info{padding:28px;display:flex;flex-direction:column;flex:1}.resource-info>small{font:10px Mono,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--green);margin-bottom:18px}.resource-info h3{font-size:24px}.resource-info p{font-size:14px;color:var(--muted);margin-top:16px;margin-bottom:20px}.resource-info .text-link{margin-top:auto}.faq-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:90px}.faq-list details{border-bottom:1px solid var(--line);padding:22px 0}.faq-list details:first-child{padding-top:0}.faq-list summary{cursor:pointer;font-family:Space,sans-serif;font-size:18px;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:30px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font:24px Space,sans-serif;color:var(--green)}.faq-list details[open] summary:after{content:'−'}.faq-list details p{font-size:15px;color:var(--muted);margin-top:18px;padding-right:25px}.cta{background:var(--mint);border-top:1px solid var(--line);padding:70px 0}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:50px}.cta h2{max-width:780px;font-size:clamp(34px,4vw,52px)}.cta p{color:var(--muted);margin-top:20px;max-width:650px}.cta .actions{margin:0;flex-shrink:0}.site-footer{padding:65px 0 25px;background:var(--paper)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px}.footer-about p{max-width:320px;font-size:14px;color:var(--muted);margin-top:22px}.footer-col h3{font:500 11px Mono,monospace;text-transform:uppercase;letter-spacing:.05em;margin-bottom:23px}.footer-col a{display:block;font-size:13px;color:var(--muted);margin:12px 0}.footer-col a:hover{color:var(--green)}.footer-bottom{margin-top:55px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.page-hero{padding:72px 0 76px;background:var(--mint);border-bottom:1px solid var(--line)}.page-hero h1{max-width:1000px;font-size:clamp(42px,5vw,68px)}.page-hero .intro{max-width:820px}.breadcrumb{font:10px Mono,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:35px;display:flex;gap:12px}.page-hero .eyebrow{margin-bottom:20px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:75px}.body-copy p{color:var(--muted);margin-top:20px}.body-copy h3{margin-top:35px}.body-copy h3:first-child{margin-top:0}.capability-list{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}.capability-item{border-top:1px solid var(--line);padding:32px 0 40px}.capability-item .mono{color:var(--green);font-size:11px;display:block;margin-bottom:20px}.capability-item h3{font-size:27px}.capability-item p{color:var(--muted);font-size:16px;margin-top:18px}.platform-section{display:grid;grid-template-columns:1fr 1.3fr;gap:75px;padding:65px 0;border-bottom:1px solid var(--line);scroll-margin-top:90px}.platform-section:first-child{padding-top:0}.platform-section h2{font-size:42px;margin-top:20px}.platform-section p{color:var(--muted);margin-top:22px}.platform-details{background:white;border:1px solid var(--line);border-radius:10px;padding:32px}.platform-details h3{font-size:23px}.platform-details .checks{margin-top:17px}.platform-details .footnote{font-size:12px;padding-top:20px;color:var(--muted)}.roadmap-box{background:var(--mint);border:1px solid var(--line);border-radius:12px;padding:34px;margin-top:50px}.roadmap-box h3{font-size:26px}.roadmap-box p{color:var(--muted);margin-top:16px}.use-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;border-top:1px solid var(--line);padding:50px 0}.use-row h2{font-size:38px}.use-row p{color:var(--muted);margin-top:20px}.use-row .eyebrow{font-size:10px}.use-row h3{font-size:23px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.principle{border-top:1px solid var(--line);padding-top:25px}.principle h3{font-size:25px}.principle p{margin-top:17px;color:var(--muted);font-size:15px}.principle>span{display:block;font:11px Mono,monospace;color:var(--green);margin-bottom:25px}.fact-table{width:100%;border-collapse:collapse;font-size:15px}.fact-table th,.fact-table td{padding:18px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.fact-table th{width:35%;color:var(--muted);font-weight:400}.fact-table td{padding-left:25px}.quote-panel{padding:50px;background:var(--mint);border-radius:12px}.quote-panel p{font-family:Space,sans-serif;font-size:35px;letter-spacing:-.04em;line-height:1.3}.quote-panel small{display:block;margin-top:28px;color:var(--muted);font:11px Mono,monospace}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.contact-card{padding:38px;border:1px solid var(--line);background:white;border-radius:12px}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:22px}.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:500}.field input,.field select,.field textarea{border:1px solid #9DB3B1;border-radius:5px;background:var(--paper);padding:12px 14px;width:100%;font-size:15px;color:var(--ink);min-height:46px}.field textarea{min-height:130px;resize:vertical}.form-note{grid-column:1/-1;font-size:12px;color:var(--muted)}.form-status{grid-column:1/-1;font-size:13px;color:var(--green)}.contact-email{font-family:Space,sans-serif;font-size:clamp(23px,3vw,35px);display:block;color:var(--green);margin:23px 0;overflow-wrap:anywhere}.contact-grid h3{margin-top:40px;font-size:24px}.contact-grid .contact-card h3{margin-top:0}.article-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:80px;justify-content:center}.article-aside{font-size:13px}.article-aside nav{position:sticky;top:125px;display:flex;flex-direction:column;gap:14px}.article-aside strong{font:11px Mono,monospace;text-transform:uppercase;margin-bottom:12px}.article-aside a{color:var(--muted)}.article-aside a:hover{color:var(--green)}.article-body h2{font-size:34px;margin:44px 0 20px;scroll-margin-top:120px}.article-body h2:first-child{margin-top:0}.article-body p{color:var(--muted);margin:18px 0;font-size:17px}.article-body ul li,.article-body ol li{color:var(--muted);margin:12px 0}.article-callout{background:var(--mint);border-left:3px solid var(--green);padding:25px;margin:30px 0}.article-callout p{margin:0}.article-meta{font:11px Mono,monospace;color:var(--muted);margin-top:28px}.privacy-content{max-width:840px}.privacy-content h2{font-size:30px;margin-top:40px}.privacy-content p{margin-top:20px;color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.only-js{display:none}.js .only-js{display:initial}.no-js-note{padding:12px 24px;font-size:13px;color:var(--muted)}.js .no-js-note{display:none}
@media(min-width:1500px){.hero{padding-block:95px}.hero-grid{gap:90px}}@media(max-width:1180px){.container{width:calc(100% - 52px)}.site-nav{gap:17px}.header-inner{gap:20px}.header-tools{gap:13px}.header-tools>.btn{padding:10px 14px;font-size:13px}.brand-name{font-size:25px}.hero-grid{gap:35px}.hero h1{font-size:60px}.role-layout{grid-template-columns:290px 1fr;gap:50px}.section{padding-block:80px}}@media(max-width:980px){.header-inner{min-height:75px}.site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);padding:22px 28px;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:3px}.site-nav.is-open{display:flex}.site-nav>a{padding:13px}.header-tools{margin-left:auto}.menu-toggle{display:block}.hero-grid{gap:28px}.hero h1{font-size:51px}.hero .intro{font-size:17px}.graph-head,.graph-foot{padding:17px}.manifesto{gap:40px;grid-template-columns:.8fr 1.2fr}.mini-grid{grid-template-columns:1fr}.mini-grid article{padding-top:15px}.mini-grid p{margin-top:7px}.explorer-body{grid-template-columns:1.15fr 1fr}.path-area{padding:25px}.evidence{padding:25px}.path-node{padding:14px}.path-node strong{font-size:12px}.deployment-grid{gap:40px}.steps{gap:24px}.step h3{font-size:21px}.faq-wrap{gap:40px}.footer-grid{gap:30px;grid-template-columns:1.5fr 1fr 1fr 1fr}.contact-grid{gap:40px}.two-col{gap:45px}.platform-section{gap:40px}.article-layout{grid-template-columns:190px minmax(0,1fr);gap:40px}.cta-inner{align-items:start;flex-direction:column;gap:28px}}@media(max-width:760px){.container{width:calc(100% - 40px)}.topbar{font-size:10px}.brand-name{font-size:25px}.brand-name small{font-size:8px}.brand img{width:32px;height:32px}.header-inner{gap:12px;min-height:72px}.header-tools{gap:15px}.header-tools>.btn{display:none}.hero{padding:45px 0 50px}.hero-grid{grid-template-columns:1fr;gap:42px}.hero h1{font-size:clamp(43px,9vw,66px);max-width:640px}.hero .intro{font-size:17px}.hero .eyebrow{font-size:10px}.hero .trust-points{gap:16px;font-size:11px}.graph-shell{max-width:600px;width:100%;margin-inline:auto}.graph-head{font-size:10px}.graph-foot{font-size:10px}.section{padding-block:60px}.section-sm{padding-block:42px}.section-head{display:block;margin-bottom:32px}.section-head>p{margin-top:22px}.section-head>.text-link{margin-top:22px}.manifesto{grid-template-columns:1fr;gap:20px}.manifesto>div>p{font-size:21px}.mini-grid{grid-template-columns:1fr;gap:20px;margin-top:28px}.mini-grid article{display:block}.mini-grid p{font-size:15px}.explorer-top{align-items:start;flex-direction:column;padding:18px}.explorer-body{grid-template-columns:1fr}.path-area{padding:25px}.path-node strong{font-size:14px}.path-nodes{gap:24px 30px}.path-node{padding:16px}.path-node:nth-child(odd):after{right:-23px}.evidence{border-left:0;border-top:1px solid var(--line);padding:25px;min-height:285px}.demo-note{padding-inline:20px}.bento{grid-template-columns:1fr}.feature{padding:28px}.feature.wide{grid-template-columns:1fr;gap:25px}.role-layout{grid-template-columns:1fr;gap:24px}.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.role-tab{padding:13px;font-size:13px}.role-content{padding:0}.role-content h3{font-size:29px}.deployment-grid{grid-template-columns:1fr;gap:35px}.deployment-visual{padding:22px}.deploy-sources{margin-block:22px}.deploy-engine{font-size:20px}.steps{grid-template-columns:1fr 1fr;gap:35px 24px}.step-num{margin-bottom:18px}.resource-grid{grid-template-columns:1fr}.resource-art{height:180px}.resource-info{padding:26px}.faq-wrap{grid-template-columns:1fr;gap:35px}.faq-list summary{font-size:17px}.cta{padding-block:50px}.cta-inner{gap:24px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px 24px}.footer-about{grid-column:1/-1}.footer-about p{max-width:400px}.footer-col:last-child{grid-column:1/-1}.footer-col:last-child a{display:inline-block;margin:0 20px 0 0}.footer-bottom{flex-direction:column;gap:10px;margin-top:35px}.page-hero{padding:40px 0 50px}.page-hero h1{font-size:clamp(40px,8vw,56px)}.page-hero .intro{font-size:18px}.breadcrumb{font-size:9px;margin-bottom:25px}.two-col,.contact-grid{grid-template-columns:1fr;gap:35px}.capability-list{grid-template-columns:1fr;gap:0}.capability-item{padding-block:26px}.platform-section{grid-template-columns:1fr;gap:25px;padding-block:40px}.platform-section h2{font-size:36px}.platform-details{padding:25px}.roadmap-box{padding:26px}.use-row{grid-template-columns:1fr;gap:25px;padding-block:35px}.use-row h2{font-size:34px}.principles{grid-template-columns:1fr;gap:30px}.quote-panel{padding:30px}.quote-panel p{font-size:29px}.contact-card{padding:25px}.contact-form{gap:18px}.contact-grid h3{margin-top:30px}.article-layout{grid-template-columns:1fr;gap:35px}.article-aside nav{position:static;padding-bottom:25px;border-bottom:1px solid var(--line)}.article-aside a{display:none}.article-aside strong{margin:0}.article-body h2{font-size:30px;margin-top:35px}.intro{font-size:18px}.eyebrow{font-size:10px;margin-bottom:18px}}@media(max-width:400px){.container{width:calc(100% - 32px)}.header-tools{gap:8px}.menu-toggle{padding:7px}.language{gap:6px;font-size:11px}.brand-name{font-size:23px}.hero h1{font-size:42px}.path-area{padding:20px}.path-node{padding:12px}.path-node strong{font-size:12px}.steps{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}.field{grid-column:1/-1}.actions .btn{width:100%}.resource-info h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep navigation usable when JavaScript is disabled. */
@media(max-width:980px){html:not(.js) .site-nav{display:flex;position:static;flex-basis:100%;border:0;padding:8px 0;flex-direction:row;flex-wrap:wrap}html:not(.js) .header-inner{flex-wrap:wrap}html:not(.js) .menu-toggle{display:none}}

/* ── Figurer fra den oprindelige hjemmeside ────────────────────────────────
   Flyttet hertil ordret, fordi det er dem der ligner dashboardet: samme
   fliser, samme ringe, samme kolonner. Klassenavnene er kontrolleret mod
   udkastets egne og støder ikke sammen.

   Figurer, ikke skærmbilleder: siden viser formen på det svar produktet giver,
   aldrig produktets egne skærme. Det holder layoutet ude af konkurrenters
   hænder og tenant-navne af en offentlig side. */

/* Aliasser. Udkastet og den gamle side gav de samme roller hver sit navn.
   Frem for at omskrive hver reference peger de gamle navne her på de nye
   tokens, så figurerne kan flyttes uden at blive rørt. */
:root{
 --border:var(--line);
 --panel:var(--white);
 --card:var(--white);
 --head:var(--ink);
 --text:var(--ink);
 --text-2:var(--muted);
 --dim:#6F878D;
 --accent:var(--green);
 --accent-dp:#0B7460;
 --accent-soft:rgba(15,156,130,.12);
 --critical:#C9412E;
 --high:#A96A08;
 --shadow:0 1px 2px rgba(20,40,60,.06),0 18px 40px -20px rgba(20,40,60,.22);
 --shadow-lg:0 2px 4px rgba(20,40,60,.05),0 32px 64px -24px rgba(20,40,60,.28);
}

.figure{border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:var(--shadow-lg);overflow:hidden}
.figure-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}
.figure-title{font-family:Space,sans-serif;font-size:14px;font-weight:600;color:var(--head)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.figure-body{overflow-x:auto;padding:8px 4px 4px}
.figure svg{display:block;min-width:720px;width:100%;height:auto}
.figure-foot{padding:13px 20px 15px;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted)}

/* Grundtilstanden er den FÆRDIGE tilstand; keyframes starter skjult og fylder
   begge veje. Så er diagrammet tegnet også hvor animationen aldrig kører: en
   udvidelse der blokerer animationer, et print-stilark, en crawler der
   fotograferer før paint. */
.edge{stroke-dasharray:260;stroke-dashoffset:0;animation:draw .9s cubic-bezier(.4,0,.2,1) both}
.node{opacity:1;animation:rise .55s cubic-bezier(.2,.75,.3,1) both}
@keyframes draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.edge,.node{animation:none}}

/* min-width:0 på begge gitterelementer. Uden det er deres automatiske
   minimumsbredde indholdsbaseret, så den brede figurs min-width udvider hele
   .tour-kolonnen og skubber siden i vandret scroll. */
.tour{display:grid;gap:clamp(44px,6vw,72px)}
.shot{display:grid;gap:22px;align-items:start;min-width:0}
.shot>*{min-width:0}
@media (min-width:900px){
 .shot{grid-template-columns:300px 1fr;gap:40px}
 .shot.flip{grid-template-columns:1fr 300px}
 .shot.flip .shot-text{order:2}
}
.shot-step{font-family:Mono,monospace;font-size:12px;font-weight:500;color:var(--accent-dp);letter-spacing:.08em;display:block;margin-bottom:8px}
.shot-text h3{margin-bottom:9px;font-size:26px}
.shot-text p{font-size:15.5px;color:var(--muted);margin-top:0}

.fx{border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:22px}
.fx-label{font-family:Space,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:16px}
.fx-note{margin-top:14px;font-size:12px;color:var(--dim);max-width:none}
.fx svg{display:block;max-width:100%;height:auto}

/* En bred figur skaleret ned til en telefon taber sine etiketter til ~6px.
   Lad den beholde en læsbar størrelse og scrolle i stedet, og lad den gå ud
   til kortets kant, så det afskårne læses som "der er mere den vej". */
.fx-scroll{overflow-x:auto;margin-inline:-22px;padding-inline:22px}
.fx-scroll svg{min-width:520px}
.swipe{display:none;font-family:Mono,monospace;font-size:11px;color:var(--dim);white-space:nowrap}
@media (max-width:680px){.swipe{display:inline}}

.kx{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:stretch}
.kx-ring{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.kx-ring-txt .n{font-family:Space,sans-serif;font-size:13px;font-weight:600;color:var(--head);display:block}
.kx-ring-txt .s{font-size:12px;color:var(--muted)}
.kx-tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.kx-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kx-val{font-family:Mono,monospace;font-size:27px;font-weight:600;line-height:1}
.kx-delta{font-family:Mono,monospace;font-size:11.5px;font-weight:500}
.kx-lab{font-size:12.5px;font-weight:500;color:var(--text);line-height:1.35}

.ev{display:grid}
.ev-row{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);align-items:start}
.ev-row:first-child{padding-top:0}
.ev-row:last-child{border-bottom:0;padding-bottom:0}
.ev-k{font-family:Space,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.ev-v{font-size:14.5px;color:var(--text)}
.ev-v .mono{font-size:12.5px;color:var(--muted)}
@media (max-width:520px){.ev-row{grid-template-columns:1fr;gap:3px}}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-family:Space,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip i{width:6px;height:6px;border-radius:50%;flex:none}
.chip-high{background:rgba(201,65,46,.12);color:var(--critical)}
.chip-high i{background:var(--critical)}
.chip-met{background:var(--accent-soft);color:var(--accent-dp)}
.chip-met i{background:var(--accent)}
.chip-gap{background:rgba(201,65,46,.12);color:var(--critical)}
.chip-gap i{background:var(--critical)}
.chip-na{background:rgba(9,40,44,.07);color:var(--muted)}
.chip-na i{background:var(--dim)}

.art{display:grid;gap:12px}
.art-ref{font-family:Mono,monospace;font-size:12.5px;color:var(--accent-dp)}
.art-txt{font-size:15px;color:var(--text)}
.art-ev{display:grid;gap:8px;margin-top:4px}
.art-ev div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);font-size:13.5px;color:var(--text-2)}
.art-ev span.what{flex:1 1 180px;min-width:0}

/* ── Adgangsvejen som interaktiv figur ─────────────────────────────────────
   Evidenspanelet er en del af figuren, ikke et sidepanel: det er svaret på
   spørgsmålet "hvorfor findes den adgang?", og det hører under den vej der
   rejser spørgsmålet. Panelet er udfyldt i HTML med første led, så figuren
   også svarer uden JavaScript. */
.figure-ev{padding:16px 20px;border-top:1px solid var(--border);background:var(--mint)}
.figure-ev-hint{font:500 10.5px Mono,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.figure-ev .ev-row{border-bottom-color:rgba(9,40,44,.10)}

.path-fig .node{cursor:pointer}
.path-fig .node rect:first-of-type{transition:stroke-width .15s}
.path-fig .node:hover rect:first-of-type{stroke-width:2}
.path-fig .node[aria-pressed=true] rect:first-of-type{stroke-width:2.8}
/* Tydelig fokusmarkering: outline alene tegnes ikke ens på <g> i alle
   browsere, så den suppleres af en kraftigere kant på selve noden. */
.path-fig .node:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.path-fig .node:focus-visible rect:first-of-type{stroke-width:2.8}
@media (prefers-reduced-motion:reduce){.path-fig .node rect:first-of-type{transition:none}}

/* ── Deployment-tegningen ──────────────────────────────────────────────────
   Beholderen havde sin egen ramme og polstring, fra dengang indholdet var
   løse kasser. Tegningen rammer nu sig selv ind, så beholderens ramme ville
   blive den anden af to. */
.deploy-figure{border:0!important;padding:0!important}
.deploy-figure svg{display:block;width:100%;height:auto}
.deploy-figure .deploy-caption{margin-top:16px!important;font-size:11px;color:#8AA0A2}

/* ── Videoen ──────────────────────────────────────────────────────────────
   Videoen rammes ind som enhver anden figur, saa den hoerer til paa siden og
   ikke ligner et indlejret fremmedlegeme. */
.video-fig video{display:block;width:100%;height:auto;background:#06141a}

/* ── Afspilningsmærket ─────────────────────────────────────────────────────
   Plakatbillederne er produktskærme, og uden et mærke ligner de et
   stillbillede. Browserne er uenige om hvor stor deres egen afspilningsknap
   er, så her er en der ikke er til at tage fejl af.

   Mærket er kun den runde knap i midten og ikke en flade over hele videoen.
   Et lag med inset:0 ville ligge oven på betjeningslinjen, så man hverken
   kunne spole eller skrue ned.

   Kun med .js: uden JavaScript er der ingen der kan skjule det igen. */
/* ── Rammeværkerne på forsiden ─────────────────────────────────────────────
   Fem mærkater i stedet for en sætning. De er egennavne og ens på alle tre
   sprog, og de kan skimmes: en læser der leder efter "understøtter I NIS2"
   skal kunne se svaret uden at læse et afsnit. Større end .badge, som er
   beregnet til små markeringer inde i tabeller. */
.frameworks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.framework{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--white);border-radius:30px;padding:9px 18px;font:600 14px Space,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.compliance-body{max-width:760px;color:var(--muted);margin-bottom:38px}
@media(max-width:760px){.framework{padding:7px 14px;font-size:13px}.frameworks{gap:8px;margin-bottom:24px}}

.video-wrap{position:relative}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;background:var(--green);box-shadow:0 14px 36px -10px rgba(6,20,26,.55);display:none;cursor:pointer;transition:transform .2s ease,background .2s ease}
.js .video-play{display:block}
.video-wrap.is-playing .video-play{display:none}
/* Trekanten. En trekants synlige tyngdepunkt ligger til venstre for dens
   kasse, så den forskydes en smule til højre for at se centreret ud. */
.video-play:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-style:solid;border-width:17px 0 17px 28px;border-color:transparent transparent transparent #fff}
.video-play:hover{transform:translate(-50%,-50%) scale(1.07);background:#0B7460}
@media(max-width:760px){.video-play{width:70px;height:70px}.video-play:after{border-width:13px 0 13px 21px}}
@media (prefers-reduced-motion:reduce){.video-play{transition:none}.video-play:hover{transform:translate(-50%,-50%)}}


/* ── Platformsfiguren på forsiden ──────────────────────────────────────────
   Afløser logostriben med Entra, Azure og Databricks. Striben låste
   fortællingen fast på tre produktnavne; figuren viser kildekategorier, så
   den holder når der kommer flere til.

   min-width er sat højere end de øvrige figurers 720px. Tegningen er 980px
   bred, og presses den ned til 720, bliver kapacitetsteksten 8,5px på en
   telefon. Den ruller hellere lidt mere. */
.stack-band{border-block:1px solid var(--line);padding:46px 0;background:#DFEBE8}
.stack-fig svg{min-width:860px}
.stack-head{margin-bottom:34px;max-width:720px}
.stack-head h2{font-size:clamp(30px,3.6vw,44px)}
.stack-head p{margin-top:18px;color:var(--muted);font-size:17px}
@media(max-width:760px){.stack-band{padding:28px 0}.stack-head{margin-bottom:24px}.stack-head p{font-size:16px}}

/* ── Video-loop i hero'en ──────────────────────────────────────────────────
   Forsidens hero er en mørk flade med et loop bag teksten. Tre lag: videoen
   bagerst, slørlaget over den, indholdet øverst. z-index sættes eksplicit på
   alle tre, og containeren får position:relative — uden den ville slørlaget
   lægge sig oven på teksten, fordi et positioneret element altid vinder over
   et upositioneret uanset z-index.

   Sektionen bærer også .dark, så eyebrow, intro og brødtekst allerede står
   lyst. Her vendes kun de tre ting der ellers ville stå i den mørkegrønne
   accent, som er for svag på mørk flade: h1-accenten, fluebenene og
   kantknappen.

   .hero-video starter gennemsigtig og tones ind af assets/site.js, først når
   den faktisk spiller. Afspilles den ikke — reduceret bevægelse,
   datasparetilstand, telefon — bliver plakatbilledet stående, og mp4-filen
   bliver aldrig hentet. */
.hero-film{min-height:clamp(520px,64vh,660px);display:flex;align-items:center;background:var(--dark)}
.hero-film>.container{position:relative;z-index:2}
/* Videoen fylder hele hero'en og tones ikke ned. Klippet viser
   produktskærme, og de skal kunne ses — en jævn nedtoning over det hele gør
   dem til grå støj. Derfor ligger mørket i stedet samlet i venstre side,
   hvor teksten står, og slipper helt fra omkring 70%.

   object-position skubber billedet lidt mod højre, så fundpanelet i anden
   sekvens bliver stående i det lyse felt og ikke under teksten. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;z-index:0;opacity:0;transition:opacity .9s ease}
.hero-video.is-playing{opacity:1}
/* To forløb. Det første lægger tyngde bag teksten og slipper helt fra
   omkring 72%. Det er ikke længere uigennemsigtigt i venstre side: ved 86%
   kan man ane produktskærmen bagved, og teksten har stadig rigeligt at stå
   på. Grænsen er ikke smag — den er målt. check-hero-video.mjs sampler den
   sammensatte farve lige forbi tekstens højre kant, hvor forløbet er
   lysest, og regner WCAG-kontrasten mod den faktiske tekstfarve. Under 4,5
   for brødtekst er for lidt, og så skal tallene her ned igen.

   Det andet forløb lukker bunden, så overgangen til næste sektion er ren. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(93deg,rgba(6,20,26,.86) 0%,rgba(6,20,26,.8) 30%,rgba(6,20,26,.6) 46%,rgba(6,20,26,.2) 61%,transparent 72%),linear-gradient(to top,rgba(6,20,26,.92) 0%,rgba(6,20,26,.12) 22%,transparent 40%)}
/* Indledningen står i den dæmpede .dark-farve og har ikke margin nok når
   forløbet bag den er lettet. Fluegbenene er værre: .trust-points sætter
   color:var(--muted) direkte på sig selv, og .dark-reglen rammer kun klassen
   .muted — så de har stået i mørkegrå på mørk bund siden hero'en blev mørk,
   i 2,4:1. Fundet ved at måle, ikke ved at kigge. Begge lysnes her, kun i
   hero'en. */
/* Indledningen er også gjort smallere. Den brede udgave sluttede ude ved
   46% af bredden, hvor forløbet er lyst, og manglede kontrast. Smallere
   rykker den ind i det mørke felt OG frigiver mere af produktskærmen til
   højre — begge dele i den rigtige retning, i stedet for at gøre feltet
   mørkere igen. */
.hero-film .intro{color:#D4E2E1;max-width:470px}
.hero-film .trust-points{color:#A9C0BF}
.hero-film h1 span{color:var(--lime)}
.hero-film .trust-points span:before{color:var(--lime)}
.hero-film .btn-outline{border-color:rgba(255,255,255,.3);color:#E6EFEE}
.hero-film .btn-outline:hover{background:rgba(255,255,255,.09)}
@media(max-width:760px){.hero-film{min-height:auto}}

/* Headeren mens hero'en er i billedet. Uden den står stakken mørk topbar →
   lys header → mørk hero, altså en lys stribe midt i et mørkt felt. Med den
   bliver toppen af siden ét sammenhængende mørkt felt, og headeren skifter
   til sin lyse udgave når man ruller videre ned.

   .site-header sætter ikke color i forvejen, så links arver fra body. Her
   sættes color på headeren, og så følger de med af sig selv. Kun det der
   ellers ville stå i den mørkegrønne accent skal vendes til mint. */
.site-header.is-dark{background:rgba(6,20,26,.84);border-bottom-color:rgba(255,255,255,.09);color:#E6EFEE}
.site-header.is-dark .site-nav>a:hover,.site-header.is-dark .site-nav>a[aria-current=page]{color:var(--lime)}
.site-header.is-dark .site-nav>a[aria-current=page]:after{background:var(--lime)}
.site-header.is-dark .language [aria-current=true],.site-header.is-dark .language a:hover{color:var(--lime)}
.site-header.is-dark .menu-toggle{color:#E6EFEE}
@media(max-width:980px){.site-header.is-dark .site-nav{background:#06141a;border-bottom-color:rgba(255,255,255,.09)}}