:root{
  --bg:#f6f7fb;
  --text:#0b1220;
  --card-bg: #ffffff;
  --muted:#596275;
  --accent: #0066cc;
  --matrix-fill: #6197A7;
  --logo-bg: #eef3ff;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d10;
    --text:#e6eef8;
    --card-bg:#0f1216;
    --muted:#9aa9bd;
    --accent:#4da3ff;
    --logo-bg:#081426;
    --matrix-fill: #6197A7;
  }
}

html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  display:flex; align-items:center; justify-content:center; padding:2rem;
}

.wrap{display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; align-items:center;}

.card{
  display:flex; flex-direction:column; align-items:center; text-decoration:none; width:360px; max-width:90vw;
  background:var(--card-bg); color:inherit; padding:1.5rem; border-radius:12px; box-shadow:0 6px 20px rgba(2,6,23,0.08);
  transition:transform .18s ease, box-shadow .18s ease; text-align:center;
}
.card:focus, .card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(2,6,23,0.12); }

.logo{
  width:100%; height:150px; display:flex; align-items:center; justify-content:center; border-radius:8px; margin-bottom:1rem; overflow:hidden;
}
.logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }

.logo svg { width:100%; height:100%; display:block; }

/* Color the matrix SVG internal parts via its class */
.matrix-svg .colorPrimaryText { fill: var(--matrix-fill); transition: fill .12s linear; }

.title{font-size:1.05rem; font-weight:700; margin-bottom:0.25rem;}
.subtitle{color:var(--muted); font-size:0.95rem}

@media (max-width:760px){
  .wrap{flex-direction:column}
  .card{width:92vw}
}