:root{--ink:#3e454f;--muted:#7a808a;--line:#e6e8eb;--bg:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background-color:var(--bg);color:var(--ink);font:400 16px/1.6 Roboto,system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center}
.logo{line-height:0}.logo img{width:clamp(150px,30vw,240px);height:auto}
.name{margin-top:28px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.what{margin-top:28px;max-width:440px;color:var(--ink)}
.partners{margin-top:48px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;font-size:13px;color:var(--muted)}
.partners a{text-decoration:none;transition:opacity .2s}
.partners img{height:30px;width:auto;display:block;opacity:.55;filter:grayscale(1)}
.partners a:hover img{opacity:.9}
.partners img.atrio{height:24px}
.partners img.tnf{height:18px}
.partners img.carbona{height:40px;margin:-5px 0}
footer{border-top:1px solid var(--line);padding:24px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;text-align:center}
footer a{text-decoration:none}footer a:hover{color:var(--ink);text-decoration:underline}
.doc{flex:1;max-width:720px;margin:0 auto;padding:56px 24px 72px}
.doc .back{font-weight:900;font-size:28px;text-decoration:none;letter-spacing:-.02em}
.doc h1{font-size:28px;font-weight:700;margin:40px 0 4px}
.doc .updated{color:var(--muted);font-size:14px;margin-bottom:32px}
.doc h2{font-size:18px;font-weight:700;margin:32px 0 8px}
.doc p,.doc li{margin-bottom:10px}
.doc ul{padding-left:22px}
@media (prefers-reduced-motion:no-preference){
main>*,footer{animation:fade .9s cubic-bezier(.2,.7,.2,1) both}
main>:nth-child(2){animation-delay:.12s}main>:nth-child(3){animation-delay:.24s}main>:nth-child(4){animation-delay:.38s}footer{animation-delay:.5s}
.doc{animation:fade .6s ease-out both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
@media (max-width:600px){.partners{gap:20px 28px}.partners span{flex-basis:100%}}

/* perspective grid: a floor receding to the horizon */
.floor{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:260px;perspective-origin:50% 50%}
.floor::before{content:"";position:absolute;left:-400%;right:-400%;bottom:0;height:3000px;transform-origin:50% 100%;transform:rotateX(84deg);
background-image:linear-gradient(rgba(62,69,79,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(62,69,79,.09) 1px,transparent 1px);
background-size:48px 48px;background-position:center bottom;
-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 40%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 40%,transparent 85%)}
main,footer,.doc{position:relative}
@media (prefers-reduced-motion:no-preference){.floor{animation:floor 2s ease-out both}@keyframes floor{from{opacity:0}to{opacity:1}}}