@font-face{font-family:Montserrat;src:url('assets/montserrat.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{font-family:Montserrat,Arial,sans-serif;color:#e7e1de;background:#2e2a27;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:48px 24px}
main{width:100%;max-width:780px}
.logo{display:block;width:260px;max-width:75%;height:auto;margin:0 auto 68px}
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:32px;padding:32px;background:#e7e1de;color:#2e2a27;border:1px solid #e7e1de;border-radius:3px;text-decoration:none;font-size:17px;font-weight:500;line-height:1.5;transition:background .18s,border-color .18s,transform .18s}
.icon{width:32px;height:32px;color:#986421}
.arrow{position:absolute;right:28px;top:28px;color:#8b8683;font-size:23px;font-weight:400}
.card:hover{background:#f2eeeb;border-color:#986421;transform:translateY(-3px)}
.card:hover .arrow{color:#986421}
.card:focus-visible{outline:3px solid #c49962;outline-offset:6px}
@media(max-width:600px){body{padding:40px 24px}.logo{width:225px;margin-bottom:44px}.systems{grid-template-columns:1fr;gap:16px}.card{padding:26px;gap:25px;font-size:16px}.arrow{right:25px;top:24px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}