/* Leaf Invest GmbH — leafinvest.org No external fonts, no trackers, no cookies. Deliberate: a security firm should not leak its visitors, and should not need a consent banner. */ :root{ --ink:#1d1d1f; --ink-2:#424245; --soft:#6e6e73; --faint:#86868b; --paper:#fff; --gray:#f5f5f7; --gray-2:#e8e8ed; --line:#d2d2d7; --accent:#0d6b4f; --accent-2:#0a5540; --near:#000; --maxw:1000px; --wide:1180px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink-2); font-family:var(--sans);font-size:19px;line-height:1.55; letter-spacing:-.01em;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:640;letter-spacing:-.028em;line-height:1.06} h1{font-size:clamp(2.9rem,7.4vw,5.6rem);letter-spacing:-.038em;font-weight:680} h2{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.034em} h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em;font-weight:620} p{margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .wrap.wide{max-width:var(--wide)} .skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:100} .skip:focus{left:10px;top:10px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} /* ---------- header ---------- */ header.site{ position:sticky;top:0;z-index:60; background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.07); } .nav{display:flex;align-items:center;height:52px;gap:30px;max-width:var(--wide);margin:0 auto;padding:0 28px} .brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:1.02rem;font-weight:600;letter-spacing:-.02em} .brand:hover{text-decoration:none} .brand svg{width:20px;height:20px} .nav nav{margin-left:auto;display:flex;align-items:center;gap:28px} .nav nav a{color:var(--ink);font-size:.83rem;font-weight:400;opacity:.85;letter-spacing:-.005em} .nav nav a:hover{opacity:1;text-decoration:none} .navtoggle{display:none;margin-left:auto;background:none;border:0;font-size:1.2rem;color:var(--ink);cursor:pointer;padding:6px} /* ---------- rhythm ---------- */ section{padding:130px 0} section.short{padding:88px 0} .gray{background:var(--gray)} .black{background:var(--near);color:#a1a1a6} .black h1,.black h2,.black h3,.black h4{color:#f5f5f7} .black strong{color:#fff} .kicker{ display:block;font-size:1.06rem;font-weight:620;letter-spacing:-.012em; color:var(--accent);margin-bottom:22px; } .black .kicker{color:#5ec49b} .lead{ font-size:clamp(1.24rem,2.5vw,1.72rem);line-height:1.35;letter-spacing:-.021em; color:var(--soft);max-width:22ch;margin-top:24px;font-weight:420; } .lead.w{max-width:34ch} .black .lead{color:#a1a1a6} .body{font-size:1.05rem;line-height:1.6;color:var(--soft);max-width:58ch} .body+.body{margin-top:1.1em} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} /* ---------- reveal on scroll ---------- */ /* Content is visible by default. The hidden state is applied ONLY when the inline script at the top of has confirmed JavaScript is running, so a blocked or failed script can never leave the page blank. */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .js .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:7px;padding:13px 24px;border-radius:980px; font-size:1rem;font-weight:480;letter-spacing:-.01em;border:1px solid transparent; cursor:pointer;transition:background .2s,color .2s,border-color .2s; } .btn:hover{text-decoration:none} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-2);color:#fff} .btn-plain{color:var(--accent);padding:13px 4px} .btn-plain::after{content:"›";font-size:1.25em;line-height:0;position:relative;top:.06em;transition:transform .2s} .btn-plain:hover{text-decoration:none} .btn-plain:hover::after{transform:translateX(3px)} .btn-line{border-color:var(--line);color:var(--ink)} .btn-line:hover{border-color:var(--ink)} .black .btn-line{border-color:rgba(255,255,255,.3);color:#f5f5f7} .black .btn-line:hover{border-color:#fff} .btnrow{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:36px} /* ---------- hero ---------- */ .hero{padding:150px 0 120px;text-align:center} .hero h1{max-width:14ch;margin:0 auto} .hero .lead{max-width:34ch;margin-left:auto;margin-right:auto} .hero .btnrow{justify-content:center} .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:2px; margin-top:110px;border-top:1px solid var(--line); } .stats div{padding:34px 20px;border-right:1px solid var(--line)} .stats div:last-child{border-right:none} .stats b{display:block;font-size:clamp(2rem,4.4vw,3.1rem);color:var(--ink);font-weight:620;letter-spacing:-.035em;line-height:1} .stats span{display:block;font-size:.92rem;color:var(--faint);margin-top:10px;letter-spacing:-.005em} /* ---------- disclosure rows ---------- */ .rows{border-top:1px solid var(--line);margin-top:56px} .black .rows{border-color:rgba(255,255,255,.16)} .row{border-bottom:1px solid var(--line)} .black .row{border-color:rgba(255,255,255,.16)} .row>summary{ display:flex;align-items:baseline;gap:24px;padding:30px 46px 30px 0; cursor:pointer;list-style:none;position:relative; } .row>summary::-webkit-details-marker{display:none} .row>summary::after{ content:"";position:absolute;right:6px;top:50%;width:11px;height:11px; border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint); transform:translateY(-70%) rotate(45deg);transition:transform .25s; } .row[open]>summary::after{transform:translateY(-20%) rotate(-135deg)} .row .idx{font-size:.82rem;color:var(--faint);font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:.35em} .row .ttl{font-size:clamp(1.2rem,2.4vw,1.62rem);color:var(--ink);font-weight:580;letter-spacing:-.024em;flex:1} .black .row .ttl{color:#f5f5f7} .row .sum{font-size:1rem;color:var(--faint);flex:0 0 auto;max-width:34%;text-align:right;letter-spacing:-.01em} .row .det{padding:0 46px 34px 0;max-width:66ch} .row .det p{font-size:1.04rem;color:var(--soft);line-height:1.6} .black .row .det p{color:#a1a1a6} .row .det p+p{margin-top:1em} /* ---------- findings ---------- */ .find{border-bottom:1px solid rgba(255,255,255,.16);padding:34px 0;display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start} .find:last-child{border-bottom:none} .find .metric{font-size:clamp(1.8rem,3.6vw,2.5rem);color:#fff;font-weight:640;letter-spacing:-.035em;line-height:1} .find .metric small{display:block;font-size:.78rem;color:#6e6e73;font-weight:400;letter-spacing:-.005em;margin-top:8px;line-height:1.35} .find h3{margin-bottom:9px} .find p{font-size:1rem;color:#a1a1a6;line-height:1.6;max-width:58ch} /* ---------- pricing ---------- */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px} .plan{ background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:38px 32px; display:flex;flex-direction:column;position:relative; } .plan.pick{border-color:var(--ink);border-width:1.5px} .plan .lbl{position:absolute;top:20px;right:24px;font-size:.76rem;color:var(--faint)} .plan h3{margin-bottom:8px} .plan .who{font-size:.95rem;color:var(--faint);min-height:3em;line-height:1.45} .plan .amt{font-size:2.5rem;color:var(--ink);font-weight:620;letter-spacing:-.038em;margin:24px 0 4px;line-height:1} .plan .meta{font-size:.86rem;color:var(--faint);margin-bottom:28px} .plan ul{list-style:none;padding:0;margin:0 0 32px;font-size:.98rem} .plan li{padding-left:22px;position:relative;margin:.66em 0;color:var(--ink-2);line-height:1.45} .plan li::before{ content:"";position:absolute;left:0;top:.45em;width:11px;height:6px; border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg); } .plan .btn{margin-top:auto;justify-content:center} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:60px} .stp .n{font-size:.8rem;color:var(--faint);font-variant-numeric:tabular-nums;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px} .stp h3{font-size:1.06rem;margin-bottom:9px} .stp p{font-size:.95rem;color:var(--faint);line-height:1.5} /* ---------- contact ---------- */ .cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;margin-top:60px;align-items:start} .field{margin-bottom:16px} .field label{display:block;font-size:.84rem;color:var(--faint);margin-bottom:7px} .field input,.field textarea,.field select{ width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px; font:inherit;font-size:1rem;color:var(--ink);background:var(--paper); } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)} .field textarea{min-height:120px;resize:vertical} .consent{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--faint);margin:20px 0 24px} .consent input{width:16px;height:16px;flex:0 0 16px;margin-top:4px} .cbox{background:var(--gray);border-radius:18px;padding:34px} .cbox dt{font-size:.8rem;color:var(--faint);margin-top:22px} .cbox dt:first-of-type{margin-top:0} .cbox dd{margin:5px 0 0;font-size:1.04rem;color:var(--ink)} .cbox dl{margin:0} /* ---------- footer ---------- */ footer.site{background:var(--gray);color:var(--faint);padding:52px 0 40px;font-size:.85rem} footer.site .wrap{max-width:var(--wide)} footer.site a{color:var(--soft)} footer.site a:hover{color:var(--ink)} .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px} .fgrid h4{font-size:.85rem;color:var(--ink);margin-bottom:13px;font-weight:600} .fgrid ul{list-style:none;padding:0;margin:0} .fgrid li{margin:.55em 0} .fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} /* ---------- legal ---------- */ .legal{padding:80px 0 100px} .legal h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:.5em} .legal h2{font-size:1.4rem;margin:2em 0 .5em} .legal h3{font-size:1.1rem;margin:1.5em 0 .4em} .legal p,.legal li{font-size:1rem;color:var(--soft);line-height:1.62} .legal p{margin:0 0 1em} .legal .updated{color:var(--faint);font-size:.9rem} .note{background:var(--gray);border-radius:14px;padding:22px 26px;margin:26px 0;font-size:.98rem} .note p{margin:0 0 .8em} .note p:last-child{margin:0} /* ---------- responsive ---------- */ @media (max-width:940px){ .plans{grid-template-columns:1fr;max-width:460px;margin:52px auto 0} .plan.pick{order:-1} .steps{grid-template-columns:repeat(2,1fr);gap:32px} .cgrid{grid-template-columns:1fr;gap:44px} .fgrid{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:720px){ body{font-size:17px} section{padding:86px 0} .hero{padding:96px 0 80px} .stats{grid-template-columns:1fr;margin-top:64px} .stats div{border-right:none;border-bottom:1px solid var(--line);padding:26px 0} .stats div:last-child{border-bottom:none} .nav nav{ display:none;position:absolute;top:52px;left:0;right:0;background:var(--paper); flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 18px;border-bottom:1px solid var(--line); } .nav nav.open{display:flex} .nav nav a{padding:14px 0;font-size:1rem;border-bottom:1px solid var(--gray-2)} .navtoggle{display:block} .row>summary{flex-wrap:wrap;gap:10px;padding-right:34px} .row .sum{max-width:100%;text-align:left;flex-basis:100%;font-size:.95rem} .find{grid-template-columns:1fr;gap:14px} .steps{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} } @media print{header.site,footer.site,.btnrow,.navtoggle{display:none}} /* ---------- claim / reality pairs ---------- The strongest illustration of "security that exists only on paper". Kept deliberately typographic: a quoted claim, then the question nobody asked. */ .claims{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:76px;text-align:left} .claim q{ display:block;font-size:clamp(1.3rem,2.4vw,1.72rem);color:var(--ink); font-weight:560;letter-spacing:-.025em;line-height:1.25;quotes:"„" "\201C" "‚" "'"; } .claim q::before{content:open-quote} .claim q::after{content:close-quote} .claim p{ margin-top:16px;padding-top:16px;border-top:1px solid var(--line); font-size:1rem;color:var(--faint);line-height:1.5; } .claim p strong{color:var(--ink-2);font-weight:520} @media (max-width:940px){.claims{grid-template-columns:1fr;gap:36px;margin-top:56px}} /* ---------- NIS2 explainer + self check ---------- */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px} .fact b{display:block;font-size:clamp(1.9rem,4vw,2.7rem);color:var(--ink);font-weight:620;letter-spacing:-.035em;line-height:1} .black .fact b{color:#fff} .fact p{margin-top:12px;font-size:.98rem;color:var(--faint);line-height:1.5} .check{ background:var(--paper);border:1px solid var(--line);border-radius:20px; padding:40px;margin-top:64px;max-width:760px; } .black .check{background:#141414;border-color:#2c2c2e} .check .q{border-top:1px solid var(--line);padding:24px 0} .black .check .q{border-color:#2c2c2e} .check .q:first-of-type{border-top:none;padding-top:0} .check .qt{font-size:1.06rem;color:var(--ink);line-height:1.45;margin-bottom:14px} .black .check .qt{color:#f5f5f7} .check .qt small{display:block;font-size:.88rem;color:var(--faint);margin-top:6px;line-height:1.45} .opts{display:flex;gap:10px;flex-wrap:wrap} .opt{ padding:9px 22px;border-radius:980px;border:1px solid var(--line);background:transparent; font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;transition:all .18s; } .black .opt{border-color:#3a3a3c;color:#f5f5f7} .opt:hover{border-color:var(--ink)} .opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} .result{ margin-top:28px;padding:26px;border-radius:14px;background:var(--gray); font-size:1.02rem;line-height:1.55;display:none; } .black .result{background:#1c1c1e} .result.show{display:block} .result b{display:block;font-size:1.2rem;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em} .black .result b{color:#fff} .result.hit b{color:var(--accent)} .black .result.hit b{color:#5ec49b} .sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .sector{font-size:.86rem;color:var(--soft);background:var(--gray);border-radius:980px;padding:7px 15px} .black .sector{background:#1c1c1e;color:#a1a1a6} @media (max-width:940px){.facts{grid-template-columns:1fr;gap:32px;margin-top:48px}.check{padding:28px}} /* ---------- architecture diagram ---------- */ .diagram{margin-top:64px} .diagram svg{width:100%;height:auto} .dgcap{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:26px} .dgcap h3{font-size:1.06rem;margin-bottom:8px} .dgcap p{font-size:.98rem;color:var(--faint);line-height:1.5} @media (max-width:760px){.dgcap{grid-template-columns:1fr;gap:22px}} /* ---------- hero mark ---------- */ .heromark{width:74px;margin:0 auto 36px;color:var(--accent)} .heromark svg{width:100%;height:auto;display:block} @media (max-width:720px){.heromark{width:58px;margin-bottom:28px}} /* Safety net: any inline SVG without a CSS rule must never expand to fill the page. This bit us once when a cached stylesheet lacked .heromark. */ svg{max-width:100%} .brand svg{width:20px;height:20px;flex:0 0 20px} .heromark svg{width:100%;height:auto} /* ---------- diagram: wide on desktop, stacked on phones ---------- The wide version has a 1000px viewBox. On a 360px screen that scales to ~0.3x, rendering 13px labels at about 4px - unreadable. So narrow screens get a vertically stacked variant instead of a shrunken one. */ .diagram .dg-wide{display:block} .diagram .dg-tall{display:none} @media (max-width:760px){ .diagram .dg-wide{display:none} .diagram .dg-tall{display:block} /* touch targets: 44px minimum */ .opt{padding:13px 24px;min-height:44px} .btn{min-height:46px} .row>summary{min-height:52px} .nav nav a{min-height:44px;display:flex;align-items:center} } /* Footer column labels: navigation, not document headings. Using

keeps the heading order clean (h1 > h2 > h3) - the h2->h4 jump was a real fault. */ .fgrid .fh{font-size:.85rem;color:var(--ink);margin:0 0 13px;font-weight:600} /* ---------- portrait slot (drop-in, currently unused) ---------- */ .withphoto{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start} .photo{border-radius:18px;overflow:hidden;background:var(--gray);aspect-ratio:4/5} .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo figcaption{padding:14px 2px;font-size:.88rem;color:var(--faint);line-height:1.4} @media (max-width:940px){.withphoto{grid-template-columns:1fr;gap:30px}.photo{max-width:280px}}