:root{color-scheme:light;--bg:#f5f7fa;--ink:#1a1a2e;--muted:#707683}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,sans-serif;display:grid;place-items:center;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,#fff 0%,transparent 65%)}
main{position:relative;text-align:center;padding:100px 24px 120px;animation:arrive .9s ease both}
h1{font-size:clamp(44px,7vw,76px);font-weight:300;letter-spacing:-3px;margin:0;line-height:1.2}
.domain{color:#828794}
.logos{margin-top:66px;display:flex;gap:24px;justify-content:center}
.brand{--accent:0,151,213;--mx:50%;--my:50%;width:164px;height:164px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);border:1px solid transparent;border-radius:25px;isolation:isolate}
.hpe{--accent:1,169,130}.openstack{--accent:218,26,50}
.logo-wrap{height:82px;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.logo-wrap img{max-width:112px;max-height:70px;object-fit:contain;filter:grayscale(1) opacity(.5);transition:filter .35s}
.brand:focus-visible{outline:2px solid rgb(var(--accent));outline-offset:5px}
.brand:hover img,.brand:focus-visible img{filter:none}
.brand:hover .logo-wrap,.brand:focus-visible .logo-wrap{transform:scale(1.18)}
footer{position:absolute;bottom:27px;display:flex;align-items:center;gap:7px;color:#8c919c;font-size:10px;letter-spacing:.6px}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.logos{gap:5px}.brand{width:100px;height:132px;border-radius:19px}.logo-wrap img{max-width:78px;max-height:57px}h1{letter-spacing:-2px}}
@media(max-height:500px){main{padding-top:45px;padding-bottom:70px}footer{position:relative;bottom:18px}.logos{margin-top:35px}}
@media(hover:none){.brand img{filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;transform:none!important}}

footer a{color:inherit;text-decoration:none;text-underline-offset:4px;transition:color .2s}
footer a:hover,footer a:focus-visible{color:var(--ink);text-decoration:underline}