:root{--bg:#fff;--surface:#f9f9f9;--text:#222;--muted:#555;--card:#f3f3f3;--ring:#3a7afe33;--radius:18px;--shadow:0 4px 16px rgba(0,0,0,.1);}
*{box-sizing:border-box;} html,body{height:100%;}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);}
.page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,2vw,32px);gap:28px;}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-top:12px;}
.hero__toplogo{display:block;width:clamp(220px,32vw,380px);max-width:100%;height:auto;object-fit:contain;}
.hero__subtitle{margin:6px 0 0;color:var(--muted);font-size:clamp(14px,2vw,16px);text-align:center;}
.grid{width:min(1100px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:8px;}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}
.card{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;background:var(--card);
border:1px solid #ddd;border-radius:var(--radius);padding:18px 16px;transition:transform .18s ease,box-shadow .18s ease;box-shadow:var(--shadow);}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.15);}
.card__logo{width:100%;height:120px;object-fit:contain;background:#fff;border-radius:calc(var(--radius) - 6px);border:1px dashed #ccc;padding:10px;}
.card__name{text-align:center;font-size:15px;color:var(--muted);}
.footer{margin:8px 0 16px;color:var(--muted);text-align:center;}