:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --line: #dfe6ef;
  --blue: #2468e8;
  --shadow: 0 16px 42px rgba(26, 47, 85, 0.1);
}

* { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(rgba(36, 104, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 104, 232, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 12% 2%, rgba(36, 104, 232, 0.11), transparent 29rem),
    var(--bg);
  background-size: 44px 44px, 44px 44px, auto, auto;
}

.logo-hub {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 28px;
}

.logo-link {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  text-decoration: none;
  transition: transform 0.24s ease, filter 0.24s ease;
}

.logo-link:hover {
  transform: translateY(-4px) scale(1.025);
  filter: drop-shadow(0 16px 22px rgba(26, 47, 85, 0.16));
}

.logo-link:focus-visible {
  outline: 4px solid rgba(36, 104, 232, 0.2);
  outline-offset: 5px;
}

.lego-link img { width: 78px; height: 78px; }
.playstation-link img { width: 72px; height: 72px; filter: drop-shadow(0 8px 14px rgba(20, 54, 116, 0.14)); }
.funko-link img { width: 92px; height: auto; filter: drop-shadow(0 8px 14px rgba(17, 24, 39, 0.12)); }

@media (max-width: 480px) {
  .logo-hub { gap: 18px; padding: 20px; }
  .logo-link { width: 116px; height: 116px; }
  .lego-link img { width: 70px; height: 70px; }
  .playstation-link img { width: 64px; height: 64px; }
  .funko-link img { width: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-link { transition: none; }
}