:root {
  --mokum-black: #1d1d1b;
  --mokum-red: #d71920;
  --mokum-white: #ffffff;
  --rca-red: #ed1c24;
  --rca-black: #1d1d1b;
  --aac-blue: #243d7b;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(215,25,32,.24), transparent 38%),
    linear-gradient(155deg, #111111 0%, var(--mokum-black) 62%, #0d0d0d 100%);
  color: var(--mokum-white);
}
.page { min-height: 100vh; display: flex; flex-direction: column; }
.hero { text-align: center; padding: 42px 20px 24px; }
.mokum-logo {
  width: min(245px, 58vw);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}
h1 { margin: 24px 0 8px; font-size: clamp(34px, 6vw, 62px); letter-spacing: .01em; }
.hero p { margin: 0; font-size: clamp(18px, 2.5vw, 24px); opacity: .9; }

.club-grid {
  width: min(1120px, calc(100% - 32px));
  margin: 22px auto 50px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.club-card {
  min-height: 435px;
  border-radius: 28px;
  padding: 34px;
  text-decoration: none;
  color: var(--mokum-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
  border: 2px solid rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.club-card:hover,
.club-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 55px rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.48);
}
.rca { background: linear-gradient(145deg, var(--rca-black) 0 68%, var(--rca-red) 68% 100%); }
.aac { background: linear-gradient(145deg, #2b4a92 0%, var(--aac-blue) 100%); }

.club-logo-wrap {
  height: 132px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.rca-logo-wrap img {
  width: min(390px, 92%);
  max-height: 126px;
  object-fit: contain;
  border-radius: 10px;
}
.aac-logo-wrap {
  background: #fff;
  border-radius: 18px;
  width: min(255px, 82%);
  padding: 14px 18px;
}
.aac-logo-wrap img { max-width: 100%; max-height: 105px; object-fit: contain; }
.club-logo-fallback { display: none; color: var(--aac-blue); font-size: 58px; font-weight: 900; letter-spacing: 3px; }

h2 { font-size: clamp(27px, 3.3vw, 38px); margin: 10px 0 16px; }
.club-card p { font-size: clamp(18px, 2.3vw, 23px); line-height: 1.35; max-width: 430px; margin: 0 0 28px; }
.cta {
  display: inline-block;
  padding: 14px 22px;
  background: var(--mokum-white);
  color: #171717;
  border-radius: 999px;
  font-weight: 700;
}
footer { margin-top: auto; text-align: center; padding: 18px; font-size: 14px; opacity: .72; }

@media (max-width: 760px) {
  .hero { padding-top: 28px; }
  .mokum-logo { width: min(205px, 58vw); }
  .club-grid { grid-template-columns: 1fr; }
  .club-card { min-height: 350px; padding: 28px 22px; }
  .club-logo-wrap { height: 108px; }
  .rca-logo-wrap img { max-height: 102px; }
}