:root{--bg:#0f1012;--panel:#17191c;--ink:#f4f2ee;--soft:#a3a8ae;--yel:#f2c230}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#23262b 0,#0f1012 65%) fixed;color:var(--ink);
  font-family:"Avenir Next",Avenir,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
header{display:flex;justify-content:center;padding:clamp(56px,12vh,120px) 20px 40px}
.hero-logo{width:min(640px,90vw);height:auto}
main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:0 20px}
.apps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.apps a{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:18px;background:var(--panel);transition:background .2s}
.apps a:hover{background:#1f2226}
.apps img{border-radius:14px;flex:none}
.apps strong{display:block;font-size:17px;font-weight:600}
.apps span span{display:block;color:var(--soft);font-size:15px}
footer{text-align:center;color:var(--soft);font-size:15px;padding:56px 20px 36px}
footer a:hover{color:var(--ink)}
.fine{color:#6f747a;font-size:13px;margin-top:6px}
@media (prefers-reduced-motion:no-preference){
  .hero-logo .m-white{animation:slide .7s cubic-bezier(.2,.8,.2,1) both}
  .hero-logo .m-low,.hero-logo .m-high{animation:fade .35s ease-out .75s both}
  .hero-logo .m-bank{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s ease-in-out .35s forwards}
  .hero-logo .m-name{animation:fade .6s ease-out .55s both}
  .hero-logo .m-deg{transform-box:fill-box;transform-origin:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) 1.15s both}
}
@keyframes slide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}