:root {
  color: #24333a;
  background: #f7f4ec;
  font-family: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 12% 0%, #fffdf8 0, transparent 38%), #f7f4ec;
}

.hub {
  width: min(100% - 40px, 960px);
  margin: 0 auto;
  padding: clamp(48px, 10vw, 112px) 0 64px;
}

.hub-header { display: flex; align-items: center; gap: 20px; }
.brand-mark {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  color: #fffdf8; background: #d5764b; font: 700 42px/1 Arial, sans-serif;
  box-shadow: 0 12px 30px #d5764b33;
}
.kicker, .card-kicker { margin: 0 0 8px; color: #b15b3a; font: 700 12px/1.2 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 620px; margin-bottom: 0; font-size: clamp(36px, 6vw, 68px); line-height: .98; letter-spacing: -.045em; }
.intro { margin: 28px 0 44px 84px; color: #667177; font: 18px/1.5 Arial, sans-serif; }
.training-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.training-card {
  position: relative; display: flex; min-height: 360px; flex-direction: column; padding: 34px;
  border: 1px solid #283b4117; border-radius: 28px; color: inherit; text-decoration: none;
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.training-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px #263b4220; }
.training-card::after { position: absolute; right: -24px; bottom: -62px; color: #ffffff52; font: 220px/1 Georgia, serif; }
.multiplication { background: #e7b36d; }
.counting { background: #c5d7c2; }
.multiplication::after { content: '×'; }
.counting::after { content: '+'; }
.card-symbol { position: relative; z-index: 1; margin-bottom: 42px; color: #fffdf8; font: 700 54px/1 Arial, sans-serif; }
.card-kicker, .training-card h2, .training-card p, .card-action { position: relative; z-index: 1; }
.training-card h2 { margin-bottom: 14px; font-size: clamp(34px, 5vw, 52px); line-height: 1; }
.training-card p { max-width: 300px; margin-bottom: auto; color: #314047cc; font: 16px/1.45 Arial, sans-serif; }
.card-action { margin-top: 28px; font: 700 15px/1.2 Arial, sans-serif; }

@media (max-width: 680px) {
  .hub { width: min(100% - 28px, 480px); padding-top: 48px; }
  .hub-header { align-items: flex-start; }
  .brand-mark { width: 52px; height: 52px; border-radius: 16px; font-size: 34px; }
  h1 { font-size: 38px; }
  .intro { margin: 24px 0 30px; }
  .training-grid { grid-template-columns: 1fr; }
  .training-card { min-height: 300px; padding: 28px; }
}